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();
+});