From 93f80150a1d07cf3ce51447636c7f8cd510832f1 Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Sat, 13 Dec 2025 17:03:24 -0800 Subject: Syntax highlighting and a real repo struct --- .claude/settings.local.json | 12 + .demo/index.html | 7 +- .dockerignore | 2 + .gitignore | 7 +- Dockerfile | 21 +- docker-entrypoint.sh | 16 - esbuild.config.js | 75 +++ package-lock.json | 1185 +++++++++++++++++++++++++++++++++++++++ package.json | 20 + src/assets/fonts/Maple.woff2 | Bin 0 -> 73444 bytes src/assets/img/bg.png | Bin 0 -> 47672 bytes src/assets/img/coffee.svg | 1 + src/assets/img/favicon.ico | Bin 0 -> 32243 bytes src/assets/oneko/oneko.gif | Bin 0 -> 3316 bytes src/css/style.css | 1277 ++++++++++++++++++++++++++++++++++++++++++ src/index.html | 599 ++++++++++++++++++++ src/js/oneko.js | 284 ++++++++++ src/js/script.js | 87 +++ static/css/style.css | 1096 ------------------------------------ static/fonts/Maple.woff2 | Bin 73444 -> 0 bytes static/img/bg.png | Bin 47672 -> 0 bytes static/img/coffee.svg | 1 - static/img/favicon.ico | Bin 32243 -> 0 bytes static/index.html | 593 -------------------- static/js/script.js | 76 --- static/oneko/oneko.gif | Bin 3316 -> 0 bytes static/oneko/oneko.js | 284 ---------- 27 files changed, 3566 insertions(+), 2077 deletions(-) create mode 100644 .claude/settings.local.json delete mode 100644 docker-entrypoint.sh create mode 100644 esbuild.config.js create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 src/assets/fonts/Maple.woff2 create mode 100644 src/assets/img/bg.png create mode 100644 src/assets/img/coffee.svg create mode 100644 src/assets/img/favicon.ico create mode 100644 src/assets/oneko/oneko.gif create mode 100644 src/css/style.css create mode 100644 src/index.html create mode 100644 src/js/oneko.js create mode 100644 src/js/script.js delete mode 100644 static/css/style.css delete mode 100644 static/fonts/Maple.woff2 delete mode 100644 static/img/bg.png delete mode 100644 static/img/coffee.svg delete mode 100644 static/img/favicon.ico delete mode 100644 static/index.html delete mode 100644 static/js/script.js delete mode 100644 static/oneko/oneko.gif delete mode 100644 static/oneko/oneko.js diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..282bb4b --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,12 @@ +{ + "permissions": { + "allow": [ + "Bash(tree:*)", + "Bash(find:*)", + "Bash(file:*)", + "Bash(npm run dev:*)", + "Bash(npm run build:*)", + "Bash(HOST=\"https://cdn.example.com\" npm run build:*)" + ] + } +} diff --git a/.demo/index.html b/.demo/index.html index 1b93990..7a0195d 100644 --- a/.demo/index.html +++ b/.demo/index.html @@ -4,8 +4,8 @@ Liz Dot Coffee! - - + +
@@ -42,7 +42,6 @@

© 2025 My Retro Blog. Made with coffee and nostalgia.

