made edlp logo in pure css using columns and :after :before
This commit is contained in:
Bachir Soussi Chiadmi
+180
-147
@@ -7,11 +7,6 @@ a, a:focus, a:active {
|
||||
a:focus {
|
||||
-moz-outline-style: none; }
|
||||
|
||||
.btn--hollow {
|
||||
background: red;
|
||||
display: inline-block;
|
||||
padding: 10px; }
|
||||
|
||||
body, html {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@@ -30,11 +25,7 @@ div.layout-container {
|
||||
box-sizing: border-box;
|
||||
z-index: 1; }
|
||||
|
||||
header[role="banner"] {
|
||||
outline: 1px solid blue; }
|
||||
|
||||
main[role="main"] {
|
||||
outline: 1px solid green;
|
||||
background-color: rgba(255, 255, 255, 0.9); }
|
||||
|
||||
footer[role="contentinfo"] {
|
||||
@@ -42,11 +33,51 @@ footer[role="contentinfo"] {
|
||||
bottom: 0;
|
||||
width: 100%; }
|
||||
|
||||
#block-edlptheme-branding h1 {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
font-size: 1.5em;
|
||||
text-transform: lowercase; }
|
||||
#block-edlptheme-branding h1 a {
|
||||
line-height: 0.93;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
-webkit-columns: 3.74em 2;
|
||||
columns: 3.74em 2;
|
||||
-webkit-column-gap: 2em;
|
||||
column-gap: 2em;
|
||||
word-break: break-all;
|
||||
-webkit-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
position: relative; }
|
||||
#block-edlptheme-branding h1 a:after, #block-edlptheme-branding h1 a:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
height: 0; }
|
||||
#block-edlptheme-branding h1 a:before {
|
||||
left: 3.74em;
|
||||
border-bottom: 0.08em solid #000;
|
||||
width: 2.5em;
|
||||
-webkit-transform: rotateZ(-45deg);
|
||||
transform: rotateZ(-45deg); }
|
||||
#block-edlptheme-branding h1 a:after {
|
||||
top: 47%;
|
||||
left: 4.74em;
|
||||
border-top: 0.2em solid red;
|
||||
width: 0.5em;
|
||||
-webkit-transform: rotateZ(45deg);
|
||||
transform: rotateZ(45deg); }
|
||||
|
||||
footer {
|
||||
display: table;
|
||||
padding: 0 0 0.5em 0; }
|
||||
footer > .region {
|
||||
display: table-cell; }
|
||||
display: table-cell;
|
||||
white-space: nowrap; }
|
||||
footer .region-footer-left {
|
||||
text-align: left; }
|
||||
footer .region-footer-center {
|
||||
@@ -104,151 +135,153 @@ footer {
|
||||
font-size: 0.756em; }
|
||||
footer .block-block-edlp-entrees {
|
||||
display: inline-block; }
|
||||
footer .block-block-edlp-entrees ul li {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 0 1.5em 0 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
pointer-events: none; }
|
||||
footer .block-block-edlp-entrees ul li a {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
-webkit-transform-origin: left bottom;
|
||||
transform-origin: left bottom;
|
||||
-webkit-transform: rotateZ(-45deg);
|
||||
transform: rotateZ(-45deg);
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.756em;
|
||||
white-space: nowrap; }
|
||||
footer .block-block-edlp-entrees ul li span.oblique-wrapper {
|
||||
footer .block-block-edlp-entrees ul {
|
||||
white-space: nowrap; }
|
||||
footer .block-block-edlp-entrees ul li {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
width: 1.5em; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link {
|
||||
pointer-events: all;
|
||||
background-color: #fff;
|
||||
padding-right: 0.4em; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link:before {
|
||||
content: "";
|
||||
list-style: none;
|
||||
margin: 0 1.5em 0 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
pointer-events: none; }
|
||||
footer .block-block-edlp-entrees ul li a {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
-webkit-transform-origin: left bottom;
|
||||
transform-origin: left bottom;
|
||||
-webkit-transform: rotateZ(-45deg);
|
||||
transform: rotateZ(-45deg);
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.756em;
|
||||
white-space: nowrap; }
|
||||
footer .block-block-edlp-entrees ul li span.oblique-wrapper {
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border: 1px solid #000;
|
||||
margin-right: 0.5em; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 300ms ease-in-out;
|
||||
transition: all 300ms ease-in-out;
|
||||
-webkit-transition-property: width,opacity;
|
||||
transition-property: width,opacity; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper:first-of-type {
|
||||
margin-left: 0.5em; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a {
|
||||
text-transform: none;
|
||||
pointer-events: auto; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:before {
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
width: 1.5em; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link {
|
||||
pointer-events: all;
|
||||
background-color: #fff;
|
||||
padding-right: 0.4em; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border: 1px solid #000;
|
||||
margin-right: 0.5em; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content .term-description {
|
||||
footer .block-block-edlp-entrees ul li .entree-content {
|
||||
display: inline-block;
|
||||
margin-left: 1.5em;
|
||||
text-align: left;
|
||||
width: 250px;
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
white-space: normal;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
padding: 0.5em;
|
||||
padding-bottom: 0; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content .term-description p {
|
||||
font-size: 0.65em;
|
||||
margin: 0; }
|
||||
footer .block-block-edlp-entrees ul li[tid='134'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='134'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #2b8f2f;
|
||||
background-color: #2b8f2f; }
|
||||
footer .block-block-edlp-entrees ul li[tid='121'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='121'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #3a33b6;
|
||||
background-color: #3a33b6; }
|
||||
footer .block-block-edlp-entrees ul li[tid='125'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='125'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #2c9f57;
|
||||
background-color: #2c9f57; }
|
||||
footer .block-block-edlp-entrees ul li[tid='119'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='119'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #c48978;
|
||||
background-color: #c48978; }
|
||||
footer .block-block-edlp-entrees ul li[tid='132'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='132'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #5270bb;
|
||||
background-color: #5270bb; }
|
||||
footer .block-block-edlp-entrees ul li[tid='122'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='122'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #fb54d3;
|
||||
background-color: #fb54d3; }
|
||||
footer .block-block-edlp-entrees ul li[tid='129'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='129'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #e07483;
|
||||
background-color: #e07483; }
|
||||
footer .block-block-edlp-entrees ul li[tid='120'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='120'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #655845;
|
||||
background-color: #655845; }
|
||||
footer .block-block-edlp-entrees ul li[tid='130'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='130'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #7e0868;
|
||||
background-color: #7e0868; }
|
||||
footer .block-block-edlp-entrees ul li[tid='118'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='118'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #0e7121;
|
||||
background-color: #0e7121; }
|
||||
footer .block-block-edlp-entrees ul li[tid='127'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='127'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #dabd42;
|
||||
background-color: #dabd42; }
|
||||
footer .block-block-edlp-entrees ul li[tid='133'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='133'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #0399bb;
|
||||
background-color: #0399bb; }
|
||||
footer .block-block-edlp-entrees ul li[tid='128'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='128'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #399a1c;
|
||||
background-color: #399a1c; }
|
||||
footer .block-block-edlp-entrees ul li[tid='124'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='124'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #708540;
|
||||
background-color: #708540; }
|
||||
footer .block-block-edlp-entrees ul li[tid='116'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='116'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #191bff;
|
||||
background-color: #191bff; }
|
||||
footer .block-block-edlp-entrees ul li[tid='117'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='117'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #279d84;
|
||||
background-color: #279d84; }
|
||||
footer .block-block-edlp-entrees ul li[tid='131'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='131'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #5219ab;
|
||||
background-color: #5219ab; }
|
||||
footer .block-block-edlp-entrees ul li[tid='126'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='126'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #d49cb6;
|
||||
background-color: #d49cb6; }
|
||||
footer .block-block-edlp-entrees ul li[tid='123'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='123'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #497715;
|
||||
background-color: #497715; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:not(:hover):before {
|
||||
background-color: #fff !important; }
|
||||
footer .block-block-edlp-entrees ul li:not(.opened) a.term-link:not(:hover):not(.highlighted):before {
|
||||
background-color: #fff !important; }
|
||||
footer .block-block-edlp-entrees ul li.opened a.term-link:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
right: 0;
|
||||
bottom: -3px;
|
||||
border-bottom: 1px solid grey; }
|
||||
footer .block-block-edlp-entrees ul li.opened .entree-content {
|
||||
width: 350px;
|
||||
opacity: 1; }
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 300ms ease-in-out;
|
||||
transition: all 300ms ease-in-out;
|
||||
-webkit-transition-property: width,opacity;
|
||||
transition-property: width,opacity; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper:first-of-type {
|
||||
margin-left: 0.5em; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a {
|
||||
text-transform: none;
|
||||
pointer-events: auto; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border: 1px solid #000;
|
||||
margin-right: 0.5em; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content .term-description {
|
||||
display: inline-block;
|
||||
margin-left: 1.5em;
|
||||
text-align: left;
|
||||
width: 250px;
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
white-space: normal;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
padding: 0.5em;
|
||||
padding-bottom: 0; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content .term-description p {
|
||||
font-size: 0.65em;
|
||||
margin: 0; }
|
||||
footer .block-block-edlp-entrees ul li[tid='134'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='134'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #2b8f2f;
|
||||
background-color: #2b8f2f; }
|
||||
footer .block-block-edlp-entrees ul li[tid='121'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='121'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #3a33b6;
|
||||
background-color: #3a33b6; }
|
||||
footer .block-block-edlp-entrees ul li[tid='125'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='125'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #2c9f57;
|
||||
background-color: #2c9f57; }
|
||||
footer .block-block-edlp-entrees ul li[tid='119'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='119'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #c48978;
|
||||
background-color: #c48978; }
|
||||
footer .block-block-edlp-entrees ul li[tid='132'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='132'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #5270bb;
|
||||
background-color: #5270bb; }
|
||||
footer .block-block-edlp-entrees ul li[tid='122'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='122'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #fb54d3;
|
||||
background-color: #fb54d3; }
|
||||
footer .block-block-edlp-entrees ul li[tid='129'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='129'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #e07483;
|
||||
background-color: #e07483; }
|
||||
footer .block-block-edlp-entrees ul li[tid='120'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='120'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #655845;
|
||||
background-color: #655845; }
|
||||
footer .block-block-edlp-entrees ul li[tid='130'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='130'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #7e0868;
|
||||
background-color: #7e0868; }
|
||||
footer .block-block-edlp-entrees ul li[tid='118'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='118'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #0e7121;
|
||||
background-color: #0e7121; }
|
||||
footer .block-block-edlp-entrees ul li[tid='127'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='127'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #dabd42;
|
||||
background-color: #dabd42; }
|
||||
footer .block-block-edlp-entrees ul li[tid='133'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='133'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #0399bb;
|
||||
background-color: #0399bb; }
|
||||
footer .block-block-edlp-entrees ul li[tid='128'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='128'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #399a1c;
|
||||
background-color: #399a1c; }
|
||||
footer .block-block-edlp-entrees ul li[tid='124'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='124'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #708540;
|
||||
background-color: #708540; }
|
||||
footer .block-block-edlp-entrees ul li[tid='116'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='116'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #191bff;
|
||||
background-color: #191bff; }
|
||||
footer .block-block-edlp-entrees ul li[tid='117'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='117'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #279d84;
|
||||
background-color: #279d84; }
|
||||
footer .block-block-edlp-entrees ul li[tid='131'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='131'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #5219ab;
|
||||
background-color: #5219ab; }
|
||||
footer .block-block-edlp-entrees ul li[tid='126'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='126'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #d49cb6;
|
||||
background-color: #d49cb6; }
|
||||
footer .block-block-edlp-entrees ul li[tid='123'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='123'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #497715;
|
||||
background-color: #497715; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:not(:hover):before {
|
||||
background-color: #fff !important; }
|
||||
footer .block-block-edlp-entrees ul li:not(.opened) a.term-link:not(:hover):not(.highlighted):before {
|
||||
background-color: #fff !important; }
|
||||
footer .block-block-edlp-entrees ul li.opened a.term-link:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
right: 0;
|
||||
bottom: -3px;
|
||||
border-bottom: 1px solid grey; }
|
||||
footer .block-block-edlp-entrees ul li.opened .entree-content {
|
||||
width: 350px;
|
||||
opacity: 1; }
|
||||
footer #block-userlogin {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
|
||||
Reference in New Issue
Block a user