src/App.vue

@@ -5,7 +5,6 @@ import SiteHeader from '@/components/SiteHeader.vue'
 import HomeView from '@/components/HomeView.vue'
 import NotFoundView from '@/components/NotFoundView.vue'
 import PlaygroundView from '@/components/PlaygroundView.vue'
-import RetroScreenOverlay from '@/components/RetroScreenOverlay.vue'
 
 const routes: { [index: string]: Component } = {
   '/': HomeView,
@@ -20,7 +19,6 @@ window.addEventListener('hashchange', () => {
 </script>
 
 <template>
-  <RetroScreenOverlay />
   <SiteHeader />
   <main>
     <component :is="routes[currentPath.slice(1) || '/'] || NotFoundView" />

src/AppNotFound.vue

@@ -1,11 +1,9 @@
 <script lang="ts" setup>
 import SiteHeader from '@/components/SiteHeader.vue'
 import NotFoundView from '@/components/NotFoundView.vue'
-import RetroScreenOverlay from '@/components/RetroScreenOverlay.vue'
 </script>
 
 <template>
-  <RetroScreenOverlay />
   <SiteHeader />
   <main>
     <NotFoundView />

src/assets/main.css

@@ -1,32 +1,30 @@
 :root {
-    --bg-color: #141414;
+  --bg-color: #141414;
-    --fg-color: #ff00ff;
+  --fg-color: #ff00ff;
-    --fg-color-header: #00ffff;
+  --fg-color-header: #00ffff;
-    --fg-color-link: #ffff40;
+  --fg-color-link: #ffff40;
-    --fg-color-link-visited: #ff8040;
+  --fg-color-link-visited: #ff8040;
 }
 
 html,
 body {
-    font-family: 'Courier New', monospace;
+  font-family: 'Courier New', monospace;
-    background: var(--bg-color);
+  background: var(--bg-color);
-    color: var(--fg-color);
+  color: var(--fg-color);
-    font-size: 12pt;
+  font-size: 12pt;
-    margin: auto;
+  margin: auto;
-    padding: 0.5em;
+  padding: 0.5em;
 }
 
 button {
-    font-family: 'Courier New', monospace;
+  font-family: 'Courier New', monospace;
-    font-weight: bold;
+  margin: 0.5em 0;
-    font-size: 1.1em;
+  padding: 0.5em 0.75em;
-    margin: 0.5em 0;
-    padding: 0.5em 0.75em;
 }
 
 progress::-webkit-progress-bar,
 progress::-moz-progress-bar {
-    background: var(--fg-color);
+  background: var(--fg-color);
 }
 
 h1,
@@ -35,20 +33,20 @@ h3,
 h4,
 h5,
 h6 {
-    margin: 0 0 0.25em;
+  margin: 0 0 0.25em;
-    color: var(--fg-color-header);
+  color: var(--fg-color-header);
 }
 
 a {
-    color: var(--fg-color-link);
+  color: var(--fg-color-link);
 }
 
 a:visited {
-    color: var(--fg-color-link-visited);
+  color: var(--fg-color-link-visited);
 }
 
 section {
-    margin-top: 2em;
+  margin-top: 2em;
 }
 
 section h2,
@@ -56,5 +54,5 @@ h3,
 h4,
 h5,
 h6 {
-    border-bottom: 2px solid color(from var(--fg-color-header) srgb r g b / 30%);
+  border-bottom: 2px solid color(from var(--fg-color-header) srgb r g b / 30%);
 }

src/components/NotFoundView.vue

@@ -4,7 +4,7 @@
   <section>
     <h2>Oops... Page Not Found</h2>
     <p>I couldn't seem to find that.</p>
-    <p>You should probably just head back <a href="/#/">Home</a>.</p>
+    <p>You should probably just head back <a href="/">Home</a>.</p>
   </section>
 </template>
 

src/components/RetroScreenOverlay.vue

@@ -1,27 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue'
-
-const isActive = ref(false)
-
-onMounted(() => {
-  isActive.value = !window.matchMedia('(prefers-contrast: more)').matches
-})
-</script>
-
-<template>
-  <div :class="{ lines: isActive }"></div>
-</template>
-
-<style scoped>
-.lines {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: url('../assets/lines.png') transparent;
-  opacity: 0.25;
-  z-index: 99;
-  pointer-events: none;
-}
-</style>