- - + diff --git a/.dockerignore b/.dockerignore index c336721..405a410 100644 --- a/.dockerignore +++ b/.dockerignore @@ -5,3 +5,5 @@ .DS_Store README.md *.md +node_modules +dist diff --git a/.gitignore b/.gitignore index 8b32a77..f66f2eb 100644 --- a/.gitignore +++ b/.gitignore @@ -19,14 +19,19 @@ Thumbs.db .env .env.local -# Node (if you add build tooling later) +# Node and Build node_modules/ +dist/ npm-debug.log yarn-error.log +*.log # Docker .docker +# Claude +.claude + # Temporary files *.tmp *.log diff --git a/Dockerfile b/Dockerfile index 89746d6..89218ae 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,15 +1,24 @@ -FROM nginx:alpine as adelie +FROM node:22-alpine AS builder -COPY static/ /usr/share/nginx/html/ +ARG HOST="adelie.liz.coffee" +ENV HOST=${HOST} -COPY nginx.conf /etc/nginx/nginx.conf +WORKDIR /app +COPY package*.json ./ +RUN npm ci --only=production + +COPY src/ ./src/ +COPY esbuild.config.js ./ +RUN npm run build -COPY docker-entrypoint.sh /usr/local/bin/ -RUN chmod +x /usr/local/bin/docker-entrypoint.sh +FROM nginx:alpine as adelie + +COPY --from=builder /app/dist/ /usr/share/nginx/html/ +COPY nginx.conf /etc/nginx/nginx.conf EXPOSE 80 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \ CMD wget --quiet --tries=1 --spider http://localhost/ || exit 1 -ENTRYPOINT ["/usr/local/bin/docker-entrypoint.sh"] +CMD ["nginx", "-g", "daemon off;"] diff --git a/docker-entrypoint.sh b/docker-entrypoint.sh deleted file mode 100644 index b4bade6..0000000 --- a/docker-entrypoint.sh +++ /dev/null @@ -1,16 +0,0 @@ -#!/bin/sh -set -e - -if [ ! -z "$HOST" ]; then - ESCAPED_HOST=$(echo "$HOST" | sed 's/[\/&]/\\&/g') - - find /usr/share/nginx/html -name "*.css" -type f -exec sed -i "s|/static/|${ESCAPED_HOST}/|g" {} \; - find /usr/share/nginx/html -name "*.js" -type f -exec sed -i "s|/static/|${ESCAPED_HOST}/|g" {} \; - find /usr/share/nginx/html -name "*.html" -type f -exec sed -i "s|/static/|${ESCAPED_HOST}/|g" {} \; - - echo "Updated static URLs to use HOST: $HOST" -else - echo "Serving static assets from root" -fi - -exec nginx -g "daemon off;" diff --git a/esbuild.config.js b/esbuild.config.js new file mode 100644 index 0000000..1bee10c --- /dev/null +++ b/esbuild.config.js @@ -0,0 +1,75 @@ +const esbuild = require('esbuild'); +const fs = require('fs-extra'); +const path = require('path'); + +const production = process.env.NODE_ENV === 'production'; + +async function buildJS() { + await esbuild.build({ + entryPoints: ['src/js/script.js'], + bundle: true, + minify: production, + sourcemap: true, + target: 'es2020', + outfile: 'dist/bundle.js', + }); +} + +async function buildCSS() { + await esbuild.build({ + entryPoints: ['src/css/style.css'], + bundle: true, + minify: production, + sourcemap: true, + loader: { + '.css': 'css', + '.woff2': 'file', + '.png': 'file', + '.svg': 'file', + }, + outfile: 'dist/bundle.css', + }); +} + +async function copyAssets() { + await fs.copy('src/assets', 'dist', { + overwrite: true, + }); +} + +async function processHTML() { + let html = await fs.readFile('src/index.html', 'utf8'); + + const host = process.env.HOST || ''; + const cleanHost = host.replace(/\/$/, ''); + + if (cleanHost) { + html = html.replace(/href="\/bundle\./g, `href="${cleanHost}/bundle.`); + html = html.replace(/src="\/bundle\./g, `src="${cleanHost}/bundle.`); + html = html.replace(/href="\/img\//g, `href="${cleanHost}/img/`); + html = html.replace(/src="\/oneko\//g, `src="${cleanHost}/oneko/`); + } + + await fs.writeFile('dist/index.html', html); +} + +async function clean() { + await fs.remove('dist'); + await fs.ensureDir('dist'); +} + +async function build() { + try { + await clean(); + await Promise.all([ + buildJS(), + buildCSS(), + copyAssets(), + ]); + await processHTML(); + } catch (err) { + process.exit(1); + } +} + +build(); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..aa28f56 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,1185 @@ +{ + "name": "adelie-css", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "adelie-css", + "version": "1.0.0", + "dependencies": { + "prismjs": "^1.29.0" + }, + "devDependencies": { + "esbuild": "^0.25.5", + "fs-extra": "^11.2.0", + "http-server": "^14.1.1" + } + }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz", + "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz", + "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz", + "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz", + "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz", + "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz", + "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz", + "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz", + "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz", + "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz", + "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz", + "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz", + "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz", + "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==", + "cpu": [ + "mips64el" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz", + "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz", + "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz", + "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz", + "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz", + "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz", + "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz", + "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz", + "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openharmony-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz", + "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz", + "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz", + "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz", + "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz", + "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/async": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz", + "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==", + "dev": true, + "license": "MIT" + }, + "node_modules/basic-auth": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz", + "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==", + "dev": true, + "license": "MIT", + "dependencies": { + "safe-buffer": "5.1.2" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/call-bind-apply-helpers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", + "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/call-bound": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz", + "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==", + "dev": true, + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "get-intrinsic": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "license": "MIT" + }, + "node_modules/corser": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz", + "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/debug": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/dunder-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", + "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==", + "dev": true, + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.1", + "es-errors": "^1.3.0", + "gopd": "^1.2.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-define-property": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", + "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-object-atoms": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", + "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", + "dev": true, + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/esbuild": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz", + "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.25.12", + "@esbuild/android-arm": "0.25.12", + "@esbuild/android-arm64": "0.25.12", + "@esbuild/android-x64": "0.25.12", + "@esbuild/darwin-arm64": "0.25.12", + "@esbuild/darwin-x64": "0.25.12", + "@esbuild/freebsd-arm64": "0.25.12", + "@esbuild/freebsd-x64": "0.25.12", + "@esbuild/linux-arm": "0.25.12", + "@esbuild/linux-arm64": "0.25.12", + "@esbuild/linux-ia32": "0.25.12", + "@esbuild/linux-loong64": "0.25.12", + "@esbuild/linux-mips64el": "0.25.12", + "@esbuild/linux-ppc64": "0.25.12", + "@esbuild/linux-riscv64": "0.25.12", + "@esbuild/linux-s390x": "0.25.12", + "@esbuild/linux-x64": "0.25.12", + "@esbuild/netbsd-arm64": "0.25.12", + "@esbuild/netbsd-x64": "0.25.12", + "@esbuild/openbsd-arm64": "0.25.12", + "@esbuild/openbsd-x64": "0.25.12", + "@esbuild/openharmony-arm64": "0.25.12", + "@esbuild/sunos-x64": "0.25.12", + "@esbuild/win32-arm64": "0.25.12", + "@esbuild/win32-ia32": "0.25.12", + "@esbuild/win32-x64": "0.25.12" + } + }, + "node_modules/eventemitter3": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", + "dev": true, + "license": "MIT" + }, + "node_modules/follow-redirects": { + "version": "1.15.11", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz", + "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/fs-extra": { + "version": "11.3.2", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.2.tgz", + "integrity": "sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=14.14" + } + }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-intrinsic": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", + "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "es-define-property": "^1.0.1", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.1.1", + "function-bind": "^1.1.2", + "get-proto": "^1.0.1", + "gopd": "^1.2.0", + "has-symbols": "^1.1.0", + "hasown": "^2.0.2", + "math-intrinsics": "^1.1.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", + "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==", + "dev": true, + "license": "MIT", + "dependencies": { + "dunder-proto": "^1.0.1", + "es-object-atoms": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/gopd": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", + "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "dev": true, + "license": "ISC" + }, + "node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/has-symbols": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", + "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/he": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", + "dev": true, + "license": "MIT", + "bin": { + "he": "bin/he" + } + }, + "node_modules/html-encoding-sniffer": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", + "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==", + "dev": true, + "license": "MIT", + "dependencies": { + "whatwg-encoding": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/http-proxy": { + "version": "1.18.1", + "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", + "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "eventemitter3": "^4.0.0", + "follow-redirects": "^1.0.0", + "requires-port": "^1.0.0" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/http-server": { + "version": "14.1.1", + "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz", + "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==", + "dev": true, + "license": "MIT", + "dependencies": { + "basic-auth": "^2.0.1", + "chalk": "^4.1.2", + "corser": "^2.0.1", + "he": "^1.2.0", + "html-encoding-sniffer": "^3.0.0", + "http-proxy": "^1.18.1", + "mime": "^1.6.0", + "minimist": "^1.2.6", + "opener": "^1.5.1", + "portfinder": "^1.0.28", + "secure-compare": "3.0.1", + "union": "~0.5.0", + "url-join": "^4.0.1" + }, + "bin": { + "http-server": "bin/http-server" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "license": "MIT", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/jsonfile": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz", + "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==", + "dev": true, + "license": "MIT", + "dependencies": { + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/math-intrinsics": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", + "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true, + "license": "MIT", + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, + "license": "MIT" + }, + "node_modules/object-inspect": { + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", + "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/opener": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz", + "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==", + "dev": true, + "license": "(WTFPL OR MIT)", + "bin": { + "opener": "bin/opener-bin.js" + } + }, + "node_modules/portfinder": { + "version": "1.0.38", + "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.38.tgz", + "integrity": "sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==", + "dev": true, + "license": "MIT", + "dependencies": { + "async": "^3.2.6", + "debug": "^4.3.6" + }, + "engines": { + "node": ">= 10.12" + } + }, + "node_modules/prismjs": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz", + "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/qs": { + "version": "6.14.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz", + "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "side-channel": "^1.1.0" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "dev": true, + "license": "MIT" + }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "dev": true, + "license": "MIT" + }, + "node_modules/secure-compare": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz", + "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==", + "dev": true, + "license": "MIT" + }, + "node_modules/side-channel": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", + "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==", + "dev": true, + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.3", + "side-channel-list": "^1.0.0", + "side-channel-map": "^1.0.1", + "side-channel-weakmap": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-list": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz", + "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", + "dev": true, + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-map": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz", + "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==", + "dev": true, + "license": "MIT", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-weakmap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz", + "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==", + "dev": true, + "license": "MIT", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3", + "side-channel-map": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/union": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz", + "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==", + "dev": true, + "dependencies": { + "qs": "^6.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/universalify": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", + "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 10.0.0" + } + }, + "node_modules/url-join": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz", + "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==", + "dev": true, + "license": "MIT" + }, + "node_modules/whatwg-encoding": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz", + "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==", + "dev": true, + "license": "MIT", + "dependencies": { + "iconv-lite": "0.6.3" + }, + "engines": { + "node": ">=12" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..9414767 --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "adelie", + "version": "0.0.1", + "private": true, + "scripts": { + "build": "NODE_ENV=production node esbuild.config.js", + "dev": "node esbuild.config.js", + "clean": "rm -rf dist", + "serve": "npx http-server dist -p 8080 -o", + "dev:serve": "npm run dev && npm run serve" + }, + "dependencies": { + "prismjs": "^1.29.0" + }, + "devDependencies": { + "esbuild": "^0.25.5", + "fs-extra": "^11.2.0", + "http-server": "^14.1.1" + } +} diff --git a/src/assets/fonts/Maple.woff2 b/src/assets/fonts/Maple.woff2 new file mode 100644 index 0000000..d3641fe Binary files /dev/null and b/src/assets/fonts/Maple.woff2 differ diff --git a/src/assets/img/bg.png b/src/assets/img/bg.png new file mode 100644 index 0000000..ea94170 Binary files /dev/null and b/src/assets/img/bg.png differ diff --git a/src/assets/img/coffee.svg b/src/assets/img/coffee.svg new file mode 100644 index 0000000..6af3eb0 --- /dev/null +++ b/src/assets/img/coffee.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/favicon.ico b/src/assets/img/favicon.ico new file mode 100644 index 0000000..e441116 Binary files /dev/null and b/src/assets/img/favicon.ico differ diff --git a/src/assets/oneko/oneko.gif b/src/assets/oneko/oneko.gif new file mode 100644 index 0000000..a009c2c Binary files /dev/null and b/src/assets/oneko/oneko.gif differ diff --git a/src/css/style.css b/src/css/style.css new file mode 100644 index 0000000..50c6f48 --- /dev/null +++ b/src/css/style.css @@ -0,0 +1,1277 @@ +:root { + /* Win95 "strawberry latte" tokens */ + + /* Desktop (rarely used, but handy for full-page demos) */ + --desktop: #d7a5b7; + + /* Page + surfaces */ + --bg: #f4ece7; /* page behind windows */ + --bg-pattern: #efe5df; + + /* Background texture (dither/checker overlay) */ + --dither-ink: rgba(59, 46, 44, 0.22); + --dither-opacity: 0.18; + --surface: #e9dcd5; /* window face */ + --surface-alt: #fff7f2; /* milk highlight */ + + /* Text */ + --fg: #2a1f1d; + --muted: #6a5550; + + /* 3D border system */ + --border: #3b2e2c; + --border-light: #fff7f2; + --border-dark: #8e7670; + + /* Girly coffee accents */ + --primary: #e56aa6; /* strawberry */ + --primary-light: #f08dbe; /* strawberry milk */ + --primary-dark: #c84d86; /* rose */ + + --secondary: #b69cff; /* lilac */ + --secondary-light: #d7c8ff; + --secondary-dark: #8f78d6; + + --accent-brown: #b88a68; /* latte */ + --accent-brown-light: #d4a574; + --accent-brown-dark: #7a5245; + + /* Title bar (Win95-ish window chrome) */ + --titlebar-a: #d85b9b; + --titlebar-b: #7a3e8e; + --titlebar-fg: #fff7f2; + + /* Links */ + --link: #c84d86; + --link-visited: #6f2f80; + --link-active: #b5173d; + + /* Keep existing names as aliases */ + --accent-pink: var(--primary); + --accent-lavender: var(--secondary); + + /* Status colors (slightly softened) */ + --success: #2e8b57; + --error: #b3261e; + --warning: #b7791f; + --info: #2b6cb0; + + /* Spacing */ + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 1.5rem; + --space-lg: 2rem; + --space-xl: 3rem; + + /* Borders */ + --border-width: 2px; + --border-style: solid; + + /* Type */ + --font-mono: "Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --line-height: 1.35; + + /* Shadows */ + --shadow-sm: 1px 1px 0; + --shadow-md: 2px 2px 0; + --shadow-lg: 3px 3px 0; + --shadow-color: rgba(0, 0, 0, 0.22); + --shadow-box: 2px 2px 0 rgba(0, 0, 0, 0.12); + --shadow-button: 1px 1px 0 rgba(0, 0, 0, 0.18); + + --highlight: rgba(255, 247, 242, 0.9); + --lowlight: rgba(59, 46, 44, 0.55); + + --content-max-width: 1000px; +} + +[data-theme="dark"] { + /* Espresso-night variant */ + --bg: #2d2523; + --bg-pattern: #241e1c; + + --dither-ink: rgba(255, 247, 242, 0.12); + --dither-opacity: 0.14; + --surface: #3b312f; + --surface-alt: #463a37; + + --fg: #f9efea; + --muted: #cbb8b1; + + --border: #f1e6e0; + --border-light: #6e5b57; + --border-dark: #120d0c; + + --primary: #f06aa6; + --primary-light: #ff97c8; + --primary-dark: #d94b8e; + + --secondary: #b69cff; + --secondary-light: #d7c8ff; + --secondary-dark: #8f78d6; + + --accent-brown: #a57353; + --accent-brown-light: #c9936a; + --accent-brown-dark: #6b4a34; + + --titlebar-a: #b04a80; + --titlebar-b: #4f245e; + --titlebar-fg: #fff7f2; + + --link: #ff97c8; + --link-visited: #d7c8ff; + --link-active: #fff0f7; + + /* Status colors (brightened for dark mode) */ + --success: #4caf50; + --error: #ff6b6b; + --warning: #ffa500; + --info: #64b5f6; + + --shadow-color: rgba(0, 0, 0, 0.75); + --highlight: rgba(255, 255, 255, 0.2); + --lowlight: rgba(0, 0, 0, 0.85); +} + +@font-face { + font-family: "Mono"; + src: url("../assets/fonts/Maple.woff2") format("woff2"); + font-display: swap; + font-weight: normal; +} + +@supports (font-synthesis: none) { + @font-face { + font-family: "Mono"; + src: url("../assets/fonts/Maple.woff2") format("woff2"); + font-synthesis: none; + } +} + +/* base */ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + cursor: + url('data:image/svg+xml;utf8,') + 0 0, + auto !important; +} + +::selection { + background: var(--primary); + color: var(--surface-alt); +} + +:focus-visible { + outline: 1px dotted var(--fg); + outline-offset: 2px; +} + +html { + font-size: 16px; + background-color: var(--bg); + position: relative; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + height: 100vh; +} + +html::before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: linear-gradient( + 45deg, + var(--dither-ink) 25%, + transparent 25%, + transparent 75%, + var(--dither-ink) 75% + ), + linear-gradient( + 45deg, + var(--dither-ink) 25%, + transparent 25%, + transparent 75%, + var(--dither-ink) 75% + ), + url("../assets/img/bg.png"); + background-size: + 10px 10px, + 10px 10px, + auto; + background-position: + 0 0, + 5px 5px, + 0 0; + background-repeat: repeat; + opacity: var(--dither-opacity); + z-index: -1; + pointer-events: none; +} + +body { + background: transparent; + color: var(--fg); + line-height: var(--line-height); + padding: var(--space-md); + padding-top: calc(var(--space-md) + 3rem); + max-width: var(--content-max-width); + margin: 0 auto; + font-family: var(--font-mono); + scrollbar-color: var(--accent-lavender) var(--bg); + scrollbar-width: thin; + display: flex; + flex-direction: column; + height: 100vh; +} + +/* webkit scrollbar (chrome, safari, edge) */ +::-webkit-scrollbar { + width: 12px; +} + +::-webkit-scrollbar-track { + background: var(--bg); + border: 2px solid var(--border); + box-shadow: + inset 1px 1px 0 var(--border-light), + inset -1px -1px 0 var(--border-dark); +} + +::-webkit-scrollbar-thumb { + background: var(--accent-lavender); + border: 2px outset var(--border-light); + box-shadow: + inset 1px 1px 0 var(--highlight), + inset -1px -1px 0 var(--lowlight); +} + +::-webkit-scrollbar-thumb:hover { + background: var(--accent-pink); +} + +.div-centered { + max-width: var(--content-max-width); + margin: auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: calc(100vh - 4.5rem); + text-align: justify; +} + +/* typography */ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--font-mono); + font-weight: 700; + line-height: 1.15; + margin-bottom: var(--space-md); + color: var(--fg); +} + +h1 { + font-size: 2rem; + margin-bottom: var(--space-lg); + background: linear-gradient(90deg, var(--titlebar-a), var(--titlebar-b)); +} + +/* "Titlebar" headings: retro, but still cute */ +h1, +h2, +h3 { + padding: 0.55rem 0.75rem; + border: var(--border-width) solid var(--border); + box-shadow: + inset 1px 1px 0 var(--border-light), + inset -1px -1px 0 var(--border-dark); + color: var(--titlebar-fg); + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25); +} + +h2 { + font-size: 1.5rem; + background: linear-gradient(90deg, var(--titlebar-a), var(--titlebar-b)); +} + +h3 { + font-size: 1.25rem; + background: linear-gradient(90deg, var(--accent-brown-dark), var(--accent-brown)); +} + +h4 { + font-size: 1.1rem; +} + +h5 { + font-size: 1rem; +} + +h6 { + font-size: 0.9rem; +} + +p { + margin-bottom: var(--space-sm); +} + +a { + color: var(--link); + text-decoration: underline; + text-decoration-thickness: 2px; + text-underline-offset: 2px; +} + +a:visited { + color: var(--link-visited); +} + +a:hover { + background: var(--primary-light); + color: var(--fg); +} + +a:active { + color: var(--link-active); +} + +small { + color: var(--muted); + font-size: 0.875rem; +} + +blockquote { + border-left: 3px solid var(--accent-brown); + padding-left: var(--space-md); + margin: var(--space-md) 0; + font-style: italic; + color: var(--muted); +} + +/* lists */ + +ul, +ol { + margin: var(--space-sm) 0; + padding-left: var(--space-lg); +} + +li { + margin-bottom: var(--space-xs); +} + +/* tables */ + +table { + width: 100%; + border-collapse: collapse; + margin: var(--space-md) 0; + border: var(--border-width) solid var(--border); + background: var(--surface); + box-shadow: + inset 1px 1px 0 var(--border-light), + inset -1px -1px 0 var(--border-dark), + 3px 3px 0 rgba(0, 0, 0, 0.12); +} + +thead { + background: linear-gradient(90deg, var(--titlebar-a), var(--titlebar-b)); + color: var(--titlebar-fg); + font-weight: 700; +} + +th, +td { + padding: var(--space-xs) var(--space-sm); + border: 1px solid var(--border-dark); + text-align: left; +} + +tbody tr:nth-child(odd) { + background: var(--surface-alt); +} + +tbody tr:nth-child(even) { + background: var(--surface); +} + +tbody tr:hover { + background: color-mix(in srgb, var(--primary) 12%, transparent); +} + +/* code */ + +code { + background: var(--surface-alt); + padding: 0.25rem 0.5rem; + border: 1px solid var(--border-dark); + font-size: 0.875rem; + font-family: var(--font-mono); +} + +pre { + background: var(--surface-alt); + border: var(--border-width) solid var(--border); + padding: var(--space-md); + margin: var(--space-md) 0; + overflow-x: auto; + box-shadow: + inset 1px 1px 0 var(--border-light), + inset -1px -1px 0 var(--border-dark), + 3px 3px 0 rgba(0, 0, 0, 0.12); +} + +pre code { + background: transparent; + border: none; + padding: 0; + font-size: 0.875rem; +} + +/* Prism.js syntax highlighting */ + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: var(--muted); + font-style: italic; +} + +.token.punctuation { + color: var(--fg); +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol { + color: var(--secondary-dark); +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin { + color: var(--accent-brown-dark); +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: var(--primary-dark); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: var(--primary-dark); + font-weight: 700; +} + +.token.function, +.token.class-name { + color: var(--primary); + font-weight: 700; +} + +.token.regex, +.token.important, +.token.variable { + color: var(--accent-brown); +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +/* Dark theme variants */ + +[data-theme="dark"] .token.keyword, +[data-theme="dark"] .token.operator { + color: var(--primary-light); +} + +[data-theme="dark"] .token.string, +[data-theme="dark"] .token.selector { + color: var(--accent-brown-light); +} + +[data-theme="dark"] .token.number, +[data-theme="dark"] .token.constant { + color: var(--secondary-light); +} + +/* dividers */ + +hr { + border: none; + border-top: 2px solid var(--border-dark); + margin: var(--space-lg) 0; + height: 0; +} + +/* layout */ + +header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + border-bottom: 2px solid var(--border); + padding: 0.45rem var(--space-md); + margin-bottom: 0; + background: linear-gradient(90deg, var(--titlebar-a), var(--titlebar-b)); + color: var(--titlebar-fg); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); + box-shadow: + inset 1px 1px 0 var(--border-light), + inset -1px -1px 0 var(--border-dark), + 0 2px 0 rgba(0, 0, 0, 0.08); +} + +header h1 { + display: none; +} + +header::before { + content: ""; + display: inline-block; + width: 1.5rem; + height: 1.5rem; + background-image: url("../assets/img/coffee.svg"); + background-size: 1.1rem 1.1rem; + background-position: center; + background-repeat: no-repeat; + margin-right: 0.5rem; + background-color: var(--surface); + border: 2px outset var(--border-light); + box-shadow: + inset 1px 1px 0 var(--highlight), + inset -1px -1px 0 var(--lowlight); +} + +nav { + display: flex; + gap: var(--space-md); + flex-wrap: wrap; + align-items: center; + margin: 0; + flex: 1; +} + +nav a { + font-size: 0.85rem; + padding: 0.1rem 0.15rem; + color: var(--titlebar-fg); + text-decoration: none; + border-bottom: 2px solid color-mix(in srgb, var(--titlebar-fg) 55%, transparent); +} + +nav a:visited { + color: var(--titlebar-fg); +} + +nav a:hover { + background: color-mix(in srgb, var(--surface-alt) 18%, transparent); + border-bottom-color: var(--primary-light); +} + +nav a:active { + background: color-mix(in srgb, var(--surface-alt) 28%, transparent); + border-bottom-color: var(--primary); +} + +main { + flex: 1; +} + +article { + border: var(--border-width) solid var(--border); + padding: var(--space-md); + margin-bottom: var(--space-lg); + background: var(--surface); + box-shadow: + inset 1px 1px 0 var(--border-light), + inset -1px -1px 0 var(--border-dark), + 4px 4px 0 rgba(0, 0, 0, 0.14), + 5px 5px 0 rgba(0, 0, 0, 0.06); +} + +article > :last-child { + margin-bottom: 0; +} + +article h2 { + margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-md); + border-left: none; + border-right: none; + border-top: none; + border-bottom: var(--border-width) solid var(--border); + box-shadow: none; + text-shadow: none; +} + +footer { + border: var(--border-width) solid var(--border); + padding: var(--space-md); + text-align: center; + background: var(--surface); + font-size: 0.875rem; + box-shadow: + inset 1px 1px 0 var(--border-light), + inset -1px -1px 0 var(--border-dark), + 4px 4px 0 rgba(0, 0, 0, 0.14), + 5px 5px 0 rgba(0, 0, 0, 0.06); +} + +footer > :last-child { + margin-bottom: 0; +} + +/* components */ + +/* forms */ + +input, +textarea, +select { + font-family: var(--font-mono); + padding: var(--space-xs) var(--space-sm); + border: 2px inset var(--border-light); + background: var(--surface-alt); + color: var(--fg); + font-size: 0.875rem; + box-shadow: + inset 1px 1px 0 var(--lowlight), + inset -1px -1px 0 var(--highlight); + transition: border-color 0.15s, box-shadow 0.15s; + width: 100%; + max-width: 100%; +} + +input::placeholder, +textarea::placeholder, +select::placeholder { + color: var(--muted); + opacity: 0.8; +} + +[data-theme="dark"] input::placeholder, +[data-theme="dark"] textarea::placeholder, +[data-theme="dark"] select::placeholder { + color: #b8b0a0; + opacity: 1; +} + +input:focus, +textarea:focus, +select:focus { + outline: 1px dotted var(--fg); + outline-offset: 2px; + border-color: var(--primary); + box-shadow: + inset 1px 1px 0 var(--lowlight), + inset -1px -1px 0 var(--highlight), + 0 0 0 2px var(--primary); +} + +input:invalid, +textarea:invalid { + border-color: var(--error); +} + +input:invalid:focus, +textarea:invalid:focus { + box-shadow: + inset 1px 1px 0 var(--highlight), + inset -1px -1px 0 var(--lowlight), + 0 0 0 2px var(--error); +} + +textarea { + resize: vertical; + min-height: 4rem; + width: 100%; +} + +select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1f1d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 0.5rem center; + background-size: 1.2em; + padding-right: 2.5rem; +} + +[data-theme="dark"] select { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f9efea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); +} + +option { + background: var(--bg); + color: var(--fg); + padding: var(--space-sm); +} + +option:checked { + background: linear-gradient(var(--primary), var(--primary)); + color: var(--bg); +} + +input[type="checkbox"], +input[type="radio"] { + appearance: none; + width: 1.3rem; + height: 1.3rem; + min-width: 1.3rem; + min-height: 1.3rem; + padding: 0; + cursor: pointer; + margin: 0 0.5rem 0 0; + vertical-align: middle; + border: 2px inset var(--border-light); + box-shadow: + inset 1px 1px 0 var(--lowlight), + inset -1px -1px 0 var(--highlight); + background: var(--surface-alt); + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + font-weight: normal; +} + +input[type="radio"] { + border-radius: 50%; +} + +input[type="checkbox"]:checked, +input[type="radio"]:checked { + background: var(--primary); + border-style: inset; +} + +label { + display: block; + margin-bottom: var(--space-xs); + font-weight: bold; + color: var(--fg); +} + +input[type="checkbox"] + label, +input[type="radio"] + label { + display: inline; + margin: 0; + font-weight: normal; +} + +/* toggle switches */ + +input[type="checkbox"].toggle { + appearance: none; + width: 2.8rem; + height: 1.6rem; + padding: 0; + margin: 0 0.5rem 0 0; + border: 2px outset var(--border-light); + background: var(--muted); + cursor: pointer; + position: relative; + vertical-align: middle; + box-shadow: + inset 1px 1px 0 rgba(255, 255, 255, 0.3), + inset -1px -1px 0 rgba(0, 0, 0, 0.6); + transition: background 0.2s; +} + +input[type="checkbox"].toggle:checked { + background: var(--primary); +} + +input[type="checkbox"].toggle::after { + content: ""; + position: absolute; + width: 0.6rem; + height: 0.6rem; + background: var(--surface); + border: 2px outset var(--border-light); + top: 50%; + transform: translateY(-50%); + left: 0.2rem; + transition: left 0.2s; + box-shadow: + inset 1px 1px 0 var(--highlight), + inset -1px -1px 0 var(--lowlight); +} + +input[type="checkbox"].toggle:checked::after { + left: 1.5rem; +} + +[data-theme="dark"] input[type="checkbox"].toggle { + background: var(--secondary); +} + +[data-theme="dark"] input[type="checkbox"].toggle:checked { + background: var(--primary); +} + +[data-theme="dark"] input[type="checkbox"].toggle::after { + background: var(--accent-brown-light); +} + +#theme-toggle::before { + content: "☾"; + position: absolute; + right: 0.4rem; + top: 50%; + transform: translateY(-50%); + font-size: 0.9rem; + line-height: 1; + color: var(--titlebar-fg); + transition: opacity 0.2s; +} + +#theme-toggle:checked::before { + content: "☀"; + right: auto; + left: 0.4rem; +} + +/* range sliders */ + +input[type="range"] { + width: 100%; + height: 2.2rem; + background: transparent; + cursor: pointer; + appearance: none; + vertical-align: middle; +} + +input[type="range"]::-webkit-slider-thumb { + appearance: none; + width: 1.5rem; + height: 1rem; + margin-top: -0.25rem; + background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 50%, var(--primary-dark) 100%); + border: 2px outset var(--border-light); + cursor: pointer; + box-shadow: + inset 1px 1px 0 var(--highlight), + inset -1px -1px 0 var(--lowlight), + 2px 2px 0 rgba(0, 0, 0, 0.3), + 3px 3px 0 rgba(0, 0, 0, 0.1); +} + +input[type="range"]::-webkit-slider-thumb:active { + box-shadow: + inset 1px 1px 0 var(--lowlight), + inset -1px -1px 0 var(--highlight), + 1px 1px 0 rgba(0, 0, 0, 0.2); +} + +input[type="range"]::-moz-range-thumb { + width: 1.5rem; + height: 0.8rem; + margin-top: -0.15rem; + background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 50%, var(--primary-dark) 100%); + border: 2px outset var(--border-light); + cursor: pointer; + box-shadow: + inset 1px 1px 0 var(--highlight), + inset -1px -1px 0 var(--lowlight), + 2px 2px 0 rgba(0, 0, 0, 0.3), + 3px 3px 0 rgba(0, 0, 0, 0.1); + border-radius: 0.3rem; +} + +input[type="range"]::-moz-range-thumb:active { + box-shadow: + inset 1px 1px 0 var(--lowlight), + inset -1px -1px 0 var(--highlight), + 1px 1px 0 rgba(0, 0, 0, 0.2); +} + +input[type="range"]::-webkit-slider-runnable-track { + background: linear-gradient(180deg, + #c0c0c0 0%, + #e8e8e8 1px, + #dfdfdf 2px, + #d0d0d0 100%); + border: 2px inset var(--border-light); + height: 0.8rem; + box-shadow: + inset 2px 2px 0 rgba(255, 255, 255, 0.8), + inset -2px -2px 0 rgba(0, 0, 0, 0.4), + inset 1px 1px 0 rgba(0, 0, 0, 0.1); +} + +input[type="range"]::-moz-range-track { + background: transparent; + border: none; +} + +input[type="range"]::-moz-range-progress { + background: linear-gradient(180deg, + var(--secondary-light) 0%, + var(--secondary) 50%, + var(--secondary-dark) 100%); + height: 0.8rem; + border: 2px inset var(--border-light); + box-shadow: + inset 2px 2px 0 rgba(255, 255, 255, 0.6), + inset -2px -2px 0 rgba(0, 0, 0, 0.3); +} + +fieldset { + border: 2px solid var(--border-light); + padding: var(--space-md); + margin: var(--space-md) 0; + background: var(--surface); + box-shadow: + inset 1px 1px 0 rgba(255, 255, 255, 0.3), + inset -1px -1px 0 rgba(0, 0, 0, 0.6); +} + +fieldset > :last-child { + margin-bottom: 0; +} + +legend { + padding: 0 var(--space-xs); + margin-left: calc(var(--space-xs) * -1); + font-weight: bold; + color: var(--fg); + background: var(--surface); +} + +/* buttons */ + +button { + font-family: var(--font-mono); + font-weight: 700; + padding: var(--space-xs) var(--space-sm); + border: 2px outset var(--border-light); + background: var(--surface); + color: var(--fg); + font-size: 0.875rem; + box-shadow: + inset 1px 1px 0 var(--highlight), + inset -1px -1px 0 var(--lowlight), + 2px 2px 0 rgba(0, 0, 0, 0.18); + transition: + transform 0.05s, + box-shadow 0.05s, + background 0.1s; + cursor: pointer; +} + +button:hover { + background: var(--surface-alt); +} + +button:active { + transform: translate(1px, 1px); + border-style: inset; + box-shadow: + inset 1px 1px 0 var(--lowlight), + inset -1px -1px 0 var(--highlight); +} + +/* button variants */ + +button.primary { + background: var(--primary); + color: var(--surface-alt); +} + +button.primary:hover { + background: var(--primary-light); +} + +button.primary:active { + background: var(--primary-dark); +} + +button.secondary { + background: var(--secondary); + color: var(--fg); +} + +button.secondary:hover { + background: var(--secondary-light); +} + +button.secondary:active { + background: var(--secondary-dark); +} + +button.success, +button.error, +button.warning, +button.info { + color: var(--surface-alt); +} + +button.success { + background: var(--success); +} + +button.error { + background: var(--error); +} + +button.warning { + background: var(--warning); +} + +button.info { + background: var(--info); +} + +button.success:hover, +button.error:hover, +button.warning:hover, +button.info:hover { + filter: brightness(1.06); +} + +button.contrast { + background: var(--fg); + color: var(--surface-alt); +} + +button.contrast:hover { + background: var(--muted); +} + +button:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none !important; +} + +/* button groups */ + +.button-group { + display: inline-flex; + border: var(--border-width) solid var(--border); + box-shadow: + inset 1px 1px 0 var(--border-light), + inset -1px -1px 0 var(--border-dark), + 3px 3px 0 rgba(0, 0, 0, 0.12); +} + +.button-group button { + border: none; + margin: 0; + border-radius: 0; + box-shadow: none; +} + +.button-group button:not(:last-child) { + border-right: 1px solid var(--border-dark); +} + +.button-group button:hover { + box-shadow: none; + transform: none; +} + +.button-group button:active { + box-shadow: none; + transform: none; +} + +/* alerts & messages */ + +.alert { + padding: var(--space-md); + margin: var(--space-md) 0; + border: var(--border-width) solid var(--border); + border-left: 4px solid var(--info); + background: var(--surface); + box-shadow: + inset 1px 1px 0 var(--border-light), + inset -1px -1px 0 var(--border-dark), + 3px 3px 0 rgba(0, 0, 0, 0.12); +} + +.alert.success { + border-left-color: var(--success); + background-color: color-mix(in srgb, var(--success) 10%, transparent); +} + +.alert.error { + border-left-color: var(--error); + background-color: color-mix(in srgb, var(--error) 10%, transparent); +} + +.alert.warning { + border-left-color: var(--warning); + background-color: color-mix(in srgb, var(--warning) 10%, transparent); +} + +.alert.info { + border-left-color: var(--info); + background-color: color-mix(in srgb, var(--info) 10%, transparent); +} + +/* badges & pills */ + +.badge { + display: inline-block; + padding: 0.25rem 0.5rem; + margin: 0 0.25rem; + background: var(--surface-alt); + color: var(--fg); + font-size: 0.75rem; + font-weight: 700; + border: 1px solid var(--border-dark); + box-shadow: + inset 1px 1px 0 var(--border-light), + inset -1px -1px 0 var(--border-dark); +} + +.badge.primary { + background: var(--primary); + color: var(--surface-alt); +} + +.badge.success { + background: var(--success); + color: var(--surface-alt); +} + +.badge.error { + background: var(--error); + color: var(--surface-alt); +} + +.badge.warning { + background: var(--warning); + color: var(--surface-alt); +} + +.badge.info { + background: var(--info); + color: var(--surface-alt); +} + +.badge.contrast { + background: var(--fg); + color: var(--surface-alt); +} + +/* helpers */ + +.text-success { + color: var(--success); + font-weight: bold; +} + +.text-error { + color: var(--error); + font-weight: bold; +} + +.text-warning { + color: var(--warning); + font-weight: bold; +} + +.text-info { + color: var(--info); + font-weight: bold; +} + +.text-muted { + color: var(--muted); +} + +.text-contrast { + color: var(--fg); + font-weight: bold; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.text-left { + text-align: left; +} + +.mt-xs { margin-top: var(--space-xs); } +.mt-sm { margin-top: var(--space-sm); } +.mt-md { margin-top: var(--space-md); } +.mt-lg { margin-top: var(--space-lg); } +.mt-xl { margin-top: var(--space-xl); } + +.mb-xs { margin-bottom: var(--space-xs); } +.mb-sm { margin-bottom: var(--space-sm); } +.mb-md { margin-bottom: var(--space-md); } +.mb-lg { margin-bottom: var(--space-lg); } +.mb-xl { margin-bottom: var(--space-xl); } + +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.py-md { + padding-top: var(--space-md); + padding-bottom: var(--space-md); +} + +#theme-toggle { + margin-left: auto; + margin-bottom: 0; +} + +/* fairy dust */ + +@keyframes fairy-float { + 0% { + opacity: 1; + transform: translateY(0) scale(1); + } + 100% { + opacity: 0; + transform: translateY(40px) scale(0.5); + } +} diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..c5f83a2 --- /dev/null +++ b/src/index.html @@ -0,0 +1,599 @@ + + + + + + Liz CSS - Framework Demo + + + + + +
+ + +
+ +
+ +
+

