refactor(docs): Removed unused colors from tailwind.config

style(docs): Added styling for code elements in /release-notes

docs/components/IntroBanner.vue

@@ -38,7 +38,7 @@ function generateIconNames() {
     class="mx-auto grid h-screen w-[90%] place-content-center gap-y-20 lg:w-3/4"
   >
     <h1 class="text-center font-serif text-5xl text-copy-900 lg:text-7xl">
-      <span class="text-secondary-500">Phosphor Icons</span> meets
+      <span class="text-accent-500">Phosphor Icons</span> meets
       <span class="text-primary-500">Nuxt</span>
     </h1>
 
@@ -84,7 +84,7 @@ function generateIconNames() {
       </button>
 
       <NuxtLink
-        class="flex w-full items-center justify-center gap-x-2 rounded-full border border-secondary-500 p-3 text-secondary-500 transition hover:bg-secondary-500 hover:text-copy-900 lg:w-[200px] lg:justify-around lg:gap-x-0"
+        class="flex w-full items-center justify-center gap-x-2 rounded-full border border-accent-500 p-3 text-accent-500 transition hover:bg-accent-500 hover:text-copy-900 lg:w-[200px] lg:justify-around lg:gap-x-0"
         to="/release-notes"
         >Release Notes <LazyPhosphorIconArrowRight size="20"
       /></NuxtLink>

docs/pages/release-notes.vue

@@ -3,26 +3,20 @@ defineOgImageComponent(
   "Page",
   {
     title: "Release Notes",
-    description: "Release notes",
+    description: "Don't miss out on improvements and new features",
   },
   { fonts: ["Lora:700", "Open Sans:400"] },
 );
 </script>
 
 <template>
-  <main class="space-y-20 py-20">
-    <div class="mx-auto w-[90%] lg:w-3/4">
-      <NuxtLink
-        to="/"
-        class="flex w-fit items-center gap-x-1 rounded-full border border-secondary-500 p-3 text-secondary-500 transition hover:bg-secondary-500 hover:text-copy-900"
-        ><LazyPhosphorIconArrowLeft size="20" /> Go back</NuxtLink
-      >
-    </div>
-    <ContentDoc
-      class="mx-auto min-h-screen w-[90%] space-y-8 lg:w-1/2"
-      id="release-notes"
-      path="/release-notes"
-    />
+  <main class="mx-auto min-h-screen w-[90%] space-y-20 py-20 lg:w-1/2">
+    <NuxtLink
+      to="/"
+      class="flex w-fit items-center gap-x-1 rounded-full border border-accent-500 p-3 text-accent-500 transition hover:bg-accent-500 hover:text-copy-900"
+      ><LazyPhosphorIconArrowLeft size="20" /> Go back</NuxtLink
+    >
+    <ContentDoc class="space-y-8" id="release-notes" path="/release-notes" />
   </main>
 </template>
 
@@ -32,6 +26,10 @@ defineOgImageComponent(
     @apply text-accent-500 hover:underline;
   }
 
+  code {
+    @apply rounded-lg bg-accent-500 px-3 py-1 text-sm;
+  }
+
   h1,
   h2,
   h3,
@@ -52,6 +50,10 @@ defineOgImageComponent(
     @apply text-2xl lg:text-3xl;
   }
 
+  h4 {
+    @apply text-xl font-bold lg:text-2xl;
+  }
+
   p {
     @apply text-pretty  text-lg leading-loose tracking-wide text-accent-900;
   }

docs/tailwind.config.ts

@@ -1,13 +1,13 @@
-import type { Config } from "tailwindcss";
 import { tailwindcssPaletteGenerator } from "@bobthered/tailwindcss-palette-generator";
+import type { Config } from "tailwindcss";
 
 export default {
   content: [],
   theme: {
     extend: {
       colors: tailwindcssPaletteGenerator({
-        colors: ["#b5ac83", "#00DC82", "#3c402b", "#0a100d"],
-        names: ["accent", "primary", "secondary", "copy"],
+        colors: ["#b5ac83", "#00DC82", "#0a100d"],
+        names: ["accent", "primary", "copy"],
       }),
       fontFamily: {
         mono: ["Courier Prime", "monospace"],