From 277945f7ec06a7fd215e871d39823f4f2f0f8e68 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Mon, 16 Jun 2025 00:46:07 -0400 Subject: [PATCH] colors and gradients --- site/_includes/base.njk | 8 +- site/_includes/css/prism.css | 83 +++++++++---------- site/_includes/css/site.css | 26 +++--- .../2025-06-15-replacing-github-pages.md | 2 +- 4 files changed, 63 insertions(+), 56 deletions(-) diff --git a/site/_includes/base.njk b/site/_includes/base.njk index 26906d8..af14676 100644 --- a/site/_includes/base.njk +++ b/site/_includes/base.njk @@ -9,6 +9,12 @@ title: Joshua's Homepage + + + + + + {{ computedTitle }} - {{ site.title }} @@ -24,8 +30,6 @@ title: Joshua's Homepage {% endif %} - - {% include "-header.njk" %} diff --git a/site/_includes/css/prism.css b/site/_includes/css/prism.css index 8d751ef..7ce453a 100644 --- a/site/_includes/css/prism.css +++ b/site/_includes/css/prism.css @@ -1,4 +1,4 @@ -/* Prism Material */ +/* Prism Material with some adjustments */ code[class*="language-"], pre[class*="language-"] { text-align: left; @@ -45,48 +45,45 @@ p:has(>code) + pre[class*="language-"] { } .token.id { font-weight: bold; } .token.important { font-weight: bold; } -/* Prism Material Light */ -.language-css > code, -.language-sass > code, -.language-scss > code { - color: #f76d47; -} -.token.atrule { color: #7c4dff; } -.token.attr-name { color: #39adb5; } -.token.attr-value { color: #f6a434; } -.token.attribute { color: #f6a434; } -.token.boolean { color: #7c4dff; } -.token.builtin { color: #39adb5; } -.token.cdata { color: #39adb5; } -.token.char { color: #39adb5; } -.token.class { color: #39adb5; } -.token.class-name { color: #6182b8; } -.token.comment { color: #aabfc9; } -.token.constant { color: #7c4dff; } -.token.deleted { color: #e53935; } -.token.doctype { color: #aabfc9; } -.token.entity { color: #e53935; } -.token.function { color: #7c4dff; } -.token.hexcode { color: #f76d47; } -.token.id { color: #7c4dff; } -.token.important { color: #7c4dff; } -.token.inserted { color: #39adb5; } -.token.keyword { color: #7c4dff; } -.token.number { color: #f76d47; } -.token.operator { color: #39adb5; } -.token.prolog { color: #aabfc9; } -.token.property { color: #39adb5; } -.token.pseudo-class { color: #f6a434; } -.token.pseudo-element { color: #f6a434; } -.token.punctuation { color: #39adb5; } -.token.regex { color: #6182b8; } -.token.selector { color: #e53935; } -.token.string { color: #f6a434; } -.token.symbol { color: #7c4dff; } -.token.tag { color: #e53935; } -.token.unit { color: #f76d47; } -.token.url { color: #e53935; } -.token.variable { color: #e53935; } +/* Prism Material Light, darkened in LCH by 50% */ +.language-scss > code { color: oklch(0.349 0.178 36.3); } +.token.atrule { color: oklch(0.29 0.247 288.2); } +.token.attr-name { color: oklch(0.344 0.101 201.7); } +.token.attr-value { color: oklch(0.391 0.153 69.5); } +.token.attribute { color: oklch(0.391 0.153 69.5); } +.token.boolean { color: oklch(0.29 0.247 288.2); } +.token.builtin { color: oklch(0.344 0.101 201.7); } +.token.cdata { color: oklch(0.344 0.101 201.7); } +.token.char { color: oklch(0.344 0.101 201.7); } +.token.class { color: oklch(0.344 0.101 201.7); } +.token.class-name { color: oklch(0.302 0.091 260); } +.token.comment { color: oklch(0.396 0.027 228); } +.token.constant { color: oklch(0.29 0.247 288.2); } +.token.deleted { color: oklch(0.304 0.209 27); } +.token.doctype { color: oklch(0.396 0.027 228); } +.token.entity { color: oklch(0.304 0.209 27); } +.token.function { color: oklch(0.29 0.247 288.2); } +.token.hexcode { color: oklch(0.349 0.178 36.3); } +.token.id { color: oklch(0.29 0.247 288.2); } +.token.important { color: oklch(0.29 0.247 288.2); } +.token.inserted { color: oklch(0.344 0.101 201.7); } +.token.keyword { color: oklch(0.29 0.247 288.2); } +.token.number { color: oklch(0.349 0.178 36.3); } +.token.operator { color: oklch(0.344 0.101 201.7); } +.token.prolog { color: oklch(0.396 0.027 228); } +.token.property { color: oklch(0.344 0.101 201.7); } +.token.pseudo-class { color: oklch(0.391 0.153 69.5); } +.token.pseudo-element { color: oklch(0.391 0.153 69.5); } +.token.punctuation { color: oklch(0.344 0.101 201.7); } +.token.regex { color: oklch(0.302 0.091 260); } +.token.selector { color: oklch(0.304 0.209 27); } +.token.string { color: oklch(0.391 0.153 69.5); } +.token.symbol { color: oklch(0.29 0.247 288.2); } +.token.tag { color: oklch(0.304 0.209 27); } +.token.unit { color: oklch(0.349 0.178 36.3); } +.token.url { color: oklch(0.304 0.209 27); } +.token.variable { color: oklch(0.304 0.209 27); } + /* Prism Material Dark */ [data-theme="dark"] { .language-css > code, diff --git a/site/_includes/css/site.css b/site/_includes/css/site.css index 5f8bce8..37f6c25 100644 --- a/site/_includes/css/site.css +++ b/site/_includes/css/site.css @@ -8,15 +8,16 @@ flex-grow: 1; padding: 0; line-height: 1.5; + font-display: swap; } 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(85% 0 338); - --c-bg1: oklch(85% 0.04 285); - --c-bg2: oklch(85% 0.04 160); + --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); @@ -44,11 +45,11 @@ body { --inset: calc(50vw - var(--content-width) / 2); background-image: url(/noise.png), - radial-gradient(circle at -20% 20vmin, var(--c-bg1), transparent 60%), + radial-gradient(circle at -20% 20vmin, var(--c-bg1), transparent 150vmin), radial-gradient( circle at 120% calc(100% - 20vmin), var(--c-bg2), - transparent 60% + transparent 150vmin ); } @@ -106,7 +107,9 @@ body { flex-grow: 1; padding: 0; margin: 0; - font-family: Inter, sans-serif; + font-family: + Inter, Ubuntu, "Noto Sans", "Fira Sans", Roboto, "Helvetica Neue", + "Arial Nova", "Nimbus Sans", Arial, sans-serif; background-color: var(--c-body-background); color: var(--c-text-dark); } @@ -247,7 +250,8 @@ ul.collection { p { margin: 0; } -p + p, pre + p { +p + p, +pre + p { margin-top: 1lh; } blockquote { @@ -546,7 +550,8 @@ a.header-anchor { margin-bottom: 1rem; } -p > code, pre { +p > code, +pre { font-family: "Commit Mono", monospace; background-color: var(--c-text-background-light); padding: 0.1em; @@ -594,7 +599,7 @@ body .isso-input-wrapper label { } body .isso-input-wrapper input, -input[type='text'], +input[type="text"], body .isso-textarea, body .isso-preview { color: inherit; @@ -627,7 +632,8 @@ body .isso-preview { var(--c-text-background-light) 20px ); } -body .isso-post-action > input, button { +body .isso-post-action > input, +button { color: inherit; background-color: var(--c-text-background-light); font-size: 1rem; diff --git a/site/posts/2025-06-15-replacing-github-pages.md b/site/posts/2025-06-15-replacing-github-pages.md index d4c6b09..cbfdde4 100644 --- a/site/posts/2025-06-15-replacing-github-pages.md +++ b/site/posts/2025-06-15-replacing-github-pages.md @@ -26,7 +26,7 @@ I usually use nginx, but I wanted to give Caddy a shot, and it has been a great Here is the Caddyfile I made---you will need to change the domains names and the email. Email could be removed, but it is recommended so SSL certificate issuers can contact you if there is a problem with your certificates. `/etc/caddy/Caddyfile` -```undefined +```caddy # Global options block { email you@example.com # <<<< CHANGE THIS <<<<