You've already forked AstralRinth
forked from didirus/AstralRinth
Update docs examples + Add Select component + Add Card, Base, Title classes
This commit is contained in:
venashial
@@ -1,18 +1,26 @@
|
||||
<script lang="ts">
|
||||
import Prism from 'prismjs';
|
||||
import 'prism-svelte';
|
||||
import Button from '$lib/components/Button.svelte'
|
||||
import IconMoon from 'virtual:icons/heroicons-outline/moon'
|
||||
import IconSun from 'virtual:icons/heroicons-outline/sun'
|
||||
|
||||
export let background: 'var(--color-raised-bg)' | 'transparent' = 'var(--color-raised-bg)'
|
||||
|
||||
export let code = ''
|
||||
const highlighted = Prism.highlight(code.trim(), Prism.languages.svelte, 'svelte');
|
||||
let theme = 'light'
|
||||
let background: 'var(--color-raised-bg)' | 'var(--color-bg)' = 'var(--color-bg)'
|
||||
</script>
|
||||
|
||||
<div class="example theme-light">
|
||||
<div class="example__preview" style:background={background}>
|
||||
<slot />
|
||||
<div class="example">
|
||||
<div class="example__preview theme-{theme} base" style:background={background}>
|
||||
<div class="example__preview__options">
|
||||
<Button color="primary-light" on:click={() => theme === 'light' ? theme = 'dark' : theme = 'light'}>
|
||||
{#if theme === 'light'}
|
||||
<IconMoon/>
|
||||
{:else}
|
||||
<IconSun/>
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
<slot name="example"/>
|
||||
</div>
|
||||
<pre class="example__code language-">{@html highlighted}</pre>
|
||||
<pre class="example__code language-svelte"><slot name="code"/></pre>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
@@ -20,13 +28,24 @@
|
||||
margin-bottom: 32px;
|
||||
|
||||
&__preview {
|
||||
padding: 16px;
|
||||
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;
|
||||
|
||||
&__options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
&__code {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
onMount(() => {
|
||||
let lastScrollTop: number
|
||||
window.addEventListener('scroll', function () {
|
||||
window.addEventListener('scroll', () => {
|
||||
let scrollTop = window.pageYOffset || document.documentElement.scrollTop
|
||||
if (scrollTop > lastScrollTop && headerElement) {
|
||||
headerElement.style.top = 'calc(var(--header-height) * -1)'
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
<script lang="ts">
|
||||
const components = ['Button', 'Pagination', 'Link', 'NavRow', 'Badge', 'Avatar', 'Chips'].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();
|
||||
</script>
|
||||
|
||||
<nav class="sidebar">
|
||||
@@ -7,7 +13,8 @@
|
||||
<span class="section__title">Getting started</span>
|
||||
<a href="/" class="section__link">Introduction</a>
|
||||
<a href="/getting-started/icons" class="section__link">Using Icons</a>
|
||||
<a href="/getting-started/css" class="section__link">CSS configuration</a>
|
||||
<a href="/getting-started/postcss" class="section__link">PostCSS config</a>
|
||||
<a href="/getting-started/css" class="section__link">Writing CSS</a>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
@@ -16,6 +23,13 @@
|
||||
<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>
|
||||
</nav>
|
||||
|
||||
<style lang="postcss">
|
||||
@@ -25,7 +39,7 @@
|
||||
grid-gap: 2rem;
|
||||
background-color: hsl(220, 15%, 40%);
|
||||
color: hsl(216, 10%, 80%);
|
||||
padding: 5.5rem 1.5rem 1.5rem;
|
||||
padding: 5.5rem 2rem 2rem;
|
||||
height: 100vh;
|
||||
width: calc(var(--sidebar-width) - 3rem);
|
||||
position: fixed;
|
||||
|
||||
@@ -1,22 +1,18 @@
|
||||
<script lang="ts">
|
||||
import IconPencil from 'virtual:icons/heroicons-outline/pencil'
|
||||
import { page } from '$app/stores'
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
export let componentName = $page.url.pathname.includes('components') ? $page.url.pathname.replace('/components/', '') : undefined
|
||||
export let fileName = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1)
|
||||
|
||||
export let title = ''
|
||||
if (!title && componentName) title = componentName
|
||||
if (!title) title = fileName
|
||||
|
||||
let pageUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`
|
||||
let editUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`
|
||||
|
||||
let api
|
||||
|
||||
onMount(async () => {
|
||||
if (componentName) {
|
||||
api = (await import(`../../../lib/components/${componentName}.svelte?raw&api`)).default
|
||||
}
|
||||
})
|
||||
if ($page.url.pathname.includes('components')) {
|
||||
import(`../../../lib/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -25,14 +21,14 @@
|
||||
|
||||
<article>
|
||||
{#if title}<h1>{title}</h1>{/if}
|
||||
<a class="edit-link" href={pageUrl}>
|
||||
<a class="edit-link" href={editUrl}>
|
||||
<IconPencil/>
|
||||
Edit this page on GitHub</a>
|
||||
<slot/>
|
||||
|
||||
{#if componentName && api}
|
||||
{#if api}
|
||||
<div class="extra-info">
|
||||
{#if api.data.length > 0}
|
||||
{#if api.props.length > 0}
|
||||
<h2>Properties</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
@@ -44,12 +40,12 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.data as prop}
|
||||
{#each api.props as prop}
|
||||
<tr>
|
||||
<td>{prop.name}</td>
|
||||
<td>{prop.type.type}</td>
|
||||
<td>{prop.defaultValue ?? ''}</td>
|
||||
<td>{prop.readonly ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
|
||||
<td><code>{prop.type ?? ''}</code></td>
|
||||
<td>{prop.value ?? ''}</td>
|
||||
<td>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -82,22 +78,19 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Fallback</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.slots as slot}
|
||||
<tr>
|
||||
<td>{slot.name}</td>
|
||||
<td>{slot.description?.replace('null', '') || ''}</td>
|
||||
<td>{slot.fallback}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
<h2>Import</h2>
|
||||
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> {componentName} <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"omorphia"</span></code></pre>
|
||||
</div>
|
||||
{/if}
|
||||
</article>
|
||||
|
||||
@@ -1,373 +0,0 @@
|
||||
a {
|
||||
color: #4183C4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.absent {
|
||||
color: #cc0000;
|
||||
}
|
||||
|
||||
a.anchor {
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
margin-left: -30px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 20px 0 10px;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
cursor: text;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h2:first-child, h1:first-child, h1:first-child + h2, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 tt, h1 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h2 tt, h2 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h3 tt, h3 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h4 tt, h4 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h5 tt, h5 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h6 tt, h6 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
/*border-bottom: 1px solid #cccccc;*/
|
||||
color: black;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #777777;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p, blockquote, ul, ol, dl, li, table, pre {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0 none;
|
||||
color: #cccccc;
|
||||
height: 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body > h2:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body > h1:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body > h1:first-child + h2 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li p.first {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
ul :first-child, ol :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
ul :last-child, ol :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
padding: 0;
|
||||
margin: 15px 0 5px;
|
||||
}
|
||||
|
||||
dl dt:first-child {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl dt > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
dl dt > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dl dd {
|
||||
margin: 0 0 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
dl dd > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
dl dd > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid #dddddd;
|
||||
padding: 0 15px;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
blockquote > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
blockquote > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table tr {
|
||||
border-top: 1px solid #cccccc;
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table tr:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
table tr th {
|
||||
font-weight: bold;
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
table tr td {
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
table tr th :first-child, table tr td :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
table tr th :last-child, table tr td :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
span.frame {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
span.frame > span {
|
||||
border: 1px solid #dddddd;
|
||||
display: block;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
margin: 13px 0 0;
|
||||
padding: 7px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
span.frame span img {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
span.frame span span {
|
||||
clear: both;
|
||||
color: #333333;
|
||||
display: block;
|
||||
padding: 5px 0 0;
|
||||
}
|
||||
|
||||
span.align-center {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
span.align-center > span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px auto 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span.align-center span img {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span.align-right {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
span.align-right > span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px 0 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span.align-right span img {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span.float-left {
|
||||
display: block;
|
||||
margin-right: 13px;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
}
|
||||
|
||||
span.float-left span {
|
||||
margin: 13px 0 0;
|
||||
}
|
||||
|
||||
span.float-right {
|
||||
display: block;
|
||||
margin-left: 13px;
|
||||
overflow: hidden;
|
||||
float: right;
|
||||
}
|
||||
|
||||
span.float-right > span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px auto 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
code, tt {
|
||||
margin: 0 2px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #f8f8f8;
|
||||
font-size: 13px;
|
||||
line-height: 19px;
|
||||
overflow: auto;
|
||||
padding: 6px 10px;
|
||||
border-radius: var(--rounded-sm) !important;
|
||||
}
|
||||
|
||||
pre code, pre tt {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Custom styles */
|
||||
h1 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid var(--accent-color);
|
||||
padding: 15px 15px;
|
||||
color: unset;
|
||||
background-color: var(--accent-color-transparent);
|
||||
}
|
||||
383
src/routes/_internal/styles/gh-markdown.postcss
Normal file
383
src/routes/_internal/styles/gh-markdown.postcss
Normal file
@@ -0,0 +1,383 @@
|
||||
*:not(.example__preview *) {
|
||||
:where(a) {
|
||||
text-decoration: none;
|
||||
|
||||
&.absent {
|
||||
color: #cc0000;
|
||||
}
|
||||
|
||||
&.anchor {
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
margin-left: -30px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:where(h1, h2, h3, h4, h5, h6) {
|
||||
margin: 20px 0 10px;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
cursor: text;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:where(h2:first-child, h1:first-child, h1:first-child + h2, h3:first-child, h4:first-child, h5:first-child, h6:first-child) {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:where(h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:where(h1 tt, h1 code) {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
&:where(h2 tt, h2 code) {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
&:where(h3 tt, h3 code) {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
&:where(h4 tt, h4 code) {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
&:where(h5 tt, h5 code) {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
&:where(h6 tt, h6 code) {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
&:where(h1) {
|
||||
font-size: 28px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&:where(h2) {
|
||||
font-size: 24px;
|
||||
/*border-bottom: 1px solid #cccccc;*/
|
||||
color: black;
|
||||
}
|
||||
|
||||
&:where(h3) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&:where(h4) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:where(h5) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:where(h6) {
|
||||
color: #777777;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:where(p, blockquote, ul, ol, dl, li, table, pre) {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
&:where(hr) {
|
||||
border: 0 none;
|
||||
color: #cccccc;
|
||||
height: 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:where(body > h2:first-child) {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:where(body > h1:first-child) {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:where(body > h1:first-child + h2) {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:where(body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child) {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:where(a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6) {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:where(h1 p, h2 p, h3 p, h4 p, h5 p, h6 p) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:where(li p.first) {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:where(ul, ol) {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
&:where(ul :first-child, ol :first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:where(ul :last-child, ol :last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:where(dl) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:where(dl dt) {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
padding: 0;
|
||||
margin: 15px 0 5px;
|
||||
}
|
||||
|
||||
&:where(dl dt:first-child) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:where(dl dt > :first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:where(dl dt > :last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:where(dl dd) {
|
||||
margin: 0 0 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
&:where(dl dd > :first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:where(dl dd > :last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:where(blockquote) {
|
||||
border-left: 4px solid #dddddd;
|
||||
padding: 0 15px;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
&:where(blockquote > :first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:where(blockquote > :last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:where(table) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:where(table tr) {
|
||||
border-top: 1px solid #cccccc;
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:where(table tr:nth-child(2n)) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
&:where(table tr th) {
|
||||
font-weight: bold;
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
&:where(table tr td) {
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
&:where(table tr th :first-child, table tr td :first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:where(table tr th :last-child, table tr td :last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:where(img) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&:where(span.frame) {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&:where(span.frame > span) {
|
||||
border: 1px solid #dddddd;
|
||||
display: block;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
margin: 13px 0 0;
|
||||
padding: 7px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&:where(span.frame span img) {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&:where(span.frame span span) {
|
||||
clear: both;
|
||||
color: #333333;
|
||||
display: block;
|
||||
padding: 5px 0 0;
|
||||
}
|
||||
|
||||
&:where(span.align-center) {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&:where(span.align-center > span) {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px auto 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:where(span.align-center span img) {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:where(span.align-right) {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&:where(span.align-right > span) {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px 0 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:where(span.align-right span img) {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:where(span.float-left) {
|
||||
display: block;
|
||||
margin-right: 13px;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&:where(span.float-left span) {
|
||||
margin: 13px 0 0;
|
||||
}
|
||||
|
||||
&:where(span.float-right) {
|
||||
display: block;
|
||||
margin-left: 13px;
|
||||
overflow: hidden;
|
||||
float: right;
|
||||
}
|
||||
|
||||
&:where(span.float-right > span) {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px auto 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:where(code, tt) {
|
||||
margin: 0 2px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&:where(pre code) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:where(pre) {
|
||||
background-color: #f8f8f8;
|
||||
font-size: 13px;
|
||||
line-height: 19px;
|
||||
overflow: auto;
|
||||
padding: 6px 10px;
|
||||
border-radius: var(--rounded-sm) !important;
|
||||
}
|
||||
|
||||
&:where(pre code, pre tt) {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:where(/* Custom styles */
|
||||
|
||||
h1) {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&:where(h2) {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:where(blockquote) {
|
||||
border-left: 4px solid var(--accent-color);
|
||||
padding: 15px 15px;
|
||||
color: unset;
|
||||
background-color: var(--accent-color-transparent);
|
||||
}
|
||||
|
||||
&:where(a) {
|
||||
color: var(--accent-color)
|
||||
}
|
||||
|
||||
&:where(p) {
|
||||
line-height: 150%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user