css: make the header responsive

To1ne · dscho · commit ba7858279e30 · 2025-03-20T13:10:49.000+01:00
The icon to toggle between dark and light mode was added recently and
this made laying out the elements in the header hard.

A lot of items in the header have been using `position: absolute`. This
was probably caused by the absolute positioning of the search result
dropdown.

Transition most elements in the header to use flexbox to make
positioning more fluid and require less manual pixel pushing.

Signed-off-by: Toon Claes &lt;toon@iotcl.com&gt;
diff --git a/assets/js/application.js b/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();
diff --git a/assets/sass/application.scss b/assets/sass/application.scss
@@ -54,13 +54,11 @@ pre {
 
 #dark-mode-button {
     display: none;
-    z-index: 10;
-    position: absolute;
-    top: 6px;
-    right: -50px;
-    width: 35px;
+    width: 28px;
     background-color: transparent;
     text-decoration: none;
+    align-self: center;
+    margin: 5px;
 }
 
 @media (max-width: $default + 100) {
diff --git a/assets/sass/forms.scss b/assets/sass/forms.scss
@@ -31,12 +31,10 @@ input, textarea {
 }
 
 form#search {
-  position: absolute;
-  top: 10px;
-  right: 0;
   z-index: 1000;
-  width: 262px;
+  width: 100%;
   padding-left: 32px;
+  margin: 9px;
   @include background-image-2x($baseurl + "images/icons/search", 17px, 17px, 10px 50%);
   background-color: var(--main-bg) !important;
   border: solid 1px var(--search-border);
@@ -63,17 +61,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;
     }
diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
@@ -110,16 +110,28 @@ aside {
 
 // Header
 header {
-  position: relative;
   padding-bottom: 26px;
   margin-top: 14px;
 
+  display: flex;
+  flex-direction: row;
+
+  div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    &:first-child {
+      flex-grow: 4;
+    }
+  }
+  #logo {
+    display: flex;
+  }
+
   #tagline {
-    position: absolute;
-    top: 11px;
-    left: 120px;
     display: block;
-    margin-top: 1px;
+    margin-left: 8px;
     font-size: 24px;
     line-height: 24px;
     color: var(--light-font-color);
@@ -439,13 +451,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 +495,7 @@ table.benchmarks {
       top: 0;
       padding-right: 1rem;
     }
+    flex-direction: column;
   }
   #home { .inner { > header { padding-bottom: 2.5rem; } } }
   #masthead {
diff --git a/assets/sass/search.scss b/assets/sass/search.scss
@@ -1,20 +1,32 @@
 @import "variables";
 @import "mixins";
 
+#search-container {
+  position: relative;
+  width: 300px;
+  padding-left: 60px;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
 #search-results {
   position: absolute;
-  top: 2px;
-  right: -8px;
+  left: 0;
   z-index: 900;
   display: none;
-  width: 384px;
   background: #398a94 url($baseurl + "images/bg/search-header.jpg") 0 1px repeat-x;
   @include border-radius(3px);
   @include box-shadow(0 0 7px rgba(0, 0, 0, 0.25));
   border-bottom: solid 1px var(--base-border-color);
 
+  width: calc(100% - 1px);
+  height: 100%;
+
   header {
-    height: 44px;
+    width: 100%;
+    height: 100%;
     padding: 0;
     margin: 0;
     text-indent: -9999px;
@@ -36,7 +48,7 @@
 
     td.category {
       width: 67px;
-      padding: 10px 12px 0 0;
+      padding-top: 10px;
       font-size: 11px;
       color: var(--blue);
       text-align: right;
@@ -130,14 +142,19 @@ ol.full-search-results {
 
 // Breakpoint ---
 @media (max-width: $default) {
+  #search-container {
+    padding-left: 0;
+  }
   #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;
   }
diff --git a/assets/sass/variables.scss b/assets/sass/variables.scss
@@ -12,4 +12,4 @@ $base-font-size:   14px;
 $base-line-height: 22px;
 
 $fixed-width-font-family: Courier, monospace;
-$fixed-width-line-height: 18px;
+$fixed-width-line-height: 18px;
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,25 +1,29 @@
 <header>
+  <div id="brand">
+    <a id="logo" href="{{ relURL "" }}"><img src="{{ relURL "images/logo@2x.png" }}" 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/logo@2x.png" }}" 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>

Original file line number	Diff line number	Diff line change
`@@ -567,7 +567,7 @@ var DarkMode = {`
`567`	`567`	`\|\| (!prefersDarkScheme && currentTheme === "dark")) {`
`568`	`568`	button.attr("src", `${baseURLPrefix}images/light-mode.svg`);
`569`	`569`	`}`
`570`		`- button.show();`
	`570`	`+ button.css("display", "block");`
`571`	`571`
`572`	`572`	`button.click(function(e) {`
`573`	`573`	`e.preventDefault();`