@turnipxenon/pineapple 2.4.28 → 2.4.30

package/.idea/workspace.xml

@@ -4,9 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Fix dialog positioning&#10;&#10;Dialog positioning seemed to be broken when the styles from Seaweed moved to postcss, even if the dialog solely exists in Pineapple">
-      <change beforePath="$PROJECT_DIR$/src/lib/components/DialogOverlay.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/dialog_overlay/DialogOverlay.svelte" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/lib/components/pineapple/PineappleBaseLayout.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/pineapple/PineappleBaseLayout.svelte" afterDir="false" />
+    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Move NavigationControl to a component">
+      <change beforePath="$PROJECT_DIR$/src/lib/components/navigation_component/NavigationComponent.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/navigation_component/NavigationComponent.svelte" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/components/navigation_component/NavigationControl.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/navigation_component/NavigationControl.svelte" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -37,11 +37,14 @@
         <option value="TestCard" />
         <option value="GameSection" />
         <option value="ProjectSection" />
-        <option value="TypeScript File" />
         <option value="+page.svelte" />
         <option value="OverrideableMeta" />
         <option value="index.ts" />
         <option value="CSS File" />
+        <option value="+page" />
+        <option value="NavigationComponent" />
+        <option value="TypeScript File" />
+        <option value="NavigationControl" />
       </list>
     </option>
   </component>
@@ -82,47 +85,47 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "DefaultHtmlFileTemplate": "HTML File",
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "WebServerToolWindowFactoryState": "false",
-    "git-widget-placeholder": "turnip/meta",
-    "ignore.virus.scanning.warn.message": "true",
-    "last_opened_file_path": "C:/Users/Pumpkin/Projects/Web/pineapple/src/routes/(seaweed)/portfolio/actual",
-    "list.type.of.created.stylesheet": "CSS",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_interpreter_path": "node",
-    "nodejs_package_manager_path": "yarn",
-    "npm.build.executor": "Run",
-    "npm.dev (1).executor": "Run",
-    "npm.dev --open.executor": "Run",
-    "npm.dev offline.executor": "Run",
-    "npm.dev-offline.executor": "Run",
-    "npm.dev.executor": "Run",
-    "settings.editor.selected.configurable": "inlay.hints",
-    "ts.external.directory.path": "C:\\Users\\Pumpkin\\Projects\\Web\\pineapple\\node_modules\\typescript\\lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;DefaultHtmlFileTemplate&quot;: &quot;HTML File&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;turnip/navigation&quot;,
+    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/Pumpkin/Projects/Web/pineapple/src/routes/(pineapple)/pineapple/page3/page7/(test_layout)/page8&quot;,
+    &quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_interpreter_path&quot;: &quot;node&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;yarn&quot;,
+    &quot;npm.build.executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev (1).executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev --open.executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev offline.executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev-offline.executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Pumpkin\\Projects\\Web\\pineapple\\node_modules\\typescript\\lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(seaweed)\portfolio\actual" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(seaweed)\portfolio" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\page3\page7\(test_layout)\page8" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\page3\page7" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\page3" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\page3\page5" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\assets\placeholder" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\about" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\(extra-pages)" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\page3\page7\(test_layout)" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\navigation_component" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\dialog_overlay" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\overrideable_meta" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\types" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\template\Seaweed" />
     </key>
     <key name="es6.move.members.recent.items">
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\types\RootLayoutProps.ts" />
@@ -157,9 +160,9 @@
     </list>
     <recent_temporary>
       <list>
-        <item itemvalue="npm.dev-offline" />
         <item itemvalue="npm.dev --open" />
         <item itemvalue="npm.dev-offline" />
+        <item itemvalue="npm.dev-offline" />
         <item itemvalue="npm.dev --open" />
         <item itemvalue="npm.dev-offline" />
       </list>
@@ -228,111 +231,16 @@
       <workItem from="1711115902471" duration="148000" />
       <workItem from="1711116299202" duration="1291000" />
       <workItem from="1711179012668" duration="14397000" />
