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

Add classes: Actions + Divider + Illustration + InfoTable + Stat, Add utilities (needs docs)

Browse Source
This commit is contained in:
venashial
2022-04-02 16:17:58 -07:00
parent 6b54c342aa
commit 85b7147927
82 changed files with 1189 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<script lang="ts">
import Button from '$lib/components/Button.svelte'
import { Button } from 'omorphia/'
import IconMoon from 'virtual:icons/heroicons-outline/moon'
import IconSun from 'virtual:icons/heroicons-outline/sun'
@@ -9,7 +9,10 @@
<div class="example">
<div class="example__preview theme-{theme} base" style:background={background}>
<div class="example__preview__options">
<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'}>
{#if theme === 'light'}
<IconMoon/>
@@ -18,9 +21,8 @@
{/if}
</Button>
</div>
<slot name="example"/>
<pre class="example__source__code language-svelte"><slot name="code"/></pre>
</div>
<pre class="example__code language-svelte"><slot name="code"/></pre>
</div>
<style lang="postcss">
@@ -37,6 +39,10 @@
position: relative;
justify-content: flex-start;
z-index: 1;
}
&__source {
position: relative;
&__options {
position: absolute;
@@ -45,14 +51,17 @@
padding: 8px;
display: flex;
justify-content: flex-end;
z-index: 100;
}
}
&__code {
margin: 0;
border-radius: var(--rounded-sm-bottom) !important;
background: hsl(220, 13%, 22%);
:global(button) {
color: black;
}
}
&__code {
margin: 0;
border-radius: var(--rounded-sm-bottom) !important;
background: hsl(220, 13%, 22%);
}
}
}
</style>

7
src/routes/_internal/components/Header.svelte
View File

@@ -11,7 +11,7 @@
window.addEventListener('scroll', () => {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop
if (scrollTop > lastScrollTop && headerElement) {
headerElement.style.top = 'calc(var(--header-height) * -1)'
headerElement.style.top = '-100%'
} else if (headerElement) {
headerElement.style.top = '0'
}
@@ -46,7 +46,6 @@
flex-wrap: wrap;
padding: 16px 24px;
position: fixed;
height: var(--header-height);
left: 0;
right: 0;
top: 0;
@@ -55,6 +54,10 @@
box-shadow: hsla(221, 39%, 11%, 0.2) 0 2px 4px 0, hsla(221, 39%, 11%, 0.05) 0 -2px 2px 0 inset;
transition: top 0.3s ease-in-out;
@media not (--sm) {
top: 0 !important;
}
@media (--sm) {
padding: 10px 32px;
}

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

@@ -3,11 +3,11 @@
const components = Object.keys(import.meta.glob('../../components/**'))
.map(it => it.replace('../../components/', '').replace('.md', ''))
.sort();
.sort()
const classes = Object.keys(import.meta.glob('../../classes/**'))
.map(it => it.replace('../../classes/', '').replace('.md', ''))
.sort();
.sort()
let slideIn = false
</script>
@@ -19,6 +19,8 @@
<a href="/getting-started/icons" class="section__link">Using Icons</a>
<a href="/getting-started/postcss" class="section__link">PostCSS config</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>
</div>
<div class="section">
@@ -35,12 +37,17 @@
{/each}
</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 {
@@ -48,7 +55,7 @@
flex-direction: column;
grid-gap: 2rem;
background-color: var(--sidebar-color);
color: hsl(216, 10%, 80%);
color: var(--title-color);
height: 100vh;
max-height: 100vh;
overflow-y: auto;
@@ -58,10 +65,24 @@
left: -100%;
top: 0;
z-index: 5;
padding: 88px 32px 32px;
padding: 88px 32px;
transition: left 0.2s ease-in-out;
box-shadow: 2px 0px 4px hsla(221, 39%, 11%, 0.2);
&:after {
content: "";
position: fixed;
z-index: 1;
bottom: 0;
left: 0;
pointer-events: none;
background-image: linear-gradient(to bottom,
transparent,
var(--sidebar-color) 90%);
width: var(--sidebar-width);
height: 88px;
}
@media (--md) {
left: 0;
}
@@ -78,7 +99,7 @@
}
&__link {
color: hsl(216, 10%, 90%);
color: var(--link-color);
text-decoration: none;
&:hover {
@@ -99,7 +120,7 @@
border-radius: var(--rounded);
color: white;
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
transition: left 0.2s cubic-bezier(.38,.52,.37,1.27);
transition: left 0.2s cubic-bezier(.38, .52, .37, 1.27);
:global(.icon) {
width: 32px;
@@ -118,5 +139,21 @@
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>

2
src/routes/_internal/layout/page.svelte
View File

@@ -14,7 +14,7 @@
let api
if ($page.url.pathname.includes('components')) {
if (import.meta.env.DEV) {
import(`../../../lib/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
import(`../../../package/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
} else {
api = COMPONENT_API[`${title}.svelte`]
}

3
src/routes/_internal/styles/prism-one-dark.css
View File

@@ -119,7 +119,8 @@ pre[class*="language-"] {
.token.symbol,
.token.deleted,
.token.important {
color: hsl(355, 65%, 65%);
color: hsl(355, 65%, 65%) !important;
display: unset;
}
.token.selector,