Color Palette

+

A retro-themed minimal CSS framework with carefully selected colors for light and dark modes.

+ +

Primary Colors

+
+
+ Primary +
+
+ #e56aa6 +
+
+
+ Primary Light +
+
+ #f08dbe +
+
+
+ Primary Dark +
+
+ #c84d86 +
+
+
+ +

Secondary Colors

+
+
+ Secondary +
+
+ #b69cff +
+
+
+ Secondary Light +
+
+ #d7c8ff +
+
+
+ Secondary Dark +
+
+ #8f78d6 +
+
+
+ +

Status Colors

+
+
+ Success +
+
+ #2e8b57 +
+
+
+ Error +
+
+ #b3261e +
+
+
+ Warning +
+
+ #b7791f +
+
+
+ Info +
+
+ #2b6cb0 +
+
+
+
+ + +
+

Buttons

+

Retro-styled buttons with multiple variants and states.

+ +

Basic Buttons

+
+ + + + +
+ +

Status Buttons

+
+ + + + +
+ +

Button States

+
+ + +
+
+ + +
+

Forms

+

Complete form styling with retro aesthetics.

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ Checkboxes +
+ + +
+
+ + +
+
+ +
+ Radio Buttons +
+ + +
+
+ + +
+
+ +
+ + + +
+
+
+ + +
+