-      <workItem from="1711206704484" duration="8091000" />
-    </task>
-    <task id="LOCAL-00045" summary="Solve videos not dynamically loading">
-      <option name="closed" value="true" />
-      <created>1710203392528</created>
-      <option name="number" value="00045" />
-      <option name="presentableId" value="LOCAL-00045" />
-      <option name="project" value="LOCAL" />
-      <updated>1710203392528</updated>
-    </task>
-    <task id="LOCAL-00046" summary="Remove unnecessary iframe requests">
-      <option name="closed" value="true" />
-      <created>1710204501497</created>
-      <option name="number" value="00046" />
-      <option name="presentableId" value="LOCAL-00046" />
-      <option name="project" value="LOCAL" />
-      <updated>1710204501497</updated>
-    </task>
-    <task id="LOCAL-00047" summary="Extract head elements out of template component">
-      <option name="closed" value="true" />
-      <created>1710208978489</created>
-      <option name="number" value="00047" />
-      <option name="presentableId" value="LOCAL-00047" />
-      <option name="project" value="LOCAL" />
-      <updated>1710208978489</updated>
-    </task>
-    <task id="LOCAL-00048" summary="Extract head elements out of template component">
-      <option name="closed" value="true" />
-      <created>1710209121437</created>
-      <option name="number" value="00048" />
-      <option name="presentableId" value="LOCAL-00048" />
-      <option name="project" value="LOCAL" />
-      <updated>1710209121437</updated>
-    </task>
-    <task id="LOCAL-00049" summary="Fix path for Seaweed">
-      <option name="closed" value="true" />
-      <created>1710211369235</created>
-      <option name="number" value="00049" />
-      <option name="presentableId" value="LOCAL-00049" />
-      <option name="project" value="LOCAL" />
-      <updated>1710211369235</updated>
-    </task>
-    <task id="LOCAL-00050" summary="Move from dist to lib for package path">
-      <option name="closed" value="true" />
-      <created>1710263983434</created>
-      <option name="number" value="00050" />
-      <option name="presentableId" value="LOCAL-00050" />
-      <option name="project" value="LOCAL" />
-      <updated>1710263983434</updated>
-    </task>
-    <task id="LOCAL-00051" summary="Add missing npm run package to allow dist generation">
-      <option name="closed" value="true" />
-      <created>1710267769805</created>
-      <option name="number" value="00051" />
-      <option name="presentableId" value="LOCAL-00051" />
-      <option name="project" value="LOCAL" />
-      <updated>1710267769806</updated>
-    </task>
-    <task id="LOCAL-00052" summary="Remove postcss reference in non root layout">
-      <option name="closed" value="true" />
-      <created>1710269255282</created>
-      <option name="number" value="00052" />
-      <option name="presentableId" value="LOCAL-00052" />
-      <option name="project" value="LOCAL" />
-      <updated>1710269255282</updated>
-    </task>
-    <task id="LOCAL-00053" summary="Add unique class for Card">
-      <option name="closed" value="true" />
-      <created>1710277476383</created>
-      <option name="number" value="00053" />
-      <option name="presentableId" value="LOCAL-00053" />
-      <option name="project" value="LOCAL" />
-      <updated>1710277476383</updated>
-    </task>
-    <task id="LOCAL-00054" summary="Remove unnecessary files">
-      <option name="closed" value="true" />
-      <created>1710280419114</created>
-      <option name="number" value="00054" />
-      <option name="presentableId" value="LOCAL-00054" />
-      <option name="project" value="LOCAL" />
-      <updated>1710280419114</updated>
-    </task>
-    <task id="LOCAL-00055" summary="Fix accordion rounded border missing">
-      <option name="closed" value="true" />
-      <created>1710290096410</created>
-      <option name="number" value="00055" />
-      <option name="presentableId" value="LOCAL-00055" />
-      <option name="project" value="LOCAL" />
-      <updated>1710290096410</updated>
-    </task>
-    <task id="LOCAL-00056" summary="Extract styling out of Skeleton accordion">
-      <option name="closed" value="true" />
-      <created>1710292214352</created>
-      <option name="number" value="00056" />
-      <option name="presentableId" value="LOCAL-00056" />
-      <option name="project" value="LOCAL" />
-      <updated>1710292214352</updated>
-    </task>
-    <task id="LOCAL-00057" summary="Attempt to make postcss exportable">
-      <option name="closed" value="true" />
-      <created>1710295846318</created>
-      <option name="number" value="00057" />
-      <option name="presentableId" value="LOCAL-00057" />
-      <option name="project" value="LOCAL" />
-      <updated>1710295846318</updated>
+      <workItem from="1711206704484" duration="9686000" />
+      <workItem from="1711323704651" duration="673000" />
+      <workItem from="1711324400764" duration="178000" />
+      <workItem from="1711325601480" duration="19000" />
+      <workItem from="1711458291157" duration="39000" />
+      <workItem from="1711460809958" duration="200000" />
+      <workItem from="1711463423241" duration="256000" />
+      <workItem from="1711471654056" duration="635000" />
+      <workItem from="1711472302524" duration="9738000" />
+      <workItem from="1711482094100" duration="5314000" />
     </task>
     <task id="LOCAL-00058" summary="Change lib to pkg to prevent the references from breaking from downstream apps">
       <option name="closed" value="true" />
