Redesign docsite header footer

enitimeago · Sep 3, 2024 · ba5417c · ba5417c
1 parent 1d71f8d
commit ba5417c
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 14 deletions.
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -12,9 +12,13 @@ export default defineConfig({
 		starlight({
 			title: 'Make It MMD',
             customCss: [
-                './src/styles/custom.css',
+                './src/styles/custom.scss',
                 '@fontsource-variable/public-sans/wght.css',
             ],
+            credits: true,
+            components: {
+                Footer: './src/components/Footer.astro',
+            },
             defaultLocale: 'en',
             locales: {
                 en: {

diff --git a/docs/package.json b/docs/package.json
@@ -14,6 +14,7 @@
     "@astrojs/starlight": "^0.26.1",
     "@fontsource-variable/public-sans": "^5.0.19",
     "astro": "^4.15.2",
+    "sass": "^1.77.8",
     "sharp": "^0.32.5",
     "typescript": "^5.5.4"
   },

diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
diff --git a/docs/src/components/Footer.astro b/docs/src/components/Footer.astro
@@ -0,0 +1,61 @@
+---
+import type { Props } from '@astrojs/starlight/props';
+
+import EditLink from 'virtual:starlight/components/EditLink';
+import LastUpdated from 'virtual:starlight/components/LastUpdated';
+import Pagination from 'virtual:starlight/components/Pagination';
+import config from 'virtual:starlight/user-config';
+import { Icon } from '@astrojs/starlight/components';
+---
+
+<footer class="sl-flex">
+	<div class="meta sl-flex">
+		<EditLink {...Astro.props} />
+		<LastUpdated {...Astro.props} />
+	</div>
+	<Pagination {...Astro.props} />
+    <div class="copyright">
+        <p>Make It MMD is released under the MIT License.</p>
+        <p>Copyright &copy; 2024 enitimeago.</p>
+        {
+            config.credits && (
+                <a class="kudos sl-flex" href="https://starlight.astro.build" target="_blank">
+                    <Icon name={'starlight'} /> {Astro.props.labels['builtWithStarlight.label']}
+                </a>
+            )
+        }
+    </div>
+</footer>
+
+<style>
+	footer {
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+	.meta {
+		gap: 0.75rem 3rem;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		margin-top: 3rem;
+		font-size: var(--sl-text-sm);
+		color: var(--sl-color-gray-3);
+	}
+	.meta > :global(p:only-child) {
+		margin-inline-start: auto;
+	}
+
+	.kudos {
+		align-items: center;
+		gap: 0.5em;
+		margin: 1.5rem auto;
+		font-size: var(--sl-text-xs);
+		text-decoration: none;
+		color: var(--sl-color-gray-3);
+	}
+	.kudos :global(svg) {
+		color: var(--sl-color-orange);
+	}
+	.kudos:hover {
+		color: var(--sl-color-white);
+	}
+</style>
diff --git a/docs/src/styles/custom.css → docs/src/styles/custom.scss b/docs/src/styles/custom.css → docs/src/styles/custom.scss
@@ -1,5 +1,4 @@
-/* Dark mode colors. */
-:root {
+@mixin dark-colors {
 	--sl-color-accent-low: #28154d;
 	--sl-color-accent: #7d00fb;
 	--sl-color-accent-high: #cbbeff;
@@ -12,8 +11,7 @@
 	--sl-color-gray-6: #25262d;
 	--sl-color-black: #17181b;
 }
-/* Light mode colors. */
-:root[data-theme='light'] {
+@mixin light-colors {
 	--sl-color-accent-low: #d8cfff;
 	--sl-color-accent: #7f00ff;
 	--sl-color-accent-high: #3a1673;
@@ -27,13 +25,19 @@
 	--sl-color-gray-7: #f6f6f8;
 	--sl-color-black: #ffffff;
 }
+:root {
+    @include dark-colors;
+}
+:root[data-theme='light'] {
+    @include light-colors;
+}
 
 /* Fonts. */
 :root {
     --sl-font: "Public Sans";
 }
 
-/* Customizations. */
+/* Homepage. */
 .hero h1 {
     background: linear-gradient(transparent 70%, var(--sl-color-accent-low) 70%, var(--sl-color-accent-low) 90%, transparent 90%);
 }
@@ -55,3 +59,22 @@ html[lang=ja] .hero h1::after {
         grid-template-columns: 1fr;
     }
 }
+
+/* Header. */
+header.header {
+    backdrop-filter: blur(16px);
+    border-bottom: none;
+    --sl-color-text-accent: #ffffff;
+    --sl-color-bg-nav: #1C0C28;
+    background: rgb(from var(--sl-color-bg-nav) r g b / 0.85);
+    .title-wrapper, .right-group {
+        @include dark-colors;
+    }
+}
+
+/* Footer. */
+.copyright {
+    margin: 1.5rem 0 0;
+    font-size: var(--sl-text-xs);
+    color: var(--sl-color-gray-3);
+}