dark mode only
This commit is contained in:
Joshua Seigler
parent
dbb7f59197
commit
0c788a6893
6 changed files with 18 additions and 104 deletions
|
|
@ -14,3 +14,10 @@
|
|||
src: url("/fonts/ftaurebesh/ftaurebesh-bold.woff2") format("woff2");
|
||||
size-adjust: 125%;
|
||||
}
|
||||
[data-language="aurebesh"] {
|
||||
font-family: FTAurebesh;
|
||||
line-height: 1.25;
|
||||
ul:not(.collection) > li {
|
||||
list-style-type: square;
|
||||
}
|
||||
}
|
||||
33
assets/scripts/effects.js
vendored
33
assets/scripts/effects.js
vendored
|
|
@ -1,10 +1,6 @@
|
|||
"use strict";
|
||||
|
||||
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
const defaultPrefs = {
|
||||
language: "english",
|
||||
theme: "auto",
|
||||
};
|
||||
|
||||
document.querySelector('script[data-website-id]').addEventListener('load', () => {
|
||||
try {
|
||||
|
|
@ -12,26 +8,6 @@ document.querySelector('script[data-website-id]').addEventListener('load', () =>
|
|||
} catch {}
|
||||
});
|
||||
|
||||
function applyPreference(key, value, shouldSave) {
|
||||
if (umami !== null) {
|
||||
umami.identify({
|
||||
[`pref-${key}`]: value,
|
||||
});
|
||||
if (shouldSave) {
|
||||
umami.track(`Set ${key} to ${value}`);
|
||||
}
|
||||
}
|
||||
document.body.setAttribute(`data-${key}`, value);
|
||||
document.querySelectorAll(`input[name=${key}]`).forEach((input) => {
|
||||
if (input.value === value) {
|
||||
input.checked = true;
|
||||
}
|
||||
});
|
||||
if (shouldSave) {
|
||||
localStorage.setItem(key, value);
|
||||
}
|
||||
}
|
||||
|
||||
/** @param {Event} evt */
|
||||
function removeEffect({ target }) {
|
||||
const effectsLayer = document.querySelector("#effects");
|
||||
|
|
@ -87,15 +63,6 @@ function addEffect({ target }) {
|
|||
});
|
||||
}
|
||||
|
||||
Object.entries(defaultPrefs).forEach(([key, defaultPref]) => {
|
||||
const currentPref = localStorage.getItem(key) ?? defaultPref;
|
||||
applyPreference(key, currentPref, false);
|
||||
document.querySelectorAll(`input[name=${key}]`).forEach((input) => {
|
||||
input.addEventListener("change", (e) => {
|
||||
applyPreference(key, e.currentTarget.value, true);
|
||||
});
|
||||
});
|
||||
});
|
||||
document.addEventListener("mouseenter", addEffect, true);
|
||||
document.addEventListener("focus", addEffect, true);
|
||||
|
||||
|
|
|
|||
|
|
@ -3,17 +3,6 @@
|
|||
<nav>
|
||||
<div class="nav-row">
|
||||
<div class="nav-home"><a href="{{ "/" | url }}">{{ site.title }}</a></div>
|
||||
<div class="nav-settings">
|
||||
<div class="nav-toggles">
|
||||
<label class="nav-toggle-button" title="Light mode">☀️<input type="radio" name="theme" value="light"/></label>
|
||||
<label class="nav-toggle-button" title="Automatic">🔄<input type="radio" name="theme" value="auto"/></label>
|
||||
<label class="nav-toggle-button" title="Dark mode">🌒<input type="radio" name="theme" value="dark"/></label>
|
||||
</div>
|
||||
<div class="nav-toggles">
|
||||
<label class="nav-toggle-button" data-language="english">English<input type="radio" name="language" value="english"/></label>
|
||||
<label class="nav-toggle-button" data-language="aurebesh">Aurebesh<input type="radio" name="language" value="aurebesh"/></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-categories">
|
||||
<a class="{{ 'nav-active' if '/posts' in page.url }}" href="{{ "/posts/" | url }}">/posts</a>
|
||||
|
|
|
|||
|
|
@ -12,19 +12,16 @@
|
|||
}
|
||||
|
||||
body {
|
||||
--c-highlight: oklch(100% 0 0 / 0.875);
|
||||
--c-accent: white;
|
||||
--c-dark: oklch(32.1% 0.022 259.9);
|
||||
--c-body-background: oklch(87.5% 0 338);
|
||||
--c-bg1: oklch(87.5% 0.04 285);
|
||||
--c-bg2: oklch(87.5% 0.04 160);
|
||||
--c-text-background-light: oklch(96.2% 0 0 / 0.6);
|
||||
|
||||
--c-text-light: var(--c-highlight);
|
||||
--c-text-dark: var(--c-dark);
|
||||
--c-text-dim: color-mix(in lch, var(--c-text-dark), transparent 50%);
|
||||
|
||||
--tag-luminance: 0.4;
|
||||
--c-highlight: oklch(45% 0.135 280 / 0.7);
|
||||
--c-accent: oklch(45% 0.135 280 / 0.8);
|
||||
--c-body-background: oklch(15% 0.05 262);
|
||||
--c-bg1: oklch(15% 0.05 290);
|
||||
--c-bg2: oklch(15% 0.05 188);
|
||||
--c-dark: oklch(19.1% 0.005 259.9);
|
||||
--c-text-background-light: oklch(45% 0.135 280 / 0.3);
|
||||
--c-text-light: oklch(94% 0.045 107.2);
|
||||
--c-text-dark: oklch(94% 0.045 107.2);
|
||||
--tag-luminance: 0.85;
|
||||
|
||||
--ratio: 1.333;
|
||||
--s-5: calc(var(--s-4) / var(--ratio));
|
||||
|
|
@ -68,40 +65,6 @@ body {
|
|||
);
|
||||
}
|
||||
|
||||
body[data-theme="dark"] {
|
||||
background-color: var(--c-body-background);
|
||||
}
|
||||
[data-theme="dark"] {
|
||||
--c-highlight: oklch(45% 0.135 280 / 0.7);
|
||||
--c-accent: oklch(45% 0.135 280 / 0.8);
|
||||
--c-body-background: oklch(15% 0.05 262);
|
||||
--c-bg1: oklch(15% 0.05 290);
|
||||
--c-bg2: oklch(15% 0.05 188);
|
||||
--c-dark: oklch(19.1% 0.005 259.9);
|
||||
--c-text-background-light: oklch(45% 0.135 280 / 0.3);
|
||||
--c-text-light: oklch(94% 0.045 107.2);
|
||||
--c-text-dark: oklch(94% 0.045 107.2);
|
||||
--tag-luminance: 0.85;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body[data-theme="auto"] {
|
||||
background-color: var(--c-body-background);
|
||||
}
|
||||
[data-theme="auto"] {
|
||||
--c-highlight: oklch(45% 0.135 280 / 0.7);
|
||||
--c-accent: oklch(45% 0.135 280 / 0.8);
|
||||
--c-body-background: oklch(15% 0.05 262);
|
||||
--c-bg1: oklch(15% 0.05 290);
|
||||
--c-bg2: oklch(15% 0.05 188);
|
||||
--c-dark: oklch(19.1% 0.005 259.9);
|
||||
--c-text-background-light: oklch(45% 0.135 280 / 0.3);
|
||||
--c-text-light: oklch(94% 0.045 107.2);
|
||||
--c-text-dark: oklch(94% 0.045 107.2);
|
||||
--tag-luminance: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--c-highlight);
|
||||
color: var(--c-text-dark);
|
||||
|
|
@ -486,17 +449,6 @@ footer section {
|
|||
}
|
||||
}
|
||||
|
||||
[data-language="aurebesh"] {
|
||||
font-family: FTAurebesh;
|
||||
line-height: 1.25;
|
||||
ul:not(.collection) > li {
|
||||
list-style-type: square;
|
||||
}
|
||||
}
|
||||
[data-language="english"] {
|
||||
font-family: Inter;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
|
|
|
|||
|
|
@ -3,4 +3,3 @@ permalink: /site.css
|
|||
---
|
||||
{%include "css/site.css"%}
|
||||
{%include "css/prism.css"%}
|
||||
{%include "css/ftaurebesh.css"%}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ description: New look, simpler tech.
|
|||
tags:
|
||||
- technical
|
||||
---
|
||||
|
||||
<style>@import url('/fonts/ftaurebesh/ftaurebesh.css');</style>
|
||||
New design! The tools I used before have a lot of unmaintained or outdated dependencies and I wanted something a little simpler. The new site uses [pnpm](https://pnpm.io/), [11ty](https://www.11ty.dev/), and [Nunjucks](https://mozilla.github.io/nunjucks/). Content is still in [markdown](https://daringfireball.net/projects/markdown/).
|
||||
|
||||
One thing I'm proud of is a visual ping for footnotes.^[It highlights when you click back, too.] When you click a footnote^[Hi.] it briefly highlights the thing you jumped to.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue