diff --git a/.gitignore b/.gitignore
index ae7c423..ef1e014 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ dist/
emsdk/
.idea
rust-sdl2-emscripten/
+assets/site/build.css
diff --git a/assets/site/index.html b/assets/site/index.html
index 4842454..19edd69 100644
--- a/assets/site/index.html
+++ b/assets/site/index.html
@@ -2,12 +2,25 @@
-
← ↑ → ↓ Move
-
Space Change Sprite
-
Shift + ↑↓ Change Volume
+
+
+
+
+
+
+
+
+
+ ← ↑ → ↓
+ Move
+
+ |
+
+ Space
+ Toggle Debug
+
+ |
+
+ P
+ Pause / Unpause
+
+ |
+
+ M
+ Mute / Unmute
+
+
+
diff --git a/assets/site/styles.css b/assets/site/styles.css
new file mode 100644
index 0000000..8423c27
--- /dev/null
+++ b/assets/site/styles.css
@@ -0,0 +1,28 @@
+@import "tailwindcss";
+
+@font-face {
+ font-family: "TerminalVector";
+ src: url("TerminalVector.ttf");
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+}
+
+/* Key badge styling */
+.code {
+ @apply px-3 py-1 rounded-md font-mono text-[0.9em] lowercase inline-block align-middle;
+ background: rgba(250, 204, 21, 0.08); /* yellow-400 at low opacity */
+ border: 1px solid rgba(250, 204, 21, 0.25);
+ color: #fde68a; /* lighter yellow for readability */
+ font-family: "TerminalVector", ui-monospace, Consolas, "Courier New",
+ monospace;
+}
+
+/* Title styling */
+.arcade-title {
+ font-family: "TerminalVector", ui-monospace, Consolas, "Courier New",
+ monospace;
+ letter-spacing: 0.08em;
+ text-shadow: 0 0 18px rgba(250, 204, 21, 0.15),
+ 0 0 2px rgba(255, 255, 255, 0.25);
+}
diff --git a/assets/site/styles.scss b/assets/site/styles.scss
deleted file mode 100644
index c5290d3..0000000
--- a/assets/site/styles.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
- font-family: "Liberation Mono";
- src:
- url("LiberationMono.woff2") format("woff2"),
- url("LiberationMono.woff") format("woff");
- font-weight: normal;
- font-style: normal;
- font-display: swap;
-}
-
-canvas {
- @apply w-full h-[65vh] min-h-[200px] block mx-auto bg-black;
-}
-
-.code {
- @apply px-1 rounded font-mono bg-zinc-900 border border-zinc-700 lowercase;
-}
diff --git a/web.build.ts b/web.build.ts
index 2c9b0df..0cebe76 100644
--- a/web.build.ts
+++ b/web.build.ts
@@ -43,7 +43,7 @@ async function build(release: boolean, env: Record
) {
}`.env(env);
log("Generating CSS");
- await $`pnpx postcss-cli ./assets/site/styles.scss -o ./assets/site/build.css`;
+ await $`npx @tailwindcss/cli -i ./assets/site/styles.css -o ./assets/site/build.css`;
const buildType = release ? "release" : "debug";
const siteFolder = resolve("assets/site");
@@ -52,11 +52,13 @@ async function build(release: boolean, env: Record) {
// The files to copy into 'dist'
const files = [
- ...["index.html", "favicon.ico", "build.css"].map((file) => ({
- src: join(siteFolder, file),
- dest: join(dist, file),
- optional: false,
- })),
+ ...["index.html", "favicon.ico", "build.css", "TerminalVector.ttf"].map(
+ (file) => ({
+ src: join(siteFolder, file),
+ dest: join(dist, file),
+ optional: false,
+ })
+ ),
...["pacman.wasm", "pacman.js", "deps/pacman.data"].map((file) => ({
src: join(outputFolder, file),
dest: join(dist, file.split("/").pop() || file),