From a145be0b6797012194fdffe70227d93be74d2818 Mon Sep 17 00:00:00 2001
From: ut <ulf.treger@googlemail.com>
Date: Fri, 8 Feb 2019 21:47:28 +0100
Subject: [PATCH] refactor media queries (mobile first). improve
 smallscreen/desktop stylez

---
 header.php                               |   2 +-
 src/assets/scss/modules/_navigation.scss |   9 +-
 src/assets/scss/templates/freifunk.scss  | 105 ++++++++++++++---------
 3 files changed, 73 insertions(+), 43 deletions(-)

diff --git a/header.php b/header.php
index c8c8549..a2d46ba 100644
--- a/header.php
+++ b/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">
diff --git a/src/assets/scss/modules/_navigation.scss b/src/assets/scss/modules/_navigation.scss
index 96651f7..68eb213 100644
--- a/src/assets/scss/modules/_navigation.scss
+++ b/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
diff --git a/src/assets/scss/templates/freifunk.scss b/src/assets/scss/templates/freifunk.scss
index 88edf21..acffccc 100644
--- a/src/assets/scss/templates/freifunk.scss
+++ b/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;
+    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 (min-width: 39.9375em) {
-        margin-top: 30px;
+      @media screen and #{$large-up} {
+        margin-top: 40px;
+      }
+      @media screen and #{$verylarge-up} {
+        margin-top: 0;
       }
      .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;
+  margin-top: 20px;
+  margin-left: 30px;
 
-  @media screen and (max-width: 39.9375em) {
-    margin-top: 20px;
+  @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) {
-      font-size: 1.55rem;
-      margin-left: -8px;
+    line-height: 1.2;
+    margin-left: 0;
+    text-indent: -42px;
+    font-size: 1.55rem;
+    @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;
+    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;
-
+    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) {
-      font-size: 15px;
+    @media screen and #{$large-up} {
+
     }
     a {
       color: #644;
@@ -291,13 +316,13 @@ header.site-header {
         display: inline-block;
         color: #ffb400;
         line-height: 0;
-        transform: scale(0.6);
+        transform: scale(0.5);
         vertical-align: -10px;
-        width: 38px;
-        @media screen and (max-width: 39.9375em) {
-          transform: scale(0.5);
+        width: 42px;
+        @media screen and #{$large-up} {
+          transform: scale(0.6);
           vertical-align: -10px;
-          width: 42px;
+          width: 38px;
         }
       }
     }