You've already forked AstralRinth
forked from didirus/AstralRinth
Start omorphia 2 (#8)
This commit is contained in:
Prospector
@@ -1,76 +0,0 @@
|
||||
<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; column: 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" class:column={meta.column} 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: 1rem 0 2rem;
|
||||
|
||||
&__preview {
|
||||
border-radius: var(--rounded-sm-top);
|
||||
border: solid 2px hsl(0, 0%, 20%);
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
grid-gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
justify-content: flex-start;
|
||||
z-index: 1;
|
||||
padding: 1rem;
|
||||
|
||||
&.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__source {
|
||||
position: relative;
|
||||
|
||||
&__options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 1rem;
|
||||
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>
|
||||
@@ -1,111 +0,0 @@
|
||||
<script lang="ts">
|
||||
import OmorphiaLogo from '../assets/omorphia.svg?component'
|
||||
import IconLogoGithub from 'virtual:icons/carbon/logo-github'
|
||||
import IconChat from 'virtual:icons/heroicons-outline/chat-alt-2'
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
let headerElement: HTMLElement
|
||||
|
||||
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: 0.5rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem 1.5rem;
|
||||
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: 12px 2rem;
|
||||
}
|
||||
|
||||
:global(&__logo) {
|
||||
max-width: 2rem;
|
||||
min-width: 2rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__links {
|
||||
margin-left: auto;
|
||||
grid-gap: 1rem;
|
||||
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: var(--rounded-max);
|
||||
width: 5px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
</style>
|
||||
@@ -1,161 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores'
|
||||
import IconMenu from 'virtual:icons/lucide/menu'
|
||||
|
||||
const cleanPath = (it: string) => it.replace(/\.\.\/routes\/.*\//, '').replace('.md', '')
|
||||
|
||||
const components = Object.keys(import.meta.glob('../routes/components/**'))
|
||||
.map(cleanPath)
|
||||
.sort()
|
||||
|
||||
const classes = Object.keys(import.meta.glob('../routes/classes/**'))
|
||||
.map(cleanPath)
|
||||
.sort()
|
||||
|
||||
let slideIn = false
|
||||
|
||||
$: if ($page.url.pathname) {
|
||||
slideIn = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav class="sidebar" class:slideIn>
|
||||
<div class="sidebar__content">
|
||||
<div class="section">
|
||||
<a href="/" class="section__link">Introduction</a>
|
||||
<a href="/setup" class="section__link">Setup</a>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<span class="section__title">Usage</span>
|
||||
<a href="/usage/icons" class="section__link">Using Icons</a>
|
||||
<a href="/usage/css" class="section__link">Writing CSS</a>
|
||||
<a href="/usage/illustrations" class="section__link">Illustrations</a>
|
||||
<a href="/usage/utils" class="section__link">Built-in utilities</a>
|
||||
<a href="/usage/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 2rem 2rem;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
grid-gap: 2.5rem;
|
||||
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: 1rem;
|
||||
bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
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: 2rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (--md) {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&.slideIn {
|
||||
left: 0;
|
||||
|
||||
.sidebar__toggle {
|
||||
left: calc(2rem + min(70vw, var(--sidebar-width)));
|
||||
}
|
||||
}
|
||||
|
||||
scrollbar-color: var(--scrollbar-thumb-color) var(--sidebar-color);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--sidebar-color);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb-color);
|
||||
border-radius: var(--rounded-max);
|
||||
border: 3px solid var(--sidebar-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user