Alerts

+

Status messages and notifications with semantic colors.

+ +
+ ℹ️ Info: This is an informational message. +
+ +
+ ✓ Success: Operation completed successfully! +
+ +
+ ⚠️ Warning: Please review this before proceeding. +
+ +
+ ✗ Error: Something went wrong. Please try again. +
+
+ + +
+

Badges & Pills

+

Small inline elements for labels, tags, and status indicators.

+ +

Default Badges

+

+ Default + Primary + Secondary + Contrast +

+ +

Status Badges

+

+ ✓ Success + ✗ Error + ⚠️ Warning + ℹ️ Info +

+
+ + +
+

Typography & Helper Classes

+

Text utilities and spacing helpers for quick styling.

+ +

Text Colors

+

+ Default text (muted) + success text + error text + warning text + info text + contrast text +

+ +

Text Alignment

+

Left aligned

+

Center aligned

+

Right aligned

+ +

Spacing Helpers

+

+ Use .mt-xs, .mt-sm, .mt-md, + .mt-lg, .mt-xl for margin-top. +

+

+ Use .mb-xs, .mb-sm, .mb-md, + .mb-lg, .mb-xl for margin-bottom. +

+

+ Use .mx-auto for horizontal centering and + .py-md for vertical padding. +

+ +
+

Example: Component with margin and padding utilities

+
+
+ + +
+

Heading Styles

+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+ + +
+

Lists

+ +

Unordered List

+
    +
  • Item one with some text
    • +
  • Item two with more text
    • +
  • Item three with even more text
    • +
  • Nested lists: +
      +
    • Sub-item one
      • +
    • Sub-item two
      • +
    +
    • +
+ +

Ordered List

+
    +
  1. First step in the process
    2. +
  2. Second step follows naturally
    3. +
  3. Third step completes the sequence
    4. +
+
+ + +
+

Blockquotes

+
+ "The best time to plant a tree was 20 years ago. The second best time is now." +
+ — Chinese Proverb +
+
+ + +
+

Links

+

+ This is a hyperlink styled with the framework. Links + have a bottom border and change color on hover. You can use them + inline within text or as standalone elements. +

+
+ + +
+

Tables

+

Tables with retro styling, alternating row colors, and hover effects.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureLight ModeDark Mode
BackgroundWarm creamWarm taupe
ButtonsLavender primaryRose primary
BordersRetro 90s beveledRetro 90s beveled
AccentsPink & brownPink & brown
+
+ + +
+

Code

+

Inline const x = 42; looks different from block code:

+ 
function retro() {
+  return "That's totally rad!";
+}
+
+retro(); // "That's totally rad!"
+
+ + +
+

Dividers

+

Use <hr> to separate content sections:

+
+

Content after the divider looks fresh and organized.

+
+ + +
+

Form Validation

+

Invalid inputs show a red border when they fail validation.

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+

Button Groups

+

Combine buttons into a group with the .button-group class:

+
+ + + +
+
+ + +
+

Toggle Switches

+

Use checkboxes with the .toggle class to create stylish toggle switches:

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+

Range Sliders

+

Native range inputs styled with retro beveled appearance:

+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+

© 2025 Liz CSS Framework. Made with coffee and retro vibes.

