style: scrollbars only on hover

NewcastleRSE · May 10, 2024 · a849b97 · a849b97
1 parent c7184ab
commit a849b97
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 2 deletions.
diff --git a/src/app.html b/src/app.html
@@ -12,6 +12,7 @@
 	<style>
 		* {
 			box-sizing: border-box;
+			scrollbar-width: none;
 		}
 	</style>
 </html>
diff --git a/src/lib/ui/nav/nav_topics.svelte b/src/lib/ui/nav/nav_topics.svelte
@@ -105,6 +105,9 @@
 		border-bottom: 1px solid var(--theme-colour-4);
 		background-color: var(--theme-colour-1);
 	}
+	.topics-nav-centre-col:hover {
+		scrollbar-width: thin;
+	}
 	.topics-nav-button {
 		background-color: var(--theme-colour-1);
 		border-right: 1px solid var(--theme-colour-4);

diff --git a/src/lib/utils/observer.ts b/src/lib/utils/observer.ts
@@ -1,4 +1,4 @@
-export const loadObserver = (elems: string, tracker: HTMLElement, root_el: 'theme-wrapper') => {
+export const loadObserver = (elems: string, tracker: HTMLElement, root_el: string) => {
 	const observer = new IntersectionObserver(
 		(es) => {
 			es.forEach((e, i) => {
@@ -8,7 +8,7 @@ export const loadObserver = (elems: string, tracker: HTMLElement, root_el: 'them
 			})
 		},
 		{
-			root: document.getElementById(root_el),
+			root: document.getElementById(root_el ?? 'theme-wrapper'),
 			threshold: 0.9
 		}
 	)

diff --git a/src/routes/[slug]/+layout.svelte b/src/routes/[slug]/+layout.svelte
@@ -134,6 +134,9 @@
 {/if}
 
 <style>
+	.slug-layout-left-col:hover {
+		scrollbar-width: thin;
+	}
 	.slug-layout-left-col[data-open='true'] {
 		border-right: 3px solid var(--theme-colour-6);
 		background-color: color-mix(in oklab, var(--theme-colour-4) 20%, white 90%);