From f7d2471bb9a589953c0fb14bd9218b375acbeb3c Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Sat, 25 Feb 2023 20:29:17 +0100
Subject: [PATCH] feat(astro): finish header and footer styling

---
 .cspell/dictionary.txt               |  1 -
 src/components/Backlink.astro        |  4 +--
 src/components/Headline.svelte       | 12 ++++++++
 src/components/Legal.astro           | 10 +++----
 src/components/MainNavigation.astro  | 14 ++++------
 src/components/PageFooter.astro      | 11 ++++++--
 src/components/PageHeader.astro      |  5 +---
 src/components/PageTitle.svelte      | 10 +++++++
 src/components/RSSLink.astro         | 15 ++++++++++
 src/components/SocialLinks.astro     |  2 +-
 src/components/Subheadline.svelte    | 12 ++++++++
 src/components/Subnavigation.astro   | 40 ++++++++++++++++++++++++++
 src/components/Subsubheadline.svelte | 12 ++++++++
 src/components/ThemeToggle.astro     |  4 +--
 src/components/UpLink.astro          |  4 +--
 src/data/navigation.json             |  4 ---
 src/data/subnavigation.json          | 42 ++++++++++++++++++++++++++++
 tailwind.config.cjs                  |  3 +-
 18 files changed, 170 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Headline.svelte
 create mode 100644 src/components/PageTitle.svelte
 create mode 100644 src/components/RSSLink.astro
 create mode 100644 src/components/Subheadline.svelte
 create mode 100644 src/components/Subnavigation.astro
 create mode 100644 src/components/Subsubheadline.svelte
 create mode 100644 src/data/subnavigation.json

diff --git a/.cspell/dictionary.txt b/.cspell/dictionary.txt
index 4417fc4..a1d8cce 100644
--- a/.cspell/dictionary.txt
+++ b/.cspell/dictionary.txt
@@ -10,7 +10,6 @@ crossorigin
 cssnano
 evenodd
 favicons
-halfcolumn
 linejoin
 lucida
 menlo