+
+ + + + diff --git a/src/js/oneko.js b/src/js/oneko.js new file mode 100644 index 0000000..dcf927f --- /dev/null +++ b/src/js/oneko.js @@ -0,0 +1,284 @@ +// oneko.js: https://github.com/adryd325/oneko.js + +export function initOneko() { + const isReducedMotion = + window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || + window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true; + + if (isReducedMotion) return; + + const nekoEl = document.createElement("div"); + let persistPosition = true; + + let nekoPosX = 32; + let nekoPosY = 32; + + let mousePosX = 0; + let mousePosY = 0; + + let frameCount = 0; + let idleTime = 0; + let idleAnimation = null; + let idleAnimationFrame = 0; + + const nekoSpeed = 10; + const spriteSets = { + idle: [[-3, -3]], + alert: [[-7, -3]], + scratchSelf: [ + [-5, 0], + [-6, 0], + [-7, 0], + ], + scratchWallN: [ + [0, 0], + [0, -1], + ], + scratchWallS: [ + [-7, -1], + [-6, -2], + ], + scratchWallE: [ + [-2, -2], + [-2, -3], + ], + scratchWallW: [ + [-4, 0], + [-4, -1], + ], + tired: [[-3, -2]], + sleeping: [ + [-2, 0], + [-2, -1], + ], + N: [ + [-1, -2], + [-1, -3], + ], + NE: [ + [0, -2], + [0, -3], + ], + E: [ + [-3, 0], + [-3, -1], + ], + SE: [ + [-5, -1], + [-5, -2], + ], + S: [ + [-6, -3], + [-7, -2], + ], + SW: [ + [-5, -3], + [-6, -1], + ], + W: [ + [-4, -2], + [-4, -3], + ], + NW: [ + [-1, 0], + [-1, -1], + ], + }; + + function init() { + let nekoFile = "/oneko/oneko.gif"; + const curScript = document.currentScript; + if (curScript && curScript.dataset.cat) { + nekoFile = curScript.dataset.cat; + } + if (curScript && curScript.dataset.persistPosition) { + if (curScript.dataset.persistPosition === "") { + persistPosition = true; + } else { + persistPosition = JSON.parse( + curScript.dataset.persistPosition.toLowerCase(), + ); + } + } + + if (persistPosition) { + let storedNeko = JSON.parse(window.localStorage.getItem("oneko")); + if (storedNeko !== null) { + nekoPosX = storedNeko.nekoPosX; + nekoPosY = storedNeko.nekoPosY; + mousePosX = storedNeko.mousePosX; + mousePosY = storedNeko.mousePosY; + frameCount = storedNeko.frameCount; + idleTime = storedNeko.idleTime; + idleAnimation = storedNeko.idleAnimation; + idleAnimationFrame = storedNeko.idleAnimationFrame; + nekoEl.style.backgroundPosition = storedNeko.bgPos; + } + } + + nekoEl.id = "oneko"; + nekoEl.ariaHidden = true; + nekoEl.style.width = "32px"; + nekoEl.style.height = "32px"; + nekoEl.style.position = "fixed"; + nekoEl.style.pointerEvents = "none"; + nekoEl.style.imageRendering = "pixelated"; + nekoEl.style.left = `${nekoPosX - 16}px`; + nekoEl.style.top = `${nekoPosY - 16}px`; + nekoEl.style.zIndex = 2147483647; + + nekoEl.style.backgroundImage = `url(${nekoFile})`; + + document.body.appendChild(nekoEl); + + document.addEventListener("mousemove", function (event) { + mousePosX = event.clientX; + mousePosY = event.clientY; + }); + + if (persistPosition) { + window.addEventListener("beforeunload", function (event) { + window.localStorage.setItem( + "oneko", + JSON.stringify({ + nekoPosX: nekoPosX, + nekoPosY: nekoPosY, + mousePosX: mousePosX, + mousePosY: mousePosY, + frameCount: frameCount, + idleTime: idleTime, + idleAnimation: idleAnimation, + idleAnimationFrame: idleAnimationFrame, + bgPos: nekoEl.style.backgroundPosition, + }), + ); + }); + } + + window.requestAnimationFrame(onAnimationFrame); + } + + let lastFrameTimestamp; + + function onAnimationFrame(timestamp) { + // Stops execution if the neko element is removed from DOM + if (!nekoEl.isConnected) { + return; + } + if (!lastFrameTimestamp) { + lastFrameTimestamp = timestamp; + } + if (timestamp - lastFrameTimestamp > 100) { + lastFrameTimestamp = timestamp; + frame(); + } + window.requestAnimationFrame(onAnimationFrame); + } + + function setSprite(name, frame) { + const sprite = spriteSets[name][frame % spriteSets[name].length]; + nekoEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`; + } + + function resetIdleAnimation() { + idleAnimation = null; + idleAnimationFrame = 0; + } + + function idle() { + idleTime += 1; + + // every ~ 20 seconds + if ( + idleTime > 10 && + Math.floor(Math.random() * 200) == 0 && + idleAnimation == null + ) { + let avalibleIdleAnimations = ["sleeping", "scratchSelf"]; + if (nekoPosX < 32) { + avalibleIdleAnimations.push("scratchWallW"); + } + if (nekoPosY < 32) { + avalibleIdleAnimations.push("scratchWallN"); + } + if (nekoPosX > window.innerWidth - 32) { + avalibleIdleAnimations.push("scratchWallE"); + } + if (nekoPosY > window.innerHeight - 32) { + avalibleIdleAnimations.push("scratchWallS"); + } + idleAnimation = + avalibleIdleAnimations[ + Math.floor(Math.random() * avalibleIdleAnimations.length) + ]; + } + + switch (idleAnimation) { + case "sleeping": + if (idleAnimationFrame < 8) { + setSprite("tired", 0); + break; + } + setSprite("sleeping", Math.floor(idleAnimationFrame / 4)); + if (idleAnimationFrame > 192) { + resetIdleAnimation(); + } + break; + case "scratchWallN": + case "scratchWallS": + case "scratchWallE": + case "scratchWallW": + case "scratchSelf": + setSprite(idleAnimation, idleAnimationFrame); + if (idleAnimationFrame > 9) { + resetIdleAnimation(); + } + break; + default: + setSprite("idle", 0); + return; + } + idleAnimationFrame += 1; + } + + function frame() { + frameCount += 1; + const diffX = nekoPosX - mousePosX; + const diffY = nekoPosY - mousePosY; + const distance = Math.sqrt(diffX ** 2 + diffY ** 2); + + if (distance < nekoSpeed || distance < 48) { + idle(); + return; + } + + idleAnimation = null; + idleAnimationFrame = 0; + + if (idleTime > 1) { + setSprite("alert", 0); + // count down after being alerted before moving + idleTime = Math.min(idleTime, 7); + idleTime -= 1; + return; + } + + let direction; + direction = diffY / distance > 0.5 ? "N" : ""; + direction += diffY / distance < -0.5 ? "S" : ""; + direction += diffX / distance > 0.5 ? "W" : ""; + direction += diffX / distance < -0.5 ? "E" : ""; + setSprite(direction, frameCount); + + nekoPosX -= (diffX / distance) * nekoSpeed; + nekoPosY -= (diffY / distance) * nekoSpeed; + + nekoPosX = Math.min(Math.max(16, nekoPosX), window.innerWidth - 16); + nekoPosY = Math.min(Math.max(16, nekoPosY), window.innerHeight - 16); + + nekoEl.style.left = `${nekoPosX - 16}px`; + nekoEl.style.top = `${nekoPosY - 16}px`; + } + + init(); +} diff --git a/src/js/script.js b/src/js/script.js new file mode 100644 index 0000000..8ba3d82 --- /dev/null +++ b/src/js/script.js @@ -0,0 +1,87 @@ +import Prism from 'prismjs'; +import 'prismjs/components/prism-javascript'; +import 'prismjs/components/prism-css'; +import 'prismjs/components/prism-markup'; +import { initOneko } from './oneko.js'; + +(() => { + const toggleButton = document.getElementById("theme-toggle"); + const html = document.documentElement; + + const sessionTheme = sessionStorage.getItem("theme"); + const systemPrefersDark = window.matchMedia( + "(prefers-color-scheme: dark)", + ).matches; + + const initialTheme = sessionTheme || (systemPrefersDark ? "dark" : "light"); + + if (initialTheme === "dark") { + html.setAttribute("data-theme", "dark"); + toggleButton.checked = true; + } + + toggleButton.addEventListener("change", () => { + const theme = html.getAttribute("data-theme"); + + if (theme === "dark") { + html.removeAttribute("data-theme"); + sessionStorage.setItem("theme", "light"); + toggleButton.checked = false; + } else { + html.setAttribute("data-theme", "dark"); + sessionStorage.setItem("theme", "dark"); + toggleButton.checked = true; + } + }); +})(); + +(() => { + const colors = [ + "#ff69b4", + "#b19cd9", + "#8b6f47", + "#ff85c0", + "#c4b5fd", + "#d4a574", + ]; + const shapes = ["❀", "✿", "✽", "✾", "✻", "❊", "❋", "✼"]; + + document.addEventListener("mousemove", (e) => { + createParticle(e.clientX, e.clientY); + }); + + const createParticle = (x, y) => { + const particle = document.createElement("div"); + particle.className = "fairy-dust"; + + const shape = shapes[Math.floor(Math.random() * shapes.length)]; + const size = Math.random() * 8 + 6; + const color = colors[Math.floor(Math.random() * colors.length)]; + const offsetX = (Math.random() - 0.5) * 20; + const offsetY = (Math.random() - 0.5) * 20; + const rotation = Math.random() * 360; + + particle.textContent = shape; + particle.style.cssText = ` + position: fixed; + left: ${x + offsetX}px; + top: ${y + offsetY}px; + font-size: ${size}px; + color: ${color}; + opacity: 0.4; + pointer-events: none; + z-index: 9001; /* it's over 9000 */ + line-height: 1; + transform: rotate(${rotation}deg); + animation: fairy-float 0.8s ease-out forwards; + `; + + document.body.appendChild(particle); + setTimeout(() => particle.remove(), 800); + }; +})(); + +document.addEventListener('DOMContentLoaded', () => { + Prism.highlightAll(); + initOneko(); +}); diff --git a/static/css/style.css b/static/css/style.css deleted file mode 100644 index c51d1e0..0000000 --- a/static/css/style.css +++ /dev/null @@ -1,1096 +0,0 @@ -:root { - --bg: #f9f5f0; - --bg-pattern: #f0ebe5; - --fg: #2a1810; - - /* Primary colors */ - --primary: #e8739d; - --primary-light: #f08db5; - --primary-dark: #d85980; - - /* Secondary colors */ - --secondary: #b19cd9; - --secondary-light: #c4b5fd; - --secondary-dark: #9d7eb8; - - /* Accent colors */ - --accent-brown: #8b6f47; - --accent-brown-light: #a8865b; - --accent-brown-dark: #6e5837; - - /* Status colors */ - --success: #4caf50; - --error: #d32f2f; - --warning: #ff9800; - --info: #2196f3; - - /* Neutral colors */ - --border: #2a1810; - --surface: #ffe8f0; - --surface-alt: #fdfcfb; - --muted: #6b5d54; - --border-light: #c0c0c0; - - /* Legacy aliases */ - --accent-pink: #e8739d; - --accent-lavender: #b19cd9; - - --space-xs: 0.5rem; - --space-sm: 1rem; - --space-md: 1.5rem; - --space-lg: 2rem; - --space-xl: 3rem; - - --border-width: 2px; - --border-style: solid; - - --font-mono: "Mono", monospace; - --line-height: 1.4; - - --shadow-sm: 1px 1px 0, 2px 2px 0, 1px 2px 0; - --shadow-md: 1px 1px 0, 2px 2px 0, 3px 3px 0, 2px 1px 0; - --shadow-lg: 1px 1px 0, 2px 2px 0, 3px 3px 0, 4px 4px 0, 2px 1px 0, 1px 2px 0, - 3px 1px 0; - --shadow-color: rgba(42, 24, 16, 0.5); - --shadow-box: 3px 3px 0 rgba(0, 0, 0, 0.2); - --shadow-button: 2px 2px 0 rgba(0, 0, 0, 0.2); - --highlight: rgba(255, 255, 255, 0.4); - --lowlight: rgba(42, 24, 16, 0.6); - - --content-max-width: 1000px; -} - -[data-theme="dark"] { - --bg: #35302a; - --bg-pattern: #2b2620; - --fg: #f5f5f5; - - --primary: #e8739d; - --primary-light: #f08db5; - --primary-dark: #d85980; - - --secondary: #b19cd9; - --secondary-light: #c4b5fd; - --secondary-dark: #9d7eb8; - - --accent-brown: #d4a574; - --accent-brown-light: #e8b896; - --accent-brown-dark: #b8885a; - - --border: #e8e8e8; - --border-light: #8b7d6b; - --surface: #3f3932; - --surface-alt: #47403a; - --muted: #a89f94; - - --accent-pink: #e8739d; - --accent-lavender: #b19cd9; - - --shadow-color: rgba(0, 0, 0, 0.8); - --highlight: rgba(255, 255, 255, 0.3); - --lowlight: rgba(0, 0, 0, 0.8); -} - -@font-face { - font-family: "Mono"; - src: url("/static/fonts/Maple.woff2") format("woff2"); - font-display: swap; - font-weight: normal; -} - -@supports (font-synthesis: none) { - @font-face { - font-family: "Mono"; - src: url("/static/fonts/Maple.woff2") format("woff2"); - font-synthesis: none; - } -} - -/* base */ - -* { - box-sizing: border-box; - margin: 0; - padding: 0; - cursor: - url('data:image/svg+xml;utf8,') - 0 0, - auto !important; -} - -html { - font-size: 16px; - background-color: var(--bg); - position: relative; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - height: 100vh; -} - -html::before { - content: ""; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-image: linear-gradient( - 45deg, - rgba(0, 0, 0, 0.2) 25%, - transparent 25%, - transparent 75%, - rgba(0, 0, 0, 0.2) 75% - ), - linear-gradient( - 45deg, - rgba(0, 0, 0, 0.2) 25%, - transparent 25%, - transparent 75%, - rgba(0, 0, 0, 0.2) 75% - ), - url("/static/img/bg.png"); - background-size: - 10px 10px, - 10px 10px, - auto; - background-position: - 0 0, - 5px 5px, - 0 0; - background-repeat: repeat; - opacity: 0.15; - z-index: -1; - pointer-events: none; -} - -body { - background: transparent; - color: var(--fg); - line-height: var(--line-height); - padding: var(--space-md); - padding-top: calc(var(--space-md) + 3rem); - max-width: var(--content-max-width); - margin: 0 auto; - font-family: var(--font-mono); - scrollbar-color: var(--accent-lavender) var(--bg); - scrollbar-width: thin; - display: flex; - flex-direction: column; - height: 100vh; -} - -/* webkit scrollbar (chrome, safari, edge) */ -::-webkit-scrollbar { - width: 12px; -} - -::-webkit-scrollbar-track { - background: var(--bg); - border: 2px solid var(--border-light); -} - -::-webkit-scrollbar-thumb { - background: var(--accent-lavender); - border: 2px outset var(--border-light); - box-shadow: - inset 1px 1px 0 var(--highlight), - inset -1px -1px 0 var(--lowlight); -} - -::-webkit-scrollbar-thumb:hover { - background: var(--accent-pink); -} - -.div-centered { - max-width: var(--content-max-width); - margin: auto; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - min-height: calc(100vh - 4.5rem); - text-align: justify; -} - -/* typography */ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: var(--font-mono); - font-weight: bold; - line-height: 1.2; - margin-bottom: var(--space-md); - border: 2px solid var(--border-light); - padding: var(--space-sm); - background-size: 4px 4px; - background-color: var(--accent-pink); - background-position: - 0 0, - 2px 2px; - color: var(--bg); -} - -h1 { - font-size: 2rem; - margin-bottom: var(--space-lg); -} -h2 { - font-size: 1.5rem; - background-size: 4px 4px; - background-position: - 0 0, - 2px 2px; - background-color: var(--accent-lavender); - margin-bottom: var(--space-md); -} -h3 { - font-size: 1.25rem; - background-size: 4px 4px; - background-position: - 0 0, - 2px 2px; - background-color: var(--accent-brown); - box-shadow: var(--shadow-box); -} -h4 { - font-size: 1.1rem; -} -h5 { - font-size: 1rem; -} -h6 { - font-size: 0.9rem; -} - -p { - margin-bottom: var(--space-sm); -} - -a { - color: var(--accent-pink); - text-decoration: none; - border-bottom: 2px solid var(--accent-pink); - font-weight: bold; -} - -a:hover { - background: var(--accent-pink); - color: var(--bg); -} - -small { - color: var(--muted); - font-size: 0.875rem; -} - -blockquote { - border-left: 3px solid var(--accent-brown); - padding-left: var(--space-md); - margin: var(--space-md) 0; - font-style: italic; - color: var(--muted); -} - -/* lists */ - -ul, -ol { - margin: var(--space-sm) 0; - padding-left: var(--space-lg); -} - -li { - margin-bottom: var(--space-xs); -} - -/* tables */ - -table { - width: 100%; - border-collapse: collapse; - margin: var(--space-md) 0; - border: 2px solid var(--border-light); - background: var(--bg); - box-shadow: - inset 1px 1px 0 rgba(255, 255, 255, 0.3), - inset -1px -1px 0 rgba(0, 0, 0, 0.6), - 3px 3px 0 rgba(0, 0, 0, 0.15); -} - -thead { - background: var(--secondary); - color: var(--bg); - font-weight: bold; -} - -th, -td { - padding: var(--space-xs) var(--space-sm); - border: 1px solid var(--border-light); - text-align: left; -} - -tbody tr:nth-child(odd) { - background: var(--surface-alt); -} - -tbody tr:nth-child(even) { - background: var(--bg); -} - -tbody tr:hover { - background: rgba(232, 115, 157, 0.1); -} - -/* code */ - -code { - background: var(--bg); - padding: 0.25rem 0.5rem; - border: 1px solid var(--border-light); - font-size: 0.875rem; - font-family: var(--font-mono); -} - -pre { - background: var(--bg); - border: 2px solid var(--border-light); - padding: var(--space-md); - margin: var(--space-md) 0; - overflow-x: auto; - box-shadow: - inset 1px 1px 0 rgba(255, 255, 255, 0.3), - inset -1px -1px 0 rgba(0, 0, 0, 0.6), - 3px 3px 0 rgba(0, 0, 0, 0.15); -} - -pre code { - background: transparent; - border: none; - padding: 0; - font-size: 0.875rem; -} - -/* dividers */ - -hr { - border: none; - border-top: 2px solid var(--border-light); - margin: var(--space-lg) 0; - height: 0; -} - -/* layout */ - -header { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 1000; - border-bottom: 2px outset var(--border-light); - padding: 0.4rem var(--space-md); - margin-bottom: 0; - background: var(--surface); - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-md); -} - -header h1 { - display: none; -} - -header::before { - content: ""; - display: inline-block; - width: 1.5rem; - height: 1.5rem; - background-image: url("/static/img/coffee.svg"); - background-size: contain; - background-repeat: no-repeat; - margin-right: 0.5rem; -} - -nav { - display: flex; - gap: var(--space-md); - flex-wrap: wrap; - align-items: center; - margin: 0; - flex: 1; -} - -nav a { - font-size: 0.85rem; - padding: 0.2rem 0.4rem; - color: var(--fg); - border-bottom: 2px solid var(--accent-pink); -} - -main { - flex: 1; -} - -article { - border: 2px solid var(--border-light); - padding: var(--space-md); - margin-bottom: var(--space-lg); - background: var(--surface); - box-shadow: - inset 1px 1px 0 rgba(255, 255, 255, 0.3), - inset -1px -1px 0 rgba(0, 0, 0, 0.6), - 4px 4px 0 rgba(0, 0, 0, 0.2), - 5px 5px 0 rgba(0, 0, 0, 0.08); -} - -article > :last-child { - margin-bottom: 0; -} - -article h2 { - margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-md); - border-left: none; - border-right: none; - border-top: none; -} - -footer { - border: 2px solid var(--border-light); - padding: var(--space-md); - text-align: center; - background: var(--surface); - font-size: 0.875rem; - box-shadow: - inset 1px 1px 0 rgba(255, 255, 255, 0.3), - inset -1px -1px 0 rgba(0, 0, 0, 0.6), - 4px 4px 0 rgba(0, 0, 0, 0.2), - 5px 5px 0 rgba(0, 0, 0, 0.08); -} - -footer > :last-child { - margin-bottom: 0; -} - -/* components */ - -/* forms */ - -input, -textarea, -select { - font-family: var(--font-mono); - padding: var(--space-xs) var(--space-sm); - border: 2px outset var(--border-light); - background: var(--bg); - color: var(--fg); - font-size: 0.875rem; - box-shadow: - inset 1px 1px 0 var(--highlight), - inset -1px -1px 0 var(--lowlight), - inset 2px 2px 0 rgba(255, 255, 255, 0.2), - inset -2px -2px 0 rgba(0, 0, 0, 0.4); - transition: border-color 0.2s, box-shadow 0.2s; - width: 100%; - max-width: 100%; -} - -input::placeholder, -textarea::placeholder, -select::placeholder { - color: var(--muted); - opacity: 0.8; -} - -[data-theme="dark"] input::placeholder, -[data-theme="dark"] textarea::placeholder, -[data-theme="dark"] select::placeholder { - color: #b8b0a0; - opacity: 1; -} - -input:focus, -textarea:focus, -select:focus { - outline: none; - border-color: var(--primary); - box-shadow: - inset 1px 1px 0 var(--highlight), - inset -1px -1px 0 var(--lowlight), - 0 0 0 2px var(--primary); -} - -input:invalid, -textarea:invalid { - border-color: var(--error); -} - -input:invalid:focus, -textarea:invalid:focus { - box-shadow: - inset 1px 1px 0 var(--highlight), - inset -1px -1px 0 var(--lowlight), - 0 0 0 2px var(--error); -} - -textarea { - resize: vertical; - min-height: 4rem; - width: 100%; -} - -select { - cursor: pointer; - appearance: none; - background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1810' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 0.5rem center; - background-size: 1.2em; - padding-right: 2.5rem; -} - -[data-theme="dark"] select { - background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5e6e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); -} - -option { - background: var(--bg); - color: var(--fg); - padding: var(--space-sm); -} - -option:checked { - background: linear-gradient(var(--primary), var(--primary)); - color: var(--bg); -} - -input[type="checkbox"], -input[type="radio"] { - appearance: none; - width: 1.3rem; - height: 1.3rem; - min-width: 1.3rem; - min-height: 1.3rem; - padding: 0; - cursor: pointer; - margin: 0 0.5rem 0 0; - vertical-align: middle; - border: 2px solid var(--border-light); - box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--lowlight); - background: var(--bg); - display: inline-flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - font-weight: normal; -} - -input[type="radio"] { - border-radius: 50%; -} - -input[type="checkbox"]:checked, -input[type="radio"]:checked { - background: var(--primary); -} - -label { - display: block; - margin-bottom: var(--space-xs); - font-weight: bold; - color: var(--fg); -} - -input[type="checkbox"] + label, -input[type="radio"] + label { - display: inline; - margin: 0; - font-weight: normal; -} - -/* toggle switches */ - -input[type="checkbox"].toggle { - appearance: none; - width: 2.8rem; - height: 1.6rem; - padding: 0; - margin: 0 0.5rem 0 0; - border: 2px outset var(--border-light); - background: var(--muted); - cursor: pointer; - position: relative; - vertical-align: middle; - box-shadow: - inset 1px 1px 0 rgba(255, 255, 255, 0.3), - inset -1px -1px 0 rgba(0, 0, 0, 0.6); - transition: background 0.2s; -} - -input[type="checkbox"].toggle:checked { - background: var(--primary); -} - -input[type="checkbox"].toggle::after { - content: ""; - position: absolute; - width: 0.6rem; - height: 0.6rem; - background: var(--surface); - border: 2px outset var(--border-light); - top: 50%; - transform: translateY(-50%); - left: 0.2rem; - transition: left 0.2s; - box-shadow: - inset 1px 1px 0 var(--highlight), - inset -1px -1px 0 var(--lowlight); -} - -input[type="checkbox"].toggle:checked::after { - left: 1.5rem; -} - -[data-theme="dark"] input[type="checkbox"].toggle { - background: var(--secondary); -} - -[data-theme="dark"] input[type="checkbox"].toggle:checked { - background: var(--primary); -} - -[data-theme="dark"] input[type="checkbox"].toggle::after { - background: var(--accent-brown-light); -} - -#theme-toggle::before { - content: "☾"; - position: absolute; - right: 0.4rem; - top: 50%; - transform: translateY(-50%); - font-size: 0.9rem; - line-height: 1; - color: var(--bg); - transition: opacity 0.2s; -} - -#theme-toggle:checked::before { - content: "☀"; - right: auto; - left: 0.4rem; -} - -/* range sliders */ - -input[type="range"] { - width: 100%; - height: 2.2rem; - background: transparent; - cursor: pointer; - appearance: none; - vertical-align: middle; -} - -input[type="range"]::-webkit-slider-thumb { - appearance: none; - width: 1.5rem; - height: 1rem; - margin-top: -0.25rem; - background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 50%, var(--primary-dark) 100%); - border: 2px outset var(--border-light); - cursor: pointer; - box-shadow: - inset 1px 1px 0 var(--highlight), - inset -1px -1px 0 var(--lowlight), - 2px 2px 0 rgba(0, 0, 0, 0.3), - 3px 3px 0 rgba(0, 0, 0, 0.1); -} - -input[type="range"]::-webkit-slider-thumb:active { - box-shadow: - inset 1px 1px 0 var(--lowlight), - inset -1px -1px 0 var(--highlight), - 1px 1px 0 rgba(0, 0, 0, 0.2); -} - -input[type="range"]::-moz-range-thumb { - width: 1.5rem; - height: 0.8rem; - margin-top: -0.15rem; - background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 50%, var(--primary-dark) 100%); - border: 2px outset var(--border-light); - cursor: pointer; - box-shadow: - inset 1px 1px 0 var(--highlight), - inset -1px -1px 0 var(--lowlight), - 2px 2px 0 rgba(0, 0, 0, 0.3), - 3px 3px 0 rgba(0, 0, 0, 0.1); - border-radius: 0.3rem; -} - -input[type="range"]::-moz-range-thumb:active { - box-shadow: - inset 1px 1px 0 var(--lowlight), - inset -1px -1px 0 var(--highlight), - 1px 1px 0 rgba(0, 0, 0, 0.2); -} - -input[type="range"]::-webkit-slider-runnable-track { - background: linear-gradient(180deg, - #c0c0c0 0%, - #e8e8e8 1px, - #dfdfdf 2px, - #d0d0d0 100%); - border: 2px inset var(--border-light); - height: 0.8rem; - box-shadow: - inset 2px 2px 0 rgba(255, 255, 255, 0.8), - inset -2px -2px 0 rgba(0, 0, 0, 0.4), - inset 1px 1px 0 rgba(0, 0, 0, 0.1); -} - -input[type="range"]::-moz-range-track { - background: transparent; - border: none; -} - -input[type="range"]::-moz-range-progress { - background: linear-gradient(180deg, - var(--secondary-light) 0%, - var(--secondary) 50%, - var(--secondary-dark) 100%); - height: 0.8rem; - border: 2px inset var(--border-light); - box-shadow: - inset 2px 2px 0 rgba(255, 255, 255, 0.6), - inset -2px -2px 0 rgba(0, 0, 0, 0.3); -} - -fieldset { - border: 2px solid var(--border-light); - padding: var(--space-md); - margin: var(--space-md) 0; - background: var(--surface); - box-shadow: - inset 1px 1px 0 rgba(255, 255, 255, 0.3), - inset -1px -1px 0 rgba(0, 0, 0, 0.6); -} - -fieldset > :last-child { - margin-bottom: 0; -} - -legend { - padding: 0 var(--space-xs); - margin-left: calc(var(--space-xs) * -1); - font-weight: bold; - color: var(--fg); - background: var(--surface); -} - -/* buttons */ - -button { - font-family: var(--font-mono); - font-weight: bold; - padding: var(--space-xs) var(--space-sm); - border: 2px outset var(--border-light); - background: var(--secondary); - color: var(--bg); - font-size: 0.875rem; - box-shadow: - inset 1px 1px 0 rgba(255, 255, 255, 0.6), - inset -1px -1px 0 rgba(0, 0, 0, 0.8), - 3px 3px 0 rgba(0, 0, 0, 0.3), - 4px 4px 0 rgba(0, 0, 0, 0.1); - transition: - transform 0.05s, - box-shadow 0.05s; - cursor: pointer; -} - -button:hover { - background: var(--secondary-dark); - transform: translate(1px, 1px); - box-shadow: - inset 1px 1px 0 rgba(255, 255, 255, 0.6), - inset -1px -1px 0 rgba(0, 0, 0, 0.8), - 2px 2px 0 rgba(0, 0, 0, 0.3), - 3px 3px 0 rgba(0, 0, 0, 0.1); -} - -button:active { - transform: translate(4px, 4px); - box-shadow: - inset 1px 1px 0 rgba(0, 0, 0, 0.6), - inset -1px -1px 0 rgba(255, 255, 255, 0.3); -} - -/* button variants */ - -button.primary { - background: var(--primary); - color: var(--bg); -} - -button.primary:hover { - background: var(--primary-dark); -} - -button.secondary { - background: var(--secondary); - color: var(--bg); -} - -button.secondary:hover { - background: var(--secondary-dark); -} - -button.success { - background: var(--success); - color: white; -} - -button.success:hover { - background: #45a049; -} - -button.error { - background: var(--error); - color: white; -} - -button.error:hover { - background: #da190b; -} - -button.warning { - background: var(--warning); - color: white; -} - -button.warning:hover { - background: #e68900; -} - -button.info { - background: var(--info); - color: white; -} - -button.info:hover { - background: #0b7dda; -} - -button.contrast { - background: var(--fg); - color: var(--bg); -} - -button.contrast:hover { - background: var(--muted); -} - -button:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none !important; -} - -/* button groups */ - -.button-group { - display: inline-flex; - border: 2px solid var(--border-light); - box-shadow: - inset 1px 1px 0 rgba(255, 255, 255, 0.3), - inset -1px -1px 0 rgba(0, 0, 0, 0.6), - 3px 3px 0 rgba(0, 0, 0, 0.15); -} - -.button-group button { - border: none; - margin: 0; - border-radius: 0; - box-shadow: none; -} - -.button-group button:not(:last-child) { - border-right: 1px solid var(--border-light); -} - -.button-group button:hover { - box-shadow: none; - transform: none; -} - -.button-group button:active { - box-shadow: none; - transform: none; -} - -/* alerts & messages */ - -.alert { - padding: var(--space-md); - margin: var(--space-md) 0; - border: 2px solid var(--border-light); - border-left: 4px solid var(--info); - background: var(--surface); - box-shadow: - inset 1px 1px 0 rgba(255, 255, 255, 0.3), - inset -1px -1px 0 rgba(0, 0, 0, 0.6), - 3px 3px 0 rgba(0, 0, 0, 0.15); -} - -.alert.success { - border-left-color: var(--success); - background-color: rgba(76, 175, 80, 0.1); -} - -.alert.error { - border-left-color: var(--error); - background-color: rgba(244, 67, 54, 0.1); -} - -.alert.warning { - border-left-color: var(--warning); - background-color: rgba(255, 152, 0, 0.1); -} - -.alert.info { - border-left-color: var(--info); - background-color: rgba(33, 150, 243, 0.1); -} - -/* badges & pills */ - -.badge { - display: inline-block; - padding: 0.25rem 0.5rem; - margin: 0 0.25rem; - background: var(--secondary); - color: var(--bg); - font-size: 0.75rem; - font-weight: bold; - border: 1px solid var(--border-light); -} - -.badge.primary { - background: var(--primary); -} - -.badge.success { - background: var(--success); - color: white; -} - -.badge.error { - background: var(--error); - color: white; -} - -.badge.warning { - background: var(--warning); - color: white; -} - -.badge.info { - background: var(--info); - color: white; -} - -.badge.contrast { - background: var(--fg); - color: var(--bg); -} - -/* helpers */ - -.text-success { - color: var(--success); - font-weight: bold; -} - -.text-error { - color: var(--error); - font-weight: bold; -} - -.text-warning { - color: var(--warning); - font-weight: bold; -} - -.text-info { - color: var(--info); - font-weight: bold; -} - -.text-muted { - color: var(--muted); -} - -.text-contrast { - color: var(--fg); - font-weight: bold; -} - -.text-center { - text-align: center; -} - -.text-right { - text-align: right; -} - -.text-left { - text-align: left; -} - -.mt-xs { margin-top: var(--space-xs); } -.mt-sm { margin-top: var(--space-sm); } -.mt-md { margin-top: var(--space-md); } -.mt-lg { margin-top: var(--space-lg); } -.mt-xl { margin-top: var(--space-xl); } - -.mb-xs { margin-bottom: var(--space-xs); } -.mb-sm { margin-bottom: var(--space-sm); } -.mb-md { margin-bottom: var(--space-md); } -.mb-lg { margin-bottom: var(--space-lg); } -.mb-xl { margin-bottom: var(--space-xl); } - -.mx-auto { - margin-left: auto; - margin-right: auto; -} - -.py-md { - padding-top: var(--space-md); - padding-bottom: var(--space-md); -} - -#theme-toggle { - margin-left: auto; - margin-bottom: 0; -} - -/* fairy dust */ - -@keyframes fairy-float { - 0% { - opacity: 1; - transform: translateY(0) scale(1); - } - 100% { - opacity: 0; - transform: translateY(40px) scale(0.5); - } -} diff --git a/static/fonts/Maple.woff2 b/static/fonts/Maple.woff2 deleted file mode 100644 index d3641fe..0000000 Binary files a/static/fonts/Maple.woff2 and /dev/null differ diff --git a/static/img/bg.png b/static/img/bg.png deleted file mode 100644 index ea94170..0000000 Binary files a/static/img/bg.png and /dev/null differ diff --git a/static/img/coffee.svg b/static/img/coffee.svg deleted file mode 100644 index 6af3eb0..0000000 --- a/static/img/coffee.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/static/img/favicon.ico b/static/img/favicon.ico deleted file mode 100644 index e441116..0000000 Binary files a/static/img/favicon.ico and /dev/null differ diff --git a/static/index.html b/static/index.html deleted file mode 100644 index dcaa56b..0000000 --- a/static/index.html +++ /dev/null @@ -1,593 +0,0 @@ - - - - - - Liz CSS - Framework Demo - - - - - -
- - -
- -
- -
-

