diff --git a/src/stylus/core.styl b/src/stylus/core.styl index 31e8c8f..b89612f 100644 --- a/src/stylus/core.styl +++ b/src/stylus/core.styl @@ -34,6 +34,30 @@ body > h1, > h2, > h3, > h4, > h5, > h6 { color: var(--heading-fg) } *:first-child { margin-top: 0 } + > h1, > h2, > h3, > h4, > h5, > h6 + .anchor-link + padding-left 0.5em + font-weight normal + font-size 75% + text-decoration none + display none + position absolute + + &:hover + .anchor-link + display inline-flex + + @media (max-width: 600px) + > h1, > h2, > h3, > h4, > h5, > h6 + .anchor-link + padding-right 0.25em + font-weight normal + font-size 75% + text-decoration none + display inline-flex + position absolute + right 0 + > p code padding 0.1em 0.25em border-radius 0.25em diff --git a/static/global.js b/static/global.js index d95daab..0e3a632 100644 --- a/static/global.js +++ b/static/global.js @@ -1,35 +1,60 @@ +const body = document.body +const queryAll = sel => document.querySelectorAll(sel) + const initTheme = () => { - const curTheme = localStorage.getItem("theme") - const oldTheme = curTheme == "dark" ? "light" : "dark" - document.body.classList.add(`${curTheme}-theme`) - document.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() + const toggleTheme = ev => { - localStorage.setItem("theme", localStorage.getItem("theme") == "dark" ? "light" : "dark") + localStorage.setItem('theme', localStorage.getItem('theme') == 'dark' ? 'light' : 'dark') initTheme() if (!!ev.target) ev.preventDefault() return false } -document.querySelectorAll(".theme-toggler").forEach(a => a.addEventListener("click", toggleTheme)) -document.querySelectorAll(".js-only").forEach(a => a.classList.remove("js-only")) -document.querySelectorAll(".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" - document.body.classList.add("align-" + cur) - document.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() + const toggleAlign = ev => { - localStorage.setItem("align", localStorage.getItem("align") == "center" ? "left" : "center") + localStorage.setItem('align', localStorage.getItem('align') == 'center' ? 'left' : 'center') initAlign() if (!!ev.target) ev.preventDefault() return false } -document.querySelectorAll(".align-toggler").forEach(a => a.addEventListener("click", toggleAlign)) + +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) + }) +})