eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

docs: Improve example component + Fix sidebar on mobile

Browse Source
This commit is contained in:
venashial
2022-04-16 00:29:35 -07:00
parent 6aaced0c04
commit a48e6f82d1
34 changed files with 323 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/package/components/NavRow.svelte
View File

@@ -1,81 +1,80 @@
<script lang="ts">
import { page } from '$app/stores';
import { page } from '$app/stores';
interface Link {
href: string;
label: string;
}
interface Link {
href: string;
label: string;
}
export let links: Link[];
export let query = '';
export let links: Link[];
export let query = '';
export let resetScroll = false
export let resetScroll = false;
/** Path level in URL, zero-indexed */
export let level = 0;
/** Path level in URL, zero-indexed */
export let level = 0;
let path: string[];
$: path = [
...$page.url.pathname
.substring(1)
.split('/')
.map((route) => '/' + route),
'/',
];
let path: string[];
$: path = [
...$page.url.pathname
.substring(1)
.split('/')
.map((route) => '/' + route),
'/',
];
$: basePath = path.slice(0, level).join('');
$: basePath = path.slice(0, level).join('');
</script>
<nav class="navigation">
{#each links as link}
<a
href={query
? link.href
? `?${query}=${link.href}`
: '?'
: level === 0
? link.href
: basePath + link.href}
on:click={() => { if (resetScroll) document.body.scrollTo(0,0)}}
class="navigation__link"
class:is-active={query
? ($page.url.searchParams.get(query) || '') === link.href
: path[level] === link.href || path[level] === link.href.slice(0, -1)}
sveltekit:noscroll={!resetScroll}
>{link.label}</a
>
{/each}
{#each links as link}
<a
href={query
? link.href
? `?${query}=${link.href}`
: '?'
: level === 0
? link.href
: basePath + link.href}
on:click={() => {
if (resetScroll) document.body.scrollTo(0, 0);
}}
class="navigation__link"
class:is-active={query
? ($page.url.searchParams.get(query) || '') === link.href
: path[level] === link.href || path[level] === link.href.slice(0, -1)}
sveltekit:noscroll={!resetScroll}>{link.label}</a
>
{/each}
</nav>
<style lang="postcss">
.navigation {
display: flex;
flex-direction: row;
align-items: center;
grid-gap: 1rem;
flex-wrap: wrap;
.navigation {
display: flex;
flex-direction: row;
align-items: center;
grid-gap: 1rem;
flex-wrap: wrap;
&__link {
font-weight: var(--font-weight-bold);
color: var(--color-text-light);
&__link {
font-weight: var(--font-weight-bold);
color: var(--color-text-light);
&.is-active {
color: var(--color-text);
position: relative;
&.is-active {
color: var(--color-text);
position: relative;
&::after {
content: '';
display: block;
position: absolute;
bottom: -0.1rem;
width: 100%;
border-radius: var(--rounded-max);
height: 0.2rem;
background-color: var(--color-brand);
}
}
&::after {
content: '';
display: block;
position: absolute;
bottom: -0.1rem;
width: 100%;
border-radius: var(--rounded-max);
height: 0.2rem;
background-color: var(--color-brand);
}
}
}
}
</style>

2
src/package/config/svelte.config.js
View File

@@ -10,6 +10,6 @@ export const plugins = [svelteSvg(),
Icons({
compiler: 'svelte',
defaultClass: 'icon',
scale: 1.1428, // 1.1428rem = 16px when root size is 14px
scale: 1,
}),
]

2
src/package/styles/classes/base.postcss
View File

@@ -2,7 +2,7 @@
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-standard);
font-size: var(--font-size-nm);
font-size: var(--font-size);
font-weight: var(--font-weight-regular);
scrollbar-color: var(--color-scrollbar) var(--color-bg);

6
src/package/styles/normalize.postcss
View File

@@ -53,3 +53,9 @@ p {
ul {
padding: 0 0 0 1.5rem;
}
.icon {
height: auto;
width: 16px;
aspect-ratio: 1 / 1;
}

6
src/package/styles/variables/typography.postcss
View File

@@ -17,9 +17,9 @@
--h5-size: 14px;
--h6-size: 12px;
--font-size-lg: 17px;
--font-size-sm: 12px;
--font-size: 14px;
--font-size-lg: 19px;
--font-size-sm: 13px;
--font-size: 16px;
/* Line heights */
--lh-condensed-ultra: 1;