Color Palette

-

A retro-themed minimal CSS framework with carefully selected colors for light and dark modes.

- -

Primary Colors

-
-
- Primary -
-
- #ff69b4 -
-
-
- Primary Light -
-
- #ff85c0 -
-
-
- Primary Dark -
-
- #ff4a9f -
-
-
- -

Secondary Colors

-
-
- Secondary -
-
- #b19cd9 -
-
-
- Secondary Light -
-
- #c4b5fd -
-
-
- Secondary Dark -
-
- #9d7eb8 -
-
-
- -

Status Colors

-
-
- Success -
-
- #4caf50 -
-
-
- Error -
-
- #f44336 -
-
-
- Warning -
-
- #ff9800 -
-
-
- Info -
-
- #2196f3 -
-
-
-
- - -
-

Buttons

-

Retro-styled buttons with multiple variants and states.

- -

Basic Buttons

-
- - - - -
- -

Status Buttons

-
- - - - -
- -

Button States

-
- - -
-
- - -
-

Forms

-

Complete form styling with retro aesthetics.

- -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- Checkboxes -
- - -
-
- - -
-
- -
- Radio Buttons -
- - -
-
- - -
-
- -
- - - -
-
-
- - -
-

Alerts

-

Status messages and notifications with semantic colors.

- -
- ℹ️ Info: This is an informational message. -
- -
- ✓ Success: Operation completed successfully! -
- -
- ⚠️ Warning: Please review this before proceeding. -
- -
- ✗ Error: Something went wrong. Please try again. -
-
- - -
-

