chore: add hextra home layout

assets/css/compiled/main.css

@@ -2217,6 +2217,10 @@ video {
   height: 4rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -2241,8 +2245,8 @@ video {
   max-height: 16rem;
 }
 
-.max-h-\[calc\(100vh-4rem-env\(safe-area-inset-bottom\)\)\] {
-  max-height: calc(100vh - 4rem - env(safe-area-inset-bottom));
+.max-h-\[calc\(100vh-var\(--navbar-height\)-env\(safe-area-inset-bottom\)\)\] {
+  max-height: calc(100vh - var(--navbar-height) - env(safe-area-inset-bottom));
 }
 
 .max-h-\[min\(calc\(50vh-11rem-env\(safe-area-inset-bottom\)\)\2c 400px\)\] {
@@ -2253,14 +2257,14 @@ video {
   min-height: 100px;
 }
 
-.min-h-\[calc\(100vh-4rem\)\] {
-  min-height: calc(100vh - 4rem);
-}
-
 .min-h-\[calc\(100vh-var\(--navbar-height\)\)\] {
   min-height: calc(100vh - var(--navbar-height));
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
 .w-3 {
   width: 0.75rem;
 }
@@ -2451,6 +2455,10 @@ video {
   border-radius: 0.25rem;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -2549,6 +2557,11 @@ video {
   background-color: hsl(var(--primary-hue) 100% 94% / var(--tw-bg-opacity));
 }
 
+.bg-primary-400 {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--primary-hue) 100% 66% / var(--tw-bg-opacity));
+}
+
 .bg-primary-700\/5 {
   background-color: hsl(var(--primary-hue) 100% 39% / 0.05);
 }
@@ -3789,12 +3802,22 @@ body {
 }
 
 @media (min-width: 640px) {
+  .sm\:block {
+    display: block;
+  }
   .sm\:flex {
     display: flex;
   }
   .sm\:items-start {
     align-items: flex-start;
   }
+  .sm\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  .sm\:text-xl {
+    font-size: 1.25rem;
+  }
 }
 
 @media (min-width: 768px) {
@@ -3832,6 +3855,9 @@ body {
     padding-left: 3rem;
     padding-right: 3rem;
   }
+  .md\:pt-12 {
+    padding-top: 3rem;
+  }
   .md\:text-5xl {
     font-size: 3rem;
   }
@@ -3849,6 +3875,12 @@ body {
   }
 }
 
+@media (min-width: 1024px) {
+  .lg\:leading-\[1\.1\] {
+    line-height: 1.1;
+  }
+}
+
 @media (min-width: 1280px) {
   .xl\:block {
     display: block;

exampleSite/content/_index.md

@@ -1,4 +1,4 @@
 ---
 title: Hextra Theme
-toc: false
+layout: hextra-home
 ---

exampleSite/hugo_stats.json

@@ -39,6 +39,7 @@
       "path",
       "pre",
       "script",
+      "section",
       "span",
       "strong",
       "style",
@@ -85,6 +86,7 @@
       "bg-gray-100",
       "bg-orange-50",
       "bg-primary-100",
+      "bg-primary-400",
       "bg-primary-700/5",
       "bg-red-100",
       "bg-transparent",
@@ -232,6 +234,7 @@
       "grow",
       "h-0",
       "h-16",
+      "h-2",
       "h-4",
       "h-5",
       "h-7",
@@ -282,6 +285,7 @@
       "leading-5",
       "leading-7",
       "leading-tight",
+      "lg:leading-[1.1]",
       "line-clamp-3",
       "list-none",
       "lntable",
@@ -307,7 +311,7 @@
       "ltr:text-right",
       "m-[11px]",
       "max-h-64",
-      "max-h-[calc(100vh-4rem-env(safe-area-inset-bottom))]",
+      "max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))]",
       "max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)]",
       "max-md:[transform:translate3d(0,-100%,0)]",
       "max-md:hidden",
@@ -328,6 +332,7 @@
       "md:inline-block",
       "md:justify-start",
       "md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]",
+      "md:pt-12",
       "md:px-12",
       "md:self-start",
       "md:shrink-0",
@@ -339,7 +344,6 @@
       "md:w-64",
       "mermaid",
       "min-h-[100px]",
-      "min-h-[calc(100vh-4rem)]",
       "min-h-[calc(100vh-var(--navbar-height))]",
       "min-w-0",
       "min-w-[18px]",
@@ -415,6 +419,7 @@
       "ring-1",
       "ring-black/5",
       "rounded",
+      "rounded-full",
       "rounded-lg",
       "rounded-md",
       "rounded-sm",
@@ -455,8 +460,11 @@
       "shrink-0",
       "sidebar-active-item",
       "sidebar-container",
+      "sm:block",
       "sm:flex",
       "sm:items-start",
+      "sm:px-4",
+      "sm:text-xl",
       "sr-only",
       "steps",
       "sticky",
@@ -502,6 +510,7 @@
       "transition-transform",
       "underline",
       "underline-offset-2",
+      "w-2",
       "w-3.5",
       "w-4",
       "w-64",

layouts/hextra-home.html

@@ -0,0 +1,22 @@
+{{ define "main" }}
+  <div class="mx-auto flex max-w-screen-xl">
+    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
+    <div class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-start pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <section class="flex max-w-[90rem] flex-col items-start gap-2 px-6 sm:px-4 pt-8 md:pt-12 pb-8">
+        <a class="inline-flex items-center rounded-full gap-2 px-3 py-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-neutral-900 dark:border-neutral-800 " href="https://github.com/imfing/hextra">
+          <div class="w-2 h-2 rounded-full bg-primary-400"></div>
+          <span>Free, open source</span>
+          {{- partial "utils/icon" (dict "name" "arrow-circle-right" "attributes" "height=14") -}}
+        </a>
+        <h1 class="text-4xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1] mt-6">
+          Build modern website
+          <br class="sm:block hidden" />
+          with Hugo and Markdown
+        </h1>
+        <p class="mt-4 text-xl text-gray-600 sm:text-xl">
+          Beautiful, batteries-included theme for Hugo.
+        </p>
+      </section>
+    </div>
+  </div>
+{{ end }}