From 0335b34ed970f4c3e32f9c1173d2f49ccde37c98 Mon Sep 17 00:00:00 2001
From: Jordan Goulder <jordan@jordangoulder.com>
Date: Sun, 12 Jan 2025 23:28:14 -0500
Subject: [PATCH] Add retro overlay

---
 resources/lines.png                   | Bin 0 -> 450 bytes
 resources/lines.xcf                   | Bin 0 -> 1112 bytes
 src/App.vue                           |   2 ++
 src/AppNotFound.vue                   |   2 ++
 src/assets/lines.png                  | Bin 0 -> 450 bytes
 src/assets/main.css                   |  44 ++++++++++++++------------
 src/components/RetroScreenOverlay.vue |  27 ++++++++++++++++
 7 files changed, 54 insertions(+), 21 deletions(-)
 create mode 100644 resources/lines.png
 create mode 100644 resources/lines.xcf
 create mode 100644 src/assets/lines.png
 create mode 100644 src/components/RetroScreenOverlay.vue

diff --git a/resources/lines.png b/resources/lines.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf88eb3aea6c6b4bd2026fd4e3ee620a571913cd
GIT binary patch
literal 450
zcmV;z0X_bSP)<h;3K|Lk000e1NJLTq001BW001Be1ONa4*>kdg00004XF*Lt006O%
z3;baP0003ZX+uL$Nkc;*aB^>EX>4Tx04R~2kg-a`P!xv0w4x$*QXIq~gSd4xI5=1p
zf>0sG3Pz_iX|b5Zkfapfz&Fu{=^zNcgR6qG|BVg~X7Rw`d>qdC|8p<2>?BIdg#$>l
zs&M^Ya2Z_LOK(_oXtTp!7?pX?^ZGQ#=c}d_FI}V6JojfT#-lP)oh!2_FDkJ1#m=nC
z4J%o{9r#D$2eBQeSuB1MZ^vnD*zEdgGL3#T%{8l|?Bd+?m0P%+aEgb`kSP-qD!Qtf
zI>$Kds=5?}+*1;%CXCdZX{O>vR7%O^P&5$fng+kk+Ru~AP#P0y8HYPkX&OJw|9-E1
zoYkAw#yk&;ux_=Lt??M%AE6V#+B2+NH+U`oep|zgQ_uYKjbAUwP>B1Lcx?ax010qN
zS#tmYE+YT{E+YYWr9XB6000McNliru=>ZJ`H6Cc~PzwM603%66K~zY`V`TWxFtC7e
s)CHq17<Iv@3r1Zq>Vi=h3^Er00Q@`<0i2wUivR!s07*qoM6N<$f+{|`H2?qr

literal 0
HcmV?d00001

diff --git a/resources/lines.xcf b/resources/lines.xcf
new file mode 100644
index 0000000000000000000000000000000000000000..6c627c3fc4adba715eb960bfd5d6e7985242a407
GIT binary patch
literal 1112
zcmds#%T9wp6o#iQ-dY<qURK5)Z%Ml#DLZ#2x;MUop%iemKm*jYD_!{rE`0!>$~US1
z&m|cXcis7ukMqr(DHMiKM^l-5fxHYIM<G(tK>YxFpuxdD*u2FQK@NZg*1%EaTz3e*
zK{v#uZ7+!;Kh7~$Y!bCwbado~z8$7|%sDo``dPl1_>v_PJs!0CLFgruB$a+q>@*y?
zGAs^ffcEH*wj;&C_B@-qo{mFtFj$y_%I#UKbJ4N)=x1D?1VQHKGURf@OZ~l=|JX?5
zp&YbMjLBLBLRz46<9g3wn#|(jp_`au)&XDT5}eYn-*Cq32At>1*{U2xof&>?c-wF>
zykq#b;a$Ub;Jja*4G8be>t9xmqAuu51ohnT`g5qC2`#4iRMz4wIFo8k^BrDCAOvZC
zmQ|^q>Md7dwO{jZNCmfV{Vvg&5BXO+#wRmkamVWjgj73bUBT-Jgdo;^S(SRlH$#2^
Dy`PeI

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index de635b1..98f1130 100644
--- a/src/App.vue
+++ b/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" />
diff --git a/src/AppNotFound.vue b/src/AppNotFound.vue
index 96980f3..260ac18 100644
--- a/src/AppNotFound.vue
+++ b/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 />
diff --git a/src/assets/lines.png b/src/assets/lines.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf88eb3aea6c6b4bd2026fd4e3ee620a571913cd
GIT binary patch
literal 450
zcmV;z0X_bSP)<h;3K|Lk000e1NJLTq001BW001Be1ONa4*>kdg00004XF*Lt006O%
z3;baP0003ZX+uL$Nkc;*aB^>EX>4Tx04R~2kg-a`P!xv0w4x$*QXIq~gSd4xI5=1p
zf>0sG3Pz_iX|b5Zkfapfz&Fu{=^zNcgR6qG|BVg~X7Rw`d>qdC|8p<2>?BIdg#$>l
zs&M^Ya2Z_LOK(_oXtTp!7?pX?^ZGQ#=c}d_FI}V6JojfT#-lP)oh!2_FDkJ1#m=nC
z4J%o{9r#D$2eBQeSuB1MZ^vnD*zEdgGL3#T%{8l|?Bd+?m0P%+aEgb`kSP-qD!Qtf
zI>$Kds=5?}+*1;%CXCdZX{O>vR7%O^P&5$fng+kk+Ru~AP#P0y8HYPkX&OJw|9-E1
zoYkAw#yk&;ux_=Lt??M%AE6V#+B2+NH+U`oep|zgQ_uYKjbAUwP>B1Lcx?ax010qN
zS#tmYE+YT{E+YYWr9XB6000McNliru=>ZJ`H6Cc~PzwM603%66K~zY`V`TWxFtC7e
s)CHq17<Iv@3r1Zq>Vi=h3^Er00Q@`<0i2wUivR!s07*qoM6N<$f+{|`H2?qr

literal 0
HcmV?d00001

diff --git a/src/assets/main.css b/src/assets/main.css
index 8ec87e6..9e52fad 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,30 +1,32 @@
 :root {
-  --bg-color: #141414;
-  --fg-color: #ff00ff;
-  --fg-color-header: #00ffff;
-  --fg-color-link: #ffff40;
-  --fg-color-link-visited: #ff8040;
+    --bg-color: #141414;
+    --fg-color: #ff00ff;
+    --fg-color-header: #00ffff;
+    --fg-color-link: #ffff40;
+    --fg-color-link-visited: #ff8040;
 }
 
 html,
 body {
-  font-family: 'Courier New', monospace;
-  background: var(--bg-color);
-  color: var(--fg-color);
-  font-size: 12pt;
-  margin: auto;
-  padding: 0.5em;
+    font-family: 'Courier New', monospace;
+    background: var(--bg-color);
+    color: var(--fg-color);
+    font-size: 12pt;
+    margin: auto;
+    padding: 0.5em;
 }
 
 button {
-  font-family: 'Courier New', monospace;
-  margin: 0.5em 0;
-  padding: 0.5em 0.75em;
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+    font-size: 1.1em;
+    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,
@@ -33,20 +35,20 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 0 0 0.25em;
-  color: var(--fg-color-header);
+    margin: 0 0 0.25em;
+    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,
@@ -54,5 +56,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%);
 }
diff --git a/src/components/RetroScreenOverlay.vue b/src/components/RetroScreenOverlay.vue
new file mode 100644
index 0000000..4a976fc
--- /dev/null
+++ b/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>