Badges & Pills

-

Small inline elements for labels, tags, and status indicators.

- -

Default Badges

-

- Default - Primary - Secondary - Contrast -

- -

Status Badges

-

- ✓ Success - ✗ Error - ⚠️ Warning - ℹ️ Info -

-
- - -
-

Typography & Helper Classes

-

Text utilities and spacing helpers for quick styling.

- -

Text Colors

-

- Default text (muted) - success text - error text - warning text - info text - contrast text -

- -

Text Alignment

-

Left aligned

-

Center aligned

-

Right aligned

- -

Spacing Helpers

-

- Use .mt-xs, .mt-sm, .mt-md, - .mt-lg, .mt-xl for margin-top. -

-

- Use .mb-xs, .mb-sm, .mb-md, - .mb-lg, .mb-xl for margin-bottom. -

-

- Use .mx-auto for horizontal centering and - .py-md for vertical padding. -

- -
-

Example: Component with margin and padding utilities

-
-
- - -
-

Heading Styles

-

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
-
- - -
-

Lists

- -

Unordered List

-
    -
  • Item one with some text
    • -
  • Item two with more text
    • -
  • Item three with even more text
    • -
  • Nested lists: -
      -
    • Sub-item one
      • -
    • Sub-item two
      • -
    -
    • -
