From c3b94610d2b797a0d3dc727574fe5f651599b3fe Mon Sep 17 00:00:00 2001 From: Johan Brook Date: Tue, 9 Jan 2024 09:14:47 +0100 Subject: [PATCH] Remove syntax highlighting and minification Only adds complexity and mental weight. --- _config.ts | 29 +----- deps.ts | 2 - src/css/base.css | 10 ++- src/css/prism-matrix.css | 188 --------------------------------------- src/css/prose.css | 4 + src/css/variables.css | 9 +- src/johan.css | 1 - 7 files changed, 18 insertions(+), 225 deletions(-) delete mode 100644 src/css/prism-matrix.css diff --git a/_config.ts b/_config.ts index af96c3495..bb5e7290c 100644 --- a/_config.ts +++ b/_config.ts @@ -4,11 +4,8 @@ import postcss from 'lume/plugins/postcss.ts'; import esbuild from 'lume/plugins/esbuild.ts'; import date from 'lume/plugins/date.ts'; import inline from 'lume/plugins/inline.ts'; -import minifyHTML from 'lume/plugins/minify_html.ts'; -import { minifier } from './deps.ts'; import { readingTime } from './src/_lume-plugins/reading-time.ts'; import { extractExcerpt } from './src/_lume-plugins/excerpts.ts'; -import { loadLanguages, prismMarkdown } from './src/_lume-plugins/prism.ts'; import { typeset } from './src/_lume-plugins/typeset.ts'; import sourceMaps from 'lume/plugins/source_maps.ts'; import { idOf } from './src/_includes/permalinks.ts'; @@ -16,21 +13,12 @@ import { idOf } from './src/_includes/permalinks.ts'; const DEST = 'build'; const MINIFY = Deno.env.get('ENV') == 'production'; -loadLanguages(); - const site = lume( { src: 'src', dest: DEST, location: new URL('https://johan.im'), // Ignored in dev - }, - { - markdown: { - options: { - highlight: prismMarkdown, - }, - }, - }, + } ); site @@ -107,19 +95,4 @@ site // Don't the entire site rebuild when --watching or --serving if .css files change .scopedUpdates((path) => path.endsWith('.css')); -if (MINIFY) { - site.addEventListener('afterBuild', () => { - console.log('Minifying CSS…'); - minifyCss(); - }); - - site.use(minifyHTML()); -} - -const minifyCss = () => { - const css = Deno.readTextFileSync(`./${DEST}/johan.css`); - const minified = minifier.minify('css', css); - Deno.writeTextFileSync(`./${DEST}/johan.css`, minified); -}; - export default site; diff --git a/deps.ts b/deps.ts index 782070f23..cf749f1fc 100644 --- a/deps.ts +++ b/deps.ts @@ -1,3 +1 @@ -export * as minifier from 'https://deno.land/x/minifier@v1.1.1/mod.ts'; -export type { Endpoints } from 'https://cdn.skypack.dev/@octokit/types@^6?dts'; export * as prism from 'https://cdn.skypack.dev/prismjs@^1?dts'; diff --git a/src/css/base.css b/src/css/base.css index ae5328e06..f7ee8850a 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -180,8 +180,11 @@ code { } :not(pre)>code { - color: var(--color-text-high-contrast); - font-weight: bold; + color: var(--code-color); + background-color: var(--code-background); + padding: .125rem .25rem; + border-radius: .125em; + font-weight: 500; font-size: .85em; } @@ -254,6 +257,9 @@ pre { hyphens: none; tab-size: 2; color: var(--code-color); + background-color: var(--code-background); + padding: .125rem .25rem; + border-radius: .25em; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: none; font-size: var(--f5); diff --git a/src/css/prism-matrix.css b/src/css/prism-matrix.css deleted file mode 100644 index 85352ceaf..000000000 --- a/src/css/prism-matrix.css +++ /dev/null @@ -1,188 +0,0 @@ -/* Matrix theme in light and dark versions by Johan. */ - -.token { - --hue: 112; - --sat: 40%; - --lit: 25%; - --alpha: 1; - --base: hsl(var(--hue) var(--sat) var(--lit) / var(--alpha)); - - color: var(--base); -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - --alpha: 80%; -} - -.token.punctuation { - --lit: 50%; - --sat: 20%; -} - -.namespace { - opacity: 0.7; -} - -.token.property, -.token.tag, -.token.constant, -.token.symbol, -.token.deleted { - --lit: 35%; - --sat: 30%; -} - -.token.number, -.token.boolean { - --lit: 20%; - --sat: 70%; -} - -.token.selector, -.token.attr-name, -.token.char, -.token.builtin, -.token.inserted { - font-weight: bold; -} - -.token.selector, -.token.builtin { - background-color: hsla(112, 42.86%, 46.9%, 0.15); -} - -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string, -.token.variable { - --lit: 60%; - --sat: 20%; -} - -.token.atrule, -.token.attr-value, -.token.function, -.token.class-name { - --sat: 50%; - --lit: 25%; - font-weight: bold; -} - -.token.keyword, -.token.rule { - --sat: 20%; - --lit: 50%; -} - -.token.regex, -.token.important { - --hue: 40; - --sat: 80%; - --lit: 70%; -} - -@media (prefers-color-scheme: dark) { - .token { - --hue: 112.08; - --sat: 49.53%; - --lit: 58.04%; - --alpha: 1; - --base: hsl(var(--hue) var(--sat) var(--lit) / var(--alpha)); - - color: var(--base); - } - - .token.comment, - .token.prolog, - .token.doctype, - .token.cdata { - --sat: 10%; - } - - .token.punctuation { - --lit: 40%; - --sat: 20%; - } - - .namespace { - opacity: 0.7; - } - - .token.property, - .token.tag, - .token.constant, - .token.symbol, - .token.deleted { - --lit: 80%; - --sat: 100%; - } - - .token.number, - .token.boolean { - --lit: 80%; - } - - .token.selector, - .token.attr-name, - .token.string, - .token.char, - .token.builtin, - .token.inserted { - --lit: 70%; - } - - .token.selector, - .token.builtin { - background-color: hsla(112, 42.86%, 46.9%, 0.08); - } - - .token.operator, - .token.entity, - .token.url, - .language-css .token.string, - .style .token.string, - .token.variable { - --lit: 80%; - --sat: 60%; - } - - .token.atrule, - .token.attr-value, - .token.function, - .token.class-name { - --sat: 31%; - --lit: 75%; - } - - .token.keyword, - .token.rule { - --sat: 20%; - --lit: 60%; - } - - .token.regex, - .token.important { - --hue: 40; - --sat: 80%; - --lit: 70%; - } -} - -.token.important, -.token.bold, -.token.rule { - font-weight: bold; -} - -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} diff --git a/src/css/prose.css b/src/css/prose.css index 874389332..01ed21e85 100644 --- a/src/css/prose.css +++ b/src/css/prose.css @@ -81,6 +81,10 @@ PROSE overflow-wrap: break-word; } + pre { + font-size: var(--f6); + } + & figure.image--full { margin: calc(var(--lineheight) * 2) -14vw; diff --git a/src/css/variables.css b/src/css/variables.css index a835bbd39..48838c619 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -27,8 +27,8 @@ --focus-color: var(--link-color); --pre-background: var(--color-bg-secondary); - --code-background: var(--color-bg-secondary); - --code-color: hsl(112 30% 30%); + --code-background: rgb(0 0 0 / 2%); + --code-color: rgb(120 94 0); --hr-color: var(--color-text); @@ -52,7 +52,8 @@ --link-underline-color: hsl(201.43 57.86% 50.17% / 0.47); --link-color-visited: #7a8be5; --border-color: var(--color-text-detail); - --code-color: hsl(112 80% 80%); + --code-color: rgb(236 216 142); + --code-background: rgb(255 255 255 / 2%); @supports (color: color(display-p3 1 1 1 / 1)) { --link-color: color(display-p3 0.38 0.742 1); @@ -63,7 +64,7 @@ /* Typography */ --sans: system-ui, sans-serif; - --mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; + --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; --serif: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; --font-size-base: 20; diff --git a/src/johan.css b/src/johan.css index d28dcb9d5..f41766f5c 100644 --- a/src/johan.css +++ b/src/johan.css @@ -31,5 +31,4 @@ utils; @import 'css/autogrow.css' layer(utils); @import 'css/prose.css' layer(components); -@import 'css/prism-matrix.css' layer(base); @import 'css/typeset.css' layer(utils);