bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

made edlp logo in pure css using columns and :after :before

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-01-04 18:09:29 +01:00
parent b0bbd54d57
commit a77706f3aa
8 changed files with 278 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+180 -147
View File
@@ -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;
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+45 -42
View File
@@ -7,53 +7,54 @@
// @License: GPL-V3
@import 'base/reset';
@import 'base/vars';
@import 'base/grid';
@import 'base/colors';
@import 'base/buttons';
@import 'base/layout';
body, html{
position: relative;
width: 100%;
height:100%;
font-family: Georgia, serif;
font-style: normal;
margin:0;
padding:0;
}
div.layout-container{
position: relative;
width:100%; height:100%;
padding:1em;
box-sizing: border-box;
z-index: 1;
}
header[role="banner"]{
outline: 1px solid blue;
// header
#block-edlptheme-branding{
h1{
margin:0; display: inline-block;
font-size: 1.5em;
text-transform: lowercase;
a{
$col_w:3.74em;
$col_gap:2em;
line-height: 0.93;
text-align: center;
color: inherit;
text-decoration: none;
display: inline-block;
columns:$col_w 2;
column-gap: $col_gap;
word-break:break-all;
hyphens:auto;
position: relative;
&:after, &:before{
content: '';
position: absolute;
top:50%;
height:0;
}
&:before{
left:$col_w;
border-bottom:0.08em solid #000;
width:2.5em;
transform: rotateZ(-45deg);
}
&:after{
$w:0.5em;
top:47%;
left:($col_w+$col_gap/2);
border-top:0.2em solid red;
width:$w;
transform: rotateZ(45deg);
}
}
}
}
main[role="main"]{
outline:1px solid green;
background-color: $transparent-bg;
// display: none;
}
footer[role="contentinfo"]{
// outline: 1px solid pink;
position: fixed;
bottom:0;
width:100%;
}
canvas#edlp-map{
// outline: 1px solid grey;
}
// Footer
@mixin oblique-list {
display: inline-block;
position: relative;
@@ -80,6 +81,7 @@ footer{
padding: 0 0 0.5em 0;
>.region{
display: table-cell;
white-space: nowrap;
// outline: 1px dotted purple;
// position: relative;
}
@@ -139,6 +141,7 @@ footer{
display: inline-block;
// vertical-align: top;
ul{
white-space: nowrap;
li{
@include oblique-list;
margin:0;
sites/all/themes/custom/edlptheme/assets/styles/base/_buttons.scss
-25
View File
@@ -1,25 +0,0 @@
// Buttons
//
// Buttons
//
// Markup:
// <a href="" class="btn {{modifier_class}}">Button</a>
//
// .btn--hollow - Hollow button
// .btn--hollow-white - Hollow button
// .btn--blue - Blue button
// .btn--block - Block button
// .btn--small - Small button
// .btn--plain - Plain button
//
// Styleguide Common.Buttons
.btn {
&--hollow {
background: red;
display: inline-block;
padding: 10px;
}
}
sites/all/themes/custom/edlptheme/assets/styles/base/_grid.scss
View File
sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss
+40
View File
@@ -0,0 +1,40 @@
body, html{
position: relative;
width: 100%;
height:100%;
font-family: Georgia, serif;
font-style: normal;
margin:0;
padding:0;
}
div.layout-container{
position: relative;
width:100%; height:100%;
padding:1em;
box-sizing: border-box;
z-index: 1;
}
header[role="banner"]{
// outline: 1px solid blue;
}
main[role="main"]{
// outline:1px solid green;
background-color: $transparent-bg;
// display: none;
}
footer[role="contentinfo"]{
// outline: 1px solid pink;
position: fixed;
bottom:0;
width:100%;
}
canvas#edlp-map{
// outline: 1px solid grey;
}
sites/all/themes/custom/edlptheme/assets/styles/base/_vars.scss
View File
sites/all/themes/custom/edlptheme/gulpfile.js
+1 -1
View File
@@ -55,6 +55,6 @@ gulp.task('bower', function() {
// default gulp task
gulp.task('default', ['bower', 'scripts', 'styles'], function() {
gulp.watch('./assets/styles/*.scss', ['styles']);
gulp.watch('./assets/styles/*/*.scss', ['styles']);
gulp.watch('./assets/styles/base/*.scss', ['styles']);
gulp.watch('./assets/scripts/*.js', ['scripts']);
});
sites/all/themes/custom/edlptheme/templates/block/block--system-branding-block.html.twig
+12 -10
View File
@@ -14,17 +14,19 @@
*/
#}
{% block content %}
{% if site_logo %}
<a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-logo">
<img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
</a>
{% endif %}
{% if site_name %}
<div class="site-name">
<a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
</div>
{% if site_logo or site_name %}
<h1>
{% if site_logo %}
<a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-logo">
<img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
</a>
{% endif %}
{% if site_name %}
<a class="site-name" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
{% endif %}
</h1>
{% endif %}
{% if site_slogan %}
<div class="site-slogan">{{ site_slogan }}</div>
<h2 class="site-slogan">{{ site_slogan }}</h2>
{% endif %}
{% endblock %}