- -

Ordered List

-
    -
  1. First step in the process
    2. -
  2. Second step follows naturally
    3. -
  3. Third step completes the sequence
    4. -
-
- - -
-

Blockquotes

-
- "The best time to plant a tree was 20 years ago. The second best time is now." -
- — Chinese Proverb -
-
- - -
-

Links

-

- This is a hyperlink styled with the framework. Links - have a bottom border and change color on hover. You can use them - inline within text or as standalone elements. -

-
- - -
-

Tables

-

Tables with retro styling, alternating row colors, and hover effects.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureLight ModeDark Mode
BackgroundWarm creamWarm taupe
ButtonsLavender primaryRose primary
BordersRetro 90s beveledRetro 90s beveled
AccentsPink & brownPink & brown
-
- - -
-

Code

-

Inline const x = 42; looks different from block code:

- 
function retro() {
-  return "That's totally rad!";
-}
-
-retro(); // "That's totally rad!"
-
- - -
-

Dividers

-

Use <hr> to separate content sections:

-
-

Content after the divider looks fresh and organized.

-
- - -
-

Form Validation

-

Invalid inputs show a red border when they fail validation.

-
-
- - -
-
- - -
-
- - -
-
-
- - -
-

Button Groups

-

Combine buttons into a group with the .button-group class:

-
- - - -
-
- - -
-

Toggle Switches

-

Use checkboxes with the .toggle class to create stylish toggle switches:

-
- - -
-
- - -
-
- - -
-
- - -
-

Range Sliders

-

Native range inputs styled with retro beveled appearance:

-
- - -
-
- - -
-
- - -
-
- -
- -
-

© 2025 Liz CSS Framework. Made with coffee and retro vibes.

-
- - - - diff --git a/static/js/script.js b/static/js/script.js deleted file mode 100644 index d04c09d..0000000 --- a/static/js/script.js +++ /dev/null @@ -1,76 +0,0 @@ -(() => { - const toggleButton = document.getElementById("theme-toggle"); - const html = document.documentElement; - - const sessionTheme = sessionStorage.getItem("theme"); - const systemPrefersDark = window.matchMedia( - "(prefers-color-scheme: dark)", - ).matches; - - const initialTheme = sessionTheme || (systemPrefersDark ? "dark" : "light"); - - if (initialTheme === "dark") { - html.setAttribute("data-theme", "dark"); - toggleButton.checked = true; - } - - toggleButton.addEventListener("change", () => { - const theme = html.getAttribute("data-theme"); - - if (theme === "dark") { - html.removeAttribute("data-theme"); - sessionStorage.setItem("theme", "light"); - toggleButton.checked = false; - } else { - html.setAttribute("data-theme", "dark"); - sessionStorage.setItem("theme", "dark"); - toggleButton.checked = true; - } - }); -})(); - -(() => { - const colors = [ - "#ff69b4", - "#b19cd9", - "#8b6f47", - "#ff85c0", - "#c4b5fd", - "#d4a574", - ]; - const shapes = ["❀", "✿", "✽", "✾", "✻", "❊", "❋", "✼"]; - - document.addEventListener("mousemove", (e) => { - createParticle(e.clientX, e.clientY); - }); - - const createParticle = (x, y) => { - const particle = document.createElement("div"); - particle.className = "fairy-dust"; - - const shape = shapes[Math.floor(Math.random() * shapes.length)]; - const size = Math.random() * 8 + 6; - const color = colors[Math.floor(Math.random() * colors.length)]; - const offsetX = (Math.random() - 0.5) * 20; - const offsetY = (Math.random() - 0.5) * 20; - const rotation = Math.random() * 360; - - particle.textContent = shape; - particle.style.cssText = ` - position: fixed; - left: ${x + offsetX}px; - top: ${y + offsetY}px; - font-size: ${size}px; - color: ${color}; - opacity: 0.4; - pointer-events: none; - z-index: 9001; /* it's over 9000 */ - line-height: 1; - transform: rotate(${rotation}deg); - animation: fairy-float 0.8s ease-out forwards; - `; - - document.body.appendChild(particle); - setTimeout(() => particle.remove(), 800); - }; -})(); diff --git a/static/oneko/oneko.gif b/static/oneko/oneko.gif deleted file mode 100644 index a009c2c..0000000 Binary files a/static/oneko/oneko.gif and /dev/null differ diff --git a/static/oneko/oneko.js b/static/oneko/oneko.js deleted file mode 100644 index 058f168..0000000 --- a/static/oneko/oneko.js +++ /dev/null @@ -1,284 +0,0 @@ -// oneko.js: https://github.com/adryd325/oneko.js - -(function oneko() { - const isReducedMotion = - window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || - window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true; - - if (isReducedMotion) return; - - const nekoEl = document.createElement("div"); - let persistPosition = true; - - let nekoPosX = 32; - let nekoPosY = 32; - - let mousePosX = 0; - let mousePosY = 0; - - let frameCount = 0; - let idleTime = 0; - let idleAnimation = null; - let idleAnimationFrame = 0; - - const nekoSpeed = 10; - const spriteSets = { - idle: [[-3, -3]], - alert: [[-7, -3]], - scratchSelf: [ - [-5, 0], - [-6, 0], - [-7, 0], - ], - scratchWallN: [ - [0, 0], - [0, -1], - ], - scratchWallS: [ - [-7, -1], - [-6, -2], - ], - scratchWallE: [ - [-2, -2], - [-2, -3], - ], - scratchWallW: [ - [-4, 0], - [-4, -1], - ], - tired: [[-3, -2]], - sleeping: [ - [-2, 0], - [-2, -1], - ], - N: [ - [-1, -2], - [-1, -3], - ], - NE: [ - [0, -2], - [0, -3], - ], - E: [ - [-3, 0], - [-3, -1], - ], - SE: [ - [-5, -1], - [-5, -2], - ], - S: [ - [-6, -3], - [-7, -2], - ], - SW: [ - [-5, -3], - [-6, -1], - ], - W: [ - [-4, -2], - [-4, -3], - ], - NW: [ - [-1, 0], - [-1, -1], - ], - }; - - function init() { - let nekoFile = "/static/oneko/oneko.gif"; - const curScript = document.currentScript; - if (curScript && curScript.dataset.cat) { - nekoFile = curScript.dataset.cat; - } - if (curScript && curScript.dataset.persistPosition) { - if (curScript.dataset.persistPosition === "") { - persistPosition = true; - } else { - persistPosition = JSON.parse( - curScript.dataset.persistPosition.toLowerCase(), - ); - } - } - - if (persistPosition) { - let storedNeko = JSON.parse(window.localStorage.getItem("oneko")); - if (storedNeko !== null) { - nekoPosX = storedNeko.nekoPosX; - nekoPosY = storedNeko.nekoPosY; - mousePosX = storedNeko.mousePosX; - mousePosY = storedNeko.mousePosY; - frameCount = storedNeko.frameCount; - idleTime = storedNeko.idleTime; - idleAnimation = storedNeko.idleAnimation; - idleAnimationFrame = storedNeko.idleAnimationFrame; - nekoEl.style.backgroundPosition = storedNeko.bgPos; - } - } - - nekoEl.id = "oneko"; - nekoEl.ariaHidden = true; - nekoEl.style.width = "32px"; - nekoEl.style.height = "32px"; - nekoEl.style.position = "fixed"; - nekoEl.style.pointerEvents = "none"; - nekoEl.style.imageRendering = "pixelated"; - nekoEl.style.left = `${nekoPosX - 16}px`; - nekoEl.style.top = `${nekoPosY - 16}px`; - nekoEl.style.zIndex = 2147483647; - - nekoEl.style.backgroundImage = `url(${nekoFile})`; - - document.body.appendChild(nekoEl); - - document.addEventListener("mousemove", function (event) { - mousePosX = event.clientX; - mousePosY = event.clientY; - }); - - if (persistPosition) { - window.addEventListener("beforeunload", function (event) { - window.localStorage.setItem( - "oneko", - JSON.stringify({ - nekoPosX: nekoPosX, - nekoPosY: nekoPosY, - mousePosX: mousePosX, - mousePosY: mousePosY, - frameCount: frameCount, - idleTime: idleTime, - idleAnimation: idleAnimation, - idleAnimationFrame: idleAnimationFrame, - bgPos: nekoEl.style.backgroundPosition, - }), - ); - }); - } - - window.requestAnimationFrame(onAnimationFrame); - } - - let lastFrameTimestamp; - - function onAnimationFrame(timestamp) { - // Stops execution if the neko element is removed from DOM - if (!nekoEl.isConnected) { - return; - } - if (!lastFrameTimestamp) { - lastFrameTimestamp = timestamp; - } - if (timestamp - lastFrameTimestamp > 100) { - lastFrameTimestamp = timestamp; - frame(); - } - window.requestAnimationFrame(onAnimationFrame); - } - - function setSprite(name, frame) { - const sprite = spriteSets[name][frame % spriteSets[name].length]; - nekoEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`; - } - - function resetIdleAnimation() { - idleAnimation = null; - idleAnimationFrame = 0; - } - - function idle() { - idleTime += 1; - - // every ~ 20 seconds - if ( - idleTime > 10 && - Math.floor(Math.random() * 200) == 0 && - idleAnimation == null - ) { - let avalibleIdleAnimations = ["sleeping", "scratchSelf"]; - if (nekoPosX < 32) { - avalibleIdleAnimations.push("scratchWallW"); - } - if (nekoPosY < 32) { - avalibleIdleAnimations.push("scratchWallN"); - } - if (nekoPosX > window.innerWidth - 32) { - avalibleIdleAnimations.push("scratchWallE"); - } - if (nekoPosY > window.innerHeight - 32) { - avalibleIdleAnimations.push("scratchWallS"); - } - idleAnimation = - avalibleIdleAnimations[ - Math.floor(Math.random() * avalibleIdleAnimations.length) - ]; - } - - switch (idleAnimation) { - case "sleeping": - if (idleAnimationFrame < 8) { - setSprite("tired", 0); - break; - } - setSprite("sleeping", Math.floor(idleAnimationFrame / 4)); - if (idleAnimationFrame > 192) { - resetIdleAnimation(); - } - break; - case "scratchWallN": - case "scratchWallS": - case "scratchWallE": - case "scratchWallW": - case "scratchSelf": - setSprite(idleAnimation, idleAnimationFrame); - if (idleAnimationFrame > 9) { - resetIdleAnimation(); - } - break; - default: - setSprite("idle", 0); - return; - } - idleAnimationFrame += 1; - } - - function frame() { - frameCount += 1; - const diffX = nekoPosX - mousePosX; - const diffY = nekoPosY - mousePosY; - const distance = Math.sqrt(diffX ** 2 + diffY ** 2); - - if (distance < nekoSpeed || distance < 48) { - idle(); - return; - } - - idleAnimation = null; - idleAnimationFrame = 0; - - if (idleTime > 1) { - setSprite("alert", 0); - // count down after being alerted before moving - idleTime = Math.min(idleTime, 7); - idleTime -= 1; - return; - } - - let direction; - direction = diffY / distance > 0.5 ? "N" : ""; - direction += diffY / distance < -0.5 ? "S" : ""; - direction += diffX / distance > 0.5 ? "W" : ""; - direction += diffX / distance < -0.5 ? "E" : ""; - setSprite(direction, frameCount); - - nekoPosX -= (diffX / distance) * nekoSpeed; - nekoPosY -= (diffY / distance) * nekoSpeed; - - nekoPosX = Math.min(Math.max(16, nekoPosX), window.innerWidth - 16); - nekoPosY = Math.min(Math.max(16, nekoPosY), window.innerHeight - 16); - - nekoEl.style.left = `${nekoPosX - 16}px`; - nekoEl.style.top = `${nekoPosY - 16}px`; - } - - init(); -})(); -- cgit v1.2.3-70-g09d2