chore: redesign to be a bit nicer on the eyes

assets/css/tailwind.css

@@ -0,0 +1,8 @@
+@import "@radix-ui/colors/sand.css";
+@import "@radix-ui/colors/sand-dark.css";
+@import "@radix-ui/colors/sand-alpha.css";
+@import "@radix-ui/colors/sand-dark-alpha.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

components/content/ProseCode.vue

@@ -0,0 +1,35 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+defineProps({
+  code: {
+    type: String,
+    default: "",
+  },
+  language: {
+    type: String,
+    default: null,
+  },
+  filename: {
+    type: String,
+    default: null,
+  },
+  highlights: {
+    type: Array as () => number[],
+    default: () => [],
+  },
+  meta: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
+<style>
+pre code .line {
+  display: block;
+  min-height: 1rem;
+}
+</style>

components/content/ProsePre.vue

@@ -0,0 +1,51 @@
+<template>
+  <ProseCode
+    :code="code"
+    :language="language"
+    :filename="filename"
+    :highlights="highlights"
+    :meta="meta"
+  >
+    <pre :class="$props.class" :style="style"><slot /></pre>
+  </ProseCode>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  code: {
+    type: String,
+    default: "",
+  },
+  language: {
+    type: String,
+    default: null,
+  },
+  filename: {
+    type: String,
+    default: null,
+  },
+  highlights: {
+    type: Array as () => number[],
+    default: () => [],
+  },
+  meta: {
+    type: String,
+    default: null,
+  },
+  class: {
+    type: String,
+    default: null,
+  },
+  style: {
+    type: [String, Object],
+    default: null,
+  },
+});
+</script>
+
+<style>
+pre code .line {
+  display: block;
+  min-height: 1rem;
+}
+</style>

composables/humanDate.ts

@@ -0,0 +1,8 @@
+export function humanDate(date: Date | string): string {
+  const nativeDate = date instanceof Date ? date : new Date(date);
+
+  return Intl.DateTimeFormat("en-US", {
+    dateStyle: "full",
+    timeZone: "America/Denver",
+  }).format(nativeDate);
+}

composables/isOutOfDate.ts

@@ -0,0 +1,7 @@
+export function isOutOfDate(date: Date | string): boolean {
+  const currentDate = new Date();
+  const nativeDate = date instanceof Date ? date : new Date(date);
+
+  currentDate.setFullYear(currentDate.getFullYear() - 2);
+  return new Date(nativeDate) < currentDate;
+}

layouts/default.vue

@@ -2,34 +2,32 @@
   <div class="min-h-screen justify-stretch flex flex-col">
     <div class="pointer-coarse:bottom-8 pointer-fine:top-0 fixed z-40 w-full">
       <nav
-        class="mx-auto flex max-w-screen-xl place-content-between items-center px-4 py-4"
+        class="mx-auto flex max-w-screen-xl place-content-between items-center px-4 py-4 text-sand-12"
       >
         <div
-          class="inline-flex space-x-[1px] rounded-full backdrop-blur-lg backdrop-brightness-200"
+          class="inline-flex space-x-1 rounded-full backdrop-blur-[2px] bg-sand-a2 p-1"
         >
           <NuxtLink
-            v-for="(item, idx) in navigation"
+            v-for="item in navigation"
             :key="item.name"
             :to="item.href"
             :class="{
-              'shadow-border pointer-coarse:px-6 pointer-coarse:py-3 relative inline-flex items-center px-4 py-2 text-sm font-medium hover:z-30 hover:shadow-orange-500 focus:z-20 focus:shadow-orange-500 focus:outline-none': true,
-              'z-10 bg-neutral-100/80 text-neutral-900 shadow-orange-500 dark:bg-neutral-900/90 dark:text-neutral-50 dark:shadow-orange-600':
-                item.href === $route.path,
-              'bg-neutral-300/40 shadow-gray-400/60 dark:bg-neutral-800/80 dark:text-white':
+              'pointer-coarse:px-6 pointer-coarse:py-3 relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full': true,
+              'bg-sand-3 hover:bg-sand-4 focus:bg-sand-4':
                 item.href !== $route.path,
-              'rounded-l-full': idx === 0,
-              'rounded-r-full': idx === navigation.length - 1,
+              'bg-sand-5 ring-2 ring-inset ring-orange-200 dark:ring-violet-700':
+                item.href === $route.path,
             }"
           >
             {{ item.name }}
           </NuxtLink>
         </div>
 
         <div
-          class="inline-flex space-x-[1px] rounded-full backdrop-blur-lg backdrop-brightness-200"
+          class="inline-flex space-x-1 rounded-full backdrop-blur-[2px] bg-sand-a2 p-1"
         >
           <button
-            class="shadow-border relative z-10 inline-flex items-center rounded-full bg-neutral-300/40 px-4 py-2 text-sm font-medium text-neutral-900 shadow-gray-400/60 hover:z-30 hover:shadow-orange-500 focus:z-20 focus:shadow-orange-500 focus:outline-none dark:bg-neutral-800/80 dark:text-white"
+            class="pointer-coarse:px-6 pointer-coarse:py-3 relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full bg-sand-3 hover:bg-sand-4 focus:bg-sand-4"
             @click="toggleAppearanceDark"
           >
             <SunIcon v-show="!isAppearanceDark" class="w-5" />
