You've already forked AstralRinth
forked from didirus/AstralRinth
Update CSS guidelines + Prefer rem
This commit is contained in:
venashial
@@ -31,19 +31,19 @@
|
||||
|
||||
<style lang="postcss">
|
||||
.example {
|
||||
margin: 15px 0 32px;
|
||||
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: 16px;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
justify-content: flex-start;
|
||||
z-index: 1;
|
||||
padding: 16px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
&__source {
|
||||
@@ -53,7 +53,7 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 8px;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
|
||||
@@ -40,10 +40,10 @@
|
||||
<style lang="postcss">
|
||||
.header {
|
||||
display: flex;
|
||||
grid-gap: 10px;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px 24px;
|
||||
padding: 1rem 1.5rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@@ -58,12 +58,12 @@
|
||||
}
|
||||
|
||||
@media (--sm) {
|
||||
padding: 10px 32px;
|
||||
padding: 12px 2rem;
|
||||
}
|
||||
|
||||
:global(&__logo) {
|
||||
max-width: 32px;
|
||||
min-width: 32px;
|
||||
max-width: 2rem;
|
||||
min-width: 2rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
|
||||
&__links {
|
||||
margin-left: auto;
|
||||
grid-gap: 16px;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
@@ -104,7 +104,7 @@
|
||||
|
||||
.spacer-dot {
|
||||
background-color: hsla(0, 0%, 0%, 0.2);
|
||||
border-radius: 999px;
|
||||
border-radius: var(--rounded-max);
|
||||
width: 5px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<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/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>
|
||||
@@ -77,18 +77,18 @@
|
||||
|
||||
&__content {
|
||||
mask-image: linear-gradient(to bottom, transparent, hsla(0, 0%, 0%, 1) 5% 95%, transparent);
|
||||
padding: 88px 32px 32px;
|
||||
padding: 88px 2rem 2rem;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
grid-gap: 40px;
|
||||
gap: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
&__title {
|
||||
text-transform: uppercase;
|
||||
@@ -109,9 +109,9 @@
|
||||
|
||||
&__toggle {
|
||||
position: fixed;
|
||||
left: 16px;
|
||||
bottom: 16px;
|
||||
padding: 8px;
|
||||
left: 1rem;
|
||||
bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
background-color: var(--accent-color);
|
||||
z-index: 20;
|
||||
@@ -121,7 +121,7 @@
|
||||
transition: left 0.2s cubic-bezier(0.38, 0.52, 0.37, 1.27);
|
||||
|
||||
:global(.icon) {
|
||||
width: 32px;
|
||||
width: 2rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@@ -134,14 +134,14 @@
|
||||
left: 0;
|
||||
|
||||
.sidebar__toggle {
|
||||
left: calc(32px + min(70vw, var(--sidebar-width)));
|
||||
left: calc(2rem + min(70vw, var(--sidebar-width)));
|
||||
}
|
||||
}
|
||||
|
||||
scrollbar-color: var(--scrollbar-thumb-color) var(--sidebar-color);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
@@ -150,7 +150,7 @@
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb-color);
|
||||
border-radius: 999px;
|
||||
border-radius: var(--rounded-max);
|
||||
border: 3px solid var(--sidebar-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import IconPencil from 'virtual:icons/heroicons-outline/pencil'
|
||||
import { page } from '$app/stores'
|
||||
import COMPONENT_API from '../../generated/COMPONENT_API.json'
|
||||
import { markdownInline } from 'omorphia/utils'
|
||||
|
||||
export let fileName = $page.url.pathname
|
||||
.substring($page.url.pathname.lastIndexOf('/') + 1)
|
||||
@@ -57,9 +58,10 @@
|
||||
<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>
|
||||
<td>
|
||||
{prop.constant ? '[Read only] ' : ''}
|
||||
{@html markdownInline(prop.description?.replace('null', '') || '')}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -112,13 +114,13 @@
|
||||
.edit-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-gap: 8px;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 54px;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.extra-info {
|
||||
margin-top: 64px;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.api-table {
|
||||
|
||||
@@ -32,7 +32,6 @@ code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: hsl(220, 13%, 18%);
|
||||
color: hsl(220, 14%, 71%);
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
|
||||
&--size {
|
||||
&-xs {
|
||||
--size: 2.25rem;
|
||||
--size: 2.5rem;
|
||||
box-shadow: var(--shadow-inset), var(--shadow-raised);
|
||||
}
|
||||
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
font-weight: var(--font-weight-bold);
|
||||
display: inline;
|
||||
position: relative;
|
||||
padding-left: 0.9rem;
|
||||
line-height: 1rem;
|
||||
padding-left: 1rem;
|
||||
line-height: 1em;
|
||||
|
||||
&--color-green {
|
||||
color: var(--color-badge-green-text);
|
||||
@@ -40,7 +40,7 @@
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-dot);
|
||||
position: absolute;
|
||||
|
||||
@@ -61,11 +61,14 @@
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 0.25rem 1rem;
|
||||
grid-gap: 14px;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: 2rem;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
line-height: 100%;
|
||||
|
||||
color: var(--color-bg-contrast);
|
||||
|
||||
@@ -73,15 +76,21 @@
|
||||
background-color: var(--color-button-bg);
|
||||
|
||||
border-radius: var(--rounded);
|
||||
transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out;
|
||||
transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(0.85);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
&--color {
|
||||
&-raised {
|
||||
background-color: var(--color-raised-bg);
|
||||
box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
|
||||
}
|
||||
|
||||
&-primary {
|
||||
@@ -146,10 +155,5 @@
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
|
||||
/* Only child doesn't work as intended because text is passed through as `innerText` */
|
||||
:global(.icon:only-child) {
|
||||
margin: 4px -7px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -25,16 +25,16 @@
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
grid-gap: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
|
||||
> :global(.icon) {
|
||||
width: 1.1rem;
|
||||
margin-right: -0.1rem;
|
||||
width: 1var (--unit-3);
|
||||
margin-right: -0var (--unit-3);
|
||||
}
|
||||
|
||||
&__box {
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
&.wrap {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
grid-gap: 2rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -40,6 +40,6 @@
|
||||
<style lang="postcss">
|
||||
.chips {
|
||||
display: flex;
|
||||
grid-gap: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,6 +18,6 @@
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
}
|
||||
|
||||
export let links: Link[]
|
||||
/** Query param name to use (to not use queries, leave this prop blank) */
|
||||
export let query = ''
|
||||
|
||||
export let resetScroll = false
|
||||
@@ -52,7 +53,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
grid-gap: 1rem;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__link {
|
||||
@@ -67,10 +68,10 @@
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -0.1rem;
|
||||
bottom: -0var (--unit-3);
|
||||
width: 100%;
|
||||
border-radius: var(--rounded-max);
|
||||
height: 0.2rem;
|
||||
height: 0.25rem;
|
||||
background-color: var(--color-brand);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,17 +54,24 @@
|
||||
.pagination {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
grid-gap: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
|
||||
:global(.button) {
|
||||
box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
|
||||
}
|
||||
|
||||
:global(.icon) {
|
||||
width: 1rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
:global(&__dash) {
|
||||
margin: 0 0.5rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
@media (width <= 500px) {
|
||||
grid-gap: 0.25rem;
|
||||
gap: 0.25rem;
|
||||
|
||||
:global(> *:nth-child(4)),
|
||||
:global(> *:nth-child(6)) {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import IconChevronDown from 'virtual:icons/lucide/chevron-down'
|
||||
import IconCheck from 'virtual:icons/heroicons-outline/check'
|
||||
import { debounce } from 'throttle-debounce'
|
||||
import { clickOutside } from 'svelte-use-click-outside'
|
||||
import { onMount } from 'svelte'
|
||||
@@ -11,13 +12,21 @@
|
||||
|
||||
export let options: Option[] = []
|
||||
export let value: string | number
|
||||
export let selected: Option = options.find((option) => option.value === (value || ''))
|
||||
export let selected: Option
|
||||
export let color = ''
|
||||
export let label = ''
|
||||
export let icon = null
|
||||
|
||||
let open = false
|
||||
|
||||
$: if (options) {
|
||||
setSelected()
|
||||
}
|
||||
|
||||
function setSelected() {
|
||||
selected = options.find((option) => option.value === (value || ''))
|
||||
}
|
||||
|
||||
$: if (selected) {
|
||||
value = selected.value
|
||||
}
|
||||
@@ -88,14 +97,14 @@
|
||||
|
||||
<div
|
||||
class="select select--color-{color}"
|
||||
class:is-open={open}
|
||||
class:select--opens-up={shouldOpenUp}
|
||||
class:select--opens-up={false}
|
||||
use:clickOutside={() => {
|
||||
open = false
|
||||
}}
|
||||
bind:this={element}
|
||||
tabindex="0"
|
||||
on:keydown={keydown}>
|
||||
on:keydown={keydown}
|
||||
on:click>
|
||||
<div
|
||||
class="select__input"
|
||||
on:click={() => {
|
||||
@@ -104,18 +113,17 @@
|
||||
{#if icon}
|
||||
<svelte:component this={icon} />
|
||||
{/if}
|
||||
<span class="select__input__value" style:min-width="{minWidth}px"
|
||||
>{label || selected?.label || value || 'Choose...'}</span>
|
||||
{#if !icon}
|
||||
<div class="select__input__arrow">
|
||||
<slot name="expandIcon">
|
||||
<IconChevronDown />
|
||||
</slot>
|
||||
</div>
|
||||
{/if}
|
||||
<span class="select__input__value" style:min-width="{minWidth + 16 + 8}px">
|
||||
{label || selected?.label || value || 'Choose...'}
|
||||
</span>
|
||||
<div class="select__input__arrow">
|
||||
<slot name="expandIcon">
|
||||
<IconChevronDown />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
{#if open}
|
||||
<ul class="select__options">
|
||||
<ul class="select__options" style:--selected-index={options.indexOf(selected)}>
|
||||
{#each options as option (option.value)}
|
||||
<li
|
||||
on:click={() => {
|
||||
@@ -124,6 +132,9 @@
|
||||
}}
|
||||
class:is-selected={selected?.value === option.value}>
|
||||
{option.label || option.value}
|
||||
{#if selected?.value === option.value}
|
||||
<IconCheck />
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
@@ -145,8 +156,8 @@
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.9rem;
|
||||
grid-gap: 0.4rem;
|
||||
padding: 0.25rem 1rem;
|
||||
gap: 0.5rem;
|
||||
background-color: var(--color-button-bg);
|
||||
box-shadow: var(--shadow-inset-sm);
|
||||
border-radius: var(--rounded);
|
||||
@@ -160,38 +171,32 @@
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
top: calc(100% * -1 * var(--selected-index));
|
||||
background-color: var(--color-button-bg);
|
||||
border-radius: var(--rounded-bottom);
|
||||
border-radius: var(--rounded);
|
||||
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
|
||||
border: var(--border-width) solid var(--color-tertiary);
|
||||
overflow: hidden;
|
||||
border-top: 0.1rem solid var(--color-divider);
|
||||
z-index: 5;
|
||||
|
||||
li {
|
||||
padding: 0.25rem 1rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-button-bg-hover);
|
||||
background-color: var(--color-brand-dark);
|
||||
color: var(--color-brand-dark-contrast);
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background-color: var(--color-brand-dark);
|
||||
color: var(--color-brand-contrast);
|
||||
background-color: var(--color-brand-light);
|
||||
color: var(--color-text);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
&.is-open {
|
||||
z-index: 10;
|
||||
|
||||
.select__input {
|
||||
border-radius: var(--rounded-top);
|
||||
box-shadow: none;
|
||||
|
||||
&__arrow {
|
||||
transform: rotate(180deg);
|
||||
:global(.icon) {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -209,11 +214,7 @@
|
||||
border-radius: var(--rounded-top);
|
||||
box-shadow: none;
|
||||
border-top: none;
|
||||
border-bottom: 0.1rem solid var(--color-divider);
|
||||
}
|
||||
|
||||
&.is-open .select__input {
|
||||
border-radius: var(--rounded-bottom);
|
||||
border-bottom: var(--border-width) solid var(--color-divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
|
||||
.slider-input {
|
||||
-webkit-appearance: none;
|
||||
@@ -35,7 +35,7 @@
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 0.5rem;
|
||||
height: 1.25rem;
|
||||
height: 0.5rem;
|
||||
border-radius: var(--rounded-sm);
|
||||
background-color: var(--color-brand);
|
||||
|
||||
|
||||
@@ -6,9 +6,10 @@
|
||||
export let value = ''
|
||||
export let multiline = false
|
||||
export let id: string = undefined
|
||||
export let fill = false
|
||||
</script>
|
||||
|
||||
<div class="text-input">
|
||||
<div class="text-input" class:fill>
|
||||
{#if multiline}
|
||||
<textarea name={id} {placeholder} bind:value />
|
||||
{:else}
|
||||
@@ -23,18 +24,28 @@
|
||||
.text-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
position: relative;
|
||||
width: 20rem;
|
||||
|
||||
&.fill {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
border-radius: var(--rounded-sm);
|
||||
border-radius: var(--rounded);
|
||||
box-shadow: var(--shadow-inset-sm);
|
||||
background-color: var(--color-button-bg);
|
||||
border: none;
|
||||
padding: 6px 14px;
|
||||
width: 20rem;
|
||||
padding: 0.25rem 1rem;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
&.has-icon {
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
@@ -45,12 +56,8 @@
|
||||
position: absolute;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
left: 14px;
|
||||
left: 1rem;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
input.has-icon {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,10 +2,10 @@ const config = {
|
||||
plugins: [
|
||||
require('postcss-import-ext-glob'),
|
||||
require('postcss-import'),
|
||||
require('postcss-strip-inline-comments'),
|
||||
require('postcss-extend-rule'),
|
||||
require('postcss-nested'),
|
||||
require('postcss-preset-env')({
|
||||
stage: 1,
|
||||
features: {
|
||||
'custom-media-queries': {
|
||||
importFrom: [
|
||||
@@ -22,10 +22,16 @@ const config = {
|
||||
},
|
||||
}),
|
||||
require('postcss-pxtorem'),
|
||||
require('autoprefixer'),
|
||||
process.env.NODE_ENV === 'development' &&
|
||||
require('cssnano')({
|
||||
preset: 'default',
|
||||
preset: [
|
||||
'default',
|
||||
{
|
||||
discardComments: {
|
||||
removeAll: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { fetch } from 'undici'
|
||||
import { promises as fs, createWriteStream } from 'fs'
|
||||
import { createWriteStream } from 'fs'
|
||||
import cliProgress from 'cli-progress'
|
||||
import Jimp from 'jimp'
|
||||
import { getAverageColor } from 'fast-average-color-node'
|
||||
|
||||
@@ -2,3 +2,4 @@
|
||||
@import-glob "./styles/themes/**.postcss";
|
||||
@import-glob "./styles/variables/**.postcss";
|
||||
@import-glob "./styles/classes/**.postcss";
|
||||
@import-glob "./styles/external/**.postcss";
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
grid-gap: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-left: auto;
|
||||
min-width: fit-content;
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
scrollbar-color: var(--color-scrollbar) var(--color-bg);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-scrollbar);
|
||||
border-radius: 999px;
|
||||
border-radius: var(--rounded-max);
|
||||
border: 3px solid var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.button-group {
|
||||
display: flex;
|
||||
grid-gap: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -7,11 +7,10 @@
|
||||
|
||||
background-color: var(--color-raised-bg);
|
||||
border-radius: var(--rounded-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-raised), var(--shadow-inset);
|
||||
|
||||
padding: var(--padding);
|
||||
grid-gap: 1rem;
|
||||
gap: 1rem;
|
||||
max-width: 100%;
|
||||
|
||||
.profile-picture {
|
||||
@@ -20,11 +19,11 @@
|
||||
|
||||
&--gap {
|
||||
&-compressed {
|
||||
grid-gap: 0.6rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
&-none {
|
||||
grid-gap: 0;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,26 +33,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--overflow-visible {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&__banner {
|
||||
--inverse-padding: calc(var(--padding) * -1);
|
||||
margin: var(--inverse-padding) var(--inverse-padding) 0 var(--inverse-padding);
|
||||
z-index: 0;
|
||||
background-color: var(--color-divider);
|
||||
height: 6.5rem; /* Matches height of 2 buttons exactly */
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border-radius: var(--rounded-top);
|
||||
|
||||
&:-moz-loading {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&--short {
|
||||
height: 6.5rem;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
&--dark {
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
@@ -67,7 +60,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
grid-gap: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
@@ -88,7 +81,7 @@
|
||||
}
|
||||
|
||||
&--pad-x {
|
||||
--padding: 1rem 1.3rem;
|
||||
--padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
&.markdown {
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
grid-gap: 2rem;
|
||||
gap: 2rem;
|
||||
|
||||
&__image {
|
||||
max-width: 300px;
|
||||
max-width: 18.5rem;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: 1.2rem;
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.info-table {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 0.25rem 2rem;
|
||||
gap: 0.25rem 2rem;
|
||||
width: fit-content;
|
||||
|
||||
&__label {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
color: var(--color-link);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 0.5rem;
|
||||
line-height: 100%;
|
||||
|
||||
&:hover {
|
||||
@@ -13,7 +13,7 @@
|
||||
.link-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-gap: 0.75rem;
|
||||
gap: 1rem;
|
||||
|
||||
.link {
|
||||
color: var(--color-text);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.markdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 1rem;
|
||||
gap: 1rem;
|
||||
|
||||
blockquote,
|
||||
details,
|
||||
@@ -54,7 +54,7 @@
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0.2rem 0.4rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 80%;
|
||||
border-radius: var(--rounded-sm);
|
||||
background-color: var(--color-code-bg);
|
||||
@@ -65,12 +65,13 @@
|
||||
padding: 1rem;
|
||||
border-radius: var(--rounded-sm);
|
||||
overflow-x: auto;
|
||||
background-color: var(--color-code-bg);
|
||||
|
||||
code {
|
||||
font-size: 80%;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background-color: unset;
|
||||
background-color: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -93,8 +94,8 @@
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0.4rem 0.85rem;
|
||||
border: 0.1rem solid var(--color-table-border);
|
||||
padding: 0.5rem 0.85rem;
|
||||
border: 0var (--unit-3) solid var(--color-table-border);
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.member {
|
||||
display: flex;
|
||||
grid-gap: 0.75rem;
|
||||
gap: 1rem;
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.stat {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
grid-gap: 0.4rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
&--light {
|
||||
color: var(--color-text-lightest);
|
||||
@@ -12,12 +12,12 @@
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 20px;
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
}
|
||||
|
||||
.stat-group {
|
||||
display: flex;
|
||||
grid-gap: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-gap: 0.25rem;
|
||||
gap: 0.25rem;
|
||||
color: var(--color-text-lightest);
|
||||
|
||||
svg {
|
||||
@@ -14,5 +14,5 @@
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: auto;
|
||||
grid-gap: 0.25rem 0.6rem;
|
||||
gap: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
128
src/package/styles/external/github-dark.postcss
vendored
Normal file
128
src/package/styles/external/github-dark.postcss
vendored
Normal file
@@ -0,0 +1,128 @@
|
||||
/*
|
||||
Theme: GitHub Dark
|
||||
Description: Dark theme as seen on github.com
|
||||
Author: github.com
|
||||
Maintainer: @Hirse
|
||||
Updated: 2021-05-15
|
||||
|
||||
Outdated base version: https://github.com/primer/github-syntax-dark
|
||||
Current colors taken from GitHub's CSS
|
||||
*/
|
||||
|
||||
.theme-dark,
|
||||
.theme-oled {
|
||||
.hljs {
|
||||
color: #c9d1d9;
|
||||
background: #0d1117;
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-variable.language_ {
|
||||
/* prettylights-syntax-keyword */
|
||||
color: #ff7b72;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-title.class_,
|
||||
.hljs-title.class_.inherited__,
|
||||
.hljs-title.function_ {
|
||||
/* prettylights-syntax-entity */
|
||||
color: #d2a8ff;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-attribute,
|
||||
.hljs-literal,
|
||||
.hljs-meta,
|
||||
.hljs-number,
|
||||
.hljs-operator,
|
||||
.hljs-variable,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-id {
|
||||
/* prettylights-syntax-constant */
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-string,
|
||||
.hljs-meta .hljs-string {
|
||||
/* prettylights-syntax-string */
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-symbol {
|
||||
/* prettylights-syntax-variable */
|
||||
color: #ffa657;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-code,
|
||||
.hljs-formula {
|
||||
/* prettylights-syntax-comment */
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.hljs-name,
|
||||
.hljs-quote,
|
||||
.hljs-selector-tag,
|
||||
.hljs-selector-pseudo {
|
||||
/* prettylights-syntax-entity-tag */
|
||||
color: #7ee787;
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
/* prettylights-syntax-storage-modifier-import */
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.hljs-section {
|
||||
/* prettylights-syntax-markup-heading */
|
||||
color: #1f6feb;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-bullet {
|
||||
/* prettylights-syntax-markup-list */
|
||||
color: #f2cc60;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
/* prettylights-syntax-markup-italic */
|
||||
color: #c9d1d9;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
/* prettylights-syntax-markup-bold */
|
||||
color: #c9d1d9;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
/* prettylights-syntax-markup-inserted */
|
||||
color: #aff5b4;
|
||||
background-color: #033a16;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
/* prettylights-syntax-markup-deleted */
|
||||
color: #ffdcd7;
|
||||
background-color: #67060c;
|
||||
}
|
||||
|
||||
.hljs-char.escape_,
|
||||
.hljs-link,
|
||||
.hljs-params,
|
||||
.hljs-property,
|
||||
.hljs-punctuation,
|
||||
.hljs-tag {
|
||||
/* purposely ignored */
|
||||
}
|
||||
}
|
||||
125
src/package/styles/external/github.postcss
vendored
Normal file
125
src/package/styles/external/github.postcss
vendored
Normal file
@@ -0,0 +1,125 @@
|
||||
/*
|
||||
Theme: GitHub
|
||||
Description: Light theme as seen on github.com
|
||||
Author: github.com
|
||||
Maintainer: @Hirse
|
||||
Updated: 2021-05-15
|
||||
|
||||
Outdated base version: https://github.com/primer/github-syntax-light
|
||||
Current colors taken from GitHub's CSS
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
color: #24292e;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-variable.language_ {
|
||||
/* prettylights-syntax-keyword */
|
||||
color: #d73a49;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-title.class_,
|
||||
.hljs-title.class_.inherited__,
|
||||
.hljs-title.function_ {
|
||||
/* prettylights-syntax-entity */
|
||||
color: #6f42c1;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-attribute,
|
||||
.hljs-literal,
|
||||
.hljs-meta,
|
||||
.hljs-number,
|
||||
.hljs-operator,
|
||||
.hljs-variable,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-id {
|
||||
/* prettylights-syntax-constant */
|
||||
color: #005cc5;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-string,
|
||||
.hljs-meta .hljs-string {
|
||||
/* prettylights-syntax-string */
|
||||
color: #032f62;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-symbol {
|
||||
/* prettylights-syntax-variable */
|
||||
color: #e36209;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-code,
|
||||
.hljs-formula {
|
||||
/* prettylights-syntax-comment */
|
||||
color: #6a737d;
|
||||
}
|
||||
|
||||
.hljs-name,
|
||||
.hljs-quote,
|
||||
.hljs-selector-tag,
|
||||
.hljs-selector-pseudo {
|
||||
/* prettylights-syntax-entity-tag */
|
||||
color: #22863a;
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
/* prettylights-syntax-storage-modifier-import */
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
.hljs-section {
|
||||
/* prettylights-syntax-markup-heading */
|
||||
color: #005cc5;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-bullet {
|
||||
/* prettylights-syntax-markup-list */
|
||||
color: #735c0f;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
/* prettylights-syntax-markup-italic */
|
||||
color: #24292e;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
/* prettylights-syntax-markup-bold */
|
||||
color: #24292e;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
/* prettylights-syntax-markup-inserted */
|
||||
color: #22863a;
|
||||
background-color: #f0fff4;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
/* prettylights-syntax-markup-deleted */
|
||||
color: #b31d28;
|
||||
background-color: #ffeef0;
|
||||
}
|
||||
|
||||
.hljs-char.escape_,
|
||||
.hljs-link,
|
||||
.hljs-params,
|
||||
.hljs-property,
|
||||
.hljs-punctuation,
|
||||
.hljs-tag {
|
||||
/* purposely ignored */
|
||||
}
|
||||
@@ -24,8 +24,21 @@ a {
|
||||
|
||||
button:focus-visible,
|
||||
a:focus-visible,
|
||||
input:focus-visible,
|
||||
[tabindex='0']:focus-visible {
|
||||
outline: 0.2rem solid var(--color-brand);
|
||||
outline: 0.25rem solid hsla(290, 100%, 40%, 0.5);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
a {
|
||||
outline: 0.25rem solid hsla(155, 58%, 44%, 0);
|
||||
transition: outline 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
input[type='text']:focus-visible {
|
||||
outline: 0.25rem solid hsla(155, 58%, 44%, 0.7);
|
||||
}
|
||||
|
||||
html,
|
||||
@@ -56,7 +69,7 @@ ul {
|
||||
|
||||
.icon {
|
||||
height: auto;
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
width: 1rem;
|
||||
min-width: 1rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
@@ -2,16 +2,6 @@
|
||||
--rounded: 1rem;
|
||||
--rounded-top: 1rem 1rem 0 0;
|
||||
--rounded-bottom: 0 0 1rem 1rem;
|
||||
--rounded-sm: 0.6rem;
|
||||
--rounded-max: 999999999px;
|
||||
|
||||
--font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
|
||||
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
|
||||
--font-size-nm: 1rem; /* 16px */
|
||||
--font-size-xl: 1.5rem; /* 24px */
|
||||
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 600;
|
||||
--font-weight-bold: 700;
|
||||
--rounded-sm: 0.5rem;
|
||||
--rounded-max: 9999px;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
--color-brand-light: hsl(155, 54%, 35%);
|
||||
--color-brand-dark: hsl(155, 58%, 25%);
|
||||
--color-brand-contrast: hsl(0, 0%, 0%);
|
||||
--color-brand-dark-contrast: hsl(0, 0%, 100%);
|
||||
|
||||
--color-secondary: hsl(231, 5%, 80%);
|
||||
--color-tertiary: hsl(231, 3%, 45%);
|
||||
@@ -27,11 +28,11 @@
|
||||
--color-link: hsl(215, 100%, 75%);
|
||||
|
||||
/* Container colors */
|
||||
--color-bg: hsl(220, 13%, 15%);
|
||||
--color-bg: hsl(220, 13%, 10%);
|
||||
--color-bg-contrast: hsl(0, 0%, 100%);
|
||||
--color-raised-bg: hsl(220, 13%, 25%);
|
||||
--color-divider: hsl(220, 13%, 50%);
|
||||
--color-button-bg: hsl(222, 13%, 35%);
|
||||
--color-raised-bg: hsl(220, 13%, 19%);
|
||||
--color-divider: hsl(220, 13%, 34%);
|
||||
--color-button-bg: hsl(222, 13%, 30%);
|
||||
|
||||
/* Label colors */
|
||||
--color-badge-gray-text: hsl(0, 2%, 69%);
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
--color-brand-light: hsl(135, 50%, 78%);
|
||||
--color-brand-dark: hsl(155, 58%, 38%);
|
||||
--color-brand-contrast: hsl(0, 0%, 100%);
|
||||
--color-brand-dark-contrast: hsl(0, 0%, 100%);
|
||||
|
||||
--color-secondary: hsl(231, 5%, 45%);
|
||||
--color-tertiary: hsl(231, 3%, 75%);
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
.theme-oled {
|
||||
@extend .dark-theme;
|
||||
@extend .theme-dark;
|
||||
|
||||
/* Container colors */
|
||||
--color-bg: hsl(220, 13%, 0%);
|
||||
--color-raised-bg: hsl(220, 13%, 10%);
|
||||
--color-raised-bg-hover: hsl(220, 13%, 20%);
|
||||
--color-divider: hsl(220, 13%, 35%);
|
||||
--color-divider: hsl(220, 13%, 30%);
|
||||
--color-button-bg: hsl(220, 13%, 20%);
|
||||
|
||||
/* Ad colors */
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
:root {
|
||||
/* Borders */
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border: var(--border-width) var(--border-style);
|
||||
|
||||
/* Rounded radii */
|
||||
--rounded-sm: 8px;
|
||||
--rounded: 10px;
|
||||
--rounded-lg: 14px;
|
||||
--rounded-sm: 10px;
|
||||
--rounded: 16px;
|
||||
--rounded-lg: 18px;
|
||||
--rounded-max: 100px;
|
||||
|
||||
--rounded-top: var(--rounded) var(--rounded) 0 0;
|
||||
--rounded-bottom: 0 0 var(--rounded) var(--rounded);
|
||||
--rounded-sm-top: var(--rounded-sm) var(--rounded-sm) 0 0;
|
||||
|
||||
5
src/package/styles/variables/breakpoints.postcss
Normal file
5
src/package/styles/variables/breakpoints.postcss
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Breakpoints */
|
||||
@custom-media --sm (min-width: 544px);
|
||||
@custom-media --md (min-width: 768px);
|
||||
@custom-media --lg (min-width: 1012px);
|
||||
@custom-media --xl (min-width: 544px);
|
||||
@@ -1,212 +0,0 @@
|
||||
:root {
|
||||
/* these are values for the display CSS property */
|
||||
/*
|
||||
--display-values: (
|
||||
block,
|
||||
flex,
|
||||
inline,
|
||||
inline-block,
|
||||
inline-flex,
|
||||
none,
|
||||
table,
|
||||
table-cell
|
||||
);
|
||||
|
||||
// maps edges to respective corners for border-radius
|
||||
--edges: (
|
||||
top: (top-left, top-right),
|
||||
right: (top-right, bottom-right),
|
||||
bottom: (bottom-right, bottom-left),
|
||||
left: (bottom-left, top-left)
|
||||
);
|
||||
*/
|
||||
|
||||
/*
|
||||
These are our margin and padding utility spacers. The default step size we
|
||||
use is 8px. This gives us a key of:
|
||||
0 => 0px
|
||||
1 => 4px
|
||||
2 => 8px
|
||||
3 => 16px
|
||||
4 => 24px
|
||||
5 => 32px
|
||||
6 => 40px */
|
||||
--spacer: 8px;
|
||||
|
||||
/* Our spacing scale */
|
||||
--spacer-0: 0; /* 0 */
|
||||
--spacer-1: calc(var(--spacer) * 0.5); /* 4px */
|
||||
--spacer-2: --spacer; /* 8px */
|
||||
--spacer-3: calc(var(--spacer) * 2); /* 16px */
|
||||
--spacer-4: calc(var(--spacer) * 3); /* 24px */
|
||||
--spacer-5: calc(var(--spacer) * 4); /* 32px */
|
||||
--spacer-6: calc(var(--spacer) * 5); /* 40px */
|
||||
|
||||
/*
|
||||
/* The list of spacer values
|
||||
--spacers: (
|
||||
--spacer-0,
|
||||
--spacer-1,
|
||||
--spacer-2,
|
||||
--spacer-3,
|
||||
--spacer-4,
|
||||
--spacer-5,
|
||||
--spacer-6,
|
||||
);
|
||||
|
||||
/* And the map of spacers, for easier looping:
|
||||
/* @each --scale, --length in --spacer-map { ... }
|
||||
--spacer-map: (
|
||||
0: --spacer-0,
|
||||
1: --spacer-1,
|
||||
2: --spacer-2,
|
||||
3: --spacer-3,
|
||||
4: --spacer-4,
|
||||
5: --spacer-5,
|
||||
6: --spacer-6,
|
||||
);
|
||||
|
||||
/* Increases the core spacing scale first by 8px for --spacer-7, then by 16px
|
||||
/* increments from --spacer-8 to --spacer-12, i.e. after 40px, we have 48, 64,
|
||||
/* 80, 96, etc.
|
||||
--spacer-7: --spacer * 6; /* 48px
|
||||
--spacer-8: --spacer * 8; /* 64px
|
||||
--spacer-9: --spacer * 10; /* 80px
|
||||
--spacer-10: --spacer * 12; /* 96px
|
||||
--spacer-11: --spacer * 14; /* 112px
|
||||
--spacer-12: --spacer * 16; /* 128px
|
||||
|
||||
--spacers-large: (
|
||||
7: --spacer-7,
|
||||
8: --spacer-8,
|
||||
9: --spacer-9,
|
||||
10: --spacer-10,
|
||||
11: --spacer-11,
|
||||
12: --spacer-12,
|
||||
);
|
||||
|
||||
--spacer-map-extended: map-merge(
|
||||
(
|
||||
0: 0,
|
||||
1: --spacer-1,
|
||||
2: --spacer-2,
|
||||
3: --spacer-3,
|
||||
4: --spacer-4,
|
||||
5: --spacer-5,
|
||||
6: --spacer-6,
|
||||
),
|
||||
--spacers-large,
|
||||
);
|
||||
|
||||
/* Em spacer variables
|
||||
--em-spacer-1: 0.0625em; /* 1/16
|
||||
--em-spacer-2: 0.125em; /* 1/8
|
||||
--em-spacer-3: 0.25em; /* 1/4
|
||||
--em-spacer-4: 0.375em; /* 3/8
|
||||
--em-spacer-5: 0.5em; /* 1/2
|
||||
--em-spacer-6: 0.75em; /* 3/4
|
||||
|
||||
/* Size scale
|
||||
/* Used for buttons, inputs, labels, avatars etc.
|
||||
--size: 16px;
|
||||
|
||||
--size-0: 0;
|
||||
--size-1: --size; /* 16px
|
||||
--size-2: --size-1 + 4px; /* 20px
|
||||
--size-3: --size-2 + 4px; /* 24px
|
||||
--size-4: --size-3 + 4px; /* 28px
|
||||
--size-5: --size-4 + 4px; /* 32px
|
||||
--size-6: --size-5 + 8px; /* 40px
|
||||
--size-7: --size-6 + 8px; /* 48px
|
||||
--size-8: --size-7 + 16px; /* 64px
|
||||
|
||||
/* Fixed-width container variables
|
||||
--container-width: 980px;
|
||||
--grid-gutter: 10px;
|
||||
|
||||
// Breakpoint widths
|
||||
--width-xs: 0;
|
||||
// Small screen / phone
|
||||
--width-sm: 544px;
|
||||
// Medium screen / tablet
|
||||
--width-md: 768px;
|
||||
// Large screen / desktop (980 + (16 * 2)) <= container + gutters
|
||||
--width-lg: 1012px;
|
||||
// Extra large screen / wide desktop
|
||||
--width-xl: 1280px;
|
||||
|
||||
// Responsive container widths
|
||||
--container-sm: --width-sm;
|
||||
--container-md: --width-md;
|
||||
--container-lg: --width-lg;
|
||||
--container-xl: --width-xl;
|
||||
|
||||
// Breakpoints in the form (name: length)
|
||||
--breakpoints: (
|
||||
sm: --width-sm,
|
||||
md: --width-md,
|
||||
lg: --width-lg,
|
||||
xl: --width-xl
|
||||
);
|
||||
|
||||
// This map in the form (breakpoint: variant) is used to iterate over
|
||||
// breakpoints and create both responsive and non-responsive classes in one
|
||||
// loop:
|
||||
--responsive-variants: (
|
||||
'': '',
|
||||
sm: '-sm',
|
||||
md: '-md',
|
||||
lg: '-lg',
|
||||
xl: '-xl',
|
||||
);
|
||||
|
||||
// responsive utility position values
|
||||
--responsive-positions: (
|
||||
static,
|
||||
relative,
|
||||
absolute,
|
||||
fixed,
|
||||
sticky
|
||||
);
|
||||
|
||||
--sidebar-width: (
|
||||
sm: 220px,
|
||||
md: 256px,
|
||||
lg: 296px
|
||||
);
|
||||
|
||||
--sidebar-narrow-width: (
|
||||
md: 240px,
|
||||
lg: 256px
|
||||
);
|
||||
|
||||
--sidebar-wide-width: (
|
||||
lg: 320px,
|
||||
xl: 336px
|
||||
);
|
||||
|
||||
--gutter: (
|
||||
md: --spacer-3,
|
||||
lg: --spacer-4,
|
||||
xl: --spacer-5
|
||||
);
|
||||
|
||||
--gutter-condensed: (
|
||||
md: --spacer-3,
|
||||
lg: --spacer-3,
|
||||
xl: --spacer-4
|
||||
);
|
||||
|
||||
--gutter-spacious: (
|
||||
md: --spacer-4,
|
||||
lg: --spacer-5,
|
||||
xl: --spacer-6
|
||||
);
|
||||
*/
|
||||
}
|
||||
|
||||
/* Breakpoints */
|
||||
@custom-media --sm (min-width: 544px);
|
||||
@custom-media --md (min-width: 768px);
|
||||
@custom-media --lg (min-width: 1012px);
|
||||
@custom-media --xl (min-width: 544px);
|
||||
@@ -1,25 +1,7 @@
|
||||
:root {
|
||||
/* Heading sizes - mobile */
|
||||
/* h4-h6 remain the same size on both mobile & desktop */
|
||||
--h00-size-mobile: 40px;
|
||||
--h0-size-mobile: 32px;
|
||||
--h1-size-mobile: 26px;
|
||||
--h2-size-mobile: 22px;
|
||||
--h3-size-mobile: 18px;
|
||||
|
||||
/* Heading sizes - desktop */
|
||||
--h00-size: 48px;
|
||||
--h0-size: 40px;
|
||||
--h1-size: 32px;
|
||||
--h2-size: 24px;
|
||||
--h3-size: 20px;
|
||||
--h4-size: 16px;
|
||||
--h5-size: 14px;
|
||||
--h6-size: 12px;
|
||||
|
||||
--font-size-lg: 19px;
|
||||
--font-size-sm: 13px;
|
||||
--font-size-lg: 20px;
|
||||
--font-size: 16px;
|
||||
--font-size-sm: 14px;
|
||||
|
||||
/* Line heights */
|
||||
--lh-condensed-ultra: 1;
|
||||
@@ -33,7 +15,12 @@
|
||||
--font-weight-bold: 600;
|
||||
|
||||
/* Font stacks */
|
||||
--body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji';
|
||||
--body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica Neue, Helvetica,
|
||||
Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
Arial, sans-serif;
|
||||
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 600;
|
||||
--font-weight-bold: 700;
|
||||
}
|
||||
|
||||
@@ -50,12 +50,12 @@
|
||||
|
||||
article {
|
||||
max-width: 800px;
|
||||
padding-block: 140px 64px;
|
||||
padding-block: 9rem 4rem;
|
||||
padding-inline: 24px;
|
||||
|
||||
@media (--sm) {
|
||||
padding-inline: 48px;
|
||||
padding-block: 140px 24px;
|
||||
padding-block: 9rem 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,26 +1,56 @@
|
||||
`NavRow` works well for most horizontal navigation with less than 10 items. It can be used with paths & query params, and supports specific path level (depths).
|
||||
|
||||
```svelte example raised
|
||||
### Query example
|
||||
|
||||
```svelte example
|
||||
<script lang="ts">
|
||||
import { NavRow } from 'omorphia'
|
||||
</script>
|
||||
|
||||
<NavRow
|
||||
level={1}
|
||||
links={[
|
||||
{
|
||||
href: '/Button',
|
||||
label: 'Button',
|
||||
},
|
||||
{
|
||||
href: '/Chips',
|
||||
label: 'Chips',
|
||||
},
|
||||
{
|
||||
href: '/NavRow',
|
||||
label: 'NavRow',
|
||||
},
|
||||
]}>
|
||||
Click for fun
|
||||
</NavRow>
|
||||
<div class="card card--strip card--pad-x">
|
||||
<NavRow
|
||||
level={1}
|
||||
query={'tab'}
|
||||
links={[
|
||||
{
|
||||
href: '',
|
||||
label: 'All',
|
||||
},
|
||||
{
|
||||
href: 'mods',
|
||||
label: 'Mods',
|
||||
},
|
||||
{
|
||||
href: 'modpacks',
|
||||
label: 'Modpacks',
|
||||
},
|
||||
]} />
|
||||
</div>
|
||||
```
|
||||
|
||||
### Route example
|
||||
|
||||
```svelte example
|
||||
<script lang="ts">
|
||||
import { NavRow } from 'omorphia'
|
||||
</script>
|
||||
|
||||
<div class="card card--strip card--pad-x">
|
||||
<NavRow
|
||||
level={1}
|
||||
links={[
|
||||
{
|
||||
href: '/Button',
|
||||
label: 'Button',
|
||||
},
|
||||
{
|
||||
href: '/Chips',
|
||||
label: 'Chips',
|
||||
},
|
||||
{
|
||||
href: '/NavRow',
|
||||
label: 'NavRow',
|
||||
},
|
||||
]} />
|
||||
</div>
|
||||
```
|
||||
|
||||
@@ -5,5 +5,5 @@ Use pagination to show a set of page numbers and navigation directions to move t
|
||||
import { Pagination } from 'omorphia'
|
||||
</script>
|
||||
|
||||
<Pagination page={20} count={50} />
|
||||
<Pagination page={20} count={500} />
|
||||
```
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
{ value: '', label: 'Relevance' },
|
||||
{ value: 'downloads', label: 'Downloads' },
|
||||
{ value: 'follows', label: 'Followers' },
|
||||
{ value: 'newest', label: 'Recently' },
|
||||
{ value: 'updated', label: 'Recently updated really fast whoot' },
|
||||
{ value: 'newest', label: 'Recently created' },
|
||||
{ value: 'updated', label: 'Recently updated' },
|
||||
]}
|
||||
bind:value={sortMethod} />
|
||||
```
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
title: Writing CSS
|
||||
---
|
||||
|
||||
TODO
|
||||
|
||||
Use `px` measurements.
|
||||
|
||||
Use `hsl` for colors.
|
||||
|
||||
Use `margin-inline` (x) and `margin-block` (y). Use `inline` & `block` for `padding` too.
|
||||
32
src/routes/getting-started/css.md
Normal file
32
src/routes/getting-started/css.md
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Writing CSS
|
||||
---
|
||||
|
||||
## Conventions
|
||||
|
||||
### Avoid inconsistent CSS units
|
||||
|
||||
Prefer using `rem` units, using only whole and half units, eg. `2rem` or `1.5rem`. If you need a specific pixel (`px`) measurement, use `px` and add comment explaining why you used it. The one exception is that `0.25` is allowed.
|
||||
|
||||
> Using `rem` units lets you change the scale of the UI by simply changing the body font size.
|
||||
|
||||
### Always use `HSL` colors
|
||||
|
||||
### All colors should be theme variables
|
||||
|
||||
## Abilities
|
||||
|
||||
Omorphia leverages PostCSS to allow you to write in future-standards-compliant CSS. Browse [the CSSWG drafts](https://cssdb.org/) to see what is possible (not including stage 0).
|
||||
|
||||
Notable features:
|
||||
|
||||
- [Nesting](https://www.w3.org/TR/css-nesting-1/#example-aecb8796)
|
||||
- [Gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
|
||||
- [`clamp` function](<https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()>)
|
||||
- [Custom Media Queries](https://www.w3.org/TR/mediaqueries-5/#example-532b0adb)
|
||||
- [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)
|
||||
- [place-content](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content)
|
||||
|
||||
## Styles
|
||||
|
||||
Conform to [BEM styling](http://getbem.com/introduction/) wherever possible. When working in components, you may want to leverage [Svelte's conditional class shorthand](https://svelte.dev/tutorial/class-shorthand) instead of BEM's modifier class name format.
|
||||
@@ -16,12 +16,12 @@ Import an icon in the `<script>` tag of your component.
|
||||
|
||||
Then use the icon as if it were a Svelte component:
|
||||
|
||||
> The `height` and `width` props are optional, and take CSS compatible values
|
||||
> You can style the icon with the `.icon` class. Note, you will have to use the `:global(.icon)` selector in Svelte components.
|
||||
|
||||
```svelte example
|
||||
<script lang="ts">
|
||||
import IconHeart from 'virtual:icons/heroicons-outline/heart'
|
||||
</script>
|
||||
|
||||
<p>That's lovely <IconHeart height="14px" />!</p>
|
||||
<p>That's lovely! <IconHeart /></p>
|
||||
```
|
||||
|
||||
@@ -12,13 +12,14 @@ The `markdown` parser is designed for bodies of markdown text and supports image
|
||||
|
||||
> Use the `.markdown` class on the element containing your parsed markdown.
|
||||
|
||||
```svelte example
|
||||
````svelte example
|
||||
<script lang="ts">
|
||||
import { markdown } from 'omorphia/utils'
|
||||
|
||||
const source =
|
||||
'## Example markdown \n\
|
||||
This is **some** *text*! \n\
|
||||
`console.log("test")` \n\
|
||||
#### An image \n\
|
||||
<img src="https://cdn.modrinth.com/data/YL57xq9U/images/d382106b9a2b943d06107c31c139c77849f1a0e8.png" />'
|
||||
</script>
|
||||
@@ -26,7 +27,10 @@ The `markdown` parser is designed for bodies of markdown text and supports image
|
||||
<div class="card markdown">
|
||||
{@html markdown(source)}
|
||||
</div>
|
||||
```
|
||||
<div class="card markdown">
|
||||
{@html markdown('test\n```js\nconsole.log("test")\n```')}
|
||||
</div>
|
||||
````
|
||||
|
||||
### Inline parser
|
||||
|
||||
|
||||
Reference in New Issue
Block a user