Initial navigation styles

assets/css/custom.css

@@ -3,21 +3,238 @@
     --primary-saturation: 100%;
     /* Hextra adds 5% in most places  */
     --primary-lightness: 70%;
-    font-family: "Roboto";
+    font-family: "Roboto Flex";
+    --container-max-width: 1536px;
 }
 
-.sidebar-active-item {
-    background-color: transparent;
+@view-transition {
+  navigation: auto;
+}
+
+html {
+    scrollbar-width: thin;
+    scroll-behavior: smooth;
+}
+
+html[class~="dark"] {
+    line-height: 1.4;
+    scrollbar-color: hsla(0, 0%, 100%, .39) #000;
+}
+
+body:is(html[class~="dark"] *) {
+    background: #000;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+    /* all text on live has increased letter-spacing. buttons do not, so use tracking-normal when needed. negates the need for tracking-wide on every instance of a heading or copy */
+    letter-spacing: 0.025em;
+}
+
+@media (min-width: 768px) {
+    .nav-container nav {
+        justify-content: flex-start;
+        gap: 1.5rem;
+        max-width: var(--container-max-width);
+        padding: 0 3rem;
+    }
+    .nav-container nav > a {
+        margin: 0;
+    }
+    .nav-container nav > a[href="/"] {
+        padding-right: 1.5rem;
+    }
+    .nav-container + div {
+        max-width: var(--container-max-width);
+        padding: 1rem 3rem;
+    }
+}
+
+.nav-container nav > a {
+    font-size: 1.125rem;
+    line-height: 1.5rem;
+    font-weight: 600;
+    letter-spacing: .025em;
+    padding: 0;
+    position: relative;
+}
+
+.nav-container:is(html[class~="dark"] *) nav > a {
+    color: hsla(0,0%,100%,.65);
+}
+
+.nav-container:is(html[class~="dark"] *) nav > a.hx-font-medium {
+    color: #fff;
+}
+
+.nav-container nav > a.hx-font-medium::after {
+    content: "";
+    position: absolute;
+    bottom: -0.5rem;
+    left: 50%;
+    display: block;
+    clip-path: polygon(0px 100%, 5px calc(100% - 6px), calc(100% - 5px) calc(100% - 6px), 100% 100%);
+    opacity: 1;
+    width: 100%;
+    height: 0.25rem;
+    background: rgb(255 70 78/var(--tw-bg-opacity));
+    animation: nav-underline forwards 300ms;
+    transform: translateX(-50%)
+}
+
+@keyframes nav-underline {
+    from  { width: 0%; }
+    to    { width: 100%; }
+}
+
+.nav-container nav > a[href="/"] img {
+    height: 1.5rem;
+    width: auto;
+}
+
+.nav-container .search-wrapper {
+    margin-left: auto;
+}
+@supports ( ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) ) {
+    .nav-container-blur:is(html[class~="dark"] *) {
+        background-color: rgb(0 0 0 / 0.9) !important;
+        box-shadow: none;
+    }
 }
 
+/* search styling inline with current website inputs - to be changed to underline (as per the design) if/when the website is updated */
+[type=text]:is(html[class~="dark"] *),
+[type=search]:is(html[class~="dark"] *) {
+    background: #141414;
+    border: thin solid #2d2727;
+    border-radius: 0.375rem;
+}
+[type=text]:is(html[class~="dark"] *):focus,
+[type=search]:is(html[class~="dark"] *):focus {
+    border-color: #fff;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5), 0px 1px 6px rgba(0, 0, 0, 0.25), 0 0 0 3px hsla(0, 0%, 100%, 25%), 0 1px 1px 0 rgba(255, 255, 255, 0.12);
+    transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
+}
+[type=text]:is(html[class~="dark"] *):focus,
+[type=search]:is(html[class~="dark"] *):focus-visible {
+    outline: none;
+}
+
+/* sidebar navigation */
+
+.sidebar-container a {
+    padding-left: 0;
+}
+
+.sidebar-container a:hover,
+.sidebar-container:is(html[class~="dark"] *) a:hover {
+    background: transparent;
+}
+
+.sidebar-active-item,
 .sidebar-active-item:is(html[class~="dark"] *) {
     background-color: transparent;
 }
 