@@ -622,7 +530,111 @@
       <option name="project" value="LOCAL" />
       <updated>1711210905814</updated>
     </task>
-    <option name="localTasksCounter" value="94" />
+    <task id="LOCAL-00094" summary="Fix dialog positioning&#10;&#10;Dialog positioning seemed to be broken when the styles from Seaweed moved to postcss, even if the dialog solely exists in Pineapple">
+      <option name="closed" value="true" />
+      <created>1711214822227</created>
+      <option name="number" value="00094" />
+      <option name="presentableId" value="LOCAL-00094" />
+      <option name="project" value="LOCAL" />
+      <updated>1711214822227</updated>
+    </task>
+    <task id="LOCAL-00095" summary="Place fab on a higher z-index">
+      <option name="closed" value="true" />
+      <created>1711324122770</created>
+      <option name="number" value="00095" />
+      <option name="presentableId" value="LOCAL-00095" />
+      <option name="project" value="LOCAL" />
+      <updated>1711324122771</updated>
+    </task>
+    <task id="LOCAL-00096" summary="v2.4.29">
+      <option name="closed" value="true" />
+      <created>1711324455704</created>
+      <option name="number" value="00096" />
+      <option name="presentableId" value="LOCAL-00096" />
+      <option name="project" value="LOCAL" />
+      <updated>1711324455704</updated>
+    </task>
+    <task id="LOCAL-00097" summary="Implement basic navigation component logic">
+      <option name="closed" value="true" />
+      <created>1711475813467</created>
+      <option name="number" value="00097" />
+      <option name="presentableId" value="LOCAL-00097" />
+      <option name="project" value="LOCAL" />
+      <updated>1711475813468</updated>
+    </task>
+    <task id="LOCAL-00098" summary="Add basic navigation component logic">
+      <option name="closed" value="true" />
+      <created>1711475823640</created>
+      <option name="number" value="00098" />
+      <option name="presentableId" value="LOCAL-00098" />
+      <option name="project" value="LOCAL" />
+      <updated>1711475823640</updated>
+    </task>
+    <task id="LOCAL-00099" summary="Refactor NavigationComponent logic to its component">
+      <option name="closed" value="true" />
+      <created>1711476412950</created>
+      <option name="number" value="00099" />
+      <option name="presentableId" value="LOCAL-00099" />
+      <option name="project" value="LOCAL" />
+      <updated>1711476412950</updated>
+    </task>
+    <task id="LOCAL-00100" summary="Parse meta from subdirectories">
+      <option name="closed" value="true" />
+      <created>1711480038412</created>
+      <option name="number" value="00100" />
+      <option name="presentableId" value="LOCAL-00100" />
+      <option name="project" value="LOCAL" />
+      <updated>1711480038412</updated>
+    </task>
+    <task id="LOCAL-00101" summary="Refactor the test pages to have unique headers">
+      <option name="closed" value="true" />
+      <created>1711480176125</created>
+      <option name="number" value="00101" />
+      <option name="presentableId" value="LOCAL-00101" />
+      <option name="project" value="LOCAL" />
+      <updated>1711480176126</updated>
+    </task>
+    <task id="LOCAL-00102" summary="Document limitations of PageMeta.image">
+      <option name="closed" value="true" />
+      <created>1711481990238</created>
+      <option name="number" value="00102" />
+      <option name="presentableId" value="LOCAL-00102" />
+      <option name="project" value="LOCAL" />
+      <updated>1711481990238</updated>
+    </task>
+    <task id="LOCAL-00103" summary="Move test pages into a singluar director">
+      <option name="closed" value="true" />
+      <created>1711482117365</created>
+      <option name="number" value="00103" />
+      <option name="presentableId" value="LOCAL-00103" />
+      <option name="project" value="LOCAL" />
+      <updated>1711482117365</updated>
+    </task>
+    <task id="LOCAL-00104" summary="Move test pages into a directory">
+      <option name="closed" value="true" />
+      <created>1711482127548</created>
+      <option name="number" value="00104" />
+      <option name="presentableId" value="LOCAL-00104" />
+      <option name="project" value="LOCAL" />
+      <updated>1711482127548</updated>
+    </task>
+    <task id="LOCAL-00105" summary="Add Navigation control">
+      <option name="closed" value="true" />
+      <created>1711485096437</created>
+      <option name="number" value="00105" />
+      <option name="presentableId" value="LOCAL-00105" />
+      <option name="project" value="LOCAL" />
+      <updated>1711485096437</updated>
+    </task>
+    <task id="LOCAL-00106" summary="Move NavigationControl to a component">
+      <option name="closed" value="true" />
+      <created>1711485359574</created>
+      <option name="number" value="00106" />
+      <option name="presentableId" value="LOCAL-00106" />
+      <option name="project" value="LOCAL" />
+      <updated>1711485359574</updated>
+    </task>
+    <option name="localTasksCounter" value="107" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -660,7 +672,7 @@
                   <entry key="branch">
                     <value>
                       <list>
