diff --git a/README.md b/README.md index 1f3188f..0557cc9 100644 --- a/README.md +++ b/README.md @@ -1 +1,13 @@ # Lupus Lite + +## Usage + +```bash +# Development Mode: also starts "npm run dev" inside "frontend/" +$ MODE=dev go run . + +# Production Mode +$ cd frontend +$ npm run build +$ go build +``` diff --git a/frontend/index.html b/frontend/index.html index 3eb10b5..122a604 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -13,6 +13,12 @@ -

Lupus Lite

+
+

Lupus Lite

+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore qui quibusdam placeat officiis necessitatibus. Unde quis eos quo. Laborum, quis.

+
+ Login +
\ No newline at end of file diff --git a/frontend/src/main.scss b/frontend/src/main.scss index ec4b92e..013cbfa 100644 --- a/frontend/src/main.scss +++ b/frontend/src/main.scss @@ -13,10 +13,9 @@ --ft-sans-wt-regular: 400; --ft-sans-wt-bold: 900; - --text-500: #f0f0f0; - - --accent-100: #f19d90; - --accent-500: #a31e17; + --accent-100: #f7dfdb; + --accent-400: #c55341; + --accent-500: #a93523; --bg-500: #222; } @@ -29,13 +28,30 @@ body { font-family: var(--ft-sans); font-weight: var(--ft-sans-wt-regular); - font-size: 16px; + font-size: 17px; - color: var(--text-500); + color: var(--accent-100); background: var(--bg-500); } +// +// Pages Structure +// + +main { + margin: 0 auto; + padding: 1rem 0.5rem; + + max-width: 80ch; + + display: flex; + flex-direction: column; + align-items: center; +} + +// // Components +// form { display: grid; @@ -66,15 +82,31 @@ form { } } +a { + &.button { + text-decoration: none; + } +} + +button, +.button { + border: none; + + color: var(--accent-100); + background: var(--accent-500); + + padding: 0.5rem 1rem; +} + // // Typography // hr { width: 100%; - height: 2px; + height: 1px; border: none; - background: var(--accent-700); + background: var(--accent-500); } p { @@ -103,7 +135,7 @@ $heading-scale: 1.33; margin: 0; font-family: var(--ft-serif); - color: var(--accent-100); + color: var(--accent-400); $factor: pow($heading-scale, 5 - $i); font-size: $base-font-size * $factor; diff --git a/frontend/vite.config.js b/frontend/vite.config.js index a246770..8e7bbdf 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -2,18 +2,31 @@ import { defineConfig } from 'vite' import { basename, extname, resolve } from 'path' const stripExt = path => basename(path, extname(path)) +const entryPoints = ['index.html', 'login.html', 'user.html', 'game.html'] + +const redirect = redirectMap => ({ + name: 'redirect', + configureServer(server) { + server.middlewares.use((req, res, next) => { + if (!!redirectMap[req.url]) { + res.statusCode = 302 + res.setHeader('Location', redirectMap[req.url]) + res.setHeader('Content-Length', '0') + res.end() + } else { + next() + } + }) + }, +}) + +const redirectMap = Object.fromEntries(entryPoints.map(path => ['/' + stripExt(path), '/' + path])) export default defineConfig({ build: { rollupOptions: { input: Object.fromEntries( - [ - // Entry points - 'index.html', - 'login.html', - 'user.html', - 'game.html', - ].map(path => [stripExt(path), resolve(__dirname, path)]) + entryPoints.map(path => [stripExt(path), resolve(__dirname, path)]) ), }, }, @@ -22,5 +35,5 @@ export default defineConfig({ '/api': 'http://127.0.0.1:4000', }, }, - plugins: [], + plugins: [redirect(redirectMap)], })