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

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -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 {
+    footer .block-block-edlp-entrees ul {
-      display: inline-block;
+      white-space: nowrap; }
-      position: relative;
+      footer .block-block-edlp-entrees ul li {
-      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;
-        vertical-align: bottom;
         position: relative;
-        width: 1.5em; }
+        list-style: none;
-      footer .block-block-edlp-entrees ul li a.term-link {
+        margin: 0 1.5em 0 0;
-        pointer-events: all;
+        padding: 0;
-        background-color: #fff;
+        margin: 0;
-        padding-right: 0.4em; }
+        white-space: nowrap;
-        footer .block-block-edlp-entrees ul li a.term-link:before {
+        pointer-events: none; }
-          content: "";
+        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;
+          vertical-align: bottom;
-          height: 7px;
+          position: relative;
-          border: 1px solid #000;
+          width: 1.5em; }
-          margin-right: 0.5em; }
+        footer .block-block-edlp-entrees ul li a.term-link {
-      footer .block-block-edlp-entrees ul li .entree-content {
+          pointer-events: all;
-        display: inline-block;
+          background-color: #fff;
-        width: 0;
+          padding-right: 0.4em; }
-        overflow: hidden;
+          footer .block-block-edlp-entrees ul li a.term-link:before {
-        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;
+            width: 7px;
-            height: 5px;
+            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;
+          width: 0;
-          text-align: left;
+          overflow: hidden;
-          width: 250px;
+          opacity: 0;
-          word-wrap: break-word;
+          -webkit-transition: all 300ms ease-in-out;
-          -webkit-hyphens: auto;
+          transition: all 300ms ease-in-out;
-          -ms-hyphens: auto;
+          -webkit-transition-property: width,opacity;
-          hyphens: auto;
+          transition-property: width,opacity; }
-          white-space: normal;
+          footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper:first-of-type {
-          background-color: rgba(255, 255, 255, 0.9);
+            margin-left: 0.5em; }
-          padding: 0.5em;
+          footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a {
-          padding-bottom: 0; }
+            text-transform: none;
-          footer .block-block-edlp-entrees ul li .entree-content .term-description p {
+            pointer-events: auto; }
-            font-size: 0.65em;
+            footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:before {
-            margin: 0; }
+              content: "";
-      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 {
+              display: inline-block;
-        border-color: #2b8f2f;
+              width: 5px;
-        background-color: #2b8f2f; }
+              height: 5px;
-      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: 1px solid #000;
-        border-color: #3a33b6;
+              margin-right: 0.5em; }
-        background-color: #3a33b6; }
+          footer .block-block-edlp-entrees ul li .entree-content .term-description {
-      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 {
+            display: inline-block;
-        border-color: #2c9f57;
+            margin-left: 1.5em;
-        background-color: #2c9f57; }
+            text-align: left;
-      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 {
+            width: 250px;
-        border-color: #c48978;
+            word-wrap: break-word;
-        background-color: #c48978; }
+            -webkit-hyphens: auto;
-      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 {
+            -ms-hyphens: auto;
-        border-color: #5270bb;
+            hyphens: auto;
-        background-color: #5270bb; }
+            white-space: normal;
-      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 {
+            background-color: rgba(255, 255, 255, 0.9);
-        border-color: #fb54d3;
+            padding: 0.5em;
-        background-color: #fb54d3; }
+            padding-bottom: 0; }
-      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 {
+            footer .block-block-edlp-entrees ul li .entree-content .term-description p {
-        border-color: #e07483;
+              font-size: 0.65em;
-        background-color: #e07483; }
+              margin: 0; }
-      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 {
+        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: #655845;
+          border-color: #2b8f2f;
-        background-color: #655845; }
+          background-color: #2b8f2f; }
-      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 {
+        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: #7e0868;
+          border-color: #3a33b6;
-        background-color: #7e0868; }
+          background-color: #3a33b6; }
-      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 {
+        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: #0e7121;
+          border-color: #2c9f57;
-        background-color: #0e7121; }
+          background-color: #2c9f57; }
-      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 {
+        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: #dabd42;
+          border-color: #c48978;
-        background-color: #dabd42; }
+          background-color: #c48978; }
-      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 {
+        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: #0399bb;
+          border-color: #5270bb;
-        background-color: #0399bb; }
+          background-color: #5270bb; }
-      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 {
+        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: #399a1c;
+          border-color: #fb54d3;
-        background-color: #399a1c; }
+          background-color: #fb54d3; }
-      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 {
+        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: #708540;
+          border-color: #e07483;
-        background-color: #708540; }
+          background-color: #e07483; }
-      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 {
+        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: #191bff;
+          border-color: #655845;
-        background-color: #191bff; }
+          background-color: #655845; }
-      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 {
+        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: #279d84;
+          border-color: #7e0868;
-        background-color: #279d84; }
+          background-color: #7e0868; }
-      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 {
+        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: #5219ab;
+          border-color: #0e7121;
-        background-color: #5219ab; }
+          background-color: #0e7121; }
-      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 {
+        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: #d49cb6;
+          border-color: #dabd42;
-        background-color: #d49cb6; }
+          background-color: #dabd42; }
-      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 {
+        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: #497715;
+          border-color: #0399bb;
-        background-color: #497715; }
+          background-color: #0399bb; }
-      footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:not(:hover):before {
+        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 {
-        background-color: #fff !important; }
+          border-color: #399a1c;
-      footer .block-block-edlp-entrees ul li:not(.opened) a.term-link:not(:hover):not(.highlighted):before {
+          background-color: #399a1c; }
-        background-color: #fff !important; }
+        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 {
-      footer .block-block-edlp-entrees ul li.opened a.term-link:after {
+          border-color: #708540;
-        content: '';
+          background-color: #708540; }
-        position: absolute;
+        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 {
-        left: 15px;
+          border-color: #191bff;
-        right: 0;
+          background-color: #191bff; }
-        bottom: -3px;
+        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-bottom: 1px solid grey; }
+          border-color: #279d84;
-      footer .block-block-edlp-entrees ul li.opened .entree-content {
+          background-color: #279d84; }
-        width: 350px;
+        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 {
-        opacity: 1; }
+          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

@@ -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';
 
-
+// header
-body, html{
+#block-edlptheme-branding{
-  position: relative;
+  h1{
-  width: 100%;
+    margin:0; display: inline-block;
-  height:100%;
+    font-size: 1.5em;
-  font-family: Georgia, serif;
+    text-transform: lowercase;
-  font-style: normal;
+    a{
-  margin:0;
+      $col_w:3.74em;
-  padding:0;
+      $col_gap:2em;
-}
+      line-height: 0.93;
-
+      text-align: center;
-div.layout-container{
+      color: inherit;
-  position: relative;
+      text-decoration: none;
-  width:100%; height:100%;
+      display: inline-block;
-  padding:1em;
+      columns:$col_w 2;
-  box-sizing: border-box;
+      column-gap: $col_gap;
-  z-index: 1;
+      word-break:break-all;
-}
+      hyphens:auto;
-
+      position: relative;
-header[role="banner"]{
+      &:after, &:before{
-  outline: 1px solid blue;
+        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"]{
+// Footer
-  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;
-}
-
 @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

@@ -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/_layout.scss

@@ -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/gulpfile.js

@@ -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

@@ -14,17 +14,19 @@
  */
 #}
 {% block content %}
-  {% if site_logo %}
+  {% if site_logo or site_name %}
-    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-logo">
+    <h1>
-      <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
+    {% if site_logo %}
-    </a>
+      <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-logo">
-  {% endif %}
+        <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
-  {% if site_name %}
+      </a>
-    <div class="site-name">
+    {% endif %}
-      <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
+    {% if site_name %}
-    </div>
+        <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 %}