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,6 +135,8 @@ footer {
           font-size: 0.756em; }
   footer .block-block-edlp-entrees {
     display: inline-block; }
+    footer .block-block-edlp-entrees ul {
+      white-space: nowrap; }
       footer .block-block-edlp-entrees ul li {
         display: inline-block;
         position: relative;

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{
+  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;
-  width: 100%;
+      &:after, &:before{
-  height:100%;
+        content: '';
-  font-family: Georgia, serif;
+        position: absolute;
-  font-style: normal;
+        top:50%;
-  margin:0;
+        height:0;
-  padding:0;
+      }
-}
+      &:before{
-
+        left:$col_w;
-div.layout-container{
+        border-bottom:0.08em solid #000;
-  position: relative;
+        width:2.5em;
-  width:100%; height:100%;
+        transform: rotateZ(-45deg);
-  padding:1em;
+      }
-  box-sizing: border-box;
+      &:after{
-  z-index: 1;
+        $w:0.5em;
-}
+        top:47%;
-
+        left:($col_w+$col_gap/2);
-header[role="banner"]{
+        border-top:0.2em solid red;
-  outline: 1px solid blue;
+        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 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 %}
-    <div class="site-name">
+        <a class="site-name" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-      <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
+    {% endif %}
-    </div>
+    </h1>
   {% endif %}
   {% if site_slogan %}
-    <div class="site-slogan">{{ site_slogan }}</div>
+    <h2 class="site-slogan">{{ site_slogan }}</h2>
   {% endif %}
 {% endblock %}