Fix NavRow on mobile

README.md

@@ -6,7 +6,7 @@ Omorphia is Modrinth's component, style, and utility library for Svelte projects
 - 🎨 CSS classes to easily style elements with a coherent style
 - 🧰 Typed utilities to solve common tasks quick and dependably
 - ⚙️ Configuration for SvelteKit and PostCSS to simplify setups
-- 🚚 A Rollup plugin to generate a cache of heavily used API requests and OpenAPI typ
+- 🚚 A Rollup plugin to generate a cache of heavily used API requests and OpenAPI types
 
 Read the documentation at [omorphia.modrinth.com.](https://omorphia.modrinth.com)
 

package.json

@@ -35,6 +35,7 @@
 		"@sveltejs/kit": "1.0.0-next.352",
 		"@types/cli-progress": "^3.11.0",
 		"@types/marked": "^4.0.3",
+		"@types/throttle-debounce": "^5.0.0",
 		"@typescript-eslint/eslint-plugin": "^5.10.1",
 		"@typescript-eslint/parser": "^5.10.1",
 		"eslint": "^7.32.0",

pnpm-lock.yaml

@@ -12,6 +12,7 @@ specifiers:
   '@sveltejs/kit': 1.0.0-next.352
   '@types/cli-progress': ^3.11.0
   '@types/marked': ^4.0.3
+  '@types/throttle-debounce': ^5.0.0
   '@typescript-eslint/eslint-plugin': ^5.10.1
   '@typescript-eslint/parser': ^5.10.1
   cli-progress: ^3.11.1
@@ -92,6 +93,7 @@ devDependencies:
   '@sveltejs/kit': 1.0.0-next.352_svelte@3.48.0
   '@types/cli-progress': 3.11.0
   '@types/marked': 4.0.3
+  '@types/throttle-debounce': 5.0.0
   '@typescript-eslint/eslint-plugin': 5.14.0_4p27j37cxves4nxlnqogdhp4ta
   '@typescript-eslint/parser': 5.14.0_e6rt7vlgxfprtuallp2t3cvyi4
   eslint: 7.32.0
@@ -1199,6 +1201,10 @@ packages:
     resolution: {integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==}
     dev: false
 
+  /@types/throttle-debounce/5.0.0:
+    resolution: {integrity: sha512-Pb7k35iCGFcGPECoNE4DYp3Oyf2xcTd3FbFQxXUI9hEYKUl6YX+KLf7HrBmgVcD05nl50LIH6i+80js4iYmWbw==}
+    dev: true
+
   /@types/unist/2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: true

src/components/Field.svelte

@@ -34,7 +34,7 @@
 				font-weight: var(--font-weight-bold);
 
 				:global(i) {
-					font-weight: var(--font-weight-normal);
+					font-weight: var(--font-weight-regular);
 				}
 			}
 

src/components/NavRow.svelte

@@ -2,6 +2,7 @@
 	import { browser, prerendering } from '$app/env'
 	import { page } from '$app/stores'
 	import { onMount } from 'svelte'
+	import { debounce } from 'throttle-debounce'
 
 	interface Link {
 		href: string
@@ -42,11 +43,10 @@
 
 	const linkElements: HTMLAnchorElement[] = []
 
-	let indicatorReady = false
-
 	const indicator = {
 		left: 0,
 		right: 0,
+		top: 0,
 		direction: 'right',
 	}
 
@@ -60,18 +60,23 @@
 			linkElements[activeIndex].parentElement.offsetWidth -
 			linkElements[activeIndex].offsetLeft -
 			linkElements[activeIndex].offsetWidth
+		indicator.top = linkElements[activeIndex].offsetTop + linkElements[activeIndex].offsetHeight - 2
 
 		oldIndex = activeIndex
 	}
 
+	let useAnimation = false
+
 	onMount(() => {
 		setTimeout(() => {
-			indicatorReady = true
+			useAnimation = true
 		}, 300)
+
+		window.addEventListener('resize', debounce(100, startAnimation))
 	})
 </script>
 
-<nav class="navigation" class:static-indicator={!indicatorReady}>
+<nav class="navigation" class:use-animation={useAnimation}>
 	{#each links as link, index}
 		<a
 			href={query
@@ -93,12 +98,15 @@
 	{/each}
 	<div
 		class="navigation__indicator"
-		style:visibility={indicatorReady && activeIndex !== -1 ? 'visible' : 'hidden'}
+		style:visibility={useAnimation && activeIndex !== -1 ? 'visible' : 'hidden'}
 		style:left={indicator.left + 'px'}
 		style:right={indicator.right + 'px'}
+		style:top={indicator.top + 'px'}
 		style:transition={`left 350ms ${
 			indicator.direction === 'left' ? FAST_TIMING : SLOW_TIMING
-		},right 350ms ${indicator.direction === 'right' ? FAST_TIMING : SLOW_TIMING}`} />
+		},right 350ms ${
+			indicator.direction === 'right' ? FAST_TIMING : SLOW_TIMING
+		}, top 100ms ease-in-out`} />
 </nav>
 
 <style lang="postcss">
@@ -115,10 +123,6 @@
 			color: var(--color-text-light);
 			position: relative;
 
-			&.is-active {
-				color: var(--color-text);
-			}
-
 			&::after {
 				content: '';
 				display: block;
@@ -134,32 +138,39 @@
 
 			&:hover {
 				color: var(--color-text);
-			}
 
-			&:hover::after {
-				opacity: 0.4;
+				&::after {
+					opacity: 0.4;
+				}
 			}
 
 			&:active::after {
-				opacity: 0.1;
+				opacity: 0.2;
+			}
+
+			&.is-active {
+				color: var(--color-text);
+
+				&::after {
+					opacity: 1;
+				}
 			}
 		}
 
-		&.static-indicator {
+		&.use-animation {
 			.navigation__link {
 				&.is-active::after {
-					opacity: 1;
+					opacity: 0;
 				}
 			}
 		}
 
 		&__indicator {
 			position: absolute;
-			bottom: -2px;
 			height: 0.25rem;
 			border-radius: var(--rounded-max);
 			background-color: var(--color-brand);
-			transition-property: left, right;
+			transition-property: left, right, top;
 			transition-duration: 350ms;
 			visibility: hidden;
 		}

src/styles/variables/typography.postcss

@@ -9,18 +9,13 @@
 	--lh-default: 1.5;
 
 	/* Font weights */
-	--font-weight-light: 300;
-	--font-weight-normal: 400;
-	--font-weight-semibold: 500;
-	--font-weight-bold: 600;
+	--font-weight-regular: 400;
+	--font-weight-medium: 600;
+	--font-weight-bold: 700;
 
 	/* Font stacks */
 	--body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica Neue, Helvetica,
 		Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, 'Apple Color Emoji', 'Segoe UI Emoji',
 		Arial, sans-serif;
 	--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-
-	--font-weight-regular: 400;
-	--font-weight-medium: 600;
-	--font-weight-bold: 700;
 }