Mediaqueries for blog layout.

css-compiled/template.css

@@ -710,7 +710,7 @@ td {
   padding-top: 12rem; }
 .blogstyling #header {
   color: #656161; }
-  .blogstyling #header a {
+  .blogstyling #header a, .blogstyling #header .menu-btn {
     color: #656161; }
   .blogstyling #header .search-box i {
     color: #656161; }
@@ -741,12 +741,11 @@ td {
     text-transform: uppercase; }
     @media only all and (min-width: 48em) and (max-width: 59.938em) {
       .blog-header h1 {
-        font-size: 3rem; } }
+        font-size: 2rem; } }
     @media only all and (max-width: 47.938em) {
       .blog-header h1 {
-        font-size: 2.5rem;
+        font-size: 1.5rem;
-        line-height: 1.2;
+        line-height: 1.2; } }
-        margin-bottom: 2.5rem; } }
   .blog-header + .blog-content {
     padding-top: 3rem; }
 
@@ -778,6 +777,16 @@ td {
     text-transform: uppercase;
     color: #9A9898;
     font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
+    @media only all and (min-width: 48em) and (max-width: 59.938em) {
+      .list-item .list-blog-date, .list-item .list-blog-author {
+        display: block;
+        width: 100%;
+        clear: both; } }
+    @media only all and (max-width: 47.938em) {
+      .list-item .list-blog-date, .list-item .list-blog-author {
+        display: block;
+        width: 100%;
+        clear: both; } }
 
 .blog-content-item .list-blog-padding > p:nth-child(2) {
   font-size: 1.2rem; }
@@ -789,7 +798,8 @@ td {
   background-color: rgba(101, 97, 97, 0.1);
   padding: 0.7rem 1rem;
   margin-bottom: 0.2rem;
-  list-style: none; }
+  list-style: none;
+  text-align: center; }
   .tags li {
     display: inline-block;
     font-size: 1rem;
@@ -801,6 +811,16 @@ td {
         content: ","; }
     .tags li:last-child a:after {
       display: none; }
+  @media only all and (min-width: 48em) and (max-width: 59.938em) {
+    .tags {
+      display: block;
+      width: 100%;
+      clear: both; } }
+  @media only all and (max-width: 47.938em) {
+    .tags {
+      display: block;
+      width: 100%;
+      clear: both; } }
 
 .archives, .related-pages {
   margin: 0;

scss/template/_blog.scss

@@ -4,7 +4,7 @@
     }
     #header {
         color: $light-gray;
-        a {
+        a, .menu-btn {
             color: $light-gray;
         }
         .search-box {
@@ -55,12 +55,11 @@
         margin-bottom: 0;
         text-transform: uppercase;
         @include breakpoint(tablet-range) {
-            font-size: 3rem;
+            font-size: 2rem;
         }
         @include breakpoint(mobile-only) {
-            font-size: 2.5rem;
+            font-size: 1.5rem;
             line-height: 1.2;
-            margin-bottom: 2.5rem;
         }
     }
 
@@ -78,7 +77,6 @@
     &:last-child {
         border-bottom: 0;
     }
-
     .list-blog-header {
         position: relative;
         h4 {
@@ -91,7 +89,6 @@
                 }
             }
         }
-
         img {
             display: block;
             margin-top: 1rem;
@@ -109,6 +106,17 @@
         text-transform: uppercase;
         color: $core-text;
         font-family: $font-family-header;
+
+        @include breakpoint(tablet-range) {
+            display: block;
+            width: 100%;
+            clear: both;
+        }
+        @include breakpoint(mobile-only) {
+            display: block;
+            width: 100%;
+            clear: both;
+        }
     }
 }
 
@@ -128,6 +136,7 @@
     padding: 0.7rem 1rem;
     margin-bottom: 0.2rem;
     list-style: none;
+    text-align: center;
     li {
         display: inline-block;
         font-size: $core-font-size;
@@ -143,6 +152,16 @@
             a:after {display: none;} 
         }
     }
+    @include breakpoint(tablet-range) {
+        display: block;
+        width: 100%;
+        clear: both;
+    }
+    @include breakpoint(mobile-only) {
+        display: block;
+        width: 100%;
+        clear: both;
+    }
 }
 
 // Archives & Related-Pages

templates/modular.html.twig

@@ -80,7 +80,6 @@
             <li class="{{ current_module }}"><a href="#{{ _self.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>
         {% endfor %}
          </ul>
-         <span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span>
     {% else %}
         {{  parent() }}
     {% endif %}

templates/partials/base.html.twig

@@ -53,6 +53,7 @@
                     {% include 'partials/navigation.html.twig' %}
                     {% endblock %}
                     {% include 'partials/search.html.twig' %}
+                    <span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span>
                 </div>
         </header>
         {% endblock %}