hugo: improve site layout on medium screens

dvdksn · dvdksn · commit 1fb862bcf91f · 2024-04-24T18:14:02.000+02:00
- Keep the top-nav menu on medium screens
- Keep the sidebar navigation on medium screens
- Keep the right-hand toc on large screens
- Adjust breakpoints

Signed-off-by: David Karlsson &lt;35727626+dvdksn@users.noreply.github.com&gt;
diff --git a/hugo_stats.json b/hugo_stats.json
@@ -270,13 +270,14 @@
       "leading-snug",
       "left-0",
       "lg:block",
-      "lg:flex",
       "lg:grid-cols-2",
       "lg:grid-cols-3",
       "lg:grid-cols-main-lg",
       "lg:hidden",
       "lg:max-w-[300px]",
       "lg:ml-auto",
+      "lg:no-underline",
+      "lg:pb-2",
       "lg:scale-100",
       "lg:text-base",
       "lg:w-[1200px]",
@@ -294,11 +295,14 @@
       "mb-8",
       "md:block",
       "md:col-start-3",
+      "md:flex",
       "md:flex-row",
       "md:gap-8",
       "md:grid-cols-2",
       "md:grid-cols-3",
+      "md:grid-cols-main-md",
       "md:h-[334px]",
+      "md:hidden",
       "md:max-w-[66%]",
       "md:scale-100",
       "min-h-screen",
@@ -417,10 +421,7 @@
       "warning",
       "xl:grid-cols-3",
       "xl:grid-cols-4",
-      "xl:grid-cols-main",
-      "xl:hidden",
-      "xl:no-underline",
-      "xl:pb-2",
+      "xl:grid-cols-main-xl",
       "xl:w-[1200px]",
       "youtube-video",
       "z-10",
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -7,9 +7,9 @@
 
 <body class="bg-background-light text-base dark:bg-background-dark dark:text-white">
   {{ partial "header.html" . }}
-  <main class="grid grid-cols-1 xl:grid-cols-main lg:grid-cols-main-lg">
+  <main class="grid grid-cols-1 xl:grid-cols-main-xl lg:grid-cols-main-lg md:grid-cols-main-md">
     <!-- First column: visible on lg and xl -->
-    <div class="hidden lg:block bg-background-light dark:bg-gray-dark-100"
+    <div class="hidden md:block bg-background-light dark:bg-gray-dark-100 overflow-y-scroll"
          {{- $classes := "'fixed', 'z-20', 'left-0', 'top-16', 'w-full', 'flex', 'h-lvh'" }}
          x-data @togglesidebar.window="
            if ($store.showSidebar == false) {
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -8,7 +8,7 @@
     {{ with .Title }}
     <h1 class="scroll-mt-36">{{ . }}</h1>
     {{ end }}
-    <div class="block xl:hidden">
+    <div class="block lg:hidden">
       {{ partial "pagemeta.html" . }}
     </div>
     {{ .Content }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -8,7 +8,7 @@
     {{ with .Title }}
     <h1 class="scroll-mt-36">{{ . }}</h1>
     {{ end }}
-    <div class="block xl:hidden">
+    <div class="block lg:hidden">
       {{ partial "pagemeta.html" . }}
       <hr>
     </div>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -3,7 +3,7 @@
     <div class="flex h-full items-center md:gap-8 gap-2">
       {{ if not .IsHome }}
       <button x-data @click="$dispatch('togglesidebar')"
-        class="icon-svg block px-4 lg:hidden h-full" aria-label="Menu">
+        class="icon-svg block px-4 md:hidden h-full" aria-label="Menu">
         {{ partialCached "icon" "menu" "menu" }}
       </button>
       {{ end }}
diff --git a/layouts/partials/pagemeta.html b/layouts/partials/pagemeta.html
@@ -14,7 +14,7 @@
     </div>
   {{- end }}
   {{- with $toc }}
-    <div class="text-lg pb-0 xl:pb-2">{{ T "tableOfContents" }}</div>
+    <div class="text-lg pb-0 lg:pb-2">{{ T "tableOfContents" }}</div>
     <nav class="toc">
       {{ $root := (index page.Fragments.Headings 0).Headings }}
       {{- template "walkHeadingFragments" $root }}
@@ -30,7 +30,7 @@
     {{- range . }}
       {{- if and (ge .Level $min) (le .Level $max) }}
         <li>
-          <a class="link xl:no-underline" href="#{{ .ID }}">{{ .Title }}</a>
+          <a class="link lg:no-underline" href="#{{ .ID }}">{{ .Title }}</a>
         </li>
       {{- end }}
       {{- with .Headings }}
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
@@ -6,7 +6,7 @@
 {{ $firstSection := (index ($scratch.GetSortedMapValues "sections") 0).title }}
 
 {{/* Render the top-nav in sidebar for small screens */}}
-<nav class="text-sm pb-4 gap-4 flex lg:hidden flex-col justify-evenly">
+<nav class="text-sm pb-4 gap-4 flex md:hidden flex-col justify-evenly">
   <div class="text-gray-light dark:text-gray-dark">Main sections</div>
   {{ range site.Menus.main }}
   <div class="pl-2 underline-offset-8 decoration-2 hover:underline decoration-blue-light dark:decoration-blue-dark hover:opacity-75
@@ -23,7 +23,7 @@
 {{ $allSections = $allSections | append (index $e "title") }}
 {{ end }}
 <nav id="sectiontree" class="text-sm flex flex-col">
-  <div class="block py-4 lg:hidden text-gray-light dark:text-gray-dark">This section</div>
+  <div class="block py-4 md:hidden text-gray-light dark:text-gray-dark">This section</div>
   {{/* The current page is in the table of contents */}}
   <ul>
     {{/* Walk the toc.yaml nodes under the current main section */}}
diff --git a/layouts/partials/top-nav.html b/layouts/partials/top-nav.html
@@ -2,7 +2,7 @@
 {{ $firstSection := (index ($scratch.GetSortedMapValues "sections") 0).title }}
 <div>
   <nav>
-    <ul class="mt-1 box-content hidden gap-4 lg:flex">
+    <ul class="mt-1 box-content hidden gap-4 md:flex">
       {{ range site.Menus.main }}
       <li {{- if or (eq $firstSection .Name) }} class="border-b-4" {{- end }}>
         <a class="block px-2 py-1" href="{{ .URL }}">{{ .Name }}</a>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -46,8 +46,9 @@ module.exports = {
       }),
 
       gridTemplateColumns: {
-        'main': 'minmax(300px, 1fr) minmax(840px, 1fr) 1fr',
-        'main-lg': '300px 1fr',
+        'main-xl': 'minmax(300px, 1fr) minmax(100ch, 1fr) 1fr',
+        'main-lg': '300px minmax(75ch, 2fr) 1fr',
+        'main-md': '250px 1fr',
       },
     },
 
