Align the "logo" at the top.

This is visible on smaller screens (more specifically, when the links on the right of the nav bar start wrapping and go to multiple lines, the logo now stays at the top, instead of being vertically centered on the nav bar).
hypered · Jul 23, 2024 · 374db41 · 374db41
1 parent ff85980
commit 374db41
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 15 deletions.
diff --git a/content/layout/page.slab b/content/layout/page.slab
@@ -9,13 +9,14 @@ frag page
     body.u-container-vertical
       header
         .u-container
-          .u-bar
+          .u-bar.u-bar--top-aligned
             .u-bar__left
               style.
                 .a-logo { color: black; text-decoration: none; }
-              a.a-logo(href="/")
-                div
-                  span.logo Slab
+              .menu-item-height
+                a.a-logo(href="/")
+                  div
+                    span.logo Slab
             .u-bar__right
               ul
                 li

diff --git a/static/css/struct.css b/static/css/struct.css
@@ -209,6 +209,10 @@ body {
   padding-block-start: var(--grid-gutter);
 }
 
+.u-container-bottom {
+  padding-block-end: var(--grid-gutter);
+}
+
 .inset {
   padding: var(--grid-gutter);
 }
@@ -227,12 +231,40 @@ body {
   justify-content: space-between;
   align-items: center;
 }
+.u-bar--top-aligned {
+  align-items: start;
+}
 
 .u-bar__right ul li {
   display: inline;
   margin-left: var(--space-s);
 }
 
+.hsep {
+  display: flex;
+  gap: 1em;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.vsep {
+  display: flex;
+  gap: 1em;
+  flex-direction: column;
+}
+
+.hspread {
+  display: flex;
+  gap: 1em;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
 .switcher {
   display: flex;
   flex-wrap: wrap;
@@ -267,17 +299,10 @@ body {
   flex-grow: 1;
 }
 
-/* Used to display layouting primitives. This adds some padding so that the
-   borders of other (displayed) layout primitives and placeholders don't touch
-   each others.
- */
-.wrapper {
-  padding: calc(var(--grid-gutter) / 3);
-  outline: 2px dashed purple;
-}
-
-.wrapper + .wrapper {
-  margin-top: calc(var(--grid-gutter) / 3);
+.height-64px {
+  height: 64px;
+  display: flex;
+  align-items: center;
 }
 
 .bordered {
@@ -820,6 +845,21 @@ img.adapt {
   cursor: pointer;
 }
 
+/* This matches the height of .menu-item (when used with a .menu-link or
+   .menu-dropdown) and center its content vertically.
+   This is meant to be used in .u-bar with the .u-bar--top-aligned modifier.
+   For instance when used on a logo, this ensures the logo is on the same line
+   as the menu items, but remains on the top of the bar, instead of being
+   vertically-centered when the menu items are spread on multiple line (on
+   a narrow screen).
+   See the examples at specimens/layout-bar.slab.
+ */
+.menu-item-height {
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+
 /* Add a small down arrow to the dropdown button. */
 .menu-dropdown:before {
   pointer-events: none;
@@ -1249,6 +1289,10 @@ input.no-style {
   padding-block-start: var(--grid-gutter);
 }
 
+.u-container-bottom {
+  padding-block-end: var(--grid-gutter);
+}
+
 .inset {
   padding: var(--grid-gutter);
 }
@@ -1267,12 +1311,40 @@ input.no-style {
   justify-content: space-between;
   align-items: center;
 }
+.u-bar--top-aligned {
+  align-items: start;
+}
 
 .u-bar__right ul li {
   display: inline;
   margin-left: var(--space-s);
 }
 
+.hsep {
+  display: flex;
+  gap: 1em;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.vsep {
+  display: flex;
+  gap: 1em;
+  flex-direction: column;
+}
+
+.hspread {
+  display: flex;
+  gap: 1em;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
 .switcher {
   display: flex;
   flex-wrap: wrap;
@@ -1307,4 +1379,10 @@ input.no-style {
   flex-grow: 1;
 }
 
+.height-64px {
+  height: 64px;
+  display: flex;
+  align-items: center;
+}
+
 /* Optional */