-                        <option value="main" />
+                        <option value="turnip/dev" />
                       </list>
                     </value>
                   </entry>
@@ -680,18 +692,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="Adjust default toast body styling and add shadow to toast" />
-    <MESSAGE value="Clean up todos" />
-    <MESSAGE value="Add default PR template" />
-    <MESSAGE value="Fix chip in light mode" />
-    <MESSAGE value="2.4.14" />
-    <MESSAGE value="Run dialog parser in runtime" />
-    <MESSAGE value="Fix dialog layout to make it usable on hobby site" />
-    <MESSAGE value="Add option to set default dialog behavior in Pineapple" />
-    <MESSAGE value="Export Card" />
-    <MESSAGE value="Replace all $lib to $pkg" />
-    <MESSAGE value="Refactor all util functions into util/util" />
-    <MESSAGE value="v2.4.19" />
     <MESSAGE value="Fix breadcrumb layout" />
     <MESSAGE value="Fix default card postcss style" />
     <MESSAGE value="Adjust turnip fab button color" />
@@ -705,6 +705,18 @@
     <MESSAGE value="Add OverridableMeta component" />
     <MESSAGE value="Fix package main index" />
     <MESSAGE value="Fix dialog positioning&#10;&#10;Dialog positioning seemed to be broken when the styles from Seaweed moved to postcss, even if the dialog solely exists in Pineapple" />
-    <option name="LAST_COMMIT_MESSAGE" value="Fix dialog positioning&#10;&#10;Dialog positioning seemed to be broken when the styles from Seaweed moved to postcss, even if the dialog solely exists in Pineapple" />
+    <MESSAGE value="Place fab on a higher z-index" />
+    <MESSAGE value="v2.4.29" />
+    <MESSAGE value="Implement basic navigation component logic" />
+    <MESSAGE value="Add basic navigation component logic" />
+    <MESSAGE value="Refactor NavigationComponent logic to its component" />
+    <MESSAGE value="Parse meta from subdirectories" />
+    <MESSAGE value="Refactor the test pages to have unique headers" />
+    <MESSAGE value="Document limitations of PageMeta.image" />
+    <MESSAGE value="Move test pages into a singluar director" />
+    <MESSAGE value="Move test pages into a directory" />
+    <MESSAGE value="Add Navigation control" />
+    <MESSAGE value="Move NavigationControl to a component" />
+    <option name="LAST_COMMIT_MESSAGE" value="Move NavigationControl to a component" />
   </component>
 </project>

package/.svelte-kit/__package__/components/navigation_component/NavigationComponent.svelte

