docs: add footer to site

BastiDood · Jan 1, 2025 · c0c4a62 · c0c4a62
1 parent c13088a
commit c0c4a62
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 7 deletions.
diff --git a/src/lib/layouts/DocsLayout.svelte b/src/lib/layouts/DocsLayout.svelte
@@ -31,16 +31,14 @@
     ></div>
     <div
         class:hidden={isSidebarHidden}
-        class="absolute top-0 z-20 h-full overflow-y-auto drop-shadow-[3px_3px_0px_rgba(247,149,29,0.35)] md:static md:block md:px-4"
+        class="fixed bottom-0 z-20 md:static md:block md:px-4 md:drop-shadow-[3px_3px_0px_rgba(247,149,29,0.35)]"
     >
-        <ul
-            class="menu menu-lg sticky min-h-full flex-nowrap bg-base-300 px-6 py-4 md:menu-md md:top-10 md:min-h-min md:rounded-box"
-        >
+        <ul class="menu menu-lg flex-nowrap bg-base-300 px-6 py-4 md:menu-md md:sticky md:top-32 md:rounded-box">
             {@render navigation(hideSidebar)}
         </ul>
     </div>
     <div
-        class="prose max-w-full overflow-y-auto p-10 prose-headings:scroll-mt-10 prose-h2:border-b prose-h2:border-neutral prose-h2:pb-3"
+        class="prose max-w-full p-10 prose-headings:scroll-mt-10 prose-h2:border-b prose-h2:border-neutral prose-h2:pb-3"
     >
         {@render content()}
     </div>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -9,6 +9,7 @@
     import Icon from '@iconify/svelte';
     import Spectro from '$lib/brand/logomark/48-logomark.png';
 
+    import Footer from './Footer.svelte';
     import NavLink from './NavLink.svelte';
 
     const { children } = $props();
@@ -19,7 +20,7 @@
     <meta property="og:image" content="{ORIGIN.origin}{banner}" />
 </svelte:head>
 
-<div class="flex h-screen flex-col">
+<div class="flex flex-col">
     <header class="sticky top-0 z-10">
         <nav class="navbar h-20 bg-base-200 p-4 shadow-sm lg:pr-10">
             <div class="navbar-start">
@@ -36,5 +37,6 @@
             </div>
         </nav>
     </header>
-    <main class="flex min-h-0 grow justify-center">{@render children()}</main>
+    <main class="flex justify-center">{@render children()}</main>
 </div>
+<Footer />
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
@@ -0,0 +1,56 @@
+<script>
+    import profile from '$lib/brand/logotype/logotype-dark-transparent.svg';
+</script>
+
+<footer class="bg-base-300 p-4 text-gray-400 sm:p-6">
+    <div class="mx-auto max-w-screen-xl">
+        <div class="md:flex md:justify-between">
+            <div class="mb-6 md:mb-0">
+                <a href="/" class="flex items-center">
+                    <img src={profile} alt="BastiDood" loading="lazy" class="mr-3 max-w-48" />
+                </a>
+            </div>
+            <div class="grid grid-cols-2 gap-8 sm:gap-6">
+                <div>
+                    <h2 class="mb-4 text-sm font-semibold uppercase text-base-content">Sitemap</h2>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="/" class="hover:underline">Home</a></li>
+                        <li><a href="/guide/" class="hover:underline">Guide</a></li>
+                        <li><a href="/reference/" class="hover:underline">Reference</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h2 class="mb-4 text-sm font-semibold uppercase text-base-content">Code</h2>
+                    <ul class="space-y-2 text-gray-400">
+                        <li>
+                            <a href="https://github.com/BastiDood/spectro" target="_blank" class="hover:underline"
+                                >Repository</a
+                            >
+                        </li>
+                        <li>
+                            <a
+                                href="https://github.com/BastiDood/spectro/blob/main/LICENSE"
+                                target="_blank"
+                                class="hover:underline">License</a
+                            >
+                        </li>
+                        <li>
+                            <a
+                                href="https://github.com/BastiDood/spectro/blob/main/COPYING.md"
+                                target="_blank"
+                                class="hover:underline">External Assets</a
+                            >
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <hr class="my-6 border-gray-700 sm:mx-auto lg:my-8" />
+        <p class="text-sm text-gray-400">
+            Coded with ❤️ by <a rel="external" href="https://bastidood.github.io/" class="link link-primary"
+                >Basti Ortiz</a
+            >. Themes, branding, and design by
+            <a rel="external" href="https://github.com/Anjellyrika" class="link link-primary">Jelly Raborar</a>.
+        </p>
+    </div>
+</footer>