WIP: responsive header

Make the header more responsive using flexbox and use less `position:
absolute`.

Signed-off-by: Toon Claes <[email protected]>

Author: To1ne

assets/js/application.js

@@ -567,7 +567,7 @@ var DarkMode = {
         || (!prefersDarkScheme && currentTheme === "dark")) {
       button.attr("src", `${baseURLPrefix}images/light-mode.svg`);
     }
-    button.show();
+    button.css("display", "block");
 
     button.click(function(e) {
       e.preventDefault();

assets/sass/application.scss

@@ -54,13 +54,12 @@ pre {
 
 #dark-mode-button {
     display: none;
-    z-index: 10;
-    position: absolute;
-    top: 6px;
-    right: -50px;
-    width: 35px;
+    width: 28px;
+    padding: calc((#{$search-container-height} - 28px) / 2);
     background-color: transparent;
     text-decoration: none;
+    align-self: flex-start;
+    margin-right: 5px;
 }
 
 @media (max-width: $default + 100) {

assets/sass/forms.scss

@@ -32,10 +32,11 @@ input, textarea {
 
 form#search {
   position: absolute;
-  top: 10px;
+  top: 7px;
   right: 0;
+  left: 15px;
   z-index: 1000;
-  width: 262px;
+  width: calc(100% - 32px - 32px);
   padding-left: 32px;
   @include background-image-2x($baseurl + "images/icons/search", 17px, 17px, 10px 50%);
   background-color: var(--main-bg) !important;
@@ -63,17 +64,12 @@ form#search {
 // Breakpoint ----------------
 @media (max-width: $default) {
   form#search{
-    @include center-transformX;
-    margin-top: 7px;
-    top: unset;
-    width: 92%;
   }
 }
 
 // Mobile
 @media (max-width: $mobile-m) {
   form#search{
-    width: 84%;
     #search-text {
       padding: 0.3rem 0.1rem;
     }

assets/sass/layout.scss

@@ -110,16 +110,25 @@ aside {
 
 // Header
 header {
-  position: relative;
   padding-bottom: 26px;
   margin-top: 14px;
 
+  display: flex;
+  flex-direction: row;
+
+  div {
+    display: flex;
+    flex-direction: row;
+
+    &:first-child {
+      flex-grow: 4;
+    }
+  }
+
   #tagline {
-    position: absolute;
-    top: 11px;
-    left: 120px;
     display: block;
-    margin-top: 1px;
+    margin-top: 6px;
+    margin-left: 8px;
     font-size: 24px;
     line-height: 24px;
     color: var(--light-font-color);
@@ -439,13 +448,11 @@ table.benchmarks {
   .responsive-table { overflow-x: auto; }
   .center img { height: 100%; }
   header{
-      padding-bottom: 2.5rem;
     a, span {
       padding-left: 1rem;
       margin-bottom: 10px ;
     }
   }
-  #home { .inner { > header { padding-bottom: 2rem; } } }
   #content { width: 100%; }
   .inner { width: 100%; }
   #content-wrapper { padding: 0.8rem; }
@@ -485,6 +492,7 @@ table.benchmarks {
       top: 0;
       padding-right: 1rem;
     }
+    flex-direction: column;
   }
   #home { .inner { > header { padding-bottom: 2.5rem; } } }
   #masthead {

assets/sass/search.scss

@@ -1,9 +1,15 @@
 @import "variables";
 @import "mixins";
 
+#search-container {
+  position: relative;
+  height: $search-container-height;
+  width: 300px;
+}
+
 #search-results {
   position: absolute;
-  top: 2px;
+  top: -4px;
   right: -8px;
   z-index: 900;
   display: none;
@@ -132,13 +138,15 @@ ol.full-search-results {
 // Breakpoint ---
 @media (max-width: $default) {
   #search-results{
-    @include center-transformX;
-    top: unset;
-    width: 98%;
+    width: 100%;
   }
 }
 // Mobile
 @media (max-width: $mobile-m) {
+  #search-container {
+    width: inherit;
+    margin-left: 15px;
+  }
   #search-results{
     margin-top: 4px;
   }

assets/sass/variables.scss

@@ -12,4 +12,5 @@ $base-font-size:   14px;
 $base-line-height: 22px;
 
 $fixed-width-font-family: Courier, monospace;
-$fixed-width-line-height: 18px;
+$fixed-width-line-height: 18px;
+$search-container-height: 44px;

layouts/partials/header.html

@@ -1,25 +1,29 @@
 <header>
+  <div id="brand">
+    <a 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 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>
-
-  <img src="{{ relURL "images/dark-mode.svg" }}" id="dark-mode-button" />
-  {{ if ne (.Scratch.Get "section") "search" }}
-  <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>
-  {{ end }}
-
+  <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" />
+  </div>
 </header>