@@ -42,15 +40,15 @@
     <slot />
 
     <footer
-      class="flex-none border-red-cray-200 pointer-coarse:pb-20 dark:border-mirage-of-violets-700 border-t-2 bg-neutral-100 dark:bg-neutral-900"
+      class="flex-none border-orange-200 pointer-coarse:pb-20 dark:border-violet-700 border-t-2"
     >
       <div
         class="mx-auto max-w-7xl py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8"
       >
         <div class="flex justify-center space-x-6 md:order-2">
           <a
             href="https://github.com/btkostner"
-            class="text-neutral-500 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300"
+            class="text-sand-11 hover:text-sand-12"
             target="_blank"
             rel="me noopener noreferrer"
           >
@@ -69,7 +67,7 @@
 
           <a
             href="https://mastodon.social/@btkostner"
-            class="text-neutral-500 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300"
+            class="text-sand-11 hover:text-sand-12"
             target="_blank"
             rel="me noopener noreferrer"
           >
@@ -88,7 +86,7 @@
 
           <a
             href="https://steamcommunity.com/id/mkrar"
-            class="text-neutral-500 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300"
+            class="text-sand-11 hover:text-sand-12"
             target="_blank"
             rel="me noopener noreferrer"
           >
@@ -107,7 +105,7 @@
 
           <a
             href="https://www.linkedin.com/in/btkostner/"
-            class="text-neutral-500 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300"
+            class="text-sand-11 hover:text-sand-12"
             target="_blank"
             rel="me noopener noreferrer"
           >
@@ -126,9 +124,7 @@
         </div>
 
         <div class="mt-8 md:order-1 md:mt-0">
-          <p
-            class="text-center text-base text-neutral-500 dark:text-neutral-400"
-          >
+          <p class="text-center text-base text-sand-11">
             Made with love, magic, and drugs.
           </p>
         </div>

nuxt.config.ts

@@ -2,7 +2,7 @@ export default defineNuxtConfig({
   app: {
     head: {
       bodyAttrs: {
-        class: "min-h-screen bg-neutral-50 dark:bg-stone-950",
+        class: "min-h-screen bg-sand-1 text-sand-11",
       },
       htmlAttrs: {
         class: "min-h-screen",

package.json

@@ -16,6 +16,7 @@
     "@nuxtjs/color-mode": "^3.3.2",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@nuxtjs/tailwindcss": "^6.11.2",
+    "@radix-ui/colors": "^3.0.0",
     "@tailwindcss/typography": "^0.5.10",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "eslint-config-prettier": "^9.1.0",

pages/index.vue

@@ -1,12 +1,9 @@
 <template>
   <div
-    class="flex-1 content-stretch bg-whitewashed-fence-100 dark:bg-whitewashed-fence-900 relative z-0 grid items-stretch justify-items-stretch overflow-hidden"
+    class="flex-1 content-stretch relative z-0 grid items-stretch justify-items-stretch overflow-hidden"
   >
     <div
-      class="bg-red-cray-100 dark:bg-red-cray-900 absolute top-[-100vmax] left-[-100vmax] -z-10 h-[200vmax] w-[200vmax] rounded-full blur-[200vmax]"
-    />
-    <div
-      class="bg-mirage-of-violets-200 dark:bg-mirage-of-violets-900 absolute bottom-[-120vmax] right-[-120vmax] -z-10 h-[200vmax] w-[200vmax] rounded-full blur-[200vmax]"
+      class="absolute -z-10 left-0 right-0 top-0 h-96 bg-gradient-to-b from-orange-400 via-red-200 dark:from-violet-700 dark:via-fuchsia-950 to-sand-1 opacity-60"
     />
 
     <div
@@ -20,7 +17,7 @@
             Hi!<br />
             My name is
             <span
-              class="before:bg-red-cray-400 dark:before:bg-red-cray-500 relative z-10 ml-2 inline-block text-white before:absolute before:-top-0 before:-left-2 before:-bottom-0 before:-right-2 before:-z-10 before:block dark:text-white"
+              class="before:bg-orange-400 dark:before:bg-violet-600 relative z-10 ml-2 inline-block text-white before:absolute before:-top-0 before:left-2 before:-bottom-0 before:right-2 before:-z-10 before:block dark:text-white before:scale-110 before:rotate-[-2deg]"
               >Blake Kostner</span
             ><br />
             and I’m a Site Reliability Engineer.
@@ -34,10 +31,10 @@
 
           <p class="mt-4 -ml-2">
             <span
-              class="inline-flex items-center rounded-full bg-red-100 px-3 py-0.5 text-sm font-bold text-red-900 dark:bg-red-900 dark:text-red-100"
+              class="inline-flex items-center rounded-full bg-red-100 px-3 py-0.5 text-sm font-bold text-red-700 dark:bg-red-600/5 dark:text-red-400 dark:ring-1 dark:ring-inset dark:ring-red-400/20"
             >
               <svg
-                class="-ml-1 mr-1.5 h-2 w-2 text-red-400/75"
+                class="-ml-1 mr-1.5 h-3 w-3 fill-red-500 dark:fill-red-400"
                 fill="currentColor"
                 viewBox="0 0 8 8"
               >