diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/scrollbar.js | 21 | ||||
| -rw-r--r-- | public/styles/style.css | 14 |
2 files changed, 21 insertions, 14 deletions
diff --git a/public/scrollbar.js b/public/scrollbar.js index 2218b55..b297d76 100644 --- a/public/scrollbar.js +++ b/public/scrollbar.js @@ -1,4 +1,8 @@ function initScrollbox(box) { + // Guard against double-initialization + if (box.dataset.initialized) return; + box.dataset.initialized = "true"; + const area = box.querySelector("[data-scroll-area]"); const track = box.querySelector("[data-scroll-track]"); const thumb = box.querySelector("[data-scroll-thumb]"); @@ -51,23 +55,26 @@ function initScrollbox(box) { document.querySelectorAll("[data-scrollbox]").forEach(initScrollbox); -// Vim style j/k scrolling +document.addEventListener("htmx:afterSettle", () => { + document.querySelectorAll("[data-scrollbox]").forEach(initScrollbox); +}); + document.addEventListener("keydown", (e) => { - // Don't scroll in input elements - const tag = document.activeElement.tagName; + const tag = document.activeElement?.tagName; if ( ["INPUT", "TEXTAREA", "SELECT"].includes(tag) || - document.activeElement.isContentEditable + document.activeElement?.isContentEditable ) { return; } - // Only work for "j" and "k", no ctrl/alt/shift if (e.ctrlKey || e.altKey || e.metaKey) return; + if (e.key !== "j" && e.key !== "k") return; - const dir = key === "j" ? step : -step; - const scrollTarget = document.scrollingElement || document.documentElement; const scrollAmount = 100; // in pixels + const dir = e.key === "j" ? scrollAmount : -scrollAmount; + const scrollTarget = document.scrollingElement || document.documentElement; + if (scrollTarget && scrollTarget.scrollHeight > scrollTarget.clientHeight) { scrollTarget.scrollBy({ top: dir, behavior: "auto" }); } else { diff --git a/public/styles/style.css b/public/styles/style.css index 5c4e34e..76bf2a1 100644 --- a/public/styles/style.css +++ b/public/styles/style.css @@ -1500,10 +1500,10 @@ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } - .scale-150 { - --tw-scale-x: 150%; - --tw-scale-y: 150%; - --tw-scale-z: 150%; + .scale-135 { + --tw-scale-x: 135%; + --tw-scale-y: 135%; + --tw-scale-z: 135%; scale: var(--tw-scale-x) var(--tw-scale-y); } .transform { @@ -1915,15 +1915,15 @@ .text-\[85\%\] { font-size: 85%; } - .text-\[90\%\] { - font-size: 90%; - } .text-\[95\%\] { font-size: 95%; } .text-\[110\%\] { font-size: 110%; } + .text-\[120\%\] { + font-size: 120%; + } .text-\[130\%\] { font-size: 130%; } |