Merge pull request #21 from To1ne/toon-dark-grid-header

css: place dark-mode icon next to tagline on mobile

Author: dscho

assets/sass/application.scss

@@ -53,24 +53,11 @@ pre {
 }
 
 #dark-mode-button {
+    grid-area: dark;
     display: none;
     width: 28px;
     background-color: transparent;
     text-decoration: none;
     align-self: center;
     margin: 5px;
 }
-
-@media (max-width: $default + 100) {
-    #dark-mode-button {
-        top: 41px;
-        right: 5px;
-    }
-}
-
-@media (max-width: $default) {
-    #dark-mode-button {
-        top: 5px;
-        right: 20px;
-    }
-}

assets/sass/forms.scss

@@ -42,7 +42,7 @@ form#search {
   @include box-shadow(inset 0 1px 4px #ddd);
 
   input {
-    width: 100%;
+    width: calc(100% - 10px);
     height: 20px;
     margin-top: 4px;
     margin-bottom: 2px;

assets/sass/layout.scss

@@ -77,7 +77,6 @@ aside {
 
 #masthead {
   height: 295px;
-  margin-top: -20px;
   margin-bottom: 2em;
   @include background-image-2x($baseurl + "images/bg/isometric-grid", 35px, 21px, top right, repeat);
 
@@ -110,30 +109,22 @@ aside {
 
 // Header
 header {
-  padding-bottom: 26px;
-  margin-top: 14px;
+  padding: 1rem 0;
 
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-areas:  "logo tagline search dark";
+  grid-template-columns: auto 1fr     auto   auto;
+  align-items: center;
 
-  div {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    &:first-child {
-      flex-grow: 4;
-    }
-  }
   #logo {
+    grid-area: logo;
     display: flex;
   }
 
   #tagline {
-    display: block;
-    margin-left: 8px;
+    grid-area: tagline;
+    margin-left: 0.8em;
     font-size: clamp(0.8rem, 2vw, 1.3rem);
-    line-height: 24px;
     color: var(--light-font-color);
 
     em {
@@ -451,10 +442,7 @@ table.benchmarks {
   .responsive-table { overflow-x: auto; }
   .center img { height: 100%; }
   header{
-    a, span {
-      padding-left: 1rem;
-      margin-bottom: 10px ;
-    }
+    padding: 1rem;
   }
   #content { width: 100%; }
   .inner { width: 100%; }
@@ -464,7 +452,6 @@ table.benchmarks {
     height: unset;
     .inner {
       display: flex;
-      margin-top: 1.8rem;
       div:first-of-type {
         padding:1rem;
       }
@@ -489,13 +476,12 @@ table.benchmarks {
 // Mobile
 @media (max-width: $mobile-m) {
   header {
-    padding-bottom: 3rem;
+    grid-template-areas: "logo   tagline dark"
+                         "search search  search";
     #tagline {
       font-size: clamp(0.8rem, 3vw, 1.3rem);
     }
-    flex-direction: column;
   }
-  #home { .inner { > header { padding-bottom: 2.5rem; } } }
   #masthead {
     .inner { flex-direction: column-reverse; }
     .illustration-wrapper {

assets/sass/search.scss

@@ -2,6 +2,8 @@
 @import "mixins";
 
 #search-container {
+  grid-area: search;
+  display: flex;
   position: relative;
   width: 300px;
   padding-left: 60px;
@@ -153,10 +155,6 @@ ol.full-search-results {
 @media (max-width: $mobile-m) {
   #search-container {
     width: inherit;
-    margin-left: 15px;
-  }
-  #search-results{
-    margin-top: 4px;
   }
 }
 

layouts/partials/header.html

@@ -1,29 +1,25 @@
 <header>
-  <div id="brand">
-    <a id="logo" href="{{ relURL "" }}"><img src="{{ relURL "images/[email protected]" }}" width="110" height="46" alt="Git" class="no-filter" /></a>
-    <span id="tagline"></span>
-    <script type="text/javascript">
-     const taglines = [
-       "fast-version-control",
-       "everything-is-local",
-       "distributed-even-if-your-workflow-isnt",
-       "local-branching-on-the-cheap",
-       "distributed-is-the-new-centralized"
-     ];
-     var tagline = taglines[Math.floor(Math.random() * taglines.length)];
-     document.getElementById('tagline').innerHTML = '--' + tagline;
-    </script>
-  </div>
+  <a id="logo" href="{{ relURL "" }}"><img src="{{ relURL "images/[email protected]" }}" width="110" height="46" alt="Git" class="no-filter" /></a>
+  <span id="tagline"></span>
+  <script type="text/javascript">
+   const taglines = [
+     "fast-version-control",
+     "everything-is-local",
+     "distributed-even-if-your-workflow-isnt",
+     "local-branching-on-the-cheap",
+     "distributed-is-the-new-centralized"
+   ];
+   var tagline = taglines[Math.floor(Math.random() * taglines.length)];
+   document.getElementById('tagline').innerHTML = '--' + tagline;
+  </script>
 
-  <div>
-    {{ if ne (.Scratch.Get "section") "search" }}
-    <div id="search-container">
-      <form id="search" action="{{ relURL "search/results" }}">
-        <input id="search-text" name="search" placeholder="Type / to search entire site…" autocomplete="off" type="text" />
-      </form>
-      <div id="search-results"></div>
-    </div>
-    {{ end }}
-    <img src="{{ relURL "images/dark-mode.svg" }}" id="dark-mode-button" />
+  {{ if ne (.Scratch.Get "section") "search" }}
+  <div id="search-container">
+    <form id="search" action="{{ relURL "search/results" }}">
+      <input id="search-text" name="search" placeholder="Type / to search entire site…" autocomplete="off" type="text" />
+    </form>
+    <div id="search-results"></div>
   </div>
+  {{ end }}
+  <img src="{{ relURL "images/dark-mode.svg" }}" id="dark-mode-button" />
 </header>