feat: add footer with legal, social icons, and up link

src/components/Legal.astro

@@ -0,0 +1,13 @@
+---
+import LegalDate from './LegalDate.svelte';
+import { site } from '../data/site';
+---
+
+<div class="legal flex flex-1 shrink-0 items-center">
+	<span class="legal-copyright text-[14px] mie-[0.25em]">©</span>
+	<strong class="legal-author shrink-0 uppercase tracking-wider">{site.author}</strong>
+	<span class="legal-bullet mli-[0.25em]">/</span>
+	<span class="legal-year shrink-0">
+		<LegalDate client:idle />
+	</span>
+</div>

src/components/LegalDate.svelte

@@ -0,0 +1,7 @@
+<script>
+	const currentDate = new Date();
+	const isoDate = currentDate.toISOString();
+	const currentYear = currentDate.getFullYear();
+</script>
+
+<time datetime={isoDate}>2006–{currentYear}</time>

src/components/PageFooter.astro

@@ -0,0 +1,16 @@
+---
+import Legal from './Legal.astro';
+import SocialLinks from './SocialLinks.astro';
+import UpLink from './UpLink.astro';
+---
+
+<footer
+	class="page-footer bg-shibui-200 mbs-layout pli-halfcolumn pbe-[calc(2.775vw/2)] pbs-halfcolumn border-bs-2 border-bs-shibui-250 dark:bg-shibui-950 dark:border-bs-shibui-850 print:hidden"
+>
+	<div class="meta">Meta Footer</div>
+	<div class="small flex flex-wrap gap-4 text-[12px]">
+		<Legal />
+		<SocialLinks />
+		<UpLink />
+	</div>
+</footer>

src/components/SocialLinks.astro

@@ -0,0 +1,22 @@
+---
+import { Sprite } from 'astro-icon';
+import data from '../data/social-links.json';
+---
+
+<div class="flex flex-1 justify-center">
+	{
+		data.map(({ text, url, icon, props = {} }) => (
+			<a
+				aria-label={text}
+				class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center"
+				href={url}
+				rel="nofollow noopener noreferrer external"
+				target="_blank"
+				title={text}
+				{...props}
+			>
+				<Sprite name={icon} class="h-icon-small w-icon-small" />
+			</a>
+		))
+	}
+</div>

src/components/ThemeBox.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount, onDestroy } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 
 	let observer;
 	let isDarkMode = false;

src/components/UpLink.astro

@@ -0,0 +1,30 @@
+---
+import { Sprite } from 'astro-icon';
+---
+
+<div class="flex flex-1 justify-end">
+	<a
+		id="up-link"
+		class="up-link transition-transform duration-500 ease-in-out hover:-translate-y-1 focus:-translate-y-1"
+		href="#top"
+	>
+		<button
+			aria-label="Back to top"
+			class="up-link-button flex h-clickarea w-clickarea cursor-pointer items-center justify-center"
+		>
+			<Sprite name="ri:arrow-up-line" class="h-icon-small w-icon-small" />
+		</button>
+	</a>
+
+	<script>
+		const button = document.getElementById('up-link');
+		button?.addEventListener('click', (event) => {
+			event.preventDefault();
+			window.scrollTo({
+				top: 0,
+				left: 0,
+				behavior: 'smooth',
+			});
+		});
+	</script>
+</div>

src/data/site.ts

@@ -0,0 +1,3 @@
+export const site = {
+	author: 'Stefan Imhoff',
+};

src/data/social-links.json

@@ -0,0 +1,23 @@
+[
+	{
+		"text": "Mail",
+		"url": "#protected-email",
+		"icon": "ri:mail-fill",
+		"props": {
+			"data-domain": "stefanimhoff",
+			"data-name": "hey",
+			"data-tld": "de",
+			"onclick": "window.open(`mailto:${this.dataset.name}@${this.dataset.domain}.${this.dataset.tld}`, '_blank')"
+		}
+	},
+	{
+		"text": "Twitter",
+		"url": "https://twitter.com/kogakure",
+		"icon": "ri:twitter-fill"
+	},
+	{
+		"text": "GitHub",
+		"url": "https://github.com/kogakure",
+		"icon": "ri:github-fill"
+	}
+]

src/layouts/Layout.astro

@@ -4,6 +4,7 @@ import { Sprite } from 'astro-icon';
 
 import ThemeProvider from '../components/ThemeProvider.astro';
 import PageHeader from '../components/PageHeader.astro';
+import PageFooter from '../components/PageFooter.astro';
 
 export interface Props {
 	title: string;
@@ -57,9 +58,7 @@ const { title, backLink } = Astro.props;
 			<main class="page-content flex grow">
 				<slot />
 			</main>
-			<footer class="page-footer grid grid-cols-18 grid-rows-layout mbs-layout print:hidden">
+			<PageFooter />
-				Footer
-			</footer>
 		</Sprite.Provider>
 	</body>
 </html>

tailwind.config.cjs

@@ -40,7 +40,7 @@ module.exports = {
 				18: 'repeat(18, minmax(0, 1fr))', // --grid-fullsize
 			},
 			gridTemplateRows: ({ theme }) => ({
-				layout: `clamp(3rem, ${theme('spacing.55')}, 9rem)`,
+				layout: `clamp(3rem, ${theme('spacing.layout')}, 9rem)`,
 			}),
 			columns: {
 				13: '13',
@@ -81,6 +81,7 @@ module.exports = {
 			},
 			borderWidth: {
 				1: '1px', // --border-width-1, (DEFAULT)
+				2: '2px',
 				10: '0.1em', // --border-width-10
 				15: '0.15em', // --border-width-15
 			},
@@ -105,9 +106,11 @@ module.exports = {
 				18: 'clamp(6.192rem, 13.25vw, 7.43rem)', // --space-18
 				19: 'clamp(7.43rem, 15.9vw, 8.916rem)', // --space-19
 				20: 'clamp(8.916rem, 19.08vw, 10.699rem)', // --space-20
-				55: '5.55vw', // --space-55 TODO: new name, e.g. spacing-grid
+				column: '5.55vw', // --space-55 TODO: new name, e.g. spacing-grid
+				halfcolumn: '2.775vw',
 				layout: 'clamp(1.5rem, 5.55vw, 4.5rem)',
 				icon: '24px',
+				'icon-small': '20px',
 				clickarea: '40px',
 			},
 			fontFamily: {
@@ -116,7 +119,7 @@ module.exports = {
 			},
 			// TODO: Switch to Tshirt sizes
 			fontSize: {
-				1: ['0.65em', { lineHeight: ' ' }], // --font-size-1 (0)
+				1: ['0.65em', { lineHeight: '' }], // --font-size-1 (0)
 				2: ['clamp(0.65rem, 0.8vw, 0.75rem)', { lineHeight: '1.625' }], // --font-size-2 (2)
 				3: ['clamp(1rem, 1.1vw, 1.25rem)', { lineHeight: '1.625' }], // --font-size-3 (15)
 				4: ['clamp(1.25rem, 1.8vw, 2rem)', { lineHeight: '1' }], // --font-size-4 (5)