Changed styles. Added error page.

app.config.ts

@@ -0,0 +1,76 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      pixelgreen: 'pixel-green',
+    },
+    input: {
+      compoundVariants: [
+        {
+          color: 'pixelgreen',
+          variant: [
+            'outline',
+            'subtle'
+          ],
+          class: 'focus-visible:ring-2 focus-visible:ring-inset ring-pixelgreen focus-visible:ring-pixelgreen'
+        }
+      ],
+      variants: {
+        variant: {
+          outline: 'text-highlighted bg-black ring ring-inset ring-accented',
+          soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
+          subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
+          ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
+          none: 'text-highlighted bg-transparent'
+        },
+      },
+      defaultVariants: {
+        size: 'md',
+        color: 'pixelgreen',
+        variant: 'outline'
+      }
+    },
+    textarea: {
+      compoundVariants: [
+        {
+          color: 'pixelgreen',
+          variant: [
+            'outline',
+            'subtle'
+          ],
+          class: 'focus-visible:ring-2 focus-visible:ring-inset ring-pixelgreen focus-visible:ring-pixelgreen'
+        }
+      ],
+      variants: {
+        variant: {
+          outline: 'text-highlighted bg-black ring ring-inset ring-accented',
+          soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
+          subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
+          ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
+          none: 'text-highlighted bg-transparent'
+        },
+      },
+      defaultVariants: {
+        size: 'md',
+        color: 'pixelgreen',
+        variant: 'outline'
+      }
+    },
+    toast: {
+      slots: {
+        root: 'relative group overflow-hidden bg-black shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none',
+      },
+      variants: {
+        color: {
+          pixelgreen: {
+            root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-pixelgreen',
+            icon: 'text-pixelgreen',
+            progress: 'bg-pixelgreen'
+          }
+        },
+      },
+      defaultVariants: {
+        color: 'pixelgreen'
+      }
+    }
+  }
+})

assets/main.css

@@ -1,88 +1,444 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
 @import "tailwindcss";
 @import "@nuxt/ui";
 
