diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..7337a95
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,28 @@
+# ---> Vim
+# Swap
+[._]*.s[a-v][a-z]
+!*.svg # comment out if you don't need vector files
+[._]*.sw[a-p]
+[._]s[a-rt-v][a-z]
+[._]ss[a-gi-z]
+[._]sw[a-p]
+
+# Session
+Session.vim
+Sessionx.vim
+
+# Temporary
+.netrwhist
+*~
+# Auto-generated tag files
+tags
+# Persistent undo
+[._]*.un~
+
+backup
+*.exe
+*.dll
+*.world
+coverage
+coverage/*
+.venv
diff --git a/go.mod b/go.mod
new file mode 100644
index 0000000..1d62f14
--- /dev/null
+++ b/go.mod
@@ -0,0 +1,32 @@
+module zedshaw-games/fibertest
+
+go 1.24.2
+
+require github.com/gofiber/fiber/v2 v2.52.8
+
+require (
+ github.com/a-h/parse v0.0.0-20250122154542-74294addb73e // indirect
+ github.com/a-h/templ v0.3.865 // indirect
+ github.com/andybalholm/brotli v1.1.1 // indirect
+ github.com/cenkalti/backoff/v4 v4.3.0 // indirect
+ github.com/cli/browser v1.3.0 // indirect
+ github.com/fatih/color v1.16.0 // indirect
+ github.com/fsnotify/fsnotify v1.7.0 // indirect
+ github.com/google/uuid v1.6.0 // indirect
+ github.com/klauspost/compress v1.17.11 // indirect
+ github.com/mattn/go-colorable v0.1.13 // indirect
+ github.com/mattn/go-isatty v0.0.20 // indirect
+ github.com/mattn/go-runewidth v0.0.16 // indirect
+ github.com/natefinch/atomic v1.0.1 // indirect
+ github.com/rivo/uniseg v0.2.0 // indirect
+ github.com/valyala/bytebufferpool v1.0.0 // indirect
+ github.com/valyala/fasthttp v1.58.0 // indirect
+ github.com/valyala/tcplisten v1.0.0 // indirect
+ golang.org/x/mod v0.24.0 // indirect
+ golang.org/x/net v0.39.0 // indirect
+ golang.org/x/sync v0.13.0 // indirect
+ golang.org/x/sys v0.32.0 // indirect
+ golang.org/x/tools v0.32.0 // indirect
+)
+
+tool github.com/a-h/templ/cmd/templ
diff --git a/go.sum b/go.sum
new file mode 100644
index 0000000..0e135dd
--- /dev/null
+++ b/go.sum
@@ -0,0 +1,53 @@
+github.com/a-h/parse v0.0.0-20250122154542-74294addb73e h1:HjVbSQHy+dnlS6C3XajZ69NYAb5jbGNfHanvm1+iYlo=
+github.com/a-h/parse v0.0.0-20250122154542-74294addb73e/go.mod h1:3mnrkvGpurZ4ZrTDbYU84xhwXW2TjTKShSwjRi2ihfQ=
+github.com/a-h/templ v0.3.865 h1:nYn5EWm9EiXaDgWcMQaKiKvrydqgxDUtT1+4zU2C43A=
+github.com/a-h/templ v0.3.865/go.mod h1:oLBbZVQ6//Q6zpvSMPTuBK0F3qOtBdFBcGRspcT+VNQ=
+github.com/andybalholm/brotli v1.1.1 h1:PR2pgnyFznKEugtsUo0xLdDop5SKXd5Qf5ysW+7XdTA=
+github.com/andybalholm/brotli v1.1.1/go.mod h1:05ib4cKhjx3OQYUY22hTVd34Bc8upXjOLL2rKwwZBoA=
+github.com/cenkalti/backoff/v4 v4.3.0 h1:MyRJ/UdXutAwSAT+s3wNd7MfTIcy71VQueUuFK343L8=
+github.com/cenkalti/backoff/v4 v4.3.0/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
+github.com/cli/browser v1.3.0 h1:LejqCrpWr+1pRqmEPDGnTZOjsMe7sehifLynZJuqJpo=
+github.com/cli/browser v1.3.0/go.mod h1:HH8s+fOAxjhQoBUAsKuPCbqUuxZDhQ2/aD+SzsEfBTk=
+github.com/fatih/color v1.16.0 h1:zmkK9Ngbjj+K0yRhTVONQh1p/HknKYSlNT+vZCzyokM=
+github.com/fatih/color v1.16.0/go.mod h1:fL2Sau1YI5c0pdGEVCbKQbLXB6edEj1ZgiY4NijnWvE=
+github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nosvA=
+github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
+github.com/gofiber/fiber/v2 v2.52.8 h1:xl4jJQ0BV5EJTA2aWiKw/VddRpHrKeZLF0QPUxqn0x4=
+github.com/gofiber/fiber/v2 v2.52.8/go.mod h1:YEcBbO/FB+5M1IZNBP9FO3J9281zgPAreiI1oqg8nDw=
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/klauspost/compress v1.17.11 h1:In6xLpyWOi1+C7tXUUWv2ot1QvBjxevKAaI6IXrJmUc=
+github.com/klauspost/compress v1.17.11/go.mod h1:pMDklpSncoRMuLFrf1W9Ss9KT+0rH90U12bZKk7uwG0=
+github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
+github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
+github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
+github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/mattn/go-runewidth v0.0.16 h1:E5ScNMtiwvlvB5paMFdw9p4kSQzbXFikJ5SQO6TULQc=
+github.com/mattn/go-runewidth v0.0.16/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
+github.com/natefinch/atomic v1.0.1 h1:ZPYKxkqQOx3KZ+RsbnP/YsgvxWQPGxjC0oBt2AhwV0A=
+github.com/natefinch/atomic v1.0.1/go.mod h1:N/D/ELrljoqDyT3rZrsUmtsuzvHkeB/wWjHV22AZRbM=
+github.com/rivo/uniseg v0.2.0 h1:S1pD9weZBuJdFmowNwbpi7BJ8TNftyUImj/0WQi72jY=
+github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
+github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
+github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
+github.com/valyala/fasthttp v1.58.0 h1:GGB2dWxSbEprU9j0iMJHgdKYJVDyjrOwF9RE59PbRuE=
+github.com/valyala/fasthttp v1.58.0/go.mod h1:SYXvHHaFp7QZHGKSHmoMipInhrI5StHrhDTYVEjK/Kw=
+github.com/valyala/tcplisten v1.0.0 h1:rBHj/Xf+E1tRGZyWIWwJDiRY0zc1Js+CV5DqwacVSA8=
+github.com/valyala/tcplisten v1.0.0/go.mod h1:T0xQ8SeCZGxckz9qRXTfG43PvQ/mcWh7FwZEA7Ioqkc=
+github.com/xyproto/randomstring v1.0.5 h1:YtlWPoRdgMu3NZtP45drfy1GKoojuR7hmRcnhZqKjWU=
+github.com/xyproto/randomstring v1.0.5/go.mod h1:rgmS5DeNXLivK7YprL0pY+lTuhNQW3iGxZ18UQApw/E=
+golang.org/x/mod v0.24.0 h1:ZfthKaKaT4NrhGVZHO1/WDTwGES4De8KtWO0SIbNJMU=
+golang.org/x/mod v0.24.0/go.mod h1:IXM97Txy2VM4PJ3gI61r1YEk/gAj6zAHN3AdZt6S9Ww=
+golang.org/x/net v0.39.0 h1:ZCu7HMWDxpXpaiKdhzIfaltL9Lp31x/3fCP11bc6/fY=
+golang.org/x/net v0.39.0/go.mod h1:X7NRbYVEA+ewNkCNyJ513WmMdQ3BineSwVtN2zD/d+E=
+golang.org/x/sync v0.13.0 h1:AauUjRAJ9OSnvULf/ARrrVywoJDy0YS2AwQ98I37610=
+golang.org/x/sync v0.13.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
+golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.28.0 h1:Fksou7UEQUWlKvIdsqzJmUmCX3cZuD2+P3XyyzwMhlA=
+golang.org/x/sys v0.28.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.32.0 h1:s77OFDvIQeibCmezSnk/q6iAfkdiQaJi4VzroCFrN20=
+golang.org/x/sys v0.32.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/tools v0.32.0 h1:Q7N1vhpkQv7ybVzLFtTjvQya2ewbwNDZzUgfXGqtMWU=
+golang.org/x/tools v0.32.0/go.mod h1:ZxrU41P/wAbZD8EDa6dDCa6XfpkhJ7HFMjHJXfBDu8s=
diff --git a/hello.go b/hello.go
new file mode 100644
index 0000000..ffee6d4
--- /dev/null
+++ b/hello.go
@@ -0,0 +1,14 @@
+package main
+
+import (
+ "log"
+ "github.com/gofiber/fiber/v2"
+)
+
+func main() {
+ app := fiber.New()
+
+ app.Static("/", "./public")
+
+ log.Fatal(app.Listen(":5001"))
+}
diff --git a/public/blockstart.css b/public/blockstart.css
new file mode 100644
index 0000000..ff7c188
--- /dev/null
+++ b/public/blockstart.css
@@ -0,0 +1,241 @@
+:root {
+ --color-border: hsl(0, 0%, 0%);
+ --border-radius: 5px;
+ --text: 0;
+ --value: 9;
+ --value-scale: 12%;
+ --pad: 10px;
+ --bottom-margin: 2rem;
+ --w: initial;
+ --h: initial;
+ --value0: hsl(0, 0%, calc(0 * var(--value-scale)));
+ --value1: hsl(0, 0%, calc(1 * var(--value-scale)));
+ --value2: hsl(0, 0%, calc(2 * var(--value-scale)));
+ --value3: hsl(0, 0%, calc(3 * var(--value-scale)));
+ --value4: hsl(0, 0%, calc(4 * var(--value-scale)));
+ --value5: hsl(0, 0%, calc(5 * var(--value-scale)));
+ --value6: hsl(0, 0%, calc(6 * var(--value-scale)));
+ --value7: hsl(0, 0%, calc(7 * var(--value-scale)));
+ --value8: hsl(0, 0%, calc(8 * var(--value-scale)));
+ --value9: hsl(0, 0%, calc(9 * var(--value-scale)));
+}
+
+body {
+ padding: 0px;
+ margin: 0px;
+}
+
+blockstart {
+ background-color: #fff;
+ color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ padding: 0px;
+ margin: 0px;
+ width: 100%;
+ min-width: 100%;
+ max-width: 100%;
+ height: fit-content;
+ min-height: fit-content;
+ padding: 1rem;
+}
+
+blockstart > * + * {
+ margin-bottom: var(--bottom-margin);
+}
+
+blockstart > *:last-child {
+ margin-bottom: 0px;
+}
+
+blockstart a {
+ color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
+}
+
+blockstart block {
+ --spacing: space-evenly;
+
+ display: flex;
+ background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale)));
+ color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
+ justify-content: var(--spacing);
+ flex-direction: column;
+ padding: var(--pad);
+ width: var(--w);
+ min-width: var(--w);
+ max-width: var(--w);
+ height: var(--h);
+ min-height: var(--h);
+ max-height: var(--h);
+}
+
+blockstart block > * {
+ --spacing: flex-start;
+ --pad: 10px;
+ --w: initial;
+ --h: initial;
+
+ background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale)));
+ color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
+ display: flex;
+ justify-content: var(--spacing);
+ align-self: stretch;
+ flex-direction: column;
+ margin: 2px;
+ padding: var(--pad);
+ width: var(--w);
+ min-width: var(--w);
+ max-width: var(--w);
+ height: var(--h);
+ min-height: var(--h);
+ max-height: var(--h);
+}
+
+blockstart stack {
+ color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
+ display: grid;
+ grid-template-rows: 1fr;
+ grid-template-columns: 1fr;
+ grid-template-areas: "cover";
+}
+
+blockstart stack > * {
+ color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
+ width: 100%;
+ height: 100%;
+ position: relative;
+ grid-area: cover;
+}
+
+blockstart stack > .top {
+ z-index: 10;
+}
+
+blockstart .wide {
+ width: 100%;
+}
+
+blockstart .no-flex {
+ display: block;
+ flex: unset;
+ flex-direction: unset;
+ align-self: unset;
+}
+
+blockstart .center {
+ justify-content: center;
+ align-items: center;
+ align-self: center;
+}
+
+blockstart .center-text {
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+}
+
+blockstart .center-self {
+ align-self: center;
+}
+
+blockstart .vertical {
+ flex-direction: column;
+}
+
+blockstart .horizontal {
+ flex-direction: row;
+}
+
+blockstart grid {
+ --cols: auto;
+ --rows: auto;
+ --gap: 0.5rem;
+
+ color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
+ display: grid;
+ grid-gap: var(--gap);
+ grid-template-columns: repeat(var(--cols), 1fr);
+ grid-template-rows: repeat(var(--rows), 1fr);
+}
+
+
+blockstart hr {
+ --height: 1rem;
+
+ min-height: var(--height);
+ visibility: hidden;
+}
+
+blockstart hr.huge {
+ --height: 3rem;
+}
+
+blockstart shape {
+ --value: 2;
+ --text: 9;
+ --pad: 1rem;
+
+ color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
+ background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale)));
+ display: flex;
+ width: var(--w);
+ min-width: var(--w);
+ max-width: var(--w);
+ height: var(--h);
+ min-height: var(--h);
+ max-height: var(--h);
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ align-self: center;
+ padding: pad;
+}
+
+blockstart .debug {
+ border: 1px solid red;
+}
+
+blockstart .debug > * {
+ border: 1px solid blue;
+}
+
+blockstart .border {
+ border: 2px solid var(--color-border);
+ border-radius: var(--border-radius);
+}
+
+blockstart .compact {
+ justify-content: flex-start;
+}
+
+blockstart .compact > * {
+ flex: unset;
+}
+
+.solid {
+ --value: 4;
+ --text: 9;
+}
+
+.fill {
+ flex: 1 1 auto;
+}
+
+button {
+ --value: 7;
+ --text: 0;
+
+ background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale)));
+ color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
+ border: 2px solid var(--color-border);
+ border-radius: var(--border-radius);
+}
+
+button:hover {
+ filter: brightness(90%);
+}
+
+[style*="--aspect-ratio"] {
+ aspect-ratio: var(--aspect-ratio);
+}
diff --git a/public/color.css b/public/color.css
new file mode 100644
index 0000000..621f922
--- /dev/null
+++ b/public/color.css
@@ -0,0 +1,143 @@
+@font-face {
+ font-family: computer;
+ src: url(/fonts/computer.woff);
+}
+
+/* Grays
+ --value9: hsl(0, 0%, 100%);
+ --value8: hsl(210, 17%, 98%);
+ --value8a: hsl(210, 17%, 98%, 0);
+ --value7: hsl(210, 16%, 93%);
+ --value6: hsl(210, 14%, 89%);
+ --value5: hsl(210, 14%, 83%);
+ --value4: hsl(210, 11%, 71%);
+ --value3: hsl(208, 7%, 46%);
+ --value2: hsl(210, 9%, 31%);
+ --value1: hsl(210, 10%, 23%);
+ --value0: hsl(210, 11%, 15%);
+
+ Greens
+ --value9: #f7fcf5;
+ --value8: #e5f5e0;
+ --value8a: hsl(210, 17%, 98%, 0);
+ --value7: #83cad4;
+ --value6: #73c17a;
+ --value5: #006d2c;
+ --value4: hsl(210, 11%, 71%);
+ --value3: hsl(208, 7%, 46%);
+ --value2: hsl(210, 9%, 31%);
+ --value1: #06160c;
+ --value0: #010402;
+*/
+
+:root {
+ --value9: #f7fcf5;
+ --value8: #e5f5e0;
+ --value8a: hsl(210, 17%, 98%, 0);
+ --value7: #daf0d5;
+ --value6: #73c17a;
+ --value5: #238b45;
+ --value4: #006d2c;
+ --value3: #105329;
+ --value2: #0e321b;
+ --value1: #06160c;
+ --value0: #010402;
+
+ --gray9: hsl(0, 0%, 100%);
+ --gray8: hsl(210, 17%, 98%);
+ --gray8a: hsl(210, 17%, 98%, 0);
+ --gray7: hsl(210, 16%, 93%);
+ --gray6: hsl(210, 14%, 89%);
+ --gray5: hsl(210, 14%, 83%);
+ --gray4: hsl(210, 11%, 71%);
+ --gray3: hsl(208, 7%, 46%);
+ --gray2: hsl(210, 9%, 31%);
+ --gray1: hsl(210, 10%, 23%);
+ --gray0: hsl(210, 11%, 15%);
+
+ --orange: hsl(19, 97%, 41%);
+ --yellow: hsl(44, 100%, 52%);
+ --red: hsl(334, 100%, 50%);
+ --purple: hsl(265, 83%, 57%);
+ --blue: hsl(217, 100%, 61%);
+ --green: hsl(98, 32%, 45%);
+ --black: hsl(240, 100%, 0%);
+
+ --invert-orange: var(--value9);
+ --invert-yellow: var(--value0);
+ --invert-red: var(--value9);
+ --invert-purple: var(--value9);
+ --invert-blue: var(--value9);
+ --invert-green: var(--value9);
+
+ --color-accent: var(--value7);
+ --color-bg-inverted: var(--gray6);
+ --color-bg-secondary: var(--gray2);
+ --color-bg-code-text: var(--value2);
+ --color-bg-tertiary: var(--value3);
+ --color-bg: var(--value0);
+ --color-border: var(--gray3);
+ --color-error: var(--red);
+ --color-good: var(--green);
+ --color-icon-image: var(--value8);
+ --color-inactive: var(--value4);
+ --color-info: var(--yellow);
+ --color-input-bg: var(--value7);
+ --color-input-border: var(--value7);
+ --color-input-button: var(--value6);
+ --color-overlay-background: var(--value2);
+ --color-overlay-shadow: var(--value6);
+ --color-overlay-text: var(--value7);
+ --color-play-icon: var(--value4);
+ --color-pulse-1: hsla(0, 0%, 80%, 1);
+ --color-pulse-2: hsla(0, 0%, 80%, 0.7);
+ --color-pulse-3: hsla(0, 0%, 80%, 0.1);
+ --color-pulse-4: hsla(0, 0%, 80%, 0);
+ --color-secondary-accent: var(--value7);
+ --color-secondary: var(--value7);
+ --color-shadow-secondary: var(--value6);
+ --color-shadow: var(--value2);
+ --color-text-inverted: var(--value0);
+ --color-text-secondary: var(--value8);
+ --color-text: var(--value9);
+ --color-warning: var(--orange);
+ --color: var(--value9);
+ --gray-bg: var(--gray1);
+ --color-scrollbar-thumb: hsla(0, 0%, 40%, 0.8);
+ --color-scrollbar-track-piece: hsla(0, 0%, 20%, 0.8);
+ --color-bg-transparent: var(--value8a);
+ --color-bg-code: var(--gray1);
+ --color-border-tabs: var(--value6);
+ --color-shadow-dark: var(--value2);
+
+
+ --font-family: "Andale Mono", "Monaco", monospace, monospace;
+ --font-title: "Palatino", serif;
+ --font-computer: "computer", monospace;
+ --font-size: 1.05em;
+ --font-text-size: 1.4em; /* for paragraphs mostly */
+ --font-label-size: 1rem;
+ --font-heading-size: 1.2em;
+ --font-heading-weight: 300;
+ --font-header-nav: 1.3em;
+ --font-button-size: 1.4em;
+ --hover-brightness: 0.9;
+ --justify-important: center;
+ --justify-blockquote: left;
+ --justify-normal: left;
+ --line-height: 1.5;
+ --width-sidebar: 320px;
+ --width-card: 385px;
+ --width-card-medium: 460px;
+ --width-card-wide: 800px;
+ --width-content: 1080px;
+ --width-badge: 20px;
+ --font-size-badge: 13px;
+ --fixed-header-height: 73px;
+ --fixed-footer-height: 400px;
+ --color-scrollbar-thumb: hsla(0, 0%, 60%, 0.8);
+ --color-scrollbar-track-piece: hsla(0, 0%, 100%, 0.9);
+
+ --color-bg-header: var(--value0);
+ --color-text-header: var(--value9);
+}
diff --git a/public/game/1/turings-tarpit/index.html b/public/game/1/turings-tarpit/index.html
new file mode 100644
index 0000000..d27ab57
--- /dev/null
+++ b/public/game/1/turings-tarpit/index.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
+ ZedShaw's Game Thing
+
+
+
+
+
+ π‘ Zed's Game Dev Website Yay
+
+
+
+ Gameplay Demo Video
+
+
+ Turing's Tarpit
+
+
+ Some Image
+
+ Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.
+
+
+
+
+
+ Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.
+
+
+
+ Current Status
+ Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.
+
+
+
+ Planned Work
+ Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.
+
+
+
+ Read The Code
+ Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.
+ View the Git
+
+
+
+
+
+
+
diff --git a/public/game/index.html b/public/game/index.html
new file mode 100644
index 0000000..2fbf6c4
--- /dev/null
+++ b/public/game/index.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+ ZedShaw's Game Thing
+
+
+
+
+ π‘ Zed's Game Dev Website Yay
+
+
+
+
+ Zed's Trash Ass Games
+
+ More fun than a barrel full of monkeys with syphilus.
+
+
+
+
+
+ Game B
+ Game A
+ Game B
+ Game A
+ Game B
+ Game A
+ Game B
+ Game A
+ Game B
+ Game A
+ Game B
+ Game B
+
+
+
+
+ Left Image
+
+
Checkout my Git
+
I put al of my code online for people to read and study. If you're curious about the code behind my games or anything else I make then take a look at my git. It's like a buffet of half-finished genius.
+
+
View my Git
+
+
+
+
+
+
+
+
+
+
diff --git a/public/global.css b/public/global.css
new file mode 100644
index 0000000..02e4701
--- /dev/null
+++ b/public/global.css
@@ -0,0 +1,1637 @@
+/* Hea vily modified from the wonderful MVP.css v1.6.2 - https://github.com/andybrewer/mvp */
+@import 'color.css';
+
+/* You can remove this if you don't do any code in your project. */
+@import '/css/prism.css';
+
+body * {
+ /* This fixes the classic CSS braindead decision that children can explode out
+ * of their parent's box.
+ */
+ box-sizing: border-box;
+}
+
+aside {
+ display: block;
+ font-size: 1.2em;
+ line-height: var(--line-height);
+ padding: 1rem 1rem;
+ text-align: var(--justify-blockquote);
+ border-radius: var(--border-radius);
+ background-color: var(--color-bg-secondary);
+ border: 1px solid var(--value3);
+}
+
+aside.warning {
+ background-color: var(--value7);
+ color: var(--color-text-inverted);
+}
+
+/* Layout */
+article aside {
+ background: var(--color-secondary-accent);
+ border-left: 4px solid var(--color-secondary);
+ padding: 0.01rem 0.8rem;
+}
+
+body {
+ background: var(--color-bg);
+ color: var(--color-text);
+ font-family: var(--font-family);
+ line-height: var(--line-height);
+ margin: 0;
+ overflow-x: hidden;
+ overflow-y: overlay;
+ text-rendering: optimizeSpeed;
+ -webkit-font-smoothing: antialiased;
+}
+
+::-webkit-scrollbar {
+ width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--color-scrollbar-thumb);
+}
+::-webkit-scrollbar-track-piece {
+ background: var(--color-scrollbar-track-piece);
+}
+
+header {
+ background-color: var(--color-bg-header);
+ color: var(--color-text-header);
+ display: flex;
+ justify-content: center;
+ text-align: var(--justify-important);
+}
+
+header,
+main {
+ margin: 0 auto;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ padding-top: 0rem;
+}
+
+header.fixed {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 90;
+ height: var(--fixed-header-height);
+}
+
+main {
+ max-width: var(--width-content);
+ min-height: 800px;
+ margin-bottom: 2rem;
+ display: flex;
+ flex-direction: column;
+}
+
+header.fixed + main {
+ margin-top: var(--fixed-header-height) !important;
+ min-height: unset;
+}
+
+footer {
+ background-color: var(--color-bg-header);
+ color: var(--color-text-header);
+ padding: 0px;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+}
+
+footer aside {
+ background-color: var(--color-bg-secondary);
+ width: 33%;
+ padding: 1em;
+}
+
+footer aside h4 {
+ margin-top: 0px;
+ margin-bottom: 0.5rem;
+}
+
+hr {
+ background-color: var(--color-bg-secondary);
+ border: none;
+ height: 1px;
+ margin: 1rem 0;
+}
+
+section {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: var(--justify-important);
+}
+
+section aside {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow) var(--color-shadow);
+ margin: 1rem;
+ padding: 1.25rem;
+ width: var(--width-card);
+}
+
+section aside img {
+ max-width: 100%;
+}
+
+[hidden] {
+ display: none;
+}
+
+/* Headers */
+article header,
+div header,
+main header {
+ padding-top: 0;
+}
+
+header a.button {
+ margin-left: 0.5rem;
+ margin-right: 0.5rem;
+}
+
+header nav {
+ max-width: var(--width-content);
+}
+
+header nav a {
+ /* this covers all links in the header nav */
+ font-size: var(--font-header-nav);
+ text-decoration-line: none;
+}
+
+header nav > a {
+ /* this is for just a tags in the header, not inside */
+ margin-top: 1rem;
+ margin-bottom: 0px;
+}
+
+header nav img {
+ margin: 1rem 0;
+}
+
+section header {
+ padding-top: 0;
+ width: 100%;
+}
+
+ol li,
+ul li {
+ padding: 0.2rem 0;
+}
+
+/* Nav */
+nav {
+ align-items: center;
+ display: flex;
+ font-weight: bold;
+ justify-content: space-between;
+ max-width: 90vw;
+ width: 100%;
+}
+
+
+nav ul {
+ list-style: none;
+ padding: 0;
+ margin-top: 1rem;
+ margin-bottom: 0px;
+}
+
+nav ul li {
+ display: inline-block;
+ margin: 0 0.5rem;
+ position: relative;
+ text-align: left;
+}
+
+/* Nav Dropdown */
+nav ul li ul {
+ background: var(--color-bg);
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow) var(--color-shadow);
+ display: none;
+ height: auto;
+ left: -2px;
+ padding: 0.5rem 1rem;
+ position: absolute;
+ top: 1.7rem;
+ white-space: nowrap;
+ width: auto;
+}
+
+nav ul li:hover ul {
+ display: block;
+}
+
+nav ul li ul li,
+nav ul li ul li a {
+ display: block;
+}
+
+/* Typography */
+code,
+samp {
+ background-color: var(--color-bg-code-text);
+ border-radius: var(--border-radius);
+ color: var(--color-text);
+ display: inline-block;
+ margin: 0 0.1rem;
+ padding: 0 0.5rem;
+}
+
+
+details {
+ margin: 1.3rem 0;
+}
+
+details summary {
+ font-weight: bold;
+ cursor: pointer;
+}
+
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ line-height: var(--line-height);
+ font-family: var(--font-title);
+ font-weight: var(--font-heading-weight);
+ font-size: var(--font-heading-size);
+ margin-top: 1rem;
+ margin-bottom: 0rem;
+}
+
+h1 {
+ font-size: calc(var(--font-heading-size) * 1.8);
+}
+
+h2 {
+ font-size: calc(var(--font-heading-size) * 1.5);
+}
+
+h3 {
+ font-size: calc(var(--font-heading-size) * 1.3);
+}
+
+h4 {
+ font-size: calc(var(--font-heading-size) * 1.2);
+}
+
+mark {
+ padding: 0.1rem;
+}
+
+p {
+ padding: 0;
+}
+
+pre code,
+pre samp {
+ display: block;
+ padding: 0.5rem 2rem;
+ white-space: pre-wrap;
+}
+
+small {
+ color: var(--color-text-secondary);
+}
+
+sup {
+ background-color: var(--color-secondary);
+ border-radius: var(--border-radius);
+ color: var(--color-bg);
+ font-size: xx-small;
+ font-weight: bold;
+ margin: 0.2rem;
+ padding: 0.2rem 0.3rem;
+ position: relative;
+ top: -2px;
+}
+
+/* Links */
+a {
+ text-decoration-line: underline;
+ text-decoration-style: dotted;
+ text-decoration-color: var(--color-inactive);
+ color: var(--color-secondary);
+}
+
+a:hover {
+ filter: brightness(var(--hover-brightness));
+ text-decoration-style: solid;
+}
+
+h1 a,
+h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a {
+ text-decoration-line: none;
+ text-decoration-style: none;
+}
+
+button,
+input[type="button"],
+input[type="submit"] {
+ border-radius: var(--border-radius);
+ display: inline-block;
+ font-weight: bold;
+ line-height: var(--line-height);
+ padding: 0.5rem 1rem;
+}
+
+button,
+input[type="button"],
+input[type="submit"] {
+ font-family: var(--font-family);
+ font-size: var(--font-button-size);
+}
+
+button:hover,
+input[type="button"]:hover,
+input[type="submit"]:hover {
+ cursor: pointer;
+ filter: brightness(var(--hover-brightness));
+}
+
+a b,
+a strong,
+button,
+input[type="button"],
+input[type="submit"] {
+ background-color: var(--color);
+ border: 2px solid var(--color);
+ color: var(--color-bg);
+}
+
+a.button {
+ border: 2px solid var(--color);
+ border-radius: var(--border-radius);
+ color: var(--color);
+ display: inline-block;
+ padding: 1rem 2rem;
+}
+
+button > a {
+ display: flex;
+ justify-content: space-evenly;
+ width: 100%;
+ color: var(--color-text-inverted);
+ text-decoration: none !important;
+ filter: unset !important;
+}
+
+/* Images */
+img {
+ /* This fixes images that have a small margin on the bottom due to "descenders"
+ * from the 1990s when HTML was all about text and images were considered text.
+ */
+ display: block;
+ width: 100%;
+}
+
+figure {
+ margin: 0;
+ padding: 0;
+}
+
+figure img {
+ max-width: 100%;
+}
+
+figure figcaption {
+ color: var(--color-text-secondary);
+}
+
+/* Forms */
+
+label {
+ font-weight: bold;
+ margin-bottom: 0.2rem;
+}
+
+button[disabled]:hover {
+ filter: none;
+}
+
+form {
+ display: flex;
+ max-width: var(--width-card-wide);
+ min-width: var(--width-card);
+ text-align: var(--justify-normal);
+ background-color: var(--color-bg);
+ flex-direction: column;
+}
+
+form buttons {
+ display: flex;
+ justify-content: space-around;
+}
+
+form error {
+ color: var(--color-error);
+ font-size: 0.8em;
+}
+
+form card top {
+ background-color: var(--color-bg-secondary);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 1rem;
+}
+
+form card middle {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
+input,
+label,
+select,
+textarea {
+ display: block;
+ font-size: var(--font-label-size);
+ width: 100%;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+ display: inline-block;
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+input[type="checkbox"] + label,
+input[type="radio"] + label {
+ display: inline-block;
+ position: relative;
+ top: 1px;
+}
+
+input,
+select,
+textarea {
+ border: 1px solid var(--color-input-border);
+ background-color: var(--color-input-bg);
+ border-radius: var(--border-radius);
+ margin-bottom: 1rem;
+ padding: 0.4rem 0.8rem;
+}
+
+input[readonly],
+textarea[readonly] {
+ background-color: var(--color-bg-secondary);
+}
+
+form buttons input {
+ width: 7rem;
+ text-align: center;
+}
+
+button:disabled,
+input:disabled {
+ background: var(--color-bg-secondary);
+ color: var(--color-text-secondary);
+ cursor: not-allowed;
+}
+
+/* Tables */
+table {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ border-spacing: 0;
+ max-width: 100%;
+ overflow-x: auto;
+ padding: 0;
+ border-collapse: collapse;
+}
+
+table td,
+table th,
+table tr {
+ padding: 0.4rem 0.8rem;
+ text-align: var(--justify-important);
+}
+
+table thead {
+ background-color: var(--color);
+ border-collapse: collapse;
+ border-radius: var(--border-radius);
+ color: var(--color-bg);
+ margin: 0;
+ padding: 0;
+}
+
+table thead th:first-child {
+ border-top-left-radius: var(--border-radius);
+}
+
+table thead th:last-child {
+ border-top-right-radius: var(--border-radius);
+}
+
+table thead th:first-child,
+table tr td:first-child {
+ text-align: var(--justify-normal);
+}
+
+table tr:nth-child(even) {
+ background-color: var(--color-bg-tertiary);
+}
+
+/* Quotes */
+blockquote {
+ display: block;
+ line-height: var(--line-height);
+ margin: 1rem auto;
+ padding: 1rem 1rem;
+ text-align: var(--justify-blockquote);
+ border-radius: var(--border-radius);
+ background-color: var(--color-bg-secondary);
+}
+
+blockquote footer {
+ color: var(--color-text-secondary);
+ background-color: var(--color-bg-secondary);
+ display: block;
+ font-size: small;
+ text-align: right;
+ line-height: var(--line-height);
+ padding: 1.5rem 0;
+}
+
+/* Have to place this here because svelte's global parsing doesn't work on sub-CSS inside media. */
+@media only screen and (max-width: 600px) {
+ code-view {
+ flex-direction: column !important;
+ }
+
+ code-view html-view {
+ max-width: 100% !important;
+ }
+
+ phone-warn {
+ display: flex !important;
+ }
+
+}
+
+@media only screen and (max-width: 800px) {
+ main {
+ height: unset;
+ min-height: unset;
+ max-height: unset;
+ }
+}
+
+.pulse {
+ border-radius: var(--border-radius);
+ box-shadow: 0 0 0 0 var(--color-pulse-1);
+ transform: scale(1);
+ animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+ 0% {
+ transform: scale(0.95);
+ box-shadow: 0 0 0 0 var(--color-pulse-2);
+ }
+
+ 70% {
+ transform: scale(1);
+ box-shadow: 0 0 0 10px var(--color-pulse-3);
+ }
+
+ 100% {
+ transform: scale(0.95);
+ box-shadow: 0 0 0 0 var(--color-pulse-4);
+ }
+}
+
+pre code {
+ background-color: var(--color-bg-code);
+ color: var(--gray9);
+ border-radius: var(--border-radius);
+ overflow-x: auto;
+}
+
+pre code span.error {
+ color: hsl(0, 100%, 80%);
+ text-decoration: underline;
+}
+
+/** Additional components added by Zed A. Shaw. */
+
+tile {
+ display: flex;
+ flex-direction: row;
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+}
+
+tile > left {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+tile > middle {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ flex-grow: 3;
+}
+
+tile > middle h4 {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+tile > right {
+ flex-shrink: 0;
+}
+
+tile > right button {
+ padding: 0.2rem;
+}
+
+card {
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+}
+
+card top img {
+ padding: 0;
+ margin: 0;
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+card middle {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+}
+
+card bottom {
+ border-radius: 0 0 var(--border-radius) var(--border-radius);
+ border: 0;
+ box-shadow: unset;
+}
+
+card.tight middle {
+ padding: 0px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+}
+
+card.tight bottom {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ border-radius: 0 0 var(--border-radius) var(--border-radius);
+ border: 0;
+ box-shadow: unset;
+}
+
+card middle h4 {
+ margin: 0;
+}
+
+card bottom button-group > button:first-child {
+ border-radius: 0 0 0 var(--border-radius);
+}
+
+card bottom button-group > button:last-child:first-child {
+ border-radius: 0 0 0 0;
+}
+
+card bottom button-group > button:last-child {
+ border-radius: 0 0 var(--border-radius) 0;
+}
+
+card bottom button-group > button:only-child {
+ border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
+}
+
+button-group {
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+}
+
+button-group > button {
+ display: flex;
+ margin: 0;
+ padding: 0.5em;
+ width: 100%;
+ justify-content: space-evenly;
+ position: relative;
+ border-radius: 0 0 0 0;
+}
+
+
+button-group > button:first-child {
+ border-radius: var(--border-radius) 0 0 var(--border-radius);
+ background-color: var(--color-bg-secondary);
+ color: var(--color);
+ border: 2px solid var(--color-bg-inverted);
+}
+
+button-group > button:first-child > a {
+ color: var(--color) !important;
+}
+
+button-group > button:last-child {
+ border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+
+button-group > button:last-child:first-child {
+ border-radius: 0 0 var(--border-radius) var(--border-radius);
+ background-color: var(--color-bg-inverted);
+ color: var(--color-text-inverted);
+}
+
+button-group > button:last-child:first-child > a {
+ color: var(--color-text-inverted) !important;
+}
+
+button-group.vertical {
+ flex-direction: column;
+}
+
+button-group.vertical > button:first-child {
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+button-group.vertical > button:last-child:first-child {
+ border-radius: 0 0 0 0;
+}
+
+button-group.vertical > button:last-child {
+ border-radius: 0 0 var(--border-radius) var(--border-radius);
+}
+
+
+toast {
+ background-color: var(--color-error);
+ padding: 1rem;
+ color: var(--color-bg);
+ margin-top: 0.5rem;
+ box-shadow: 5px 5px 5px var(--value2);
+}
+
+toast a {
+ color: var(--color-text-inverted) !important;
+}
+
+toast-list {
+ box-sizing: border-box;
+ display: none;
+ flex-direction: column-reverse;
+ max-width: 400px;
+ position: fixed;
+ padding: 1rem;
+}
+
+toast-list.reverse {
+ flex-direction: column;
+}
+
+toast-list.bottom {
+ bottom: 0;
+}
+
+toast-list.top {
+ top: 0;
+}
+
+toast-list.left {
+ left: 0;
+}
+
+toast-list.right {
+ right: 0;
+}
+
+toast-list.active {
+ display: flex;
+}
+
+tabs {
+ margin-top: 1em;
+
+ /* added so you can see it in the display */
+ display: flex;
+ justify-content: space-evenly;
+}
+
+tabs > a {
+ text-decoration: none;
+ color: var(--color-text);
+ border-bottom: 1px solid var(--color-accent);
+ border-width: thin;
+ width: 100%;
+ text-align: center;
+ padding: 1rem 0 0.5rem;
+ font-size: var(--font-heading-size);
+ user-select: none;
+ border-top: 1px solid var(--color-border-tabs);
+ border-left: 1px solid var(--color-border-tabs);
+ border-right: 1px solid var(--color-border-tabs);
+ background-color: var(--gray0);
+}
+
+tabs > a:hover {
+ box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+ text-decoration: none;
+}
+
+tabs > a.active {
+ background-color: var(--color-bg-secondary);
+}
+
+tabs > a.active:hover {
+ filter: unset;
+ background-color: var(--color-bg-secondary);
+}
+
+tabs.vertical {
+ flex-direction: column;
+}
+
+tabs > a.active + component {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+}
+
+tabs + component {
+ padding-top: 0.5rem;
+}
+
+badge {
+ background-color: var(--color-bg-secondary);
+ border-radius: 50%;
+ width: var(--width-badge);
+ height: var(--width-badge);
+ min-width: var(--width-badge);
+ min-height: var(--width-badge);
+ max-width: var(--width-badge);
+ max-height: var(--width-badge);
+ font-size: var(--font-size-badge);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid var(--color-border);
+}
+
+.top-right {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+}
+
+.bottom-right {
+ position: absolute;
+ bottom: 5px;
+ right: 5px;
+}
+
+.top-left {
+ position: absolute;
+ top: 5px;
+ left: 5px;
+}
+
+.bottom-left {
+ position: absolute;
+ bottom: 5px;
+ left: 5px;
+}
+
+callout {
+ background-color: var(--color-bg-inverted);
+ color: var(--color-text-inverted);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ padding: 1rem;
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow) var(--color-shadow);
+ margin-bottom: 0.5rem;
+}
+
+callout a {
+ color: var(--color-text-inverted);
+}
+
+callout.info a {
+ color: var(--color-text);
+}
+
+callout.info a:hover {
+ color: var(--color-text-inverted);
+ text-decoration: underline;
+ filter: unset;
+}
+
+callout a:hover {
+ color: var(--color-text-inverted);
+ text-decoration: underline;
+}
+
+callout.alert {
+ color: var(--invert-red);
+ text-shadow: var(--value1) 1px 1px;
+ background-color: var(--color-error);
+}
+
+callout.error {
+ color: var(--invert-red);
+ text-shadow: var(--value1) 1px 1px;
+ background-color: var(--color-error);
+}
+
+callout.success {
+ color: var(--invert-green);
+ text-shadow: var(--value1) 1px 1px;
+ background-color: var(--color-good);
+}
+
+callout.warning {
+ color: var(--invert-orange);
+ text-shadow: var(--value1) 1px 1px;
+ background-color: var(--color-warning);
+}
+
+callout.info {
+ color: var(--invert-yellow);
+ background-color: var(--color-info);
+}
+
+callout.info a {
+ color: var(--invert-yellow);
+}
+
+callout pre {
+ width: unset;
+}
+
+/* Use this around words you want to tooltip. */
+word {
+ position: relative;
+ text-decoration: underline dotted var(--color-inactive);
+}
+
+tooltip {
+ display: block;
+ opacity: 0;
+ position: absolute;
+ visibility: hidden;
+ color: var(--color);
+ background-color: var(--color-bg-secondary);
+ padding: 0.5rem;
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow) var(--color-box-shadow);
+ border: 1px solid black;
+ transform: translate(90%, -90%);
+ top: 0;
+ right: 0;
+ z-index: 10000;
+ font-size: 0.8rem !important;
+ font-weight: normal;
+ tabindex="-1";
+}
+
+*:hover > tooltip {
+ /* you need to use visibility rather than display to avoid mouse over triggering on the tooltip as well as the icon. */
+ visibility: visible;
+ transition: opacity 0.6s ease-in-out;
+ opacity: 1;
+}
+
+tooltip.top-left {
+ left: 0;
+ right: unset;
+ transform: translate(-90%, -90%);
+}
+
+tooltip.bottom-left {
+ bottom: 0;
+ left: 0;
+ right: unset;
+ top: unset;
+ transform: translate(-90%, 90%);
+}
+
+tooltip.bottom-right {
+ bottom: 0;
+ top: unset;
+ transform: translate(90%, 90%);
+}
+
+tooltip.right {
+ top: unset;
+ transform: translate(90%);
+}
+
+tooltip.left {
+ top: unset;
+ right: unset;
+ left: 0;
+ transform: translate(-90%);
+}
+
+tooltip.top {
+ top: 0;
+ right: unset;
+ transform: translate(0%, -90%);
+}
+
+tooltip.bottom {
+ bottom: 0;
+ top: unset;
+ right: unset;
+ transform: translate(0%, 90%);
+}
+
+progress-meter {
+ background-color: var(--color-bg-tertiary);
+ display: flex;
+}
+
+progress-meter bar {
+ background-color: var(--color-bg-inverted);
+ color: var(--color-text-inverted);
+}
+
+/* Flipper is used to put two components and let them
+ * flip in and out on a rotation axis.
+ */
+flipper {
+ background-color: transparent;
+ perspective: 1000px;
+ display: block;
+ width: min-content;
+ min-height: min-content;
+}
+
+flipper inner {
+ position: relative;
+ transition: transform 0.5s;
+ transform-style: preserve-3d;
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+flipper.flipped inner {
+ transform: rotateY(180deg);
+ position: relative;
+}
+
+flipper .front,
+.back {
+ -webkit-backface-visibility: hidden; /* Safari */
+ backface-visibility: hidden;
+}
+
+flipper .front {
+ min-height: 11rem;
+}
+
+flipper .back {
+ transform: rotateY(180deg);
+ min-height: 11rem;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+/* Switch implementation, mostly as a demo. */
+label.switch {
+ width: 4rem;
+ height: 2rem;
+ border: 1px solid var(--color-bg-inverted);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding-left: 0.2rem;
+ padding-right: 0.2rem;
+ justify-content: space-between;
+}
+
+label.switch::after {
+ width: 1.5rem;
+ height: 1.5rem;
+ background: var(--color-bg-tertiary);
+ content: "";
+}
+
+input + label.switch {
+ display: flex;
+}
+
+input:checked + label.switch {
+ flex-direction: row-reverse;
+ background: var(--color-bg-inverted);
+ background: var(--color-text-inverted);
+}
+
+input:checked + label.switch > inactive {
+ display: none;
+}
+
+input:checked + label.switch > active {
+ display: block;
+}
+
+label.switch > active {
+ display: flex;
+ flex-grow: 2;
+ align-items: center;
+ text-align: center;
+ user-select: none;
+}
+
+label.switch > inactive {
+ display: flex;
+ flex-grow: 2;
+ align-items: center;
+ text-align: center;
+}
+
+label.switch > inactive {
+ display: block;
+}
+
+label.switch > active {
+ display: none;
+}
+
+input.switch {
+ display: none;
+}
+
+label.medium {
+ width: 6rem;
+ height: 3rem;
+ font-size: 1.5rem;
+}
+
+label.medium::after {
+ width: 2.25rem;
+ height: 2.25rem;
+}
+
+label.large {
+ width: 8rem;
+ height: 4rem;
+ font-size: 2rem;
+}
+
+label.large::after {
+ width: 3rem;
+ height: 3rem;
+}
+
+hero {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+
+hero figure {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+hero:hover figure {
+ z-index: -1;
+}
+
+hero > cover {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-size: 4vw;
+ color: var(--color-overlay-text);
+ transition: background 0.5s ease-out;
+ opacity: 0;
+}
+
+hero:hover cover {
+ opacity: 1;
+ z-index: 1;
+}
+
+hero cover h1 {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+hero cover:hover {
+ background: none;
+}
+
+hero cover:hover a.button {
+ opacity: 100%;
+}
+
+hero over a.buton {
+ color: var(--color-text-inverted);
+ border: 2px solid var(--value0);
+ text-shadow: none;
+ font-size: 0.5em;
+}
+
+hero.middle {
+ background-color: var(--color-bg-tertiary);
+ padding-top: 5rem;
+ padding-bottom: 5rem;
+ box-shadow: 0 8px 6px -6px black;
+ border-radius: var(--border-radius);
+}
+
+hero.middle p {
+ text-align: justify;
+ margin-left: 3rem;
+ margin-right: 3rem;
+}
+
+hero.middle button {
+ padding: 2rem;
+ margin-bottom: 2rem;
+ box-shadow: var(--box-shadow) black;
+}
+
+hero.middle section aside {
+ background-color: var(--color-bg);
+}
+
+breadcrumb {
+ background-color: var(--color-bg-tertiary);
+ display: flex;
+ margin-top: 0rem;
+ margin-left: -0.5rem;
+ margin-right: -0.5rem;
+ margin-bottom: 1rem;
+ padding: 0.3rem;
+}
+
+.stacked {
+ display: grid;
+ grid-template-rows: 1fr;
+ grid-template-columns: 1fr;
+ grid-template-areas: "cover";
+}
+
+.stacked .layer {
+ width: 100%;
+ position: relative;
+ grid-area: cover;
+}
+
+.stacked .top {
+ z-index: 10;
+}
+
+/* Testing if this is actually available everywhere. This will go away after a while unless
+ * I have to fix aspect-ratio. For now it's just for backward compatibility.
+ */
+[style*="--aspect-ratio"] {
+ aspect-ratio: var(--aspect-ratio);
+}
+
+main.centered {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 3rem;
+}
+
+main.fullscreen {
+ display: flex;
+ flex-direction: row !important;
+ padding: 0px !important;
+ margin: 0px !important;
+ height: 100vh !important;
+ max-height: 100vh !important;
+ min-height: 100vh !important;
+ max-width: unset;
+}
+
+main.horizontal {
+ flex-direction: row;
+}
+
+main.fullwidth {
+ padding: 0px !important;
+ margin: 0px !important;
+ width: 100%;
+ min-width: 100%;
+ max-width: 100%;
+}
+
+/* Specific to the client/Layout.svelte and rendered/Layout.svelte */
+
+/* CSS specific to the course system. */
+content > left {
+ position: relative;
+ display: block;
+ width: var(--width-sidebar);
+ min-width: var(--width-sidebar);
+ max-width: var(--width-sidebar);
+}
+
+content > right {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ padding-top: 0.5rem;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ width: var(--width-content);
+}
+
+content {
+ display: flex;
+ width: 100%;
+ flex-direction: row;
+ padding-bottom: 1rem;
+}
+
+.html-result {
+ display: flex;
+ flex-direction: column;
+ border: 1px solid var(--value2);
+ border-radius: var(--border-radius);
+ width: 100%;
+ min-height: fit-content;
+ box-shadow: var(--box-shadow);
+ padding: 2rem;
+}
+
+
+@media only screen and (max-width: 500px) {
+ footer {
+ flex-direction: column;
+ }
+
+ footer aside {
+ width: 100%;
+ }
+}
+
+
+/* SIDEBAR */
+
+sidebar {
+ display: flex;
+ flex-direction: column;
+ box-shadow: 5px 0 5px -5px var(--color-shadow);
+ position: unset;
+ height: 100%;
+ white-space: nowrap;
+ width: var(--width-sidebar);
+ min-width: var(--width-sidebar);
+ max-width: var(--width-sidebar);
+}
+
+sidebar items a {
+ text-decoration: none;
+ padding: 0.5rem;
+ cursor: pointer;
+}
+
+sidebar items a:hover {
+ filter: unset;
+ background: var(--color-bg-tertiary);
+ color: var(--color-accent);
+}
+
+sidebar items a.active {
+ background: var(--color-bg-inverted);
+ color: var(--color-text-inverted);
+}
+
+sidebar top,
+sidebar bottom {
+ padding-left: 0.5rem;
+ background: var(--color-bg-secondary);
+}
+
+sidebar top {
+ border-bottom: 2px solid var(--color-border);
+}
+
+sidebar bottom {
+ border-top: 2px solid var(--color-border);
+}
+
+sidebar items {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 4;
+}
+
+sidebar items h3 {
+ padding-left: 0.3rem;
+}
+
+/* so useful I'm bringing them here too */
+shape {
+ --w: 100%;
+ --h: 100%;
+ --value: 4;
+
+ color: hsl(0, 0%, calc(var(--text) * 11%));
+ background-color: hsl(0, 0%, calc(var(--value) * 11%));
+ display: flex;
+ width: var(--w);
+ min-width: var(--w);
+ max-width: var(--w);
+ height: var(--h);
+ min-height: var(--h);
+ max-height: var(--h);
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ align-self: center;
+}
+
+.debug {
+ border: 1px solid red;
+}
+
+.debug > * {
+ border: 1px solid blue;
+}
+
+grid {
+ --cols: 1fr 1fr;
+ --rows: auto;
+ --gap: 0.5rem;
+
+ color: hsl(0, 0%, calc(var(--text) * 11%));
+ display: grid;
+ grid-gap: var(--gap);
+ grid-template-columns: var(--cols);
+ grid-template-rows: var(--rows);
+}
+
+#register-button {
+ align-self: baseline;
+ position: relative;
+ top: -6px;
+}
+
+#register-button button {
+ font-size: 0.9em;
+ background-color: unset;
+ color: var(--color-text-header);
+ padding: 3px;
+ border: 2px solid var(--color-text-header);
+}
+
+#register-button:hover button {
+ background-color: var(--value0);
+ color: var(--value7);
+ filter: unset;
+}
+
+.mobile {
+ display: none;
+}
+
+.mobile-hide {
+ display: unset;
+}
+
+@media only screen and (max-width: 800px) {
+ .mobile {
+ display: inherit;
+ }
+
+ .mobile-hide {
+ display: none;
+ }
+
+ #register-button {
+ top: unset;
+ }
+
+ pre {
+ width: unset;
+ }
+}
+
+@media only screen and (max-width: 600px) {
+ sidebar {
+ max-width: 100%;
+ min-width: 100%;
+ width: 100%;
+ max-height: min-content;
+ min-height: min-content;
+ height: min-content;
+ overflow-y: initial;
+ }
+ pre {
+ width: unset;
+ }
+}
+
+a.bare
+{
+ text-decoration: none;
+}
+
+@media only screen and (max-width: 700px) {
+ content {
+ width: 650px;
+ }
+}
+
+@media only screen and (max-width: 800px) {
+ content {
+ width: 100%;
+ flex-direction: column-reverse;
+ }
+
+ content > right {
+ width: 100%;
+ }
+
+ content > left {
+ width: 100%;
+ max-width: unset;
+ min-width: unset;
+ box-shadow: unset;
+ }
+}
+
+toast > error {
+ color: var(--value9);
+ font-weight: bold;
+}
+
+card toast {
+ max-width: var(--width-card);
+}
+
+.strikethrough-diagonal {
+ position: relative;
+
+ &:before {
+ position: absolute;
+ content: '';
+ left: 0;
+ top: 45%;
+ right: 0;
+ border-top: 3px solid;
+ border-color: red;
+ -webkit-transform: skewY(10deg);
+ -moz-transform: skewY(10deg);
+ transform: skewY(10deg);
+ }
+}
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..1624831
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
+ ZedShaw's Game Thing
+
+
+
+
+
+ π‘ Zed's Game Dev Website Yay
+
+
+
+ Zed's Game Dev Website
+
+
+ View Past Streams
+ Watch Today's Livestream
+
+
+
+ Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sitββ, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
+
+
+
+
+
+ Left Image
+
+
I stream on Twitch.
+
+
I stream every day at 10AM/10PM EST time. 60% of the time it's a chill laid back stream with only programming and a bit of talking about programming. 30% of the time it's art for games I'm making. 10% of the time it's games I'm playing.
+
+
Watch me on Twitch
+
+
+
+
+
+ Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sitββ, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
+
+
+
+
+
+
+
Zed's Trash Ass Games
+
Are you a fan of retro styled half-assed but fun games? Me too, so here's my games I've made with that theme. Think "it's the late 80s and nobody knows how to make a game" when you play these and you'll enjoy every minute of it.
+
+
Play my Games
+
+ Right Image
+
+
+
+
+ Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sitββ, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
+
+
+
+
+
+ Left Image
+
+
Checkout my Git
+
I put al of my code online for people to read and study. If you're curious about the code behind my games or anything else I make then take a look at my git. It's like a buffet of half-finished genius.
+
+
View my Git
+
+
+
+
+
+ Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sitββ, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
+
+
+
+
+
+
+
+
diff --git a/public/live/index.html b/public/live/index.html
new file mode 100644
index 0000000..07ac093
--- /dev/null
+++ b/public/live/index.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+ ZedShaw's Game Thing
+
+
+
+
+
+ π‘ Zed's Game Dev Website Yay
+
+
+
+
+
+ Stream Viewer
+
+
+
+ Links Found in Chat
+
+ https://somelink.com
+ A funky website
+ https://somelink.com
+ A funky website
+
+
+
+
+
+
+
+
+
+
diff --git a/public/stream/1/index.html b/public/stream/1/index.html
new file mode 100644
index 0000000..bd7d093
--- /dev/null
+++ b/public/stream/1/index.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+ ZedShaw's Game Thing
+
+
+
+
+
+ π‘ Zed's Game Dev Website Yay
+
+
+
+
+
+ Stream #34: C++ Game Dev|Retro Raycaster|No Brainrot Stream
+
+
+
Summary Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror.
+
+
+
+
+ Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror.
+
+
+
+ Links Posted
+
+
+ https://somelink.com
+ A funky website
+ https://somelink.com
+ A funky website
+ https://somelink.com
+ A funky website
+ https://somelink.com
+ A funky website
+ https://somelink.com
+ A funky website
+ https://somelink.com
+ A funky website
+
+
+
+
+
+
+ Left Image
+
+
I stream on Twitch.
+
+
I stream every day at 10AM/10PM EST time. 60% of the time it's a chill laid back stream with only programming and a bit of talking about programming. 30% of the time it's art for games I'm making. 10% of the time it's games I'm playing.
+
+
Watch me on Twitch
+
+
+
+
+
+
+
+
+
diff --git a/public/stream/index.html b/public/stream/index.html
new file mode 100644
index 0000000..26ee980
--- /dev/null
+++ b/public/stream/index.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+ ZedShaw's Game Thing
+
+
+
+
+
+ π‘ Zed's Game Dev Website Yay
+
+
+
+
+ Past Streams
+ This is where you can checkout information we dropped in a past stream. Did I post a link and you need to remember it? Did someone in chat mention something? Here's where you find it.
+
+
+
+
+ Stream Thumbnail
+
+ Streamed on 10/10/2025
+ Stream description here.
+ View This Stream
+
+
+
+ Stream Thumbnail
+
+ Stream description here.
+ View This Stream
+
+
+
+ Stream Thumbnail
+
+ Streamed on 10/10/2025 Stream description here.
+ View This Stream
+
+
+
+ Stream Thumbnail
+
+ Stream description here.
+ View This Stream
+
+
+
+ Stream Thumbnail
+
+ Stream description here.
+ View This Stream
+
+
+
+
+
+
+
+
diff --git a/scratchpad/json_decode.go b/scratchpad/json_decode.go
new file mode 100644
index 0000000..e820bd0
--- /dev/null
+++ b/scratchpad/json_decode.go
@@ -0,0 +1,28 @@
+package main
+
+import (
+ "bytes"
+ "encoding/json"
+ "fmt"
+ "log"
+ "os"
+)
+
+type User struct {
+ ID string `json:"id"`
+ Name string `json:"name"`
+ Email string `json:"email"`
+ PhoneNumber string `json:"phoneNumber"`
+}
+
+func main() {
+ b, err := os.ReadFile("user.json")
+ if err != nil {
+ log.Fatalf("Failed to read file: %v\n", err);
+ }
+
+ var u User
+ json.NewDecoder(bytes.NewBuffer(b)).Decode(&u)
+
+ fmt.Printf("%#v", u)
+}
diff --git a/scratchpad/template.html b/scratchpad/template.html
new file mode 100644
index 0000000..1c47381
--- /dev/null
+++ b/scratchpad/template.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+ ZedShaw's Game Thing
+
+
+
+
+
+ π‘ Zed's Game Dev Website Yay
+
+
+
+ Page Title
+
+
+
+
+
+
+
diff --git a/scratchpad/user.json b/scratchpad/user.json
new file mode 100644
index 0000000..97d89ca
--- /dev/null
+++ b/scratchpad/user.json
@@ -0,0 +1,6 @@
+{
+ "id": "0000001",
+ "name": "user",
+ "email": "user.email.com",
+ "phoneNumber": "+0001"
+}