refactor media queries (mobile first). improve smallscreen/desktop stylez

header.php

@@ -25,7 +25,7 @@
 
 
 	<header class="site-header" role="banner">
-		<div class="site-title-bar title-bar" <?php foundationpress_title_bar_responsive_toggle(); ?>>
+		<div class="site-title-bar title-bar" data-responsive-toggle="mobile-menu" data-hide-for="large">
 			<div class="title-bar-left">
 				<button aria-label="<?php _e( 'Main Menu', 'foundationpress' ); ?>" class="menu-icon" type="button" data-toggle="<?php foundationpress_mobile_menu_id(); ?>"></button>
 				<span class="site-mobile-title title-bar-title">

src/assets/scss/modules/_navigation.scss

@@ -1,12 +1,17 @@
 // Navigation breakpoints
 .mobile-menu,
 .site-title-bar {
-  @include hide-for(medium);
+  /*  @include hide-for(medium); */
+  /* display: none !important; */
+  @include hide-for(large);
 }
 
 .desktop-menu,
 .site-navigation .top-bar-left {
-  @include show-for(medium);
+  /* @include show-for(medium); */
+  /*  display: block !important; */
+  @include show-for(large);
+
 }
 
 // Site title

src/assets/scss/templates/freifunk.scss

@@ -1,8 +1,17 @@
-/* hamburg-freifunk-wp-theme (2018) */
+/* hamburg-freifunk-wp-theme (2019) */
 
 $freifunk-color-magenta: rgb(220,0,103);
 $freifunk-color-yellow:  rgb(255,180,0);
 $freifunk-color-blue: rgb(0,158,224);
+$dark-color:  #2C3840;
+
+$verylarge-up: "(min-width: 74.063em)";
+$large-only: "(max-width: 74.063em) and (min-width: 64.063em)";
+$large-up: "(min-width: 64.063em)";
+$medium-only: "(max-width: 64.063em) and (min-width: 43em)";
+$medium-up: "(min-width: 43em)";
+$small-only: "(max-width: 43em)";
+
 
 body {
     font-family: hk_groteskmedium, "Helvetica Neue", sans-serif;
@@ -22,12 +31,13 @@ h6 {
 p, li, blockquote {
     margin-bottom: 1rem;
     font-size: inherit;
-    line-height: 1.6;
     text-rendering: optimizeLegibility;
-    font-size: 17px;
-    @media screen and (max-width: 39.9375em) {
-      line-height: 1.5;
     font-size: 18px;
+    line-height: 1.5;
+    word-break: break-word;
+    @media screen and #{$large-up} {
+      font-size: 17px;
+      line-height: 1.6;
     }
 }
 
@@ -52,10 +62,11 @@ header.site-header {
 .title-bar-title {
     padding-left: 5px;
     position: relative;
+    vertical-align: sub;
 }
 
 .top-bar-outer {
-  background-color: #2C3840;
+  background-color: $dark-color;
   nav.top-bar {
 
     max-width: 90rem;
@@ -120,14 +131,21 @@ header.site-header {
       }
     }
     .top-bar-right {
-      background-color: #2C3840;
+      background-color: $dark-color;
+      margin-top: 0;
+      @media screen and #{$large-up} {
+        margin-top: 40px;
+      }
+      @media screen and #{$verylarge-up} {
         margin-top: 0;
-      @media screen and (min-width: 39.9375em) {
-        margin-top: 30px;
       }
      .menu  {
         margin-right: 1rem;
-        margin-top: 100px;
+        margin-top: 110px;
+        margin-bottom: 10px;
+        @media screen and #{$large-up} {
+            margin-top: 0;
+        }
 
         li, li:not(:last-child), li:not(.menu-text) {
           border-right: 0px solid #4e4e4e;
@@ -184,10 +202,11 @@ header.site-header {
 
 .main-container {
 
-  margin-top: 235px;
-
-  @media screen and (max-width: 39.9375em) {
   margin-top: 20px;
+  margin-left: 30px;
+
+  @media screen and #{$large-up}  {
+    margin: 235px auto 0;
   }
   .entry-content {
     margin-bottom: 50px;
@@ -206,11 +225,16 @@ header.site-header {
     }
   }
   h1.entry-title, h2.entry-title {
-    margin-left: -16px;
+    color: #dc0067;
     color: $freifunk-color-magenta;
-    @media screen and (max-width: 39.9375em) {
+    line-height: 1.2;
+    margin-left: 0;
+    text-indent: -42px;
     font-size: 1.55rem;
-      margin-left: -8px;
+    @media screen and #{$large-up} {
+      margin-left: 33px;
+      text-indent: -49px;
+      font-size: 2.5rem;
     }
   }
   h1.entry-title::before,
@@ -219,13 +243,17 @@ header.site-header {
     display: inline-block;
     color: #ffb400;
     line-height: 0;
-    transform: scale(0.82);
-    vertical-align: -5px;
-    width: 48px;
-    @media screen and (max-width: 39.9375em) {
     transform: scale(0.55);
     vertical-align: -10px;
     width: 42px;
+    padding-right: 0px;
+    text-align: right;
+    @media screen and #{$large-up} {
+      transform: scale(0.82);
+      vertical-align: -5px;
+      width: 50px;
+      padding-right: 10px;
+
     }
 
 
@@ -234,23 +262,20 @@ header.site-header {
 
 
   article p {
-    margin-left: 32px;
-    margin-right: 65px;
-
-    @media screen and (max-width: 39.9375em) {
     margin-left: 0;
     margin-right: 0;
-
+    @media screen and #{$large-up} {
+      margin-left: 32px;
+      margin-right: 65px;
     }
-
   }
   p.edit-link,
   p.byline.author {
     color: #644;
     font-size: 15px;
 
-    @media screen and (max-width: 39.9375em) {
+    @media screen and #{$large-up} {
-      font-size: 15px;
+
     }
     a {
       color: #644;
@@ -291,13 +316,13 @@ header.site-header {
         display: inline-block;
         color: #ffb400;
         line-height: 0;
-        transform: scale(0.6);
-        vertical-align: -10px;
-        width: 38px;
-        @media screen and (max-width: 39.9375em) {
         transform: scale(0.5);
         vertical-align: -10px;
         width: 42px;
+        @media screen and #{$large-up} {
+          transform: scale(0.6);
+          vertical-align: -10px;
+          width: 38px;
         }
       }
     }