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

Update utilities and documentation

Browse Source
This commit is contained in:
venashial
2022-05-20 19:53:13 -07:00
parent d8b59925b0
commit 8bf90714da
26 changed files with 6974 additions and 5236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/routes/_internal/components/Example.svelte
View File

@@ -1,35 +1,38 @@
<script lang="ts">
import { Button } from 'omorphia'
import IconMoon from 'virtual:icons/heroicons-outline/moon'
import IconSun from 'virtual:icons/heroicons-outline/sun'
import { Button } from 'omorphia';
import IconMoon from 'virtual:icons/heroicons-outline/moon';
import IconSun from 'virtual:icons/heroicons-outline/sun';
export let meta: { raised: boolean };
let theme = 'light'
let background = meta.raised ? 'var(--color-raised-bg)' : 'var(--color-bg)'
let theme = 'light';
let background = meta.raised ? 'var(--color-raised-bg)' : 'var(--color-bg)';
</script>
<div class="example">
<div class="example__preview theme-{theme} base" style:background={background}>
<slot name="example"/>
<div class="example__preview theme-{theme} base" style:background>
<slot name="example" />
</div>
<div class="example__source">
<div class="example__source__options">
<Button color="primary-light" on:click={() => theme === 'light' ? theme = 'dark' : theme = 'light'}>
<Button
color="primary-light"
on:click={() => (theme === 'light' ? (theme = 'dark') : (theme = 'light'))}
>
{#if theme === 'light'}
<IconMoon/>
<IconMoon />
{:else}
<IconSun/>
<IconSun />
{/if}
</Button>
</div>
<pre class="example__source__code language-svelte"><slot name="code"/></pre>
<pre class="example__source__code language-svelte"><slot name="code" /></pre>
</div>
</div>
<style lang="postcss">
.example {
margin-bottom: 32px;
margin: 15px 0 32px;
&__preview {
border-radius: var(--rounded-sm-top);

271
src/routes/_internal/components/Sidebar.svelte
View File

@@ -1,157 +1,162 @@
<script lang="ts">
import { page } from '$app/stores';
import { page } from '$app/stores';
import IconMenu from 'virtual:icons/lucide/menu';
import IconMenu from 'virtual:icons/lucide/menu';
const components = Object.keys(import.meta.glob('../../components/**'))
.map((it) => it.replace('../../components/', '').replace('.md', ''))
.sort();
const components = Object.keys(import.meta.glob('../../components/**'))
.map((it) => it.replace('../../components/', '').replace('.md', ''))
.sort();
const classes = Object.keys(import.meta.glob('../../classes/**'))
.map((it) => it.replace('../../classes/', '').replace('.md', ''))
.sort();
const classes = Object.keys(import.meta.glob('../../classes/**'))
.map((it) => it.replace('../../classes/', '').replace('.md', ''))
.sort();
let slideIn = false;
let slideIn = false;
$: if ($page.url.pathname) {
slideIn = false;
}
$: if ($page.url.pathname) {
slideIn = false;
}
</script>
<nav class="sidebar" class:slideIn>
<div class="sidebar__content">
<div class="section">
<span class="section__title">Getting started</span>
<a href="/" class="section__link">Introduction</a>
<a href="/getting-started/configure" class="section__link">Configure</a>
<a href="/getting-started/icons" class="section__link">Using Icons</a>
<a href="/getting-started/css" class="section__link">Writing CSS</a>
<a href="/getting-started/illustrations" class="section__link">Illustrations</a>
<a href="/getting-started/utils" class="section__link">Built-in utilities</a>
<a href="/getting-started/generator" class="section__link">Generator plugin</a>
<div class="sidebar__content">
<div class="section">
<span class="section__title">Getting started</span>
<a href="/" class="section__link">Introduction</a>
<a href="/getting-started/configure" class="section__link">Configure</a>
<a href="/getting-started/icons" class="section__link">Using Icons</a>
<!-- <a href="/getting-started/css" class="section__link">Writing CSS</a> -->
<a href="/getting-started/illustrations" class="section__link">Illustrations</a>
<a href="/getting-started/utils" class="section__link">Built-in utilities</a>
<a href="/getting-started/generator" class="section__link">Generator plugin</a>
</div>
<div class="section">
<span class="section__title">Components</span>
{#each components as component}
<a href="/components/{component}" class="section__link">{component}</a>
{/each}
</div>
<div class="section">
<span class="section__title">Classes</span>
{#each classes as page}
<a href="/classes/{page}" class="section__link">{page}</a>
{/each}
</div>
</div>
<div class="section">
<span class="section__title">Components</span>
{#each components as component}
<a href="/components/{component}" class="section__link">{component}</a>
{/each}
</div>
<div class="section">
<span class="section__title">Classes</span>
{#each classes as page}
<a href="/classes/{page}" class="section__link">{page}</a>
{/each}
</div>
</div>
<button class="sidebar__toggle" on:click={() => (slideIn = !slideIn)}>
<IconMenu />
</button>
<button class="sidebar__toggle" on:click={() => (slideIn = !slideIn)}>
<IconMenu />
</button>
</nav>
<style lang="postcss">
:root {
--sidebar-color: hsl(220, 15%, 40%);
--title-color: hsl(216, 10%, 80%);
--link-color: hsl(216, 10%, 90%);
--scrollbar-thumb-color: hsl(216, 10%, 70%);
}
.sidebar {
background-color: var(--sidebar-color);
color: var(--title-color);
width: var(--sidebar-width);
max-width: 70vw;
position: fixed;
left: -100%;
top: 0;
z-index: 5;
transition: left 0.2s ease-in-out;
box-shadow: 2px 0px 4px hsla(221, 39%, 11%, 0.2);
@media (--md) {
left: 0;
:root {
--sidebar-color: hsl(220, 15%, 40%);
--title-color: hsl(216, 10%, 80%);
--link-color: hsl(216, 10%, 90%);
--scrollbar-thumb-color: hsl(216, 10%, 70%);
}
&__content {
mask-image: linear-gradient(to bottom, transparent, hsla(0, 0%, 0%, 1) 5% 95%, transparent);
padding: 88px 32px 32px;
height: 100vh;
max-height: 100vh;
overflow-y: auto;
grid-gap: 40px;
display: flex;
flex-direction: column;
.sidebar {
background-color: var(--sidebar-color);
color: var(--title-color);
width: var(--sidebar-width);
max-width: 70vw;
position: fixed;
left: -100%;
top: 0;
z-index: 5;
transition: left 0.2s ease-in-out;
box-shadow: 2px 0px 4px hsla(221, 39%, 11%, 0.2);
.section {
display: flex;
flex-direction: column;
grid-gap: 0.5rem;
&__title {
text-transform: uppercase;
font-size: 12px;
@media (--md) {
left: 0;
}
&__link {
color: var(--link-color);
text-decoration: none;
&__content {
mask-image: linear-gradient(
to bottom,
transparent,
hsla(0, 0%, 0%, 1) 5% 95%,
transparent
);
padding: 88px 32px 32px;
height: 100vh;
max-height: 100vh;
overflow-y: auto;
grid-gap: 40px;
display: flex;
flex-direction: column;
&:hover {
.section {
display: flex;
flex-direction: column;
grid-gap: 0.5rem;
&__title {
text-transform: uppercase;
font-size: 12px;
}
&__link {
color: var(--link-color);
text-decoration: none;
&:hover {
color: white;
text-decoration: underline;
}
}
}
}
&__toggle {
position: fixed;
left: 16px;
bottom: 16px;
padding: 8px;
aspect-ratio: 1 / 1;
background-color: var(--accent-color);
z-index: 20;
border-radius: var(--rounded);
color: white;
text-decoration: underline;
}
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
transition: left 0.2s cubic-bezier(0.38, 0.52, 0.37, 1.27);
:global(.icon) {
width: 32px;
height: auto;
}
@media (--md) {
visibility: hidden;
}
}
&.slideIn {
left: 0;
.sidebar__toggle {
left: calc(32px + min(70vw, var(--sidebar-width)));
}
}
scrollbar-color: var(--scrollbar-thumb-color) var(--sidebar-color);
&::-webkit-scrollbar {
width: 14px;
}
&::-webkit-scrollbar-track {
background-color: var(--sidebar-color);
}
&::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color);
border-radius: 999px;
border: 3px solid var(--sidebar-color);
}
}
}
&__toggle {
position: fixed;
left: 16px;
bottom: 16px;
padding: 8px;
aspect-ratio: 1 / 1;
background-color: var(--accent-color);
z-index: 20;
border-radius: var(--rounded);
color: white;
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
transition: left 0.2s cubic-bezier(0.38, 0.52, 0.37, 1.27);
:global(.icon) {
width: 32px;
height: auto;
}
@media (--md) {
visibility: hidden;
}
}
&.slideIn {
left: 0;
.sidebar__toggle {
left: calc(32px + min(70vw, var(--sidebar-width)));
}
}
scrollbar-color: var(--scrollbar-thumb-color) var(--sidebar-color);
&::-webkit-scrollbar {
width: 14px;
}
&::-webkit-scrollbar-track {
background-color: var(--sidebar-color);
}
&::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color);
border-radius: 999px;
border: 3px solid var(--sidebar-color);
}
}
</style>