You've already forked AstralRinth
forked from didirus/AstralRinth
Fix CheckBoxList SVG icons + Move docs source
This commit is contained in:
venashial
73
src/docs/components/Example.svelte
Normal file
73
src/docs/components/Example.svelte
Normal file
@@ -0,0 +1,73 @@
|
||||
<script lang="ts">
|
||||
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)';
|
||||
</script>
|
||||
|
||||
<div class="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'))}
|
||||
>
|
||||
{#if theme === 'light'}
|
||||
<IconMoon />
|
||||
{:else}
|
||||
<IconSun />
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
<pre class="example__source__code language-svelte"><slot name="code" /></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.example {
|
||||
margin: 15px 0 32px;
|
||||
|
||||
&__preview {
|
||||
border-radius: var(--rounded-sm-top);
|
||||
border: solid 2px hsl(0, 0%, 20%);
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
grid-gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
justify-content: flex-start;
|
||||
z-index: 1;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&__source {
|
||||
position: relative;
|
||||
|
||||
&__options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
:global(button) {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
&__code {
|
||||
margin: 0;
|
||||
border-radius: var(--rounded-sm-bottom) !important;
|
||||
background: hsl(220, 13%, 22%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
112
src/docs/components/Header.svelte
Normal file
112
src/docs/components/Header.svelte
Normal file
@@ -0,0 +1,112 @@
|
||||
<script lang="ts">
|
||||
import OmorphiaLogo from '../assets/omorphia.svg';
|
||||
import IconLogoGithub from 'virtual:icons/carbon/logo-github';
|
||||
import IconChat from 'virtual:icons/heroicons-outline/chat-alt-2';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let headerElement;
|
||||
|
||||
onMount(() => {
|
||||
let lastScrollTop: number;
|
||||
window.addEventListener('scroll', () => {
|
||||
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
if (scrollTop > lastScrollTop && headerElement) {
|
||||
headerElement.style.top = '-100%';
|
||||
} else if (headerElement) {
|
||||
headerElement.style.top = '0';
|
||||
}
|
||||
lastScrollTop = scrollTop;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<header class="header" bind:this={headerElement}>
|
||||
<OmorphiaLogo class="header__logo" />
|
||||
<div class="header__title">Omorphia</div>
|
||||
<div class="header__links">
|
||||
<a class="hide-sm" href="https://modrinth.com">Modrinth.com</a>
|
||||
<span class="spacer-dot hide-sm" />
|
||||
<a href="https://www.npmjs.com/package/omorphia">NPM</a>
|
||||
<span class="spacer-dot" />
|
||||
<a href="https://rewrite.modrinth.com/discord">
|
||||
<IconChat />
|
||||
</a>
|
||||
<a href="https://github.com/modrinth/omorphia">
|
||||
<IconLogoGithub />
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style lang="postcss">
|
||||
.header {
|
||||
display: flex;
|
||||
grid-gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px 24px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
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;
|
||||
}
|
||||
|
||||
:global(&__logo) {
|
||||
max-width: 32px;
|
||||
min-width: 32px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__links {
|
||||
margin-left: auto;
|
||||
grid-gap: 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
|
||||
:global(svg) {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.hide-sm {
|
||||
display: none;
|
||||
|
||||
@media (--sm) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:not(:hover) {
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spacer-dot {
|
||||
background-color: hsla(0, 0%, 0%, 0.2);
|
||||
border-radius: 999px;
|
||||
width: 5px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
</style>
|
||||
162
src/docs/components/Sidebar.svelte
Normal file
162
src/docs/components/Sidebar.svelte
Normal file
@@ -0,0 +1,162 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
|
||||
import IconMenu from 'virtual:icons/lucide/menu';
|
||||
|
||||
const components = Object.keys(import.meta.glob('../../routes/components/**'))
|
||||
.map((it) => it.replace('../../routes/components/', '').replace('.md', ''))
|
||||
.sort();
|
||||
|
||||
const classes = Object.keys(import.meta.glob('../../routes/classes/**'))
|
||||
.map((it) => it.replace('../../routes/classes/', '').replace('.md', ''))
|
||||
.sort();
|
||||
|
||||
let 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>
|
||||
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
&__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;
|
||||
|
||||
.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;
|
||||
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>
|
||||
Reference in New Issue
Block a user