diff --git a/lib/generate/css.ts b/lib/generate/css.ts index d388095..07107ae 100644 --- a/lib/generate/css.ts +++ b/lib/generate/css.ts @@ -20,14 +20,19 @@ async function generate(theme: string) { let sass = (await fs.readFile(filename)).toString(); sass = util.render(sass, {}, filename); - const result = await renderSass(sass); + let css = (await renderSass(sass)).css.toString(); + css += "\n"; + let mainSass = (await fs.readFile("site/css/main.scss")).toString(); + mainSass = util.render(mainSass, {}, "site/css/main.scss"); + css += (await renderSass(mainSass)).css.toString(); - util.write(`css/${theme}.css`, result.css); + util.write(`css/${theme}.css`, css); } export default async function css() { await generate("light"); await generate("dark"); + await generate("auto"); require("fs").watch("site/css/", css); } \ No newline at end of file diff --git a/site/css/auto.scss b/site/css/auto.scss new file mode 100644 index 0000000..d284bcb --- /dev/null +++ b/site/css/auto.scss @@ -0,0 +1,5 @@ +<%- include("light.scss"); %> + +@media (prefers-color-scheme: dark) { + <%- include("dark.scss"); %> +} \ No newline at end of file diff --git a/site/css/dark.scss b/site/css/dark.scss index e779cd7..83eaf2e 100644 --- a/site/css/dark.scss +++ b/site/css/dark.scss @@ -20,6 +20,4 @@ --atom-hue-5-2: #be5046; --atom-hue-6: #d19a66; --atom-hue-6-2: #e6c07b; -} - -<%- include("main.scss") %> \ No newline at end of file +} \ No newline at end of file diff --git a/site/css/light.scss b/site/css/light.scss index 03df970..4368a3e 100644 --- a/site/css/light.scss +++ b/site/css/light.scss @@ -20,6 +20,4 @@ --atom-hue-5-2: #c91243; --atom-hue-6: #986801; --atom-hue-6-2: #c18401; -} - -<%- include("main.scss") %> \ No newline at end of file +} \ No newline at end of file diff --git a/site/css/main.scss b/site/css/main.scss index 2b0f074..aaf52f2 100644 --- a/site/css/main.scss +++ b/site/css/main.scss @@ -359,6 +359,27 @@ figure { font-size: 1.5em; } + .ui-controls { + input { + display: none; + } + label { + color: var(--accent-color); + text-decoration: underline; + &:hover { + cursor: pointer; + } + } + input:checked + label { + color: var(--ui-text-color); + text-decoration: none; + font-weight: bold; + &:hover { + cursor: default; + } + } + } + .social-links ul { padding: 0; margin: 0; diff --git a/site/layouts/default.html.ejs b/site/layouts/default.html.ejs index b5c2c5a..a5c3319 100644 --- a/site/layouts/default.html.ejs +++ b/site/layouts/default.html.ejs @@ -31,16 +31,12 @@ @@ -77,8 +73,13 @@

Shadowfacts

- - + Theme: + + + + + +