Merge pull request #5 from jrmann100/responsive-wrap

fix: better mobile header layout
jrmann100 · Dec 31, 2023 · 9aee238 · 9aee238
2 parents ce42556 + ac0fdf0
commit 9aee238
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 29 deletions.
diff --git a/fragments/index.html.inc b/fragments/index.html.inc
@@ -26,7 +26,7 @@
     margin-right: 0.5em;
   }
 
-  @media (min-aspect-ratio: 30001/40000) {
+  @media (min-width: 35rem) {
     main {
       column-count: 2;
       column-gap: 5rem;
@@ -55,7 +55,7 @@
     font-size: 0.8em;
   }
 
-  @media (max-aspect-ratio: 30000/40000) {
+  @media (max-width: 35.001rem) {
     figure.profile-figure img {
       margin: 1rem auto;
       width: 200px;

diff --git a/static/css/layout/header/header.css b/static/css/layout/header/header.css
@@ -1,7 +1,7 @@
 @layer standard, face, nav, mobile;
 @import './face.css' layer(face);
 @import './nav.css' layer(nav);
-@import './mobile.css' layer(mobile) (max-aspect-ratio: 3/5);
+@import './mobile.css' layer(mobile) (max-width: 35rem);
 
 @layer standard {
   header {

diff --git a/static/css/layout/header/mobile.css b/static/css/layout/header/mobile.css
@@ -1,18 +1,17 @@
-header > .logo {
-  display: none;
+header {
+  margin-top: 0;
 }
 
-header h1 {
-  /* flex: 0; */
+header > .logo {
+  display: none;
 }
 
-header > nav {
-  justify-content: space-between;
-  padding: 0 1em;
-  flex-wrap: nowrap;
+header nav {
+  flex-direction: column-reverse;
 }
 
 header nav > ul {
-  justify-content: start;
-  flex: 0;
+  flex-basis: 100%;
+  justify-content: space-evenly;
+  position: static;
 }
diff --git a/static/css/layout/header/nav.css b/static/css/layout/header/nav.css
@@ -1,20 +1,20 @@
 header nav {
   display: flex;
-  flex-flow: wrap;
   justify-content: space-between;
   align-items: center;
   flex-grow: 1;
-  padding-left: 0.5em;
+  padding: 0.5em;
   column-gap: 2rem;
   border-bottom: 0.1rem solid var(--black);
 }
 
 header nav > ul {
+  --header-item-width: 5rem;
   list-style-type: none;
   padding: 0;
   margin: 0;
-  flex: 1;
-  padding: 0.3rem 0;
+  flex: 1; /* need to stretch so dropdowns are wide */
+  /* min-width: calc(calc(2 * var(--header-item-width)) + 0.5rem); */
 }
 
 header nav > ul {
@@ -25,18 +25,22 @@ header nav > ul {
   column-gap: 0.5rem;
   flex-flow: wrap;
 }
+
 @media print {
   header nav > ul {
     display: none !important;
   }
 }
 
 header nav > ul > li {
-  --header-item-width: 5rem;
-  flex: 0 0 var(--header-item-width);
-  width: var(--header-item-width);
+  flex-basis: var(--header-item-width);
   text-align: left;
-  user-select: none; /* checkme */
+  min-width: var(--header-item-width);
+}
+
+header nav ul > li > a,
+header nav ul > li > .fake-details > .fake-summary {
+  user-select: none;
 }
 
 header nav > ul > li > a {
@@ -95,27 +99,44 @@ header {
   position: relative;
 }
 
-@media (width > 40rem) {
-  /* checkme */
+header nav > ul {
+  position: relative;
+}
+
+/* position dropdowns under header rather than overlap */
+@media (max-aspect-ratio: 9/10) {
   header nav > ul {
+    position: static;
+  }
+  header nav {
     position: relative;
   }
 }
 
-header nav li > .fake-details:not(:focus-within) div.nav-dropdown {
+header nav li > .fake-details:not(:focus-within) .nav-dropdown {
   display: none;
 }
 
-header nav .fake-details div.nav-dropdown {
+header nav .fake-details .nav-dropdown {
   position: absolute;
-  left: 1rem;
-  right: 1rem;
+  right: 0;
   top: 100%;
   transform: translateY(15px);
-  /* min-height: 5rem; */
   border: var(--default-border);
-  padding: 0.5rem;
   box-shadow: 0.2rem 0.2rem rgba(0, 0, 0, 0.5);
+  margin: 0 1rem;
+  width: max-content;
+  max-width: calc(100% - 2rem);
+}
+
+@media (max-width: 35rem) {
+  header nav .fake-details .nav-dropdown {
+    left: 0;
+  }
+}
+
+header nav .fake-details .nav-dropdown {
+  padding: 0.5rem;
   display: flex;
   flex-flow: row wrap;
   gap: 0.5rem;