-.hextra-footer {
-    background-color: transparent;
+/* sidebar open nav line */
+.sidebar-container li.open ul::before {
+    left: -0.5rem;
+}
+
+/* sidebar navigation mobile */
+@media (max-width: 767px) {
+    .sidebar-container:is(html[class~="dark"] *) {
+        background: #000;
+    }
+}
+
+/* sidebar navigation desktop */
+@media (min-width: 768px) {
+    .sidebar-container > .hextra-scrollbar {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
+/* toc */
+.hextra-toc {
+    padding: 0;
 }
 
+/* TODO: Add a class for this upstream */
+.hextra-toc > div > div {
+    box-shadow: none !important;
+    background: transparent !important;
+    border-color: hsla(0, 0%, 100%, 0.2) !important;
+}
+
+/* breadcrumbs */
+/* TODO: Add a class for this upstream */
+main > div:first-child:not(.content) {
+    margin-bottom: 2rem;
+}
+
+.hextra-footer,
 .hextra-footer:is(html[class~="dark"] *) {
     background-color: transparent;
 }
+
+.hextra-tabs {
+    position: relative;
+}
+
+.hextra-tabs::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 1px;
+    right: 1px;
+    border-top: thin solid hsla(0, 0%, 100%, 0.2);
+}
+
+.hextra-tabs-toggle {
+    position: relative;
+    text-transform: uppercase;
+}
+
+.hextra-tabs-toggle[data-state="selected"]::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    z-index: 1;
+    display: block;
+    clip-path: polygon(0px 100%, 5px calc(100% - 6px), calc(100% - 5px) calc(100% - 6px), 100% 100%);
+    opacity: 1;
+    width: 100%;
+    height: 0.25rem;
+    background: rgb(255 70 78/var(--tw-bg-opacity));
+    animation: nav-underline forwards 300ms;
+    transform: translateX(-50%) rotate(180deg);
+}
+
+.card .hextra-tabs {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+}
+.card .hextra-tabs-panel {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+}
+
+.card .button {
+    margin-top: auto;
+    align-self: start;
+}
+
+/* content */
+
+.content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    border: none;
+}
+
+.content :where(p):not(:where([class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) {
+    color: rgb(255 255 255 / 0.8);
+    line-height: 1.4;
+}
+
+hr:is(html[class~="dark"] *) {
+    border-color: hsla(0, 0%, 100%, 0.2);
+}

content/_index.md

@@ -3,84 +3,66 @@ layout: index
 ---
 
 <!-- markdownlint-disable-next-line MD041 -->
-<div class="hx-mt-6 hx-mb-6">
-{{< hextra/hero-headline >}}
-  Netduma Support
-{{< /hextra/hero-headline >}}
+<div class="my-16 container mx-auto max-w-screen-sm text-center flex flex-col gap-4">
+  <h1 class="text-5xl tracking-wide">Netduma Knowledge Base</h1>
+  <div class="text-text-secondary tracking-wide">Welcome to the Netduma support site. Here you'll find guides for all of our features, along with frequently asked questions and useful links.</div>
 </div>
 
-<div class="hx-mb-8">
-{{< hextra/hero-subtitle >}}
-  Welcome to the Netduma support site.&nbsp;<br class="sm:hx-block hx-hidden" />Here you'll find guides for all of our features,&nbsp;<br class="sm:hx-block hx-hidden" /> along with frequently asked questions and useful links.
-{{< /hextra/hero-subtitle >}}
-</div>
-
-<div class="hx-mb-12">
-{{< netduma/hero-button text="View Docs" link="docs" >}}
-</div>
-
-<div class="hx-mt-6">
-{{< hextra/feature-grid class="hx-mt-8">}}
-  {{< netduma/feature-card
-    link="/docs/dumaos-4/"
-    title="DumaOS 4"
-    subtitle="The latest version of DumaOS, featuring groundbreaking new features like SmartBOOST and Geo-Filter 2.0."
-    class="dark:hover:hx-bg-neutral-900"
-    image="/images/dumaos_4_logo.png"
-    imageClass="max-w-full"
-    style="background: radial-gradient(ellipse at 50% 80%,rgba(255,70,78,0.15),hsla(0,0%,100%,0));"
-  >}}
-  {{< netduma/feature-card
-    link="/docs/dumaos-3/"
-    title="DumaOS 3.0"
-    subtitle="The version of DumaOS which shipped with the Netduma R2 and Nighthawk Pro Gaming routers."
-    class="dark:hover:hx-bg-neutral-900"
-    image="/images/dumaos_3_logo.png"
-    imageClass="max-w-full"
-    style="background: radial-gradient(ellipse at 50% 80%,rgba(255,70,78,0.15),hsla(0,0%,100%,0));"
-  >}}
-  {{< netduma/feature-card
-    link="/docs/telstra-game-optimiser/"
-    title="Telstra"
-    subtitle="Telstra Internet Optimiser brings the power of DumaOS to your Telstra Smart Modem."
-    class="dark:hover:hx-bg-neutral-900"
-    image="/images/telstra_logo.png"
-    imageClass="max-w-full"
-    style="background: radial-gradient(ellipse at 50% 80%,rgba(89,112,255,0.15),hsla(0,0%,100%,0));"
 
-  >}}
-{{< /hextra/feature-grid >}}
+<!--
+<div class="text-center flex flex-col items-center gap-4 my-16">
+  <label for="search" class="text-2xl font-semibold tracking-wide">Search for Topics</label>
+ <input class="max-w-xl w-full rounded-md grow py-2 px-3 shadow-sm focus:outline-none" placeholder="Search Knowledge Base" type="text" name="search"/>
 </div>
+-->
 
-<div class="hx-mt-4">
-{{< hextra/feature-grid cols="3">}}
-  {{< netduma/feature-card
-    link="/frequently-asked-questions"
-    title="FAQ"
-    subtitle="Frequently asked questions about Netduma and DumaOS."
-    class="dark:hx-bg-neutral-900 dark:hover:hx-bg-neutral-800"
+{{< netduma/cards cols="6" class="mt-6">}}
+  {{< netduma/card
+    span="2" 
+    title="Netduma R3" 
+    subtitle="The latest router from Netduma, featuring DumaOS 4" 
+    image="/images/R3-Render.png"
+    imageClass="pt-4 px-4"
   >}}
-  {{< netduma/feature-card
-    link="/firmwares/"
-    title="Firmwares"
-    subtitle="Download the latest updates for DumaOS."
-    class="dark:hx-bg-neutral-900 dark:hover:hx-bg-neutral-800"
+    {{< netduma/card-links >}}
+      {{< netduma/card-link title="Firmwares" link="platforms/netduma-r3/firmware" >}}
+      {{< netduma/card-link title="DumaOS 4 Guides" link="docs/dumaos-4" >}}
+      {{< netduma/card-link title="DumaOS 4 FAQs" link="frequently-asked-questions/dumaos4" >}}
+    {{< /netduma/card-links >}}
+    {{< netduma/button link="platforms/netduma-r3" buttonColor="primary" text="View More" >}}
+  {{< /netduma/card >}}
+  {{< netduma/card
+    span="2" 
+    title="Netduma R2" 
+    subtitle="Frequently Asked Questions about Netduma, DumaOS and networking in general"
+    image="/images/R2-Render.png"
+    imageClass="pt-4 px-4"
   >}}
-  {{< netduma/feature-card
-    link="/docs/user-manuals/"
-    title="User Manuals"
-    subtitle="User manuals that are provided with DumaOS compatible hardware."
-    class="dark:hx-bg-neutral-900 dark:hover:hx-bg-neutral-800"
+    {{< netduma/card-links >}}
+      {{< netduma/card-link title="Firmwares" link="platforms/netduma-r2/firmware" >}}
+      {{< netduma/card-link title="DumaOS 3 Guides" link="docs/dumaos-3" >}}
+      {{< netduma/card-link title="DumaOS 3 FAQs" link="frequently-asked-questions/dumaos3" >}}
+    {{< /netduma/card-links >}}
+    {{< netduma/button link="platforms/netduma-r2" buttonColor="primary" text="View More" >}}
+  {{< /netduma/card >}}
+  {{< netduma/card
+    span="2" 
+    title="Other Platforms" 
+    subtitle="Get support for older, or 3rd party platforms" 
+    link=""
   >}}
-  <!-- {{< netduma/feature-card
-    link="/"
-    title="Nighthawk Pro Gaming"
-    subtitle="Info and guides for Netgear's Nighthawk Pro Gaming routers with DumaOS."
-    class="dark:hx-bg-neutral-900 dark:hover:hx-bg-neutral-800"
-  >}} -->
-{{< /hextra/feature-grid >}}
-</div>
+    {{< netduma/card-links >}}
+      {{< netduma/card-link title="Netduma R1" link="platforms/netduma-r1" >}}
+      {{< netduma/card-link title="Netgear Nighthawk" link="platforms/netgear-nighthawk" >}}
+      {{< netduma/card-link title="Telstra" link="platforms/telstra" >}}
+    {{< /netduma/card-links >}}
+  {{< /netduma/card >}}
+{{< /netduma/cards >}}
 
-## Further Support
+{{< netduma/grid title="DumaOS" align="center" class="mt-16" >}}  
+  {{< netduma/grid-icon link="docs/dumaos-4" title="DumaOS 4" icon="dumaos4" >}}
+  {{< netduma/grid-icon link="docs/dumaos-3" title="DumaOS 3" icon="dumaos3" >}}
+  {{< netduma/grid-icon link="docs/telstra-internet-optimiser" title="Telstra" icon="telstra" >}}
+{{< /netduma/grid >}}
 
-We are always available via email and via our support forums. Our friendly support team will answer any questions you have about Netduma, DumaOS or networking in general.
+{{< netduma/need-help class="mt-16" >}}