More work on theme

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 src/css/custom-props.css
 _site
+.DS_Store

src/_data/metadata.json

@@ -3,7 +3,7 @@
 		"name": "Lewis Dale"
 	},
 	"site": {
-		"name": "LewisDale dot Dev",
+		"name": "LewisDale.dev",
 		"domain": "lewisdale.dev",
 		"description": ""
 	}

src/_includes/base.njk

@@ -6,6 +6,18 @@
 		<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
 	</head>
 	<body>
+		<header>
+			<a href="/">L.D</a>
+
+			<nav>
+				<ul>
+					<li><a href="/">Home</a></li>
+					<li><a href="/now">Now</a></li>
+					<li><a href="/blog">Blog</a></li>
+					<li><a href="/about">About me</a></li>
+				</ul>
+			</nav>
+		</header>
 		{{ content | safe }}
 	</body>
 </html>

src/css/compositions/stack.css

@@ -0,0 +1,15 @@
+[class*="stack"] > * + * {
+	margin-block-start: var(--vertical-spacing, 1.5rem);
+}
+
+.stack-sm {
+	--vertical-spacing: var(--space-size-s);
+}
+
+.stack-md {
+	--vertical-spacing: var(--space-size-m);
+}
+
+.stack-lg {
+	--vertical-spacing: var(--space-size-l);
+}

src/css/compositions/wrapper.css

@@ -0,0 +1,17 @@
+[class*="wrapper"] {
+	max-width: var(--wrapper-size, var(--screen-3xl));
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.wrapper-sm {
+	--wrapper-size: var(--screen-sm);
+}
+
+.wrapper-md {
+	--wrapper-size: var(--screen-md);
+}
+
+.wrapper-lg {
+	--wrapper-size: var(--screen-lg);
+}

src/css/fonts/space_grotesk.css

@@ -1,72 +1,7 @@
 @font-face {
     font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
+    src: url('/assets/fonts/SpaceGrotestk.woff2') format('woff2 supports variations'),
+        url('/assets/fonts/SpaceGrotesk.woff2') format('woff2-variations');
+    font-weight: 300 400 500 600 700;
+    font-feature-settings: "liga", "ss03", "ss02", "ss01", "onum";
 }
-
-@font-face {
-    font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-}
-

src/css/globals.css

@@ -1,4 +1,35 @@
 body {
+	background-color: var(--color-blueGray-800);
+	color: var(--color-zinc-200);
 	font-family: var(--font-family-mono);
-	font-size: var(--font-size-s);
+	font-size: var(--text-size-s);
+	text-underline-offset: var(--space-size-4xs);
+}
+
+h1, h2, h3, h4, h5 {
+	font-weight: bold;
+	line-height: 1.2;
+	margin: 0;
+}
+
+h1 {
+	font-size: var(--text-size-2xl);
+	word-wrap: normal;
+}
+
+h2 {
+	font-size: var(--text-size-xl);
+}
+
+h3 {
+	font-size: var(--text-size-l);
+}
+
+a {
+	color: inherit;
+	text-decoration: underline;
+}
+
+a:visited {
+	color: inherit;
 }

src/css/utilities/circle.css

@@ -0,0 +1,7 @@
+.circle {
+	aspect-ratio: 1;
+	border-radius: 100%;
+	display: block;
+	object-fit: cover;
+	object-position: center;
+}

src/index.html

@@ -3,4 +3,18 @@ title: Home
 layout: base.njk
 ---
 
-<h1>{{ metadata.site.name }}</h1>
+<main class="wrapper-lg stack-md">
+	<section class="max-w-screen-md">
+		<h1 class="text-size-3xl max-w-[10ch]">Hi, I'm Lewis</h1>
+		<ul>
+			<li>Software engineer</li>
+			<li>Cyclist</li>
+			<li>Dad</li>
+		</ul>
+	</section>
+	<section>
+		<h2>Recent Posts</h2>
+
+		<a href="/blog">View more posts</a>
+	</section>	
+</main>

tailwind.config.js

@@ -1,4 +1,5 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
+const colors = require('tailwindcss/colors');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -13,10 +14,11 @@ module.exports = {
 			'2xl': '1536px',
 			'3xl': '1920px',
 	 	},
-		colors: defaultTheme.colors,
+		colors: colors,
 		backgroundColor: ({theme}) => theme('colors'),
 		textColor: ({theme}) => theme('colors'),
 		spacing: {
+			'size-4xs': 'clamp(0.125rem, calc(0.12rem + 0.03vw), 0.21rem)',
 			'size-3xs': 'clamp(0.25rem, calc(0.24rem + 0.06vw), 0.31rem)',
 			'size-2xs': 'clamp(0.50rem, calc(0.48rem + 0.13vw), 0.63rem)',
 			'size-xs': 'clamp(0.75rem, calc(0.71rem + 0.19vw), 0.94rem)',