Dev

apps/blog/eslint.config.js

@@ -3,6 +3,6 @@ import { config } from '@a11y.cool/eslint-config/index.js';
 export default [
 	...config,
 	{
-		ignores: ['.svelte-kit/*', '.vercel/*']
+		ignores: ['.svelte-kit/*', '.vercel/*', '.netlify/**']
 	}
 ];

apps/blog/src/routes/about/+page.svelte

@@ -15,7 +15,7 @@
 	>
 		<div class="flex flex-col justify-center items-center py-24">
 			{#if about.title}
-				<h1 class="text-6xl md:text-8xl text-center mb-8">{about.title}</h1>
+				<h1 class="text-center mb-8 text-teasered">{about.title}</h1>
 			{/if}
 			{#if about.about_intro}
 				<p class="max-w-2xl text-center text-lg">
@@ -60,7 +60,7 @@
 					aria-label="Person with impairments icon"
 					class="pb-8"
 				/>
-				<h2 class="text-6xl md:text-8xl text-center mb-8 font-highlight">
+				<h2 class="text-teasered text-center mb-8">
 					{about.about_outro_headline}
 				</h2>
 				<p class="max-w-2xl text-center text-lg">

apps/blog/src/routes/blog/+page.svelte

@@ -10,9 +10,9 @@
 <section class="col-span-12 col-start-1 flex justify-center" use:animate={{ delay: 0 }}>
 	<div class="pt-10 max-w-[580px] w-full">
 		<h1 class="text-4xl font-bold mb-10">Blog</h1>
-		<ul class="list-none p-0 m-0">
+		<ul>
 			{#each posts as post, index (post._id)}
-				<li class="mb-0 p-0" use:animate={{ delay: 200 + index * 100 }}>
+				<li class="list-none" use:animate={{ delay: 200 + index * 100 }}>
 					<PostPreview {post} excerptLength={30} />
 				</li>
 			{/each}

packages/ui/src/components/Navigation.svelte

@@ -27,7 +27,7 @@
 <div class="flex z-100 md:hidden justify-end w-full">
 	<DropdownMenu.Root>
 		<DropdownMenu.Trigger
-			class="p-2 rounded-md hover:bg-muted focus:bg-muted focus:outline-none"
+			class="p-2 rounded-md hover:bg-muted focus-visible:bg-muted focus:outline-none"
 		>
 			<!-- Hamburger Icon -->
 			<List aria-labelledby="open-menu" class="h-6 w-6" size={24} />
@@ -40,7 +40,7 @@
 				<DropdownMenu.Item>
 					<a
 						href={item.href}
-						class="block px-4 py-2 rounded hover:bg-muted focus:bg-muted focus:outline-none"
+						class="block px-4 py-2 rounded hover:bg-muted focus-visible:bg-muted focus:outline-none"
 					>
 						{item.label}
 					</a>

packages/ui/src/styles/globals.css

@@ -306,12 +306,40 @@
 		color: var(--background);
 	}
 
-	/* Remove list item dots from navigation lists */
+	/* Lists */
+	article ul,
+	article ol {
+		@apply text-base mb-4 ml-6 last:mb-0;
+	}
+
 	nav ul,
-	nav li {
-		margin-left: 0;
-		list-style: none;
-		padding-left: 0;
+	nav ol {
+		@apply ml-0 list-none;
+	}
+
+	ul {
+		@apply list-disc;
+	}
+
+	ol {
+		@apply list-decimal;
+	}
+
+	li {
+		@apply mb-2 last:mb-0;
+	}
+
+	/* Nested lists */
+	ul ul,
+	ol ol,
+	ul ol,
+	ol ul {
+		@apply mt-2 mb-0;
+	}
+
+	/* List items with paragraphs */
+	li > p {
+		@apply mb-2 last:mb-0;
 	}
 
 	a {

packages/ui/src/styles/typography.css

@@ -12,19 +12,19 @@ h5 {
 }
 
 h2 {
-	@apply text-xl md:text-2xl lg:text-3xl tracking-tight text-foreground;
+	@apply text-xl md:text-xl lg:text-2xl text-foreground;
 }
 
 h3 {
-	@apply text-lg md:text-xl lg:text-2xl tracking-tight text-foreground;
+	@apply text-base md:text-lg lg:text-xl text-foreground;
 }
 
 h4 {
-	@apply text-base md:text-lg lg:text-xl tracking-tight text-foreground;
+	@apply text-base md:text-lg lg:text-xl text-foreground;
 }
 
 h5 {
-	@apply text-base md:text-lg lg:text-xl tracking-tight text-foreground;
+	@apply text-base md:text-lg lg:text-xl text-foreground;
 }
 
 /* Body text */
@@ -49,38 +49,7 @@ p {
 
 /* Large highlighted/teasered text */
 .text-teasered {
-	@apply text-2xl md:text-3xl lg:text-4xl tracking-wide;
-}
-
-/* Lists */
-ul,
-ol {
-	@apply text-base mb-4 ml-6 last:mb-0;
-}
-
-ul {
-	@apply list-disc;
-}
-
-ol {
-	@apply list-decimal;
-}
-
-li {
-	@apply mb-2 last:mb-0;
-}
-
-/* Nested lists */
-ul ul,
-ol ol,
-ul ol,
-ol ul {
-	@apply mt-2 mb-0;
-}
-
-/* List items with paragraphs */
-li > p {
-	@apply mb-2 last:mb-0;
+	@apply text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-highlight;
 }
 
 /* Text alignment utilities */