docs: update docs and footnote styles

assets/css/compiled/main.css

@@ -320,6 +320,10 @@
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
+  .content .footnotes {
+  margin-top: 3rem;
+  font-size: .875rem;
+}
 
 .subheading-anchor {
   opacity: 0;

assets/css/typography.css

@@ -83,6 +83,9 @@
       @apply text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center;
     }
   }
+  .footnotes {
+    @apply mt-12 text-sm;
+  }
 }
 
 .subheading-anchor {

exampleSite/content/docs/_index.md

@@ -3,30 +3,30 @@ linkTitle: "Documentation"
 title: Introduction
 ---
 
-Welcome to the Hextra documentation!
+👋 Hello! Welcome to the Hextra documentation!
 
 ## What is Hextra?
 
-**Hextra** is a modern, responsive and powerful [Hugo](https://gohugo.io/) theme built with [Tailwind CSS](https://tailwindcss.com/). It is inspired by Next.js theme [Nextra](https://github.com/shuding/nextra).
+**Hextra** is a modern, fast and batteries-included [Hugo][hugo] theme built with [Tailwind CSS][tailwind-css].
-
+Designed for building beautiful websites for documentation, blogs and websites, it provides out-of-the-box features and flexibility to meet various requirements.
-It is designed for building beautiful websites for documentation, blogs, books and landing pages.
-It is easy to use out of the box, and batteries are included to make your site versatile and powerful.
 
 ## Features
 
-- **Beautiful Design** - Based on Nextra, it uses Tailwind CSS to provide a modern design that makes your site look outstanding.
+- **Beautiful Design** - Inspired by Nextra, it uses Tailwind CSS to provide a modern design that makes your site look outstanding.
-- **Responsive Layout and Dark Mode** - It looks great on all devices, from mobile, tablet to desktop. It also supports dark mode.
+- **Responsive Layout and Dark Mode** - It looks great on all devices, from mobile, tablet to desktop. Dark mode is also supported to accomodate various lighting conditions.
-- **Lightweight and Fast** - Hextra is solely dependent on Hugo, one of the world's fastest static site generator that comes with just a single binary file.
+- **Fast and Lightweight** - Powered by Hugo, a lightning-fast static-site generator within a single binary file, Hextra keeps its footprint minimal. No Javascript or Node are needed to use it.
-- **Full-text Search** - Hextra offers built-in offline full-text search powered by [FlexSearch](https://github.com/nextapps-de/flexsearch).
+- **Full-text Search** - Built-in offline full-text search powered by [FlexSearch][flex-search]. No configuration is required.
-- **Battery included** - Hextra supports Markdown, syntax highlighting, LaTeX, diagrams, and comes with Shortcodes components as building blocks for your Markdown content.
+- **Battery included** - Hextra supports Markdown, syntax highlighting, LaTeX, diagrams, and comes with [Shortcodes](guide/shortcodes) components as building blocks for your Markdown content.
-- **Multi-language Support** - Multi-language sites made easy with Hugo's multilingual mode.
+- **Multi-language and SEO Ready** - Multi-language sites made easy with Hugo's multilingual mode. Out of the box support for SEO tags, Open Graph, and Twitter Cards.
-- **SEO Friendly** - Out of the box support for SEO tags, Open Graph, and Twitter Cards.
-- **Customizable** - You can easily customize the theme to make the site look the way you want.
 
 ## Next
 
-Explore the following section to get started:
+Dive right into the following section to get started:
 
 {{< cards >}}
-  {{< card link="getting-started" title="Getting Started" icon="play" >}}
+  {{< card link="getting-started" title="Getting Started" icon="document-text" subtitle="Learn how to create website using Hextra" >}}
 {{< /cards >}}
+
+[hugo]: https://gohugo.io/
+[flex-search]: https://github.com/nextapps-de/flexsearch
+[tailwind-css]: https://tailwindcss.com/

exampleSite/content/docs/getting-started.md

@@ -2,6 +2,7 @@
 title: Getting Started
 weight: 1
 next: /docs/guide
+prev: /docs
 ---
 
 ## Start as New Project

exampleSite/content/docs/guide/_index.md

@@ -6,7 +6,7 @@ sidebar:
   open: true
 ---
 
-Guide to using Hextra to build your site.
+Explore the following sections to learn to compose content using Hextra:
 
 {{< cards >}}
   {{< card link="organize-files" title="Organize Files" icon="document-duplicate" >}}

exampleSite/hugo_stats.json

@@ -454,6 +454,7 @@
       "shadow-sm",
       "shadow-xl",
       "shrink-0",
+      "sidebar-active-item",
       "sidebar-container",
       "sm:flex",
       "sm:items-start",

layouts/partials/sidebar.html

@@ -145,7 +145,7 @@
   <a
     class="flex items-center justify-between gap-2 cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
     {{- if .active }}
-      bg-primary-100 font-semibold text-primary-800 contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500
+      sidebar-active-item bg-primary-100 font-semibold text-primary-800 contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500
     {{- else }}
       text-gray-500 hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50
     {{- end -}}"