dark mode only
This commit is contained in:
Joshua Seigler
parent
dbb7f59197
commit
0c788a6893
6 changed files with 18 additions and 104 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
@font-face {
|
||||
font-family: FTAurebesh;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: block;
|
||||
src: url("/fonts/ftaurebesh/ftaurebesh-medium.woff2") format("woff2");
|
||||
size-adjust: 125%;
|
||||
}
|
||||
@font-face {
|
||||
font-family: FTAurebesh;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: block;
|
||||
src: url("/fonts/ftaurebesh/ftaurebesh-bold.woff2") format("woff2");
|
||||
size-adjust: 125%;
|
||||
}
|
||||
|
|
@ -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