guides: update listing layout on landing page

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>

hugo_stats.json

@@ -3,7 +3,6 @@
     "tags": null,
     "classes": [
       "!mt-0",
-      "-",
       "--mount",
       "--tmpfs",
       "-mb-3",
@@ -15,7 +14,6 @@
       "-v",
       "-z-10",
       ".NET",
-      "64px)]",
       "Admin-Console",
       "After",
       "Angular",
@@ -78,7 +76,6 @@
       "Mac",
       "Mac-/-Linux",
       "Mac-/-Linux-/-Git-Bash",
-      "Mac-/-Linux-/-PowerShell",
       "Mac-/-Linux-/-Windows-Git-Bash",
       "Mac-/-Linux-CLI",
       "Mac-and-Linux",
@@ -172,8 +169,8 @@
       "block",
       "border",
       "border-0",
-      "border-2",
       "border-amber-light",
+      "border-b",
       "border-b-4",
       "border-blue-light",
       "border-blue-light-500",
@@ -228,13 +225,11 @@
       "dark:from-blue-dark-200",
       "dark:from-blue-dark-400",
       "dark:from-gray-dark-100",
-      "dark:group-hover:text-white",
       "dark:hidden",
       "dark:hover:bg-blue-dark",
       "dark:hover:bg-blue-dark-500",
       "dark:hover:bg-gray-dark-200",
       "dark:hover:bg-gray-dark-500",
-      "dark:hover:border-blue-dark-500",
       "dark:hover:text-blue-dark",
       "dark:hover:text-white",
       "dark:prose-invert",
@@ -271,6 +266,7 @@
       "flex-col-reverse",
       "flex-grow",
       "flex-none",
+      "flex-shrink",
       "flex-wrap",
       "focus:ring-blue-light",
       "font-medium",
@@ -296,7 +292,6 @@
       "grid-cols-1",
       "group",
       "group-hover:block'",
-      "group-hover:text-black",
       "group-hover:underline",
       "h-16",
       "h-2",
@@ -312,15 +307,15 @@
       "hidden",
       "hidden'",
       "highlight",
-      "hover:-translate-y-1",
       "hover:bg-blue-light-400",
       "hover:bg-gray-light-100",
       "hover:bg-gray-light-200",
       "hover:bg-gray-light-300",
+      "hover:bg-white",
       "hover:bg-white/20",
-      "hover:border-blue-light-400",
       "hover:border-gray-light-200",
       "hover:border-white/20",
+      "hover:dark:bg-gray-dark-200",
       "hover:dark:bg-gray-dark-300",
       "hover:dark:border-gray-dark",
       "hover:dark:text-blue-dark",
@@ -358,7 +353,6 @@
       "lg:pb-2",
       "lg:scale-100",
       "lg:text-base",
-      "line-clamp-5",
       "link",
       "lntable",
       "lntd",
@@ -374,13 +368,15 @@
       "max-w-full",
       "max-w-none",
       "max-w-xl",
+      "mb-2",
       "mb-4",
       "mb-8",
       "md:block",
+      "md:flex-nowrap",
       "md:flex-row",
       "md:grid-cols-2",
       "md:h-[334px]",
-      "md:h-[calc(100vh",
+      "md:h-[calc(100vh-64px)]",
       "md:hidden",
       "md:max-w-[66%]",
       "md:scale-100",
@@ -400,6 +396,7 @@
       "mt-1",
       "mt-2",
       "mt-20",
+      "mt-4",
       "mx-auto",
       "my-0",
       "my-2",
@@ -519,13 +516,11 @@
       "top-3",
       "top-6",
       "top-full",
-      "tracking-wider",
       "transition",
       "truncate",
       "underline",
       "underline-offset-2",
       "underline-offset-8",
-      "uppercase",
       "w-2",
       "w-8",
       "w-[1200px]",
@@ -534,8 +529,10 @@
       "w-full",
       "w-screen",
       "whitespace-nowrap",
+      "xl:flex-row",
       "xl:grid-cols-3",
       "xl:grid-cols-4",
+      "xl:mb-0",
       "xl:w-[1200px]",
       "xl:w-[400px]",
       "youtube-video",

layouts/_default/baseof.html

@@ -26,7 +26,7 @@
               }
           }
       })"
-      class="md:h-[calc(100vh - 64px)] fixed md:sticky top-0 md:top-16 z-40 hidden h-screen flex-none overflow-y-auto overflow-x-hidden bg-background-light dark:bg-gray-dark-100 w-full md:z-auto md:block md:w-[300px]"
+      class="md:h-[calc(100vh-64px)] fixed md:sticky top-0 md:top-16 z-40 hidden h-screen flex-none overflow-y-auto overflow-x-hidden bg-background-light dark:bg-gray-dark-100 w-full md:z-auto md:block md:w-[300px]"
       :class="{ 'hidden': ! $store.showSidebar }">
       <!-- Gray backdrop on small screens -->
       <div class="fixed bg-black/50 md:hidden" x-show="$store.showSidebar" @click="openSidebar = false"

layouts/guides/landing.html

@@ -65,8 +65,30 @@
     {{- partial "breadcrumbs.html" . }}
     <h1 data-pagefind-weight="10" class="scroll-mt-36">{{ .Title }}</h1>
     {{ .Content }}