@@ -0,0 +1,229 @@
+<script>import NavigationControl from "./NavigationControl.svelte";
+import { Card, createGoToFunction } from "../..";
+import { parsePageMeta } from "./PageMeta";
+export let title = void 0;
+export let fileList;
+export let parentSubpath;
+export let compareFn;
+export let pageSize = 5;
+export let currentIndex = 0;
+const pageFlatList = parsePageMeta(fileList, compareFn);
+$:
+  visiblePages = pageFlatList.slice(currentIndex * pageSize, currentIndex * pageSize + pageSize);
+</script>
+
+<div class="navigation-wrapper">
+
+	<NavigationControl bind:currentIndex={currentIndex}
+	                   bind:contentLength={pageFlatList.length}
+	                   bind:pageSize={pageSize}></NavigationControl>
+
+	<div class="navigation-component">
+		{#if (title)}
+			<Card>
+				<h1 slot="content" class="default-card navigation-title">
+					{title}
+				</h1>
+			</Card>
+		{/if}
+		<!-- all the misc routes-->
+		{#each visiblePages as pageMeta}
+			{@const fullPath=`${parentSubpath}${pageMeta.relativeLink}`}
+			<button class="navigation-element"
+			        title={fullPath}
+			        on:click={createGoToFunction(fullPath)}>
+				{#if pageMeta.image}
+					<img src={pageMeta.image} alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
+				{/if}
+				<section class="blurb-text">
+					<h2>{pageMeta.title}</h2>
+					<p>Published: {pageMeta.datePublished ?? "N/A"} | Last updated: {pageMeta.lastUpdated ?? "N/A"}</p>
+					<p>{pageMeta.description ?? ""}</p>
+					Tags:
+					{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
+						{#each pageMeta.tags as tagValue}
+							&nbsp;<span class="badge variant-filled">{tagValue}</span>
+						{/each}
+					{:else}
+						None
+					{/if}
+				</section>
+			</button>
+		{/each}
+
+		{#if visiblePages.length === 0}
+			<Card>
+				<p class="default-card" slot="content">Sorry, no content was found</p>
+			</Card>
+		{/if}
+	</div>
+
+	<NavigationControl bind:currentIndex={currentIndex}
+	                   bind:contentLength={pageFlatList.length}
+	                   bind:pageSize={pageSize}></NavigationControl>
+
+</div>
+
+<style>
+    img {
+        height: 20em;
+        width: 20em;
+        -o-object-fit: cover;
+           object-fit: cover;
+        padding: var(--theme-border-base);
+        border-radius: var(--theme-rounded-container) 0 0 var(--theme-rounded-container);
+    }
+
+    @media (max-width: 50rem) {
+        img {
+            max-height: 20rem;
+            width: 100%;
+            flex-basis: 100%;
+            border-radius: var(--theme-rounded-container) var(--theme-rounded-container) 0 0;
+        }
+    }
+
+    .navigation-component {
+        display: flex;
+        flex-direction: column;
+        gap: 2em;
+    }
+
+    .dark .navigation-element {
+        background-color: rgb(var(--color-surface-800));
+        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+        --tw-ring-inset: inset;
+        --tw-ring-color: rgb(250 250 250 / 0.05);
+}
+
+    .navigation-element:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+}
+
+    .navigation-element:disabled:hover {
+        --tw-brightness: brightness(1);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-element:disabled:active {
+        --tw-scale-x: 1;
+        --tw-scale-y: 1;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+    .navigation-element {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+        padding-top: 9px;
+        padding-bottom: 9px;
+        white-space: nowrap;
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        border-radius: var(--theme-rounded-base);
+}
+
+    .navigation-element > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+    .navigation-element:hover {
+        --tw-brightness: brightness(1.15);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-element:active {
+        --tw-scale-x: 95%;
+        --tw-scale-y: 95%;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+        --tw-brightness: brightness(.9);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-element {
+        background-color: rgb(var(--color-surface-100));
+        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+        --tw-ring-inset: inset;
+        --tw-ring-color: rgb(23 23 23 / 0.05);
+        border-radius: var(--theme-rounded-container);
+}
+
+    .dark .navigation-element {
+        background-color: rgb(var(--color-surface-800));
+        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+        --tw-ring-inset: inset;
+        --tw-ring-color: rgb(250 250 250 / 0.05);
+}
+
+    a.navigation-element {
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+}
+
+    a.navigation-element:hover {
+        --tw-brightness: brightness(1.05);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-element {
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+}
+
+    .navigation-element:hover {
+        --tw-scale-x: 101%;
+        --tw-scale-y: 101%;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+        --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+    .navigation-element {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity));
+}
+
+    :is(.dark .navigation-element) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
+}
+
+    .navigation-element {
+        display: flex;
+        flex-wrap: wrap;
+        text-align: start;
+        padding: 0;
+    }
+
+    .navigation-title {
+        text-align: center;
+    }
+
+    .blurb-text {
+        flex: 1;
+        padding: 2em;
+    }
+
+    .navigation-wrapper {
+        display: flex;
+        flex-direction: column;
+    }
+</style>