diff --git a/src/components/Backlink.astro b/src/components/Backlink.astro
index 9621528..397f55d 100644
--- a/src/components/Backlink.astro
+++ b/src/components/Backlink.astro
@@ -11,12 +11,12 @@ const { backLink } = Astro.props;
 {
 	backLink && (
 		<a
-			class="back-link col-span-1 col-start-1 self-center justify-self-center transition-transform duration-500 ease-in-out hover:-translate-x-1 focus:-translate-x-1 print:hidden"
+			class="col-span-2 col-start-1 h-clickarea w-clickarea items-center justify-center self-center justify-self-center transition-transform duration-500 ease-in-out hover:-translate-x-1 focus:-translate-x-1 print:hidden md:col-span-1"
 			href={backLink}
 		>
 			<button
 				aria-label="Back to overview"
-				class="back-link-button h-clickarea w-clickarea flex cursor-pointer items-center justify-center border-none text-[0]"
+				class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center border-none text-[0]"
 				type="button"
 			>
 				<Sprite name="ri:arrow-left-line" class="h-icon w-icon" />
diff --git a/src/components/Headline.svelte b/src/components/Headline.svelte
new file mode 100644
index 0000000..d9e515a
--- /dev/null
+++ b/src/components/Headline.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let as = 'h2';
+</script>
+
+<svelte:element
+	this={as}
+	class={`text-5 font-black tracking-tight mbe-10 mbs-16 first-of-type:mbs-0 dark:font-extrabold ${
+		$$props.class || ''
+	}`}
+>
+	<slot />
+</svelte:element>
diff --git a/src/components/Legal.astro b/src/components/Legal.astro
index caec932..4ad4d37 100644
--- a/src/components/Legal.astro
+++ b/src/components/Legal.astro
@@ -3,11 +3,11 @@ import LegalDate from './LegalDate.svelte';
 import { site } from '../data/site';
 ---
 
-<div class="legal flex flex-1 shrink-0 items-center">
-	<span class="legal-copyright relative text-[14px] mie-[0.25em] block-start-[1px]">©</span>
-	<span class="legal-year shrink-0">
+<div class="flex flex-1 shrink-0 items-center">
+	<span class="relative text-[14px] mie-[0.25em] block-start-[1px]">©</span>
+	<span class="shrink-0">
 		<LegalDate client:idle />
 	</span>
-	<span class="legal-bullet mli-[0.25em]">•</span>
-	<strong class="legal-author shrink-0 uppercase tracking-wider">{site.author}</strong>
+	<span class="mli-[0.25em]">•</span>
+	<strong class="shrink-0 uppercase tracking-wider">{site.author}</strong>
 </div>
diff --git a/src/components/MainNavigation.astro b/src/components/MainNavigation.astro
index c1769c4..1242308 100644
--- a/src/components/MainNavigation.astro
+++ b/src/components/MainNavigation.astro
@@ -4,18 +4,14 @@ import navigation from '../data/navigation.json';
 const currentPath = new URL(Astro.request.url).pathname;
 ---
 
-<nav
-	class="navigation col-span-16 col-start-2 self-center md:col-span-14 md:col-start-3"
-	role="navigation"
->
-	<ul class="navigation-list flex flex-wrap">
+<nav class="col-span-12 col-start-4 self-center md:col-span-14 md:col-start-3" role="navigation">
+	<ul class="flex flex-wrap">
 		{
 			navigation.map(({ title, url }) => (
-				<li class="navigation-list-item mie-[10px] xs:mie-[15px]">
+				<li class="mie-[10px] xs:mie-[15px]">
 					<a
-						class={`navigation-item-link text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 ${
-							currentPath === url &&
-							'active underline !decoration-accent decoration-4'
+						class={`text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 ${
+							currentPath === url && 'underline !decoration-accent decoration-4'
 						}`}
 						href={url}
 					>
diff --git a/src/components/PageFooter.astro b/src/components/PageFooter.astro
index 0424987..843cf88 100644
--- a/src/components/PageFooter.astro
+++ b/src/components/PageFooter.astro
@@ -1,14 +1,19 @@
 ---
+import RSSLink from './RSSLink.astro';
+import Subnavigation from './Subnavigation.astro';
 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"
+	class="bg-shibui-200 mbs-layout pis-9 pie-6 pbe-5 pbs-10 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]">
+	<div class="flex flex-col gap-4 mbe-10 sm:flex-row sm:mbe-0">
+		<RSSLink />
+		<Subnavigation />
+	</div>
+	<div class="flex flex-col flex-wrap text-[12px] sm:flex-row sm:gap-4">
 		<Legal />
 		<SocialLinks />
 		<UpLink />
diff --git a/src/components/PageHeader.astro b/src/components/PageHeader.astro
index bf573e8..f350549 100644
--- a/src/components/PageHeader.astro
+++ b/src/components/PageHeader.astro
@@ -10,10 +10,7 @@ export interface Props {
 const { backLink } = Astro.props;
 ---
 
-<header
-	class="page-header grid grid-cols-18 grid-rows-layout mbe-layout print:hidden"
-	role="banner"
->
+<header class="grid grid-cols-18 grid-rows-layout mbe-layout print:hidden" role="banner">
 	<Backlink backLink={backLink} />
 	<MainNavigation />
 	<ThemeToggle />
diff --git a/src/components/PageTitle.svelte b/src/components/PageTitle.svelte
new file mode 100644
index 0000000..e87de43
--- /dev/null
+++ b/src/components/PageTitle.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let as = 'h1';
+</script>
+
+<svelte:element
+	this={as}
+	class={`text-7 font-black tracking-tight mbe-13 dark:font-extrabold ${$$props.class || ''}`}
+>
+	<slot />
+</svelte:element>
diff --git a/src/components/RSSLink.astro b/src/components/RSSLink.astro
new file mode 100644
index 0000000..9fc06e7
--- /dev/null
+++ b/src/components/RSSLink.astro
@@ -0,0 +1,15 @@
+---
+import { Sprite } from 'astro-icon';
+
+import Subsubheadline from './Subsubheadline.svelte';
+---
+
+<div class="grow mbe-5 sm:mbe-0">
+	<Subsubheadline>Stay up to date.</Subsubheadline>
+	<p>
+		<a href="/rss.xml" rel="nofollow noopener noreferrer external" target="_blank">
+			<Sprite name="ri:rss-fill" class="h-icon w-icon inline" />
+			Subscribe via RSS
+		</a>
+	</p>
+</div>
diff --git a/src/components/SocialLinks.astro b/src/components/SocialLinks.astro
index 4d50a77..5f2568a 100644
--- a/src/components/SocialLinks.astro
+++ b/src/components/SocialLinks.astro
@@ -3,7 +3,7 @@ import { Sprite } from 'astro-icon';
 import data from '../data/social-links.json';
 ---
 
-<div class="flex flex-1 justify-center">
+<div class="flex flex-1 sm:justify-center">
 	{
 		data.map(({ text, url, icon, props = {} }) => (
 			<a
diff --git a/src/components/Subheadline.svelte b/src/components/Subheadline.svelte
new file mode 100644
index 0000000..c5e1eaa
--- /dev/null
+++ b/src/components/Subheadline.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let as = 'h3';
+</script>
+
+<svelte:element
+	this={as}
+	class={`text-4 font-black tracking-tight mbe-8 mbs-14 first-of-type:mbs-0 dark:font-extrabold ${
+		$$props.class || ''
+	}`}
+>
+	<slot />
+</svelte:element>
diff --git a/src/components/Subnavigation.astro b/src/components/Subnavigation.astro
new file mode 100644
index 0000000..3302bbe
--- /dev/null
+++ b/src/components/Subnavigation.astro
@@ -0,0 +1,40 @@
+---
+import data from '../data/subnavigation.json';
+
+const currentPath = new URL(Astro.request.url).pathname;
+---
+
+<div class="glow flex gap-12">
+	<ul>
+		{
+			data.main.map(({ title, url }) => (
+				<li>
+					<a
+						href={url}
+						class={`text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 ${
+							currentPath === url && 'underline !decoration-accent decoration-4'
+						}`}
+					>
+						{title}
+					</a>
+				</li>
+			))
+		}
+	</ul>
+	<ul class="mie-12 md:mie-16">
+		{
+			data.misc.map(({ title, url }) => (
+				<li>
+					<a
+						href={url}
+						class={`text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 ${
+							currentPath === url && 'underline !decoration-accent decoration-4'
+						}`}
+					>
+						{title}
+					</a>
+				</li>
+			))
+		}
+	</ul>
+</div>
diff --git a/src/components/Subsubheadline.svelte b/src/components/Subsubheadline.svelte
new file mode 100644
index 0000000..de6e4e1
--- /dev/null
+++ b/src/components/Subsubheadline.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let as = 'h4';
+</script>
+
+<svelte:element
+	this={as}
+	class={`text-3 font-black tracking-tight mbe-8 mbs-14 first-of-type:mbs-0 dark:font-extrabold ${
+		$$props.class || ''
+	}`}
+>
+	<slot />
+</svelte:element>
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 69c6e36..ef5202b 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -3,11 +3,11 @@ import { Sprite } from 'astro-icon';
 ---
 
 <theme-toggle
-	class="col-start-18 flex h-clickarea w-clickarea items-center self-center justify-center justify-self-center print:hidden"
+	class="col-start-17 md:col-start-18 md:col-span-1 col-span-2 flex h-clickarea w-clickarea items-center self-center justify-center justify-self-center print:hidden"
 >
 	<button
 		aria-label="Switch color theme"
-		class="theme-toggle h-clickarea w-clickarea group flex cursor-pointer items-center justify-center self-center border-0 text-[0]"
+		class="group flex h-clickarea w-clickarea cursor-pointer items-center justify-center self-center border-0 text-[0]"
 	>
 		<Sprite
 			name="circle"
diff --git a/src/components/UpLink.astro b/src/components/UpLink.astro
index a3163b2..5e5a4c2 100644
--- a/src/components/UpLink.astro
+++ b/src/components/UpLink.astro
@@ -5,12 +5,12 @@ 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"
+		class="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"
+			class="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>
diff --git a/src/data/navigation.json b/src/data/navigation.json
index 7c5c807..3f9d19a 100644
--- a/src/data/navigation.json
+++ b/src/data/navigation.json
@@ -10,9 +10,5 @@
 	{
 		"title": "Journal",
 		"url": "/journal/"
-	},
-	{
-		"title": "Projects",
-		"url": "/projects/"
 	}
 ]
diff --git a/src/data/subnavigation.json b/src/data/subnavigation.json
new file mode 100644
index 0000000..f0969d1
--- /dev/null
+++ b/src/data/subnavigation.json
@@ -0,0 +1,42 @@
+{
+	"main": [
+		{
+			"title": "About",
+			"url": "/about/"
+		},
+		{
+			"title": "Journal",
+			"url": "/journal/"
+		},
+		{
+			"title": "Projects",
+			"url": "/projects/"
+		},
+		{
+			"title": "Sketchnotes",
+			"url": "/sketchnotes/"
+		},
+		{
+			"title": "Haiku",
+			"url": "/haiku/"
+		}
+	],
+	"misc": [
+		{
+			"title": "Colophon",
+			"url": "/colophon/"
+		},
+		{
+			"title": "Tools",
+			"url": "/tools/"
+		},
+		{
+			"title": "Now",
+			"url": "/now/"
+		},
+		{
+			"title": "Imprint",
+			"url": "/imprint/"
+		}
+	]
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 2dc9c81..d5f8991 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -40,7 +40,7 @@ module.exports = {
 				18: 'repeat(18, minmax(0, 1fr))', // --grid-fullsize
 			},
 			gridTemplateRows: ({ theme }) => ({
-				layout: `clamp(3rem, ${theme('spacing.layout')}, 9rem)`,
+				layout: `clamp(3rem, ${theme('spacing.column')}, 9rem)`,
 			}),
 			columns: {
 				13: '13',
@@ -107,7 +107,6 @@ module.exports = {
 				19: 'clamp(7.43rem, 15.9vw, 8.916rem)', // --space-19
 				20: 'clamp(8.916rem, 19.08vw, 10.699rem)', // --space-20
 				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',