+      <h2>Featured</h2>
+      <div class="not-prose py-4 grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
+        {{- $featured := where .Pages "Params.featured" true }}
+        {{- with $featured }}
+          {{- range . }}
+            <div class="flex flex-col h-full">
+              <a class="hover:underline" href="{{ .Permalink }}">
+                {{- $img := resources.Get (.Params.image | default "/images/thumbnail.webp") }}
+                {{- $img = $img.Process "resize 600x" }}
+                <img class="h-48 w-full object-cover rounded shadow" src="{{ $img.Permalink }}">
+                <p class="text-xl leading-snug my-4">{{ .Title }}</p>
+              </a>
+              <p class="flex-grow text-sm">{{ .Summary }}</p>
+              <div class="mt-4">
+                {{ template "guide-metadata" . }}
+              </div>
+            </div>
+            {{- end }}
+          {{- end }}
+        </div>
+      </ul>
+    <hr class="text-divider-light dark:text-divider-dark">
     {{- $taxonomies := slice "products" "subjects" "levels" "languages" }}
-    <div class="not-prose"
+    <div class="not-prose min-h-screen"
       x-data="{
         filters: { {{ delimit (apply $taxonomies "fmt.Printf" "%s: []," "." ) "" }} },
 
@@ -103,67 +125,38 @@
         }
       }"
       x-cloak
-      @guide-filter.window="filters = $event.detail.filters; window.scrollTo({ top: 0 });">
+      @guide-filter.window="filters = $event.detail.filters; document.getElementById('all-guides').scrollIntoView({ behavior: 'smooth' })">
-      <div x-ref="container" class="pt-4 grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+      <h2 id="all-guides" class="scroll-mt-36">All guides</h2>
-        {{- $featured := where .Pages "Params.featured" true }}
+      {{- range .Pages }}
-        {{- with $featured }}
+        {{- $opts := dict "page" . "taxonomies" $taxonomies }}
-          {{- range . }}
+        {{- $filters := partial "utils/filter-terms.html" $opts }}
-            {{- $opts := dict "page" . "taxonomies" $taxonomies }}
+        <a href="{{ .Permalink }}" x-show="showItem({{ jsonify $filters }});" x-transition
-            {{- $filters := partial "utils/filter-terms.html" $opts }}
+           class="group flex flex-col justify-between p-4 border-b
-            <div x-show="showItem({{ jsonify $filters }});" class="flex flex-col h-full">
+                  border-divider-light hover:bg-white
-              <div class="text-xs font-semibold text-gray-light dark:text-gray-dark tracking-wider uppercase">Featured</div>
+                  hover:dark:bg-gray-dark-200 dark:border-divider-dark
-              <a class="hover:underline" href="{{ .Permalink }}">
+                  drop-shadow transition">
-                {{- $img := resources.Get (.Params.image | default "/images/thumbnail.webp") }}
+          <div class="flex flex-col xl:flex-row justify-between">
-                {{- $img = $img.Process "resize 600x" }}
+            <div class="text-lg group-hover:underline mb-2 xl:mb-0 truncate">{{ .Title }}</div>
-                <img class="h-48 w-full object-cover rounded shadow" src="{{ $img.Permalink }}">
+            {{ template "guide-metadata" . }}
-                <p class="text-xl leading-snug my-4">{{ .Title }}</p>
+          </div>
-              </a>
+        </a>
-              <p class="flex-grow text-sm">{{ .Summary }}</p>
+      {{- end }}
-              <hr class="text-divider-light dark:text-divider-dark">
-              {{ template "guide-metadata" . }}
-            </div>
-            {{- end }}
-          {{- end }}
-          {{- range (collections.Complement $featured .Pages) }}
-            {{- $opts := dict "page" . "taxonomies" $taxonomies }}
-            {{- $filters := partial "utils/filter-terms.html" $opts }}
-            <a href="{{ .Permalink }}" x-show="showItem({{ jsonify $filters }});" x-transition
-               class="group flex flex-col justify-between p-4 rounded border-2
-                      border-gray-light-100 bg-white dark:bg-gray-dark-200
-                      dark:border-gray-dark-400 drop-shadow transition
-                      hover:-translate-y-1 hover:border-blue-light-400
-                      dark:hover:border-blue-dark-500">
-              <div>
-                <div class="text-lg mb-4 group-hover:underline">{{ .Title }}</div>
-                <div
-                  class="text-sm line-clamp-5 group-hover:text-black dark:group-hover:text-white text-gray-light dark:text-gray-dark">
-                  {{- .Summary }}
-                </div>
-              </div>
-              <div>
-                <hr class="text-divider-light dark:text-divider-dark">
-                {{ template "guide-metadata" . }}
-              </div>
-            </a>
-        {{- end }}
-      </div>
-      </ul>
   </article>
 </div>
 {{ end }}
 
 {{- define "guide-metadata" }}
-<div class="flex items-center text-sm justify-between text-gray-light dark:text-gray-dark">
+<div class="flex gap-8 items-center text-sm justify-between text-gray-light dark:text-gray-dark">
-  <div class="flex flex-wrap gap-2">
+  <div class="flex flex-wrap md:flex-nowrap gap-2">
     {{- $taxoterms := .GetTerms "languages" }}
     {{- $taxoterms = $taxoterms | append (.GetTerms "levels") }}
     {{- $taxoterms = $taxoterms | append (.GetTerms "subjects") }}
     {{- range $taxoterms }}
-    <span class="rounded bg-gray-light-200 dark:bg-gray-dark-300 px-2">{{- .Page.LinkTitle }}</span>
+    <span class="rounded whitespace-nowrap bg-gray-light-200 dark:bg-gray-dark-300 px-2">{{- .Page.LinkTitle }}</span>
     {{- end }}
   </div>
   {{- with .Params.time }}
-    <div class="flex whitespace-nowrap gap-2">
+    <div class="flex whitespace-nowrap flex-shrink gap-2">
       <span class="icon-svg">{{ partialCached "icon" "schedule" "schedule" }}</span>
       <span>{{ . }}</span>
     </div>