redesign site

.gitignore

@@ -488,6 +488,7 @@ render.experimental.xml
 *.code-workspace
 .vscode/*
 !.vscode/settings.json
+!.vscode/tailwind.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json

.vscode/extensions.json

@@ -1,4 +1,6 @@
 {
-	"recommendations": ["denoland.vscode-deno"]
-	// "disabled": ["ms-vscode.vscode-typescript-next", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
-}
+	"recommendations": [
+		"denoland.vscode-deno",
+		"bradlc.vscode-tailwindcss"
+	]
+}

.vscode/settings.json

@@ -1,20 +1,41 @@
 {
 	"deno.enable": true,
 	"deno.lint": true,
-	"[typescript]": {
-		"editor.defaultFormatter": "denoland.vscode-deno"
-	},
 	"[typescriptreact]": {
 		"editor.defaultFormatter": "denoland.vscode-deno"
 	},
-	"[javascript]": {
+	"[typescript]": {
 		"editor.defaultFormatter": "denoland.vscode-deno"
 	},
 	"[javascriptreact]": {
 		"editor.defaultFormatter": "denoland.vscode-deno"
 	},
-	"editor.suggest.showStatusBar": true,
+	"[javascript]": {
+		"editor.defaultFormatter": "denoland.vscode-deno"
+	},
+	"css.customData": [
+		".vscode/tailwind.json"
+	],
 	"editor.quickSuggestions": {
 		"strings": true
 	},
+	"tailwindCSS.includeLanguages": {
+		"javascript": "javascript",
+		"html": "HTML"
+	},
+	"tailwindSorter.categoryOrder": {
+		"sortOrder": [
+			"color",
+			"box",
+			"flex",
+			"grid",
+			"bg-visual",
+			"margins",
+			"borders",
+			"sizing",
+			"typography",
+			"transformations",
+			"other"
+		]
+	}
 }

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

components/BlogPostPreview.tsx

@@ -5,13 +5,13 @@ function BlogPostPreview(props: { post: Post }) {
 	return (
 		<a
 			href={`/blog/${post.slug}`}
-			className='grid p-12 text-gray-800 group sm:grid-cols-3 dark:text-gray-200'
+			className='grid sm:grid-cols-3 p-12 text-gray-800 dark:text-gray-200 group'
 		>
 			<time>
 				{new Date(post.publishedAt).toDateString() ?? 'Error Parsing Date'}
 			</time>
 			<div className='sm:col-span-2'>
-				<h2 className='text-2xl font-bold group-hover:underline'>{post.title}</h2>
+				<h2 className='font-bold text-2xl group-hover:underline'>{post.title}</h2>
 				<p className='mt-2'>{post.description}</p>
 			</div>
 		</a>

components/ContentCard.tsx

@@ -8,11 +8,11 @@ interface ContentCardProps {
 
 export default function ContentCard({ children, title, description }: ContentCardProps) {
 	return (
-		<div className='w-full mb-64 lg:my-auto lg:w-1/2 xl:py-12 xl:mb-10'>
+		<div className='lg:my-auto mb-64 xl:mb-10 xl:py-12 w-full lg:w-1/2'>
 			{children}
-			<div className='px-6 py-4 mx-6 bg-gray-600 bg-opacity-25 rounded-b-lg shadow-lg'>
-				<h2 className='mb-2 sm:text-xl text-lg font-bold'>{title}</h2>
-				<p className='sm:text-base text-sm text-gray-700 dark:text-gray-300'>
+			<div className='bg-gray-600 bg-opacity-25 shadow-lg mx-6 px-6 py-4 rounded-b-lg'>
+				<h2 className='mb-2 font-bold text-lg sm:text-xl'>{title}</h2>
+				<p className='text-gray-700 text-sm sm:text-base dark:text-gray-300'>
 					{description}
 				</p>
 			</div>

components/DesktopNav.tsx

@@ -0,0 +1,55 @@
+import { Route, Routes } from '@/routes.ts';
+import { classNames } from '@/utils/classNames.ts';
+
+interface DesktopNavProps {
+	routes: Route[];
+	active: Routes;
+}
+
+function DesktopNav(props: DesktopNavProps) {
+	return (
+		<ul className='flex'>
+			{props.routes.map((item: Route) => {
+				// if the route has a displayName, render it
+				if (item.displayName) {
+					return (
+						<li className='flex justify-center items-center'>
+							<a
+								key={item.id}
+								href={item.href}
+								className={classNames(
+									props.active === item.id
+										? 'animation-gradient'
+										: 'dark:text-gray-300 text-gray-800 dark:bg-gray-800 bg-gray-200',
+									'transition rounded-md font-sedwick text-2xl font-bold p-3 mx-3 block overflow-hidden relative group cursor-pointer',
+								)}
+								aria-current={props.active === item.id ? 'page' : undefined}
+							>
+								<span
+									className={classNames(
+										props.active === item.id
+											? 'bg-gray-800'
+											: 'animation-gradient',
+										'absolute w-64 h-0 transition-all duration-300 origin-center rotate-45 -translate-x-20 top-1/2 group-hover:h-64 group-hover:-translate-y-32 ease',
+									)}
+								/>
+								<span
+									className={classNames(
+										props.active === item.id
+											? 'text-gray-200'
+											: 'animation-gradient-text group-hover:text-gray-200',
+										'relative transition duration-300 ease',
+									)}
+								>
+									{item.displayName}
+								</span>
+							</a>
+						</li>
+					);
+				}
+			})}
+		</ul>
+	);
+}
+
+export { DesktopNav };