You've already forked AstralRinth
forked from didirus/AstralRinth
docs: add mobile support + seo
This commit is contained in:
venashial
@@ -36,6 +36,7 @@
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
justify-content: flex-start;
|
||||
z-index: 1;
|
||||
|
||||
&__options {
|
||||
position: absolute;
|
||||
|
||||
@@ -21,15 +21,19 @@
|
||||
</script>
|
||||
|
||||
<header class="header" bind:this={headerElement}>
|
||||
<OmorphiaLogo height="32px" width="32px"/>
|
||||
<OmorphiaLogo class="header__logo"/>
|
||||
<div class="header__title">Omorphia</div>
|
||||
<div class="header__links">
|
||||
<a href="https://modrinth.com">Modrinth.com</a>
|
||||
<span class="spacer-dot"></span>
|
||||
<a class="hide-sm" href="https://modrinth.com">Modrinth.com</a>
|
||||
<span class="spacer-dot hide-sm"></span>
|
||||
<a href="https://www.npmjs.com/package/omorphia">NPM</a>
|
||||
<span class="spacer-dot"></span>
|
||||
<a href="https://rewrite.modrinth.com/discord"><IconChat /></a>
|
||||
<a href="https://github.com/modrinth/omorphia"><IconLogoGithub /></a>
|
||||
<a href="https://rewrite.modrinth.com/discord">
|
||||
<IconChat/>
|
||||
</a>
|
||||
<a href="https://github.com/modrinth/omorphia">
|
||||
<IconLogoGithub/>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -39,7 +43,8 @@
|
||||
display: flex;
|
||||
grid-gap: 10px;
|
||||
align-items: center;
|
||||
padding: 0 32px;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px 24px;
|
||||
position: fixed;
|
||||
height: var(--header-height);
|
||||
left: 0;
|
||||
@@ -50,6 +55,16 @@
|
||||
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 (--sm) {
|
||||
padding: 10px 32px;
|
||||
}
|
||||
|
||||
:global(&__logo) {
|
||||
max-width: 32px;
|
||||
min-width: 32px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
@@ -57,17 +72,30 @@
|
||||
|
||||
&__links {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
grid-gap: 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
|
||||
:global(svg) {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
a:not(:hover) {
|
||||
color: unset;
|
||||
.hide-sm {
|
||||
display: none;
|
||||
|
||||
@media (--sm) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:not(:hover) {
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import IconMenu from 'virtual:icons/lucide/menu'
|
||||
|
||||
const components = Object.keys(import.meta.glob('../../components/**'))
|
||||
.map(it => it.replace('../../components/', '').replace('.md', ''))
|
||||
.sort();
|
||||
@@ -6,9 +8,11 @@
|
||||
const classes = Object.keys(import.meta.glob('../../classes/**'))
|
||||
.map(it => it.replace('../../classes/', '').replace('.md', ''))
|
||||
.sort();
|
||||
|
||||
let slideIn = false
|
||||
</script>
|
||||
|
||||
<nav class="sidebar">
|
||||
<nav class="sidebar" class:slideIn>
|
||||
<div class="section">
|
||||
<span class="section__title">Getting started</span>
|
||||
<a href="/" class="section__link">Introduction</a>
|
||||
@@ -30,21 +34,38 @@
|
||||
<a href="/classes/{page}" class="section__link">{page}</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<button class="sidebar__toggle" on:click={() => slideIn = !slideIn}><IconMenu /></button>
|
||||
</nav>
|
||||
|
||||
<style lang="postcss">
|
||||
:root {
|
||||
--sidebar-color: hsl(220, 15%, 40%);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 2rem;
|
||||
background-color: hsl(220, 15%, 40%);
|
||||
background-color: var(--sidebar-color);
|
||||
color: hsl(216, 10%, 80%);
|
||||
padding: 5.5rem 2rem 2rem;
|
||||
height: 100vh;
|
||||
width: calc(var(--sidebar-width) - 3rem);
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
width: var(--sidebar-width);
|
||||
max-width: 70vw;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
left: -100%;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
padding: 88px 32px 32px;
|
||||
transition: left 0.2s ease-in-out;
|
||||
box-shadow: 2px 0px 4px hsla(221, 39%, 11%, 0.2);
|
||||
|
||||
@media (--md) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
@@ -66,5 +87,36 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__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(.38,.52,.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)))
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,8 +5,9 @@
|
||||
|
||||
export let fileName = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1).replace('.html', '')
|
||||
|
||||
export let title = ''
|
||||
if (!title) title = fileName
|
||||
export let title = fileName
|
||||
|
||||
export let description = 'Learn about Omorphia, the component & style library'
|
||||
|
||||
let editUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`
|
||||
|
||||
@@ -21,91 +22,86 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{title ? `${title} - Omorphia` : 'Omorphia'}</title>
|
||||
<title>{title ? `${title} • Omorphia` : 'Omorphia'}</title>
|
||||
<meta name="description" content={description} />
|
||||
</svelte:head>
|
||||
|
||||
<article>
|
||||
{#if title}<h1>{title}</h1>{/if}
|
||||
<a class="edit-link" href={editUrl}>
|
||||
<IconPencil/>
|
||||
Edit this page on GitHub</a>
|
||||
<slot/>
|
||||
{#if title}<h1>{title}</h1>{/if}
|
||||
<a class="edit-link" href={editUrl}>
|
||||
<IconPencil/>
|
||||
Edit this page on GitHub</a>
|
||||
<slot/>
|
||||
|
||||
{#if api}
|
||||
<div class="extra-info">
|
||||
{#if api.props.length > 0}
|
||||
<h2>Properties</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
{#if api}
|
||||
<div class="extra-info">
|
||||
{#if api.props.length > 0}
|
||||
<h2>Properties</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.props as prop}
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
<td><code>{prop.name}</code></td>
|
||||
<td><code>{prop.type ?? ''}</code></td>
|
||||
<td><code>{prop.value ?? ''}</code></td>
|
||||
<td>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.props as prop}
|
||||
<tr>
|
||||
<td><code>{prop.name}</code></td>
|
||||
<td><code>{prop.type ?? ''}</code></td>
|
||||
<td><code>{prop.value ?? ''}</code></td>
|
||||
<td>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
{#if api.events.length > 0}
|
||||
<h2>Events</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
{#if api.events.length > 0}
|
||||
<h2>Events</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Forwarded</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.events as event}
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Forwarded</th>
|
||||
<th>Description</th>
|
||||
<td><code>{event.name}</code></td>
|
||||
<td>{!!event.parent}</td>
|
||||
<td>{event.description?.replace('null', '') || ''}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.events as event}
|
||||
<tr>
|
||||
<td><code>{event.name}</code></td>
|
||||
<td>{!!event.parent}</td>
|
||||
<td>{event.description?.replace('null', '') || ''}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
{#if api.slots.length > 0}
|
||||
<h2>Slots</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
{#if api.slots.length > 0}
|
||||
<h2>Slots</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Fallback</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.slots as slot}
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Fallback</th>
|
||||
<td><code>{slot.name}</code></td>
|
||||
<td>{slot.fallback ?? 'None'}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.slots as slot}
|
||||
<tr>
|
||||
<td><code>{slot.name}</code></td>
|
||||
<td>{slot.fallback ?? 'None'}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</article>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
article {
|
||||
max-width: 800px;
|
||||
padding: 5rem 1rem;
|
||||
}
|
||||
|
||||
.edit-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -61,8 +61,13 @@
|
||||
}
|
||||
|
||||
&:where(h1) {
|
||||
font-size: 28px;
|
||||
font-size: 40px;
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
|
||||
@media (--md) {
|
||||
font-size: 54px;
|
||||
}
|
||||
}
|
||||
|
||||
&:where(h2) {
|
||||
@@ -356,12 +361,6 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:where(/* Custom styles */
|
||||
|
||||
h1) {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&:where(h2) {
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -374,10 +373,14 @@
|
||||
}
|
||||
|
||||
&:where(a) {
|
||||
color: var(--accent-color)
|
||||
color: var(--accent-color);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&:where(p) {
|
||||
line-height: 150%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user