diff --git a/README.md b/README.md index 5f9af7809..60b2c4823 100644 --- a/README.md +++ b/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) diff --git a/package.json b/package.json index f4b1f0120..7dacac59f 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1ffd1d1d8..5562a2c65 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/components/Field.svelte b/src/components/Field.svelte index 2a3de3efc..feeb191de 100644 --- a/src/components/Field.svelte +++ b/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); } } diff --git a/src/components/NavRow.svelte b/src/components/NavRow.svelte index 50dd7e1a1..8c27cea08 100644 --- a/src/components/NavRow.svelte +++ b/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)) }) -