Add retro overlay

src/App.vue

@@ -5,6 +5,7 @@ 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,
@@ -19,6 +20,7 @@ window.addEventListener('hashchange', () => {
 </script>
 
 <template>
+  <RetroScreenOverlay />
   <SiteHeader />
   <main>
     <component :is="routes[currentPath.slice(1) || '/'] || NotFoundView" />

src/AppNotFound.vue

@@ -1,9 +1,11 @@
 <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

@@ -18,6 +18,8 @@ body {
 
 button {
     font-family: 'Courier New', monospace;
+    font-weight: bold;
+    font-size: 1.1em;
     margin: 0.5em 0;
     padding: 0.5em 0.75em;
 }

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

@@ -0,0 +1,27 @@
+<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>