From 418766dca571ef059b51c8e01d26344ffb158e57 Mon Sep 17 00:00:00 2001 From: Daniel Flanagan Date: Thu, 11 May 2023 13:54:04 -0500 Subject: [PATCH] Change to catppuccin theme, fix code block alignment, add copy code buttons --- layouts/_default/baseof.html | 40 +++++++-- layouts/partials/align-toggle.html | 8 +- layouts/partials/theme-toggle.html | 8 +- src/stylus/core.styl | 20 ++++- src/stylus/theme.styl | 87 ++++++++++++-------- static/global.js | 127 ++++++++++++++++++----------- 6 files changed, 197 insertions(+), 93 deletions(-) diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index b5cb71a..308513f 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -33,10 +33,10 @@ {{ end }}
- -
@@ -47,16 +47,30 @@ @@ -64,10 +78,20 @@ diff --git a/layouts/partials/align-toggle.html b/layouts/partials/align-toggle.html index 1e512e5..a3da9e8 100644 --- a/layouts/partials/align-toggle.html +++ b/layouts/partials/align-toggle.html @@ -1,2 +1,6 @@ - - + + + + + + diff --git a/layouts/partials/theme-toggle.html b/layouts/partials/theme-toggle.html index 1a8c59a..b35a2e7 100644 --- a/layouts/partials/theme-toggle.html +++ b/layouts/partials/theme-toggle.html @@ -1,2 +1,6 @@ - - + + + + + + diff --git a/src/stylus/core.styl b/src/stylus/core.styl index 0f9e076..09dfffa 100644 --- a/src/stylus/core.styl +++ b/src/stylus/core.styl @@ -4,10 +4,26 @@ code, pre ul, ol { padding-left: 2em } a + cursor pointer text-decoration-skip-ink auto color var(--link-fg) &:visited { color: var(--link-visited-fg) } +a > svg + margin-right: 0.5em + +button.copy-code-button + display none + position absolute + top 0.5em + right 0.5em + color var(--link-fg) + text-decoration underline + z-index 10 + +pre.chroma:hover > button.copy-code-button + display block + img, embed, frame, iframe { max-width: 100vw } html,body @@ -196,6 +212,7 @@ form border-left 0 pre.chroma + position relative padding 0 display flex width auto @@ -207,6 +224,7 @@ form margin-right auto > code + width: 600px; padding 0.25em 0.5em border-left solid var(--syntax-bpx) var(--syntax-ledg) @@ -234,7 +252,7 @@ ul.horizontal-blocks flex-grow 1 display flex padding 0.5em 2em - background-color var(--header-bg) + background-color var(--button-bg) text-align center justify-content center align-items center diff --git a/src/stylus/theme.styl b/src/stylus/theme.styl index aed527d..c676892 100644 --- a/src/stylus/theme.styl +++ b/src/stylus/theme.styl @@ -1,34 +1,50 @@ +/* catppuccin colors */ +latte = { + red: #d20f39, + yellow: #df8e1d, + green: #40a02b, + sapphire: #209fb5, + mauve: #8839ef, +} + +mocha = { + red: #f38ba8, + yellow: #f9e2af, + green: #a6e3a1 + sapphire: #74c7ec, + mauve: #cba6f7, +} + light-syntax = { brd: rgba(255, 255, 255, 0.2), - bg: rgba(0, 0, 0, 0.05), - ledg: #ccc, - sh: #775, - name: #480, - mag: #d04, - lit: #40f, - lits: #660, - aq: #04d, - err: #960050, + bg: #e6e9ef, + ledg: rgba(0, 0, 0, 0.1), + sh: #6c6f85, + name: latte['green'], + mag: latte['red'], + lit: latte['mauve'], + lits: latte['yellow'], + aq: latte['sapphire'], + err: latte['red'], } dark-syntax = { brd: rgba(255, 255, 255, 0.2), - bg: rgba(255, 255, 255, 0.03), - ledg: #333, - sh: #75715e, - name: #a6e22e, - mag: #f92672, - lit: #ae81ff, - lits: #e6db74, - aq: #66d9ef, - err: #960050, + bg: #181825, + ledg: #313244, + sh: #6c7086, + name: mocha['green'], + mag: mocha['red'], + lit: mocha['mauve'], + lits: mocha['yellow'], + aq: mocha['sapphire'], + err: mocha['red'], } theme-colors = { - heading-fg: #333, icon-shadow: #fff, - link-visited-fg: #666, - link-fg: #000, + link-visited-fg: #5c5f77, + link-fg: #209fb5, } :root @@ -43,12 +59,13 @@ light-theme = --syntax-{k}: v for k2, v2 in theme-colors {unquote("--" + k2)}: v2 - --bg #fff - --header-bg #eee + --heading-fg #4c4f69 + --bg #eff1f5 + --header-bg rgba(255, 255, 255, 0.1) --header-hover-bg #ddd - --fg #111 - --inline-code-bg #ddd - --input-bg rgba(0, 0, 0, 0.08) + --fg #4c4f69 + --inline-code-bg rgba(0,0,0,0.08) + --input-bg #dce0e8 --input-hover-bg rgba(0, 0, 0, 0.16) --input-focus-bg var(--input-bg) --button-bg var(--input-bg) @@ -60,15 +77,17 @@ dark-theme = --syntax-{k}: v for k2, v2 in theme-colors {unquote("--" + k2)}: invert(v2) - --bg #111 - --header-bg #191919 + --bg #1e1e2e + --header-bg rgba(255, 255, 255, 0.03) --header-hover-bg #333 - --fg #fff - --link-visited-fg #aaa - --inline-code-bg #222 - --input-bg rgba(255, 255, 255, 0.08) - --input-hover-bg rgba(255, 255, 255, 0.16) - --input-focus-bg var(--input-bg) + --fg #cdd6f4 + --heading-fg #cdd6f4 + --link-visited-fg #a6adc8 + --link-fg #74c7ec + --inline-code-bg rgba(255,255,255,0.05) + --input-bg #181825 + --input-hover-bg #313244 + --input-focus-bg #45475a --button-bg var(--input-bg) --button-hover-bg var(--input-hover-bg) --button-focus-bg var(--input-bg) diff --git a/static/global.js b/static/global.js index 0e3a632..168d030 100644 --- a/static/global.js +++ b/static/global.js @@ -1,60 +1,95 @@ -const body = document.body -const queryAll = sel => document.querySelectorAll(sel) +const body = document.body; +const queryAll = (sel) => document.querySelectorAll(sel); const initTheme = () => { - const curTheme = localStorage.getItem('theme') - const oldTheme = curTheme == 'dark' ? 'light' : 'dark' - body.classList.add(`${curTheme}-theme`) - body.classList.remove(`${oldTheme}-theme`) + const curTheme = localStorage.getItem("theme"); + const oldTheme = curTheme == "dark" ? "light" : "dark"; + body.classList.add(`${curTheme}-theme`); + body.classList.remove(`${oldTheme}-theme`); +}; + +if (localStorage.getItem("theme") === null) { + localStorage.setItem( + "theme", + window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light", + ); } -if (localStorage.getItem('theme') === null) { - localStorage.setItem('theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') -} +initTheme(); -initTheme() +const toggleTheme = (ev) => { + localStorage.setItem( + "theme", + localStorage.getItem("theme") == "dark" ? "light" : "dark", + ); + initTheme(); + if (!!ev.target) ev.preventDefault(); + return false; +}; -const toggleTheme = ev => { - localStorage.setItem('theme', localStorage.getItem('theme') == 'dark' ? 'light' : 'dark') - initTheme() - if (!!ev.target) ev.preventDefault() - return false -} - -queryAll('.theme-toggler').forEach(a => a.addEventListener('click', toggleTheme)) -queryAll('.js-only').forEach(a => a.classList.remove('js-only')) -queryAll('.js-disabled-only').forEach(a => a.remove()) +queryAll(".theme-toggler").forEach((a) => + a.addEventListener("click", toggleTheme) +); +queryAll(".js-only").forEach((a) => a.classList.remove("js-only")); +queryAll(".js-disabled-only").forEach((a) => a.remove()); const initAlign = () => { - const cur = localStorage.getItem('align') - const prev = cur == 'center' ? 'left' : 'center' - body.classList.add('align-' + cur) - body.classList.remove('align-' + prev) + const cur = localStorage.getItem("align"); + const prev = cur == "center" ? "left" : "center"; + body.classList.add("align-" + cur); + body.classList.remove("align-" + prev); +}; + +if (localStorage.getItem("align") === null) { + localStorage.setItem("align", "center"); } -if (localStorage.getItem('align') === null) localStorage.setItem('align', 'center') +initAlign(); -initAlign() +const toggleAlign = (ev) => { + localStorage.setItem( + "align", + localStorage.getItem("align") == "center" ? "left" : "center", + ); + initAlign(); + if (!!ev.target) ev.preventDefault(); + return false; +}; -const toggleAlign = ev => { - localStorage.setItem('align', localStorage.getItem('align') == 'center' ? 'left' : 'center') - initAlign() - if (!!ev.target) ev.preventDefault() - return false +queryAll(".align-toggler").forEach((a) => + a.addEventListener("click", toggleAlign) +); + +window.addEventListener("load", (_ev) => { + const selector = [1, 2, 3, 4, 5, 6].map((n) => `h${n}[id]`).join(","); + queryAll(selector).forEach((el) => { + const anchorLink = document.createElement("a"); + anchorLink.classList.add("anchor-link"); + anchorLink.textContent = "§"; + anchorLink.href = `#${el.id}`; + el.appendChild(anchorLink); + }); +}); + +function initCodeCopyButtons() { + const codeBlocks = document.querySelectorAll("pre.chroma"); + codeBlocks.forEach((block) => { + const code = block.querySelectorAll("code")[0]; + const button = document.createElement("button"); + button.classList.add("copy-code-button"); + block.appendChild(button); + button.textContent = "Copy"; + button.addEventListener("click", (_ev) => { + navigator.clipboard.writeText(code.textContent); + const lastText = button.textContent; + button.textContent = "Copied to clipbooard!"; + setTimeout(() => button.textContent = lastText, 3000); + }); + }); } -queryAll('.align-toggler').forEach(a => a.addEventListener('click', toggleAlign)) - -window.addEventListener('load', _ev => { - console.log('loaded') - const selector = [1, 2, 3, 4, 5, 6].map(n => `h${n}[id]`).join(',') - console.log(selector) - queryAll(selector).forEach(el => { - console.log(el) - const anchorLink = document.createElement('a') - anchorLink.classList.add('anchor-link') - anchorLink.textContent = '§' - anchorLink.href = `#${el.id}` - el.appendChild(anchorLink) - }) -}) +window.addEventListener("load", (_ev) => { + initCodeCopyButtons(); +});