-/* Global overrides for Nuxt UI components */
+:root {
-/*.nuxt-ui-button,
+  /* Color variables */
-.nuxt-ui-link,
+  --pixel-green: #00ff00;
-[class*="nuxt-ui-button"],
+  --pixel-green-light: #55ff55;
-[class*="nuxt-ui-link"] {
+  --pixel-green-hover: #5f5;
-  cursor: default !important;
+  --bg-color: #000;
-}*/
+  --text-color: #fff;
+  --text-muted: #aaa;
   
-/* For UButton and ULink without nuxt-ui classes */
+  /* Spacing and sizing */
-/*button, a {
+  --shadow-sm: 2px 2px 0 var(--pixel-green);
-  cursor: default !important;
+  --shadow-md: 3px 3px 0 var(--pixel-green);
-}*/
+  --shadow-lg: 4px 4px 0 var(--pixel-green);
+  --shadow-xl: 6px 6px 0 var(--pixel-green);
   
-.prose {
+  /* Border styles */
-  max-width: 65ch;
+  --border-sm: 1px solid var(--pixel-green);
-  margin: 0 auto;
+  --border-md: 2px solid var(--pixel-green);
-  padding: 1rem;
+  
+  /* Typography */
+  --base-font-size: 12px;
+  --pixel-font: 'Press Start 2P', monospace;
 }
 
-.prose h1 {
+@theme static {
-  font-size: 2.25rem;
+  --font-sans: var(--pixel-font);
+  --font-mono: var(--pixel-font);
+  --breakpoint-3xl: 1920px;
+  --color-pixel-green-50: #eaffea;
+  --color-pixel-green-100: #d1ffd1;
+  --color-pixel-green-200: #a3ffa3;
+  --color-pixel-green-300: #75ff75;
+  --color-pixel-green-400: var(--pixel-green);
+  --color-pixel-green-500: var(--pixel-green);
+  --color-pixel-green-600: #00cc00;
+  --color-pixel-green-700: #009900;
+  --color-pixel-green-800: #007700;
+  --color-pixel-green-900: #005500;
+  --color-pixel-green-950: #003300;
+  --radius: 0px;
+  --shadow-color: 0, 255, 0;
+  --shadow: var(--shadow-lg);
+  --ui-primary: var(--color-green-500);
+  --ui-on-primary: #000000;
+}
+
+/* Base styles */
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  font-family: var(--pixel-font);
+  image-rendering: pixelated;
+  letter-spacing: 0.05em;
+  font-size: var(--base-font-size);
+  line-height: 1.6;
+}
+
+/* Responsive typography base */
+@media (min-width: 640px) { body { font-size: 13px; } }
+@media (min-width: 768px) { body { font-size: 14px; } }
+@media (min-width: 1024px) { body { font-size: 16px; } }
+
+/* Global transitions */
+a, button, .transition-element {
+  transition: all 0.15s steps(2) !important;
+}
+
+/* Global UI component styling */
+.nuxt-ui-button, .nuxt-ui-link, button, a {
+  font-family: var(--pixel-font);
+}
+
+/* Layout components */
+/* Navbar */
+header, .navbar, nav {
+  background-color: var(--bg-color);
+  border-bottom: var(--border-md);
+  padding: 0.4rem;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+@media (min-width: 640px) { header, .navbar, nav { padding: 0.5rem; } }
+@media (min-width: 768px) { header, .navbar, nav { padding: 0.7rem; } }
+
+nav {
+  border-bottom: none;
+  width: 100%;
+}
+
+nav ul {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+
+@media (max-width: 640px) { nav ul { gap: 0.75rem; } }
+
+/* Footer */
+footer {
+  background-color: var(--bg-color);
+  border-top: var(--border-sm);
+  padding: 0.5rem;
+  font-size: 0.5rem;
+  text-align: center;
+}
+
+@media (min-width: 640px) {
+  footer {
+    border-top: 1.5px solid var(--pixel-green);
+    font-size: 0.55rem;
+    padding: 0.6rem;
+    text-align: left;
+  }
+}
+
+@media (min-width: 768px) {
+  footer {
+    border-top: var(--border-md);
+    font-size: 0.6rem;
+    padding: 0.8rem;
+  }
+}
+
+@media (min-width: 1024px) { footer { font-size: 0.7rem; padding: 1rem; } }
+
+/* Typography */
+/* Home title styling */
+.home-title {
+  font-size: 1.75rem;
   font-weight: bold;
-  margin-bottom: 1rem;
+  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
+  margin: 1rem 0;
+  text-align: center;
+  line-height: 1.4;
 }
 
-.prose h2 {
+@media (min-width: 640px) { .home-title { font-size: 2.25rem; margin: 1.5rem 0; } }
-  font-size: 1.5rem;
+@media (min-width: 768px) { .home-title { font-size: 2.75rem; margin: 2rem 0; } }
+@media (min-width: 1024px) { .home-title { font-size: 3.5rem; } }
+
+/* Content typography */
+.prose h1, .prose h2, .prose h3 {
   font-weight: bold;
-  margin-top: 2rem;
+  color: var(--pixel-green);
-  margin-bottom: 1rem;
+  line-height: 1.4;
 }
 
-/* Remove link styling from headings in Markdown content */
+.prose h1 { font-size: 1.25rem; margin-bottom: 0.75rem; }
-.prose h2 a,
+.prose h2 { font-size: 1.1rem; margin-top: 1.25rem; margin-bottom: 0.6rem; }
-.prose h3 a,
+.prose h3 { font-size: 1rem; margin-top: 1rem; margin-bottom: 0.5rem; }
-.prose h4 a,
+
-.prose h5 a,
+@media (min-width: 640px) {
-.prose h6 a {
+  .prose h1 { font-size: 1.5rem; margin-bottom: 1rem; }
+  .prose h2 { font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: 0.8rem; }
+  .prose h3 { font-size: 1.1rem; }
+}
+
+@media (min-width: 768px) {
+  .prose h1 { font-size: 2rem; margin-bottom: 1.25rem; line-height: 1.5; }
+  .prose h2 { font-size: 1.5rem; margin-top: 1.75rem; margin-bottom: 1rem; line-height: 1.5; }
+  .prose h3 { font-size: 1.25rem; margin-top: 1.25rem; }
+}
+
+@media (min-width: 1024px) {
+  .prose h1 { font-size: 2.5rem; margin-bottom: 1.5rem; }
+  .prose h2 { font-size: 1.75rem; margin-top: 2rem; margin-bottom: 1.25rem; }
+  .prose h3 { font-size: 1.35rem; margin-top: 1.5rem; margin-bottom: 1rem; }
+}
+
+/* Link styling in prose */
+.prose a, .dark a { 
+  color: var(--pixel-green);
+  text-decoration: none;
+}
+
+.prose a:hover, .dark a:hover, .dark .prose a:hover { 
+  color: var(--pixel-green-hover);
+  text-decoration: none;
+}
+
+/* Remove link styling from headings */
+.prose h2 a, .prose h3 a, .prose h4 a, .prose h5 a, .prose h6 a {
   color: inherit;
   text-decoration: none;
 }
 
-.prose h2 a:hover,
+.prose h2 a:hover, .prose h3 a:hover, .prose h4 a:hover, .prose h5 a:hover, .prose h6 a:hover {
-.prose h3 a:hover,
-.prose h4 a:hover,
-.prose h5 a:hover,
-.prose h6 a:hover {
-  color: inherit;
   text-decoration: none;
 }
 
 /* Hide the # link icon that might appear on hover */
-.prose h2 a::after,
+.prose h2 a::after, .prose h3 a::after, .prose h4 a::after, .prose h5 a::after, .prose h6 a::after {
-.prose h3 a::after,
-.prose h4 a::after,
-.prose h5 a::after,
-.prose h6 a::after {
   display: none;
 }
 
 .prose p {
   margin-bottom: 1rem;
-  line-height: 1.6;
+  line-height: 1.8;
 }
 
-.prose a {
+/* Dark mode */
-  color: #1d4ed8;
+.dark .prose, .dark body, .dark nav, .dark header, .dark footer {
-  text-decoration: underline;
+  color: var(--text-color);
+  background-color: var(--bg-color);
 }
 
-.prose a:hover {
+/* Pixel UI Components */
-  color: #2563eb;
+/* Pixel bordered containers */
+.big-button, .card, .box, .pixel-border {
+  border: var(--border-md);
+  box-shadow: var(--shadow-sm);
+  transition: all 0.2s steps(2);
+  width: 100%;
+  position: relative;
+  margin: 0 0 0.75rem 0;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
-.dark .prose {
+@media (min-width: 640px) {
-  color: #e5e7eb;
+  .big-button, .card, .box, .pixel-border {
+    box-shadow: var(--shadow-md);
+    padding: 1rem;
+  }
 }
 
-.dark .prose a {
+@media (min-width: 768px) {
-  color: #60a5fa;
+  .big-button, .card, .box, .pixel-border {
+    box-shadow: var(--shadow-lg);
+    padding: 1.25rem;
+  }
 }
 
-.dark .prose a:hover {
+/* Hover effects */
-  color: #93c5fd;
+.big-button:hover, .card:hover, .box:hover, .pixel-border:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: var(--shadow-md);
+}
+
+@media (min-width: 640px) {
+  .big-button:hover, .card:hover, .box:hover, .pixel-border:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: var(--shadow-lg);
+  }
+}
+
+@media (min-width: 768px) {
+  .big-button:hover, .card:hover, .box:hover, .pixel-border:hover {
+    transform: translate(-3px, -3px);
+    box-shadow: var(--shadow-xl);
+  }
+}
+
+/* Green button */
+.green-button {
+  background-color: var(--bg-color);
+  color: var(--pixel-green);
+  border: var(--border-sm);
+  transition: all 0.2s steps(2);
+  font-family: var(--pixel-font);
+  padding: 0.3rem 0.6rem;
+  text-align: center;
+  font-size: 0.6rem;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+@media (min-width: 640px) {
+  .green-button {
+    border: 1.5px solid var(--pixel-green);
+    padding: 0.4rem 0.7rem;
+    font-size: 0.65rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .green-button {
+    border: var(--border-md);
+    padding: 0.5rem 0.8rem;
+    font-size: 0.7rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .green-button {
+    padding: 0.5rem 1rem;
+    font-size: 0.8rem;
+  }
+}
+
+.green-button:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: 1px 1px 0 var(--pixel-green);
+  color: var(--pixel-green-hover);
+}
+
+@media (min-width: 768px) {
+  .green-button:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: 2px 2px 0 var(--pixel-green);
+  }
+}
+
+/* Layout Utilities */
+/* Grid system */
+.grid {
+  display: grid;
+  grid-template-columns: 1fr; /* Single column by default */
+  gap: 0.75rem; /* Smaller gap on mobile */
+}
+
+@media (min-width: 480px) { .grid { gap: 1rem; } }
+@media (min-width: 640px) { 
+  .grid {
+    grid-template-columns: repeat(2, 1fr); /* Two columns on sm screens */
+    gap: 1.25rem;
+  }
+}
+@media (min-width: 1024px) { .grid { gap: 1.5rem; } }
+
+/* UI Component Overrides */
+/* Button adjustments */
+.nuxt-ui-button.big-button {
+  height: auto;
+  min-height: 3rem;
+}
+
+@media (min-width: 768px) { .nuxt-ui-button.big-button { min-height: 4rem; } }
+
+/* Button groups */
+.nuxt-ui-button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+@media (min-width: 640px) { .nuxt-ui-button-group { flex-wrap: nowrap; } }
+
+/* Games grid styling */
+.games-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 1rem;
+  width: 100%;
+  margin: 0 auto;
+}
+
+@media (min-width: 640px) {
+  .games-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.25rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .games-grid {
+    gap: 1.5rem;
+    padding: 0;
+  }
+}
+
+.games-grid .big-button,
+.games-grid .nuxt-ui-card {
+  max-width: 100%;
+  padding: 0.75rem;
+}
+
+@media (min-width: 640px) { .games-grid .big-button, .games-grid .nuxt-ui-card { padding: 0.85rem; } }
+@media (min-width: 768px) { .games-grid .big-button, .games-grid .nuxt-ui-card { padding: 1rem; } }
+
+/* Game cards */
+.games-grid .nuxt-ui-card {
+  border: var(--border-md);
+  box-shadow: var(--shadow-md);
+  background-color: var(--bg-color);
+  transition: all 0.2s steps(2);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.games-grid .nuxt-ui-card:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 5px 5px 0 var(--pixel-green);
+}
+
+/* Card component parts */
+.games-grid .nuxt-ui-card-header {
+  padding: 1rem !important;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 255, 0, 0.3);
+}
+
+.games-grid .nuxt-ui-card-body {
+  padding: 1rem !important;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.games-grid .nuxt-ui-card-footer {
+  padding: 1rem !important;
+  border-top: 1px solid rgba(0, 255, 0, 0.3);
+}
+
+/* Game card content */
+.games-grid img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+
+.games-grid h2 {
+  font-size: 1rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.75rem;
+  color: var(--text-color);
+}
+
+.games-grid p {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-bottom: 0;
+  flex-grow: 1;
+}
+
+.games-grid .flex.gap-4 {
+  gap: 1rem !important;
 }

components/AppFooter.vue

@@ -1,7 +1,7 @@
 <template>
-    <footer class="bg-gray-800 text-white p-4">
+    <footer class="p-4">
         <div class="flex justify-between items-center px-4 sm:px-6 md:px-8">
-            <div>© {{ new Date().getFullYear() }} <ULink to="/" class="text-white cursor-default">MarcUs7i.Net</ULink>. All rights reserved.</div>
+            <div>© {{ new Date().getFullYear() }} <ULink to="/" class="cursor-default">MarcUs7i.Net</ULink>. All rights reserved.</div>
             <div class="flex gap-4">
                 <ULink to="/discord" target="_blank">Discord</ULink>
                 <ULink v-if="config.siteLinks.github" :to="config.siteLinks.github" target="_blank">GitHub</ULink>

components/NavBar.vue

@@ -1,14 +1,14 @@
 <template>
-    <header class="bg-gray-800 text-white p-4">
+    <header class="p-4">
       <nav class="flex justify-between items-center">
         <div class="logo">
-            <ULink as="button" to="/" class="text-xl text-white cursor-default">MarcUs7i.Net</ULink>
+            <ULink as="button" to="/" class="cursor-default">MarcUs7i.Net</ULink>
         </div>
-        <ul class="flex gap-4">
+        <ul class="flex gap-4 md:gap-6">
           <li><ULink to="/about">About</ULink></li>
           <li><ULink to="/contact">Contact</ULink></li>
-          <li v-if="config.siteLinks.github"><ULink :to="config.siteLinks.github" target="_blank"><UIcon name="i-simple-icons-github" class="size-5" /></ULink></li>
+          <!--<li v-if="config.siteLinks.github"><ULink :to="config.siteLinks.github" target="_blank"><UIcon name="i-simple-icons-github" class="size-5" /></ULink></li>
-        <li><ULink to="/discord" target="_blank"><UIcon name="i-simple-icons-discord" class="size-5" /></ULink></li>
+        <li><ULink to="/discord" target="_blank"><UIcon name="i-simple-icons-discord" class="size-5" /></ULink></li>-->
         </ul>
       </nav>
     </header>
@@ -17,3 +17,10 @@
 <script setup>
 const { config } = useSiteConfig()
 </script>
+
+<style scoped>
+a {
+  font-family: 'Press Start 2P', monospace;
+  transition: all 0.2s steps(2);
+}
+</style>

content/about.md

@@ -5,11 +5,11 @@ description: 'about page of marcus7i.net'
 
 # About MarcUs7i.Net
 
-This site hosts multiple services and applications, mostly self-created, some improved by MarcUs7i
+This site hosts multiple services and applications, mostly self-made, some improved by me (MarcUs7i)
 
 ## Donations
 
-You can support me by donating to my [Ko-fi](https://ko-fi.com/marcus7i).
+You can support me by donating to my [Patreon](https://patreon.com/marcus7i).
 
 ## Contact
 

error.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const props = defineProps({
+  // eslint-disable-next-line vue/require-default-prop
+  error: Object as () => NuxtError
+})
+</script>
+
+<template>
+  
+  <NuxtLayout>
+    <div class="flex flex-col items-center justify-center gap-30 pt-20">
+      <h1 class="font-bold mt-10 heading-title">
+        {{ error?.statusCode == 404 ? "Only you and the void are here..." : "There is nothing to see here!"}}
+      </h1>
+  
+      <div class="flex items-center gap-2 mt-10">
+        <UButton
+            label="Return Home"
+            variant="outline"
+            color="pixelgreen"
+            to="/"
+            size="xl"
+            class="green-button px-8 text-lg"
+            />
+      </div>
+    </div>
+  </NuxtLayout>
+</template>
+
+<style scoped>
+.heading-title {
+  font-family: 'Press Start 2P', monospace;
+  transition: all 0.2s steps(2);
+  text-align: center;
+  font-size: 1.2rem;
+  line-height: 1.5;
+  max-width: 90%;
+  margin: 0 auto;
+}
+
+@media (min-width: 640px) {
+  .heading-title {
+    font-size: 1.5rem;
+    max-width: 80%;
+  }
+}
+
+@media (min-width: 768px) {
+  .heading-title {
+    font-size: 1.8rem;
+    max-width: 70%;
+  }
+}
+
+@media (min-width: 1024px) {
+  .heading-title {
+    font-size: 2.2rem;
+    max-width: 60%;
+  }
+}
+</style>

nuxt.config.ts

@@ -35,5 +35,19 @@ export default defineNuxtConfig({
     }
   },
 
-  compatibilityDate: '2025-03-22',
+  ui: {
+    theme: {
+      colors: [
+        'primary',
+        'pixelgreen',
+        'secondary',
+        'info',
+        'success',
+        'warning',
+        'error'
+      ]
+    }
+  },
+
+  compatibilityDate: '2025-05-29',
 })

pages/contact.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="flex flex-col items-center justify-center py-12 px-4">
+  <div class="flex flex-col items-center justify-center py-10 px-4">
-    <h1 class="text-3xl font-bold mb-12">Contact Me</h1>
+    <h1 class="text-3xl font-bold mb-9">Contact Me</h1>
     
     <div class="w-full max-w-2xl">
       <UForm 
         :schema="schema" 
         :state="state" 
-        class="space-y-8 bg-gray-800 p-8 rounded-lg shadow-lg" 
+        class="space-y-8 p-8 rounded-lg shadow-lg" 
         @submit="onSubmit"
       >
         <UFormField 
@@ -57,8 +57,7 @@
             type="submit" 
             :loading="isSubmitting"
             size="lg"
-            color="primary"
+            class="green-button px-8 py-2"
-            class="px-8 py-2"
           >
             Send Message
           </UButton>
@@ -69,21 +68,18 @@
 </template>
 
 <script setup lang="ts">
+import { z } from 'zod'
+
 useHead({
   title: 'Contact'
 })
 
-import { z } from 'zod'
-import type { FormSubmitEvent } from '@nuxt/ui'
-
 const schema = z.object({
   email: z.string().email({ message: 'Please enter a valid email address' }).min(1, { message: 'Email is required' }),
   subject: z.string().min(3, { message: 'Subject must be at least 3 characters' }),
   message: z.string().min(10, { message: 'Message must be at least 10 characters' })
 })
 
-type Schema = z.infer<typeof schema>
-
 const state = reactive({
   email: '',
   subject: '',
@@ -93,7 +89,7 @@ const state = reactive({
 const isSubmitting = ref(false)
 const toast = useToast()
 
-async function onSubmit(event: FormSubmitEvent<Schema>) {
+async function onSubmit() {
   try {
     isSubmitting.value = true
     
@@ -123,14 +119,17 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
       title: 'Message Sent!',
       description: 'Your message has been sent successfully.',
       icon: 'i-heroicons-check-circle',
-      color: 'success'
+      color: 'pixelgreen',
+      ui: {
+        root: '',
+      }
     })
     
     state.email = ''
     state.subject = ''
     state.message = ''
     
-  } catch (error) {
+  } catch {
     toast.add({
       title: 'Error',
       description: 'Something went wrong. Please try again.',

pages/discord.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="flex flex-col items-center justify-center min-h-screen px-4">
+  <div class="flex flex-col items-center justify-center min-h-[80vh] px-4">
     <!-- Title -->
     <h1 class="text-2xl font-bold mb-8">Redirecting to Discord...</h1>
     
     <!-- Progress bar -->
     <div class="w-full max-w-md mb-12">
-      <UProgress v-model="progress" color="primary" size="lg" />
+      <UProgress v-model="progress" color="pixelgreen" size="lg"/>
       <p class="text-center mt-2 text-sm text-gray-500">
         Redirecting in {{ Math.ceil(remainingTime) }} seconds...
       </p>
@@ -14,7 +14,7 @@
     <UButton
       size="xl"
       :to="discordLink"
-      class="mt-4 text-lg px-8 py-4"
+      class="green-button mt-4 text-lg px-8 py-4"
       icon="i-simple-icons-discord"
     >
       Don't wait - Join Now
@@ -29,7 +29,7 @@ useHead({
 
 const { config } = useSiteConfig()
 
-const discordLink = ref(config.siteLinks['discord-invite'] || 'https://discord.gg/e37aq2wc66')
+const discordLink = computed(() => config.siteLinks?.['discord-invite'] || '/maintenance')
 
 // Progress state
 const progress = ref(0)

pages/games.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="flex flex-col items-center justify-center gap-8 pt-8">
-    <h1 class="font-bold text-5xl text-[--ui-primary] mt-10">
+    <h1 class="font-bold text-5xl mt-10">
       Games
     </h1>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl">
+    <div class="games-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl">
       <UCard
         v-for="game in games"
         :key="game.title"
-        class="bg-gray-900 text-white shadow-lg"
+        class="big-button shadow-lg"
         :ui="{ 
-          root: 'bg-gray-900 text-white flex flex-col h-full shadow-lg rounded-lg ring-1 ring-gray-700',
+          root: 'flex flex-col shadow-lg rounded-lg ring-1',
           header: 'p-4 pb-0',
           body: 'flex-grow p-4 pt-2',
           footer: 'p-4 pt-0'
@@ -34,28 +34,26 @@
           </UBadge>
         </div>
 
-        <!-- Game Title -->
+        <div class="card-content">
-        <h2 class="text-xl font-bold mt-4">{{ game.title }}</h2>
+          <h2 class="text-xl mt-4">{{ game.title }}</h2>
+          <p class="mt-2">{{ game.description }}</p>
+        </div>
 
-        <!-- Game Description -->
+        <div class="card-footer">
-        <p class="text-gray-400 mt-2">{{ game.description }}</p>
-
-        <!-- Separator -->
           <USeparator class="my-3" />
-
-        <!-- Game Links -->
           <div class="flex gap-4 mt-2">
             <a
               v-for="link in game.url || []"
               :key="link.url"
               :href="link.url"
               target="_blank"
-            class="text-blue-400 hover:text-blue-300 flex items-center gap-2 transition-colors"
+              class="flex items-center gap-2 transition-colors"
             >
               <UIcon :name="link.logo" class="text-lg" />
               <span class="text-sm">{{ link.host }}</span>
             </a>
           </div>
+        </div>
       </UCard>
     </div>
   </div>
@@ -69,7 +67,7 @@ const games = siteConfig.games
 const imageCache = ref(new Map())
 
 function getBadgeColor(status: string) {
-  if (status === 'Released') return 'success'
+  if (status === 'Released') return 'pixelgreen'
   if (status === 'Abandoned') return 'error'
   return 'warning'
 }

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col items-center justify-center gap-8 pt-8">
-      <h1 class="font-bold text-5xl text-(--ui-primary) mt-10">
+      <h1 class="mt-10 home-title">
         MarcUs7i.Net
       </h1>
   
@@ -11,31 +11,32 @@
                 icon="i-simple-icons-discord"
                 to="/discord"
                 target="_blank"
+                class="green-button"
             />
 
             <UButton
                 v-if="config.siteLinks.github"
                 label="GitHub"
-                color="neutral"
                 variant="outline"
                 icon="i-simple-icons-github"
                 :to="config.siteLinks.github"
                 target="_blank"
+                class="green-button"
             />
 
             <UButton
                 v-if="config.siteLinks['status-page']"
                 label="Status"
-                color="neutral"
                 icon="i-simple-icons-statuspage"
                 :to="config.siteLinks['status-page']"
                 target="_blank"
+                class="green-button"
             />
         </UButtonGroup>
       </div>
 
-      <!-- 2x2 Grid of Smaller Buttons -->
+      <!-- Responsive Grid - 1 column on mobile, 2 columns on larger screens -->
-      <div class="grid grid-cols-2 gap-4 pt-16 max-w-3xl">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-10 sm:pt-16 max-w-3xl px-4 sm:px-0">
         <UButton
             v-for="button in config.buttons"
             :key="button.url"
@@ -45,7 +46,7 @@
         >
             <div class="flex flex-col gap-2">
               <div class="flex items-center gap-3">
-                  <UIcon :name="button.icon" class="w-5 h-5 text-green-500" />
+                  <UIcon :name="button.icon" class="w-5 h-5" />
                   <span class="label">{{ button.title }}</span>
               </div>
               <span v-if="button.description" class="description">
@@ -75,19 +76,14 @@ const { config } = useSiteConfig()
   min-height: 3.5rem; /* h-48 */
   width: 100%;
   text-align: left;
+  box-shadow: 4px 4px 0 #0f0;
   border-radius: 0.5rem; /* rounded-lg */
-  border: 1px solid rgb(55, 65, 81); /* border border-gray-700 */
+  border: 2px solid #0f0;
-  background-color: rgb(31, 41, 55); /* bg-gray-800 */
+  background-color: #000;
   color: white;
   transition: all 0.3s;
 }
 
-.big-button:hover {
-  border-color: rgb(34, 197, 94); /* border-green-500 */
-  background-color: rgb(17, 24, 39); /* bg-gray-900 */
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
-}
-
 .label {
   font-size: 1.125rem; /* text-lg */
   font-weight: 600; /* font-semibold */
@@ -95,7 +91,7 @@ const { config } = useSiteConfig()
 }
 
 .description {
-  font-size: 0.875rem; /* text-sm */
+  font-size: 0.75rem;
-  color: rgb(156, 163, 175); /* text-gray-400 */
+  color: rgb(156, 163, 175);
 }
 </style>

pages/maintenance.vue

@@ -1,17 +1,17 @@
 <template>
     <div class="flex flex-col items-center justify-center gap-30 pt-20">
-      <h1 class="font-bold text-5xl text-(--ui-primary) mt-10">
+      <h1 class="font-bold heading-title mt-10">
-        This site is in maintenance!
+        This page is in maintenance!
       </h1>
   
       <div class="flex items-center gap-2 mt-16">
         <UButton
             label="Return Home"
             variant="outline"
-            color="neutral"
+            color="pixelgreen"
             to="/"
             size="xl"
-            class="px-8 text-lg"
+            class="green-button px-8 text-lg"
             />
       </div>
     </div>
@@ -22,3 +22,33 @@ useHead({
   title: 'Maintenance'
 })
 </script>
+
+<style scoped>
+.heading-title {
+  font-family: 'Press Start 2P', monospace;
+  transition: all 0.2s steps(2);
+  text-align: center;
+  font-size: 1.2rem;
+  line-height: 1.5;
+  margin: 0 auto;
+}
+
+@media (min-width: 640px) {
+  .heading-title {
+    font-size: 1.8rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .heading-title {
+    font-size: 2.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .heading-title {
+    font-size: 3rem;
+    max-width: 100%;
+  }
+}
+</style>

tailwind.config.js

@@ -10,9 +10,10 @@ export default {
     "./content/**/*.md",
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        pixel: ['"Press Start 2P"', 'monospace'],
+      },
+    },
   },
-  plugins: [
-    require('@tailwindcss/typography'),
-  ],
 }