Refactored primitives & content.css
This commit is contained in:
@@ -1,6 +1,12 @@
|
||||
import { defineMarkdocConfig, component } from '@astrojs/markdoc/config';
|
||||
import { defineMarkdocConfig, component, nodes } from '@astrojs/markdoc/config';
|
||||
|
||||
export default defineMarkdocConfig({
|
||||
nodes: {
|
||||
table: {
|
||||
...nodes.table,
|
||||
render: component('./src/components/markdoc/Table.astro'),
|
||||
},
|
||||
},
|
||||
tags: {
|
||||
ElementSymbol: {
|
||||
render: component('./src/components/content/ElementSymbol.astro'),
|
||||
|
||||
@@ -58,6 +58,8 @@ const symbol = entry?.data.symbol as Symbol | undefined;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.svg {
|
||||
display: inline-flex;
|
||||
|
||||
@@ -1,89 +1,86 @@
|
||||
.trigger {
|
||||
@mixin ml auto;
|
||||
@mixin typo_body;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
gap:var(--ui-spacing-comfortable);
|
||||
gap: var(--size-4);
|
||||
align-items: center;
|
||||
|
||||
padding: var(--ui-spacing-snug) var(--ui-spacing-spacious);
|
||||
padding: var(--size-1) var(--size-3);
|
||||
border: var(--size-px) solid var(--color-border-normal);
|
||||
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--ui-typo-size-md);
|
||||
color: var(--text-color-disabled);
|
||||
color: var(--color-text-disabled);
|
||||
|
||||
background: var(--color-palette-charcoal-gray);
|
||||
background: var(--color-surface-elevated-2);
|
||||
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-text-inverse);
|
||||
color: var(--color-text-inverse);
|
||||
border-color: var(--color-border-strong);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
& .kbd {
|
||||
padding: var(--ui-spacing-hairline) var( --ui-spacing-cozy);
|
||||
border: var(--size-px) solid var(--color-border-normal);
|
||||
border-radius: var(--size-05);
|
||||
@mixin typo_code;
|
||||
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--ui-typo-size-xs);
|
||||
|
||||
background: var(--color-surface-inverse);
|
||||
padding: var(--size-px) var(--size-1);
|
||||
border: var(--size-px) solid var(--color-border-strong);
|
||||
border-radius: var(--size-1);
|
||||
}
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
z-index: var(--z-modal);
|
||||
inset: 0;
|
||||
background: var(--color-overlay-heavy);
|
||||
}
|
||||
|
||||
.palette {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
z-index: calc(var(--z-modal) + 1);
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
width: min(var(--size-128), 90vw);
|
||||
padding: var(--ui-spacing-tight);
|
||||
border: var(--size-05) solid var(--color-primary);
|
||||
width: min(36rem, 90vw);
|
||||
padding: var(--size-1);
|
||||
border: var(--size-1) solid var(--color-primary);
|
||||
|
||||
background: var(--color-surface-inverse);
|
||||
background: var(--color-surface-base);
|
||||
box-shadow:
|
||||
0 0 0 var(--size-px) var(--color-border-strong),
|
||||
var(--size-1) var(--size-1) 0 var(--color-surface-inverse);
|
||||
0 0 0 var(--size-px) var(--color-surface-base),
|
||||
var(--size-4) var(--size-4) 0 var(--color-surface-base);
|
||||
}
|
||||
|
||||
.header {
|
||||
@mixin px var(--ui-spacing-generous);
|
||||
@mixin border-b var(--size-px), solid, var(--color-border-strong);
|
||||
@mixin px var(--size-7);
|
||||
|
||||
display: flex;
|
||||
gap: var(--ui-spacing-comfortable);
|
||||
gap: var(--size-4);
|
||||
align-items: center;
|
||||
border-bottom: var(--size-px) solid var(--color-border-strong);
|
||||
|
||||
& .icon {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--ui-typo-size-lg);
|
||||
font-size: var(--type-1);
|
||||
font-weight: 900;
|
||||
color: var(--color-text-disabled);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
& .input {
|
||||
@mixin py var(--ui-spacing-generous);
|
||||
@mixin py var(--size-5);
|
||||
|
||||
flex: 1;
|
||||
|
||||
border: none;
|
||||
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--ui-typo-size-lg);
|
||||
color: var(--color-text-inverse);
|
||||
font-size: var(--type-1);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background: transparent;
|
||||
outline: none;
|
||||
@@ -94,51 +91,54 @@
|
||||
}
|
||||
|
||||
& .esc {
|
||||
@mixin px var(--size-2);
|
||||
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--typo-size-xs);
|
||||
font-size: var(--type--2);
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
overflow-y: auto;
|
||||
max-height: var(--size-96);
|
||||
max-height: 22.5rem;
|
||||
|
||||
& .groupLabel {
|
||||
padding: var(--ui-spacing-relaxed) var(--ui-spacing-generous) var(--ui-spacing-snug);
|
||||
padding: var(--size-5) var(--size-7) var(--size-2);
|
||||
|
||||
font-size: var(--ui-typo-size-2xs);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--type--3);
|
||||
font-weight: 700;
|
||||
color: var(--color-text-disabled);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--spacing-loosest);
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
& .result {
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
gap: var(--ui-spacing-relaxed);
|
||||
gap: var(--size-5);
|
||||
align-items: center;
|
||||
|
||||
padding: var(--ui-spacing-comfortable) var(--ui-spacing-generous);
|
||||
padding: var(--size-4) var(--size-7);
|
||||
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--ui-typo-size-md);
|
||||
color: var(--color-text-inverse);
|
||||
font-size: var(--type-0);
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--typo-spacing-relaxed);
|
||||
letter-spacing: 0.025em;
|
||||
|
||||
transition: background 0.8s;
|
||||
transition: background 0.08s;
|
||||
|
||||
& .type {
|
||||
min-width: var(--size-16);
|
||||
min-width: 4rem;
|
||||
|
||||
font-size: var(--ui-typo-size-2xs);
|
||||
font-size: var(--type--3);
|
||||
color: var(--color-text-disabled);
|
||||
text-align: right;
|
||||
letter-spacing: var(--typo-spacing-looser);
|
||||
letter-spacing: 0.125em;
|
||||
}
|
||||
|
||||
& .label {
|
||||
@@ -146,14 +146,14 @@
|
||||
}
|
||||
|
||||
& .path {
|
||||
font-size: var(--ui-typo-size-2xs);
|
||||
font-size: var(--type--3);
|
||||
color: var(--color-text-disabled);
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
& .arrow {
|
||||
font-size: var(--ui-typo-size-xs);
|
||||
font-size: var(--type--2);
|
||||
color: var(--color-text-disabled);
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s;
|
||||
@@ -161,7 +161,7 @@
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
background: var(--color-border-strong);
|
||||
background: var(--color-surface-elevated-3);
|
||||
|
||||
& .arrow {
|
||||
opacity: 1;
|
||||
@@ -171,41 +171,41 @@
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: var(--ui-spacing-luxurious) var(--ui-spacing-generous);
|
||||
padding: var(--size-8) var(--size-7);
|
||||
|
||||
font-size: var(--ui-typo-size-sm);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--type--2);
|
||||
color: var(--color-text-disabled);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--typo-spacing-comfortable);
|
||||
letter-spacing: 0.125em;
|
||||
}
|
||||
|
||||
.footer {
|
||||
@mixin border-t var(--size-px), solid, var(--color-border-strong);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
padding: var(--ui-spacing-comfortable) var(--ui-spacing-generous);
|
||||
padding: var(--size-4) var(--size-7);
|
||||
border-top: var(--size-px) solid var(--color-border-strong);
|
||||
|
||||
font-size: var(--ui-typo-size-xs);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--type--3);
|
||||
color: var(--color-text-disabled);
|
||||
|
||||
& .group {
|
||||
display: flex;
|
||||
gap: var(--ui-spacing-relaxed);
|
||||
gap: var(--size-5);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
& kbd {
|
||||
@mixin mx var(--ui-spacing-tight);
|
||||
|
||||
padding: var(--ui-spacing-tight) var(--ui-spacing-snug);
|
||||
margin: 0 var(--size-1);
|
||||
padding: var(--size-1) var(--size-2);
|
||||
border: var(--size-px) solid var(--color-border-normal);
|
||||
border-radius: var(--size-05);
|
||||
border-radius: var(--size-1);
|
||||
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--ui-typo-size-2xs);
|
||||
font-size: var(--type--3);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import CommandPalette from "./CMDPalette"
|
||||
---
|
||||
|
||||
<header class="site-header">
|
||||
<header class="site-header ui dark">
|
||||
<div class="inner">
|
||||
<a href="/" class="link">
|
||||
<span class="site-logo">◬</span>
|
||||
@@ -19,7 +19,7 @@ import CommandPalette from "./CMDPalette"
|
||||
|
||||
<style>
|
||||
.site-header {
|
||||
@mixin py var(--ui-masthead-paddingY);
|
||||
@mixin py var(--size-5);
|
||||
|
||||
position: sticky;
|
||||
z-index: 9;
|
||||
@@ -27,9 +27,9 @@ import CommandPalette from "./CMDPalette"
|
||||
|
||||
width: 100%;
|
||||
|
||||
color: var(--color-text-inverse);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background-color: var(--color-surface-inverse);
|
||||
background-color: var(--color-surface-base);
|
||||
}
|
||||
|
||||
.inner {
|
||||
@@ -37,15 +37,17 @@ import CommandPalette from "./CMDPalette"
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--ui-spacing-cozy);
|
||||
gap: var(--layout-gutter);
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
font-size: var(--ui-masthead-font-size);
|
||||
line-height: var(--ui-masthead-line-height);
|
||||
font-size: var(--type-1);
|
||||
line-height: var(--leading-1);
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
@mixin typo_body-alt;
|
||||
|
||||
display: inline-block;
|
||||
font-family: var(--font-mono);
|
||||
animation:
|
||||
|
||||
@@ -7,7 +7,7 @@ interface Props {
|
||||
const { tags, updateDate } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="meta">
|
||||
<div class="meta ui">
|
||||
<div class="section">
|
||||
<span class="label"> Author </span>
|
||||
<span class="author item">Dave Damage</span>
|
||||
@@ -36,43 +36,47 @@ const { tags, updateDate } = Astro.props;
|
||||
<style>
|
||||
.meta {
|
||||
@mixin layout-wrapper;
|
||||
flex-wrap: wrap;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--size-8);
|
||||
align-items: baseline;
|
||||
gap: var(--spacing-relaxed);
|
||||
}
|
||||
|
||||
.section {
|
||||
min-width: 12ch;
|
||||
@mixin py var(--spacing-snug);
|
||||
@mixin py var(--size-4);
|
||||
|
||||
flex: 1 0 auto;
|
||||
min-width: 12ch;
|
||||
}
|
||||
|
||||
.label {
|
||||
@mixin mb var(--spacing-tight);
|
||||
@mixin pb var(--spacing-tight);
|
||||
@mixin mb var(--size-2);
|
||||
@mixin pb var(--size-2);
|
||||
@mixin border-b 2px, solid, var(--color-border-strong);
|
||||
@mixin typo_meta-label;
|
||||
|
||||
display: block;
|
||||
font-size: var(--typo-size-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--typo-spacing-comfortable);
|
||||
}
|
||||
|
||||
.item {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 700;
|
||||
color: var(--color-text-secondary);
|
||||
@mixin typo_meta-data;
|
||||
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.taglist {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-tight);
|
||||
gap: var(--size-2);
|
||||
}
|
||||
|
||||
.tag {
|
||||
@mixin py var(--spacing-tight);
|
||||
@mixin px var(--spacing-snug);
|
||||
border: 4px solid var(--color-palette-charcoal-gray);
|
||||
letter-spacing: var(--typo-spacing-relaxed);
|
||||
background: var(--color-palette-charcoal-gray);
|
||||
color: var(--color-palette-off-white);
|
||||
@mixin py var(--size-1);
|
||||
@mixin px var(--size-3);
|
||||
|
||||
border: 4px solid var(--color-surface-inverse);
|
||||
color: var(--color-text-inverse);
|
||||
background: var(--color-surface-inverse);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,7 +9,7 @@ interface Props {
|
||||
const { breadcrumbs, publicationDate } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="overline">
|
||||
<div class="overline ui dark">
|
||||
<div class="wrapper">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumbs">
|
||||
@@ -36,33 +36,34 @@ const { breadcrumbs, publicationDate } = Astro.props;
|
||||
|
||||
<style>
|
||||
.overline {
|
||||
background-color: var(--color-surface-inverse);
|
||||
@mixin typo_code;
|
||||
|
||||
color: var(--color-text-secondary);
|
||||
background-color: var(--color-surface-elevated-2);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
@mixin layout-wrapper;
|
||||
padding-block: var(--spacing-snug);
|
||||
@mixin py var(--size-4);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: var(--typo-size-responsive);
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--typo-size-sm);
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--color-text-inverse);
|
||||
transition: color 0.5s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-tertiary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.publicationdate {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--typo-size-xs);
|
||||
font-weight: var(--typo-weight-bold);
|
||||
color: var(--color-text-inverse);
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,7 +9,7 @@ const { title, subtitle } = Astro.props;
|
||||
console.log(subtitle);
|
||||
---
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="wrapper content">
|
||||
<h1 class="title">{title}</h1>
|
||||
{subtitle && <p class="subtitle">{subtitle}</p>}
|
||||
</div>
|
||||
@@ -17,21 +17,19 @@ console.log(subtitle);
|
||||
<style>
|
||||
.wrapper {
|
||||
@mixin layout-wrapper;
|
||||
@mixin py var(--spacing-relaxed);
|
||||
@mixin py var(--space-7);
|
||||
}
|
||||
|
||||
.title {
|
||||
@mixin heading-1;
|
||||
@mixin typo_display-1;
|
||||
@mixin my var(--space-2);
|
||||
}
|
||||
|
||||
|
||||
.subtitle {
|
||||
@mixin mt var(--spacing-snug);
|
||||
@mixin mt var(--size-4);
|
||||
@mixin typo_subtitle;
|
||||
|
||||
font-family: var(--font-header);
|
||||
font-size: var(--typo-size-lg);
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.075em;
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
</style>
|
||||
|
||||
16
src/components/markdoc/Table.astro
Normal file
16
src/components/markdoc/Table.astro
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
---
|
||||
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<slot />
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.table-wrap {
|
||||
scrollbar-color: var(--color-border-normal) transparent;
|
||||
scrollbar-width: thin;
|
||||
overflow-x: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -50,10 +50,7 @@ seo:
|
||||
- Failure
|
||||
---
|
||||
- [Body](/the-crucible/references/elements/body)
|
||||
- {% ElementSymbol
|
||||
element="body"
|
||||
size="var(--typo-size-2xl)"
|
||||
color="inherit" /%}
|
||||
- {% ElementSymbol element="body" size="var(--type-3)" color="inherit" /%}
|
||||
- Salt
|
||||
- Structure; the form
|
||||
- »It endures«
|
||||
@@ -61,10 +58,7 @@ seo:
|
||||
- Calcifies everything
|
||||
---
|
||||
- [Soul](/the-crucible/references/elements/soul)
|
||||
- {% ElementSymbol
|
||||
element="soul"
|
||||
size="var(--typo-size-2xl)"
|
||||
color="inherit" /%}
|
||||
- {% ElementSymbol element="soul" size="var(--type-3)" color="inherit" /%}
|
||||
- Sulfur
|
||||
- Agency; the Spark
|
||||
- »I burn«
|
||||
@@ -72,10 +66,7 @@ seo:
|
||||
- Consumes everything
|
||||
---
|
||||
- [Spirit](/the-crucible/references/elements/spirit)
|
||||
- {% ElementSymbol
|
||||
element="spirit"
|
||||
size="var(--typo-size-2xl)"
|
||||
color="inherit" /%}
|
||||
- {% ElementSymbol element="spirit" size="var(--type-3)" color="inherit" /%}
|
||||
- Mercury
|
||||
- Transformation; the flux
|
||||
- »Nothing stays«
|
||||
@@ -100,43 +91,31 @@ seo:
|
||||
- Image
|
||||
---
|
||||
- [Aether](/the-crucible/references/elements/aether)
|
||||
- {% ElementSymbol
|
||||
element="aether"
|
||||
size="var(--typo-size-2xl)"
|
||||
color="inherit" /%}
|
||||
- {% ElementSymbol element="aether" size="var(--type-3)" color="inherit" /%}
|
||||
- Quintessence
|
||||
- Transcendent, ordered, numinous
|
||||
- The Stars
|
||||
---
|
||||
- [Air](/the-crucible/references/elements/air)
|
||||
- {% ElementSymbol element="air" size="var(--typo-size-2xl)" color="inherit" /%}
|
||||
- {% ElementSymbol element="air" size="var(--type-3)" color="inherit" /%}
|
||||
- Hot & Wet
|
||||
- Invisible, expansive, permeating
|
||||
- The Storm
|
||||
---
|
||||
- [Earth](/the-crucible/references/elements/earth)
|
||||
- {% ElementSymbol
|
||||
element="earth"
|
||||
size="var(--typo-size-2xl)"
|
||||
color="inherit" /%}
|
||||
- {% ElementSymbol element="earth" size="var(--type-3)" color="inherit" /%}
|
||||
- Cold & Dry
|
||||
- Heavy, material, foundational
|
||||
- The Mountain
|
||||
---
|
||||
- [Fire](/the-crucible/references/elements/fire)
|
||||
- {% ElementSymbol
|
||||
element="fire"
|
||||
size="var(--typo-size-2xl)"
|
||||
color="inherit" /%}
|
||||
- {% ElementSymbol element="fire" size="var(--type-3)" color="inherit" /%}
|
||||
- Hot & Dry
|
||||
- Bright, consuming, refining
|
||||
- The Volcano
|
||||
---
|
||||
- [Water](/the-crucible/references/elements/water)
|
||||
- {% ElementSymbol
|
||||
element="water"
|
||||
size="var(--typo-size-2xl)"
|
||||
color="inherit" /%}
|
||||
- {% ElementSymbol element="water" size="var(--type-3)" color="inherit" /%}
|
||||
- Cold & Wet
|
||||
- Flowing, deep, dissolving
|
||||
- The River
|
||||
@@ -231,6 +210,8 @@ seo:
|
||||
- No – the product is neither ingredient
|
||||
{% /table %}
|
||||
|
||||
---
|
||||
|
||||
## The Seven Aspects
|
||||
|
||||
- Provide additional specificity
|
||||
@@ -245,61 +226,43 @@ seo:
|
||||
- Association
|
||||
---
|
||||
- *Entities*
|
||||
- {% ElementSymbol
|
||||
element="entities"
|
||||
size="var(--typo-size-2xl)"
|
||||
color="inherit" /%}
|
||||
- {% ElementSymbol element="entities" size="var(--type-3)" color="inherit" /%}
|
||||
- Silver
|
||||
- Moon
|
||||
- Living beings; flesh, beasts, plants, spirits
|
||||
---
|
||||
- *Matter*
|
||||
- {% ElementSymbol
|
||||
element="matter"
|
||||
size="var(--typo-size-2xl)"
|
||||
color="inherit" /%}
|
||||
- {% ElementSymbol element="matter" size="var(--type-3)" color="inherit" /%}
|
||||
- Lead
|
||||
- Saturn
|
||||
- Physical substances; materials, terrain, stone, foundations
|
||||
---
|
||||
- *Mind*
|
||||
- {% ElementSymbol
|
||||
element="mind"
|
||||
size="var(--typo-size-2xl)"
|
||||
color="inherit" /%}
|
||||
- {% ElementSymbol element="mind" size="var(--type-3)" color="inherit" /%}
|
||||
- Quicksilver
|
||||
- Mercury
|
||||
- Thought, consciousness; intellect, emotion, skills
|
||||
---
|
||||
- *Society*
|
||||
- {% ElementSymbol
|
||||
element="society"
|
||||
size="var(--typo-size-2xl)"
|
||||
color="inherit" /%}
|
||||
- {% ElementSymbol element="society" size="var(--type-3)" color="inherit" /%}
|
||||
- Tin
|
||||
- Jupiter
|
||||
- Collective organisation; governance, law, institutions
|
||||
---
|
||||
- *Art*
|
||||
- {% ElementSymbol element="art" size="var(--typo-size-2xl)" color="inherit" /%}
|
||||
- {% ElementSymbol element="art" size="var(--type-3)" color="inherit" /%}
|
||||
- Copper
|
||||
- Venus
|
||||
- Creation, expression; artistry, rituals, craft
|
||||
---
|
||||
- *Mysteries*
|
||||
- {% ElementSymbol
|
||||
element="mysteries"
|
||||
size="var(--typo-size-2xl)"
|
||||
color="inherit" /%}
|
||||
- {% ElementSymbol element="mysteries" size="var(--type-3)" color="inherit" /%}
|
||||
- Gold
|
||||
- Sun
|
||||
- Hidden, occult; magic, destiny, secrets, *residua*
|
||||
---
|
||||
- *Forces*
|
||||
- {% ElementSymbol
|
||||
element="forces"
|
||||
size="var(--typo-size-2xl)"
|
||||
color="inherit" /%}
|
||||
- {% ElementSymbol element="forces" size="var(--type-3)" color="inherit" /%}
|
||||
- Iron
|
||||
- Mars
|
||||
- Energies, natural laws; power, conflict, dynamics
|
||||
|
||||
@@ -13,21 +13,20 @@ const elementCompontent = {
|
||||
}),
|
||||
size: fields.select({
|
||||
label: 'Size',
|
||||
defaultValue: 'var(--typo-size-md)',
|
||||
defaultValue: 'var(--type-0)',
|
||||
options: [
|
||||
{ label: '2XS', value: 'var(--typo-size-2xs)' },
|
||||
{ label: 'XS', value: 'var(--typo-size-xs)' },
|
||||
{ label: 'SM', value: 'var(--typo-size-sm)' },
|
||||
{ label: 'MD', value: 'var(--typo-size-md)' },
|
||||
{ label: 'LG', value: 'var(--typo-size-lg)' },
|
||||
{ label: 'XL', value: 'var(--typo-size-xl)' },
|
||||
{ label: '2XL', value: 'var(--typo-size-2xl)' },
|
||||
{ label: '3XL', value: 'var(--typo-size-3xl)' },
|
||||
{ label: '4XL', value: 'var(--typo-size-4xl)' },
|
||||
{ label: '5XL', value: 'var(--typo-size-5xl)' },
|
||||
{ label: '6XL', value: 'var(--typo-size-6xl)' },
|
||||
{ label: '7XL', value: 'var(--typo-size-7xl)' },
|
||||
{ label: '8XL', value: 'var(--typo-size-8xl)' },
|
||||
{ label: '2XS', value: 'var(--type--3)' },
|
||||
{ label: 'XS', value: 'var(--type--2)' },
|
||||
{ label: 'SM', value: 'var(--type--1)' },
|
||||
{ label: 'MD', value: 'var(--type-0)' },
|
||||
{ label: 'LG', value: 'var(--type-1)' },
|
||||
{ label: 'XL', value: 'var(--type-2)' },
|
||||
{ label: '2XL', value: 'var(--type-3)' },
|
||||
{ label: '3XL', value: 'var(--type-4)' },
|
||||
{ label: '4XL', value: 'var(--type-5)' },
|
||||
{ label: '5XL', value: 'var(--type-6)' },
|
||||
{ label: '6XL', value: 'var(--type-7)' },
|
||||
{ label: '7XL', value: 'var(--type-8)' },
|
||||
],
|
||||
}),
|
||||
color: fields.select({
|
||||
|
||||
@@ -50,7 +50,7 @@ const headerCover =
|
||||
subtitle={subtitle}
|
||||
/>
|
||||
<div class="frame">
|
||||
<div class="body content">
|
||||
<div class="body content prose">
|
||||
<slot name="before-content" />
|
||||
<Content />
|
||||
<slot name="after-content" />
|
||||
@@ -69,12 +69,11 @@ const headerCover =
|
||||
.frame {
|
||||
@mixin layout-wrapper;
|
||||
|
||||
font-size: var(--typo-size-responsive);
|
||||
|
||||
@media (--bp-desktop) {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: var(--ui-content-width) var(--ui-margin-width);
|
||||
grid-template-columns: var(--layout-content-width) var(--layout-margin-width);
|
||||
gap: var(--layout-gutter);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
:root {
|
||||
/* === Palette === */
|
||||
|
||||
/* == Neutrals == */
|
||||
--color-palette-black-ink: oklch(21.9% 0.006 285.911deg);
|
||||
--color-palette-charcoal: oklch(26.6% 0.008 240.166deg);
|
||||
@@ -25,27 +23,12 @@
|
||||
--color-palette-royal-blue: oklch(46.1% 0.07 245.64deg);
|
||||
--color-palette-electric-blue: oklch(90.8% 0.128 188.419deg);
|
||||
|
||||
/* == System Accents (reserve) == */
|
||||
--color-palette-warhammer: oklch(
|
||||
43.2% 0.169 7.14deg
|
||||
); /* Crimson — Empire blood red */
|
||||
--color-palette-mordheim: oklch(
|
||||
82.7% 0.047 76.752deg
|
||||
); /* Tan — ruined city stone */
|
||||
--color-palette-unknown-armies: oklch(
|
||||
49.6% 0.181 351.176deg
|
||||
); /* Fuchsia — occult magick */
|
||||
--color-palette-sla-industries: oklch(
|
||||
90.8% 0.128 188.419deg
|
||||
); /* Electric blue — corporate neon */
|
||||
|
||||
/* === Semantic Colors === */
|
||||
|
||||
/* == Primary / Secondary / Tertiary == */
|
||||
--color-primary: var(--color-palette-lava);
|
||||
--color-primary-surface: oklch(from var(--color-primary) calc(l + 0.1) c h);
|
||||
--color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h);
|
||||
|
||||
--color-secondary: var(--color-palette-lime-green);
|
||||
--color-secondary-surface: oklch(
|
||||
from var(--color-secondary) calc(l + 0.1) c h
|
||||
@@ -53,7 +36,6 @@
|
||||
--color-secondary-emphasis: oklch(
|
||||
from var(--color-secondary) calc(l - 0.15) c h
|
||||
);
|
||||
|
||||
--color-tertiary: var(--color-palette-bright-canary);
|
||||
--color-tertiary-surface: oklch(from var(--color-tertiary) calc(l + 0.1) c h);
|
||||
--color-tertiary-emphasis: oklch(
|
||||
@@ -110,3 +92,21 @@
|
||||
--color-skeleton-base: var(--color-surface-elevated-2);
|
||||
--color-skeleton-shimmer: var(--color-surface-elevated-1);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-text-primary: var(--color-palette-ice-blue);
|
||||
--color-text-secondary: var(--color-palette-pale-gray);
|
||||
--color-text-tertiary: var(--color-palette-light-silver);
|
||||
--color-text-quarternary: var(--color-palette-silver);
|
||||
--color-text-inverse: var(--color-palette-black-ink);
|
||||
--color-text-disabled: var(--color-palette-cloud-gray);
|
||||
--color-surface-base: var(--color-palette-black-ink);
|
||||
--color-surface-elevated-1: var(--color-palette-charcoal);
|
||||
--color-surface-elevated-2: var(--color-palette-charcoal-gray);
|
||||
--color-surface-elevated-3: var(--color-palette-carbon);
|
||||
--color-surface-elevated-4: var(--color-palette-cloud-gray);
|
||||
--color-surface-inverse: var(--color-palette-ice-blue);
|
||||
--color-border-subtle: var(--color-palette-charcoal-gray);
|
||||
--color-border-normal: var(--color-palette-carbon);
|
||||
--color-border-strong: var(--color-palette-silver);
|
||||
}
|
||||
|
||||
@@ -1,651 +0,0 @@
|
||||
.content {
|
||||
@mixin responsive-wrapper;
|
||||
font-family: var(--font-body);
|
||||
/* === Headings === */
|
||||
& h1 {
|
||||
margin-block: var(--el-h1-vspace-top) var(--el-h1-vspace-bottom);
|
||||
padding-bottom: var(--spacing-snug);
|
||||
border-bottom: var(--size-4) solid var(--el-h1-color);
|
||||
|
||||
font-family: var(--el-h1-font-family), serif;
|
||||
font-size: var(--el-h1-font-size);
|
||||
font-weight: 400;
|
||||
line-height: var(--typo-leading-tight);
|
||||
color: var(--el-h1-color);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.0137em;
|
||||
|
||||
& + p,
|
||||
& + ul,
|
||||
& + ol,
|
||||
& + blockquote {
|
||||
margin-block: calc(1em * var(--typo-leading-normal) * var(--vspace-tight))
|
||||
calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
|
||||
}
|
||||
|
||||
& + h2 {
|
||||
margin-block: calc(1em * 1.125 * var(--vspace-snug))
|
||||
calc(1em * 1.125 * var(--vspace-normal));
|
||||
}
|
||||
}
|
||||
|
||||
& h2 {
|
||||
margin-block: var(--el-h2-vspace-top) var(--el-h2-vspace-bottom);
|
||||
padding-left: var(--spacing-snug);
|
||||
border-left: var(--size-4) solid var(--el-h2-color);
|
||||
|
||||
font-family: var(--el-h2-font-family), serif;
|
||||
font-size: var(--el-h2-font-size);
|
||||
font-weight: 900;
|
||||
line-height: 1.1765;
|
||||
color: var(--el-h2-color);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.0096em;
|
||||
|
||||
& + p,
|
||||
& + ul,
|
||||
& + ol,
|
||||
& + blockquote {
|
||||
margin-block: calc(1em * var(--typo-leading-normal) * var(--vspace-tight))
|
||||
calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
|
||||
}
|
||||
|
||||
& + h3 {
|
||||
margin-block: calc(1em * 1.125 * var(--vspace-compressed))
|
||||
calc(1em * 1.125 * var(--vspace-snug));
|
||||
}
|
||||
}
|
||||
|
||||
& h3 {
|
||||
margin-block: var(--el-h3-vspace-top) var(--el-h3-vspace-bottom);
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
|
||||
font-family: var(--el-h3-font-family), serif;
|
||||
font-size: var(--el-h3-font-size);
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
color: var(--color-surface-base);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.004em;
|
||||
|
||||
background: var(--el-h3-color);
|
||||
}
|
||||
|
||||
& h4 {
|
||||
margin-block: var(--el-h4-vspace-top) var(--el-h4-vspace-bottom);
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
border-top: var(--size-3) solid var(--el-h4-color);
|
||||
border-bottom: var(--size-3) solid var(--el-h4-color);
|
||||
|
||||
font-family: var(--el-h4-font-family), serif;
|
||||
font-size: var(--el-h4-font-size);
|
||||
font-weight: 800;
|
||||
line-height: 1.125;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.0025em;
|
||||
}
|
||||
|
||||
& h5 {
|
||||
margin-block: var(--el-h5-vspace-top) var(--el-h5-vspace-bottom);
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
|
||||
font-family: var(--el-h5-font-family), serif;
|
||||
font-size: var(--el-h5-font-size);
|
||||
font-weight: 800;
|
||||
line-height: 1.28;
|
||||
color: var(--el-h5-color);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
padding-right: var(--spacing-tight);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '⭑';
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
& h6 {
|
||||
margin-block: var(--el-h6-vspace-top) var(--el-h6-vspace-bottom);
|
||||
|
||||
font-family: var(--el-h6-font-family), serif;
|
||||
font-size: var(--el-h6-font-size);
|
||||
font-weight: 900;
|
||||
line-height: 1.4;
|
||||
color: var(--el-h6-color);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.035em;
|
||||
}
|
||||
|
||||
& h3,
|
||||
& h4,
|
||||
& h5,
|
||||
& h6 {
|
||||
& + p,
|
||||
& + ul,
|
||||
& + ol,
|
||||
& + blockquote {
|
||||
margin-block: calc(
|
||||
1em * var(--typo-leading-normal) * var(--vspace-compressed)
|
||||
)
|
||||
calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
|
||||
}
|
||||
}
|
||||
|
||||
/* === Body Text === */
|
||||
|
||||
& p {
|
||||
margin-block: var(--el-p-vspace-top) var(--el-p-vspace-bottom);
|
||||
|
||||
font-family: var(--el-p-font-family), sans-serif;
|
||||
font-size: var(--el-p-font-size);
|
||||
font-weight: 400;
|
||||
line-height: var(--typo-leading-normal);
|
||||
color: var(--el-p-color);
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
& blockquote {
|
||||
margin-block: var(--el-p-vspace-top) var(--el-p-vspace-bottom);
|
||||
padding: var(--spacing-snug) 0 var(--spacing-snug)
|
||||
var(--spacing-comfortable);
|
||||
border-left: var(--size-4) solid var(--color-text-tertiary);
|
||||
|
||||
font-family: var(--el-blockquote-font-family), serif;
|
||||
font-size: var(--el-blockquote-font-size);
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
line-height: var(--typo-leading-comfortable);
|
||||
color: var(--el-blockquote-color);
|
||||
}
|
||||
|
||||
/* === Code === */
|
||||
|
||||
pre {
|
||||
margin-block: var(--el-pre-vspace-top) var(--el-pre-vspace-bottom);
|
||||
padding: var(--spacing-comfortable);
|
||||
|
||||
font-family: var(--el-pre-font-family), monospace;
|
||||
font-size: var(--el-pre-font-size);
|
||||
line-height: 1.5385;
|
||||
color: var(--el-pre-color);
|
||||
|
||||
background: var(--el-pre-background);
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0.1em 0.3em;
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
color: var(--color-text-inverse);
|
||||
|
||||
background: var(--color-surface-inverse);
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0.1em 0.3em;
|
||||
border: 1px solid var(--color-text-primary);
|
||||
border-radius: 2px;
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-xs);
|
||||
color: var(--color-text-inverse);
|
||||
text-transform: uppercase;
|
||||
|
||||
background: var(--color-surface-inverse);
|
||||
}
|
||||
|
||||
samp {
|
||||
padding: 0.1em 0.3em;
|
||||
border-left: var(--size-1) solid var(--color-text-tertiary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background: var(--color-surface-elevated-2);
|
||||
}
|
||||
|
||||
var {
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* === Lists === */
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-block: var(--el-list-vspace-top) var(--el-list-vspace-bottom);
|
||||
font-size: var(--el-list-font-size);
|
||||
line-height: var(--typo-leading-normal);
|
||||
color: var(--el-list-color);
|
||||
}
|
||||
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ul,
|
||||
ol ol {
|
||||
margin-block: var(--el-list-nested-vspace-top)
|
||||
var(--el-list-nested-vspace-bottom);
|
||||
}
|
||||
|
||||
li {
|
||||
margin-block: var(--el-li-vspace-top) var(--el-li-vspace-bottom);
|
||||
|
||||
li {
|
||||
margin-block: var(--el-li-nested-vspace-top)
|
||||
var(--el-li-nested-vspace-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: var(--spacing-cozy);
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
padding-left: var(--spacing-cozy);
|
||||
|
||||
&::marker {
|
||||
content: '⎊';
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: var(--spacing-cozy);
|
||||
}
|
||||
|
||||
ul li::marker {
|
||||
content: '⋊';
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ul,
|
||||
ol ol {
|
||||
padding-left: var(--spacing-cozy);
|
||||
}
|
||||
|
||||
ul ul li::marker,
|
||||
ol ul li::marker {
|
||||
content: '◆';
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
ul ul ul,
|
||||
ul ul ol,
|
||||
ul ol ul,
|
||||
ul ol ol,
|
||||
ol ul ul,
|
||||
ol ul ol,
|
||||
ol ol ul,
|
||||
ol ol ol {
|
||||
padding-left: var(--spacing-cozy);
|
||||
}
|
||||
|
||||
ul ul ul li::marker,
|
||||
ul ol ul li::marker,
|
||||
ol ul ul li::marker,
|
||||
ol ol ul li::marker {
|
||||
content: '⯀';
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: ol-l1;
|
||||
contain: style;
|
||||
padding-left: var(--spacing-cozy);
|
||||
list-style: none;
|
||||
|
||||
& > li {
|
||||
counter-increment: ol-l1;
|
||||
margin-left: 1.5em;
|
||||
padding-left: var(--spacing-cozy);
|
||||
|
||||
&::marker {
|
||||
content: counter(ol-l1, decimal-leading-zero) '.)';
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol > li > ol {
|
||||
counter-reset: ol-l2;
|
||||
padding-left: var(--spacing-cozy);
|
||||
|
||||
& > li {
|
||||
counter-increment: ol-l2;
|
||||
margin-left: 0.825em;
|
||||
|
||||
&::marker {
|
||||
content: counter(ol-l2, lower-alpha) '.)';
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol > li > ul {
|
||||
padding-left: var(--spacing-cozy);
|
||||
}
|
||||
|
||||
ol > li > ol > li > ol,
|
||||
ol > li > ul > li > ol {
|
||||
counter-reset: ol-l3;
|
||||
margin-left: 0;
|
||||
padding-left: var(--spacing-cozy);
|
||||
|
||||
& > li {
|
||||
counter-increment: ol-l3;
|
||||
|
||||
&::marker {
|
||||
content: counter(ol-l3, upper-roman) '.)';
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol > li > ol > li > ul,
|
||||
ol > li > ul > li > ul {
|
||||
padding-left: var(--spacing-cozy);
|
||||
}
|
||||
|
||||
ol > li > ol > li > ol > li > ol,
|
||||
ol > li > ol > li > ul > li > ol,
|
||||
ol > li > ul > li > ol > li > ol,
|
||||
ol > li > ul > li > ul > li > ol {
|
||||
counter-reset: ol-l4;
|
||||
margin-left: 0;
|
||||
padding-left: var(--spacing-cozy);
|
||||
|
||||
& > li {
|
||||
counter-increment: ol-l4;
|
||||
|
||||
&::marker {
|
||||
content: counter(ol-l4, lower-greek) '.)';
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol > li > ol > li > ol > li > ul,
|
||||
ol > li > ol > li > ul > li > ul,
|
||||
ol > li > ul > li > ol > li > ul,
|
||||
ol > li > ul > li > ul > li > ul {
|
||||
padding-left: var(--spacing-cozy);
|
||||
}
|
||||
|
||||
ol li,
|
||||
ul li {
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
.list-inside ol li,
|
||||
.list-inside ul li {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/* === Tables === */
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
|
||||
width: 100%;
|
||||
margin-block: var(--spacing-tight) var(--spacing-tight);
|
||||
border: var(--size-2) solid var(--color-text-primary);
|
||||
|
||||
font-size: var(--typo-size-md);
|
||||
line-height: 1.2;
|
||||
|
||||
& thead th,
|
||||
& th {
|
||||
padding: 0 var(--spacing-snug) var(--spacing-snug);
|
||||
|
||||
font-family: var(--el-th-font-family), serif;
|
||||
font-size: var(--typo-size-sm);
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
color: var(--el-th-color);
|
||||
text-transform: uppercase;
|
||||
|
||||
background: var(--el-th-background);
|
||||
}
|
||||
|
||||
& tbody td,
|
||||
& td {
|
||||
padding: var(--spacing-snug);
|
||||
border: var(--size-1) solid var(--color-text-secondary);
|
||||
|
||||
font-family: var(--el-td-font-family), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
line-height: 1.2;
|
||||
color: var(--el-td-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* === DL / DT / DD === */
|
||||
|
||||
dl {
|
||||
margin-block: calc(1em * var(--typo-leading-normal) * var(--vspace-snug))
|
||||
calc(1em * var(--typo-leading-normal) * var(--vspace-compressed));
|
||||
font-size: var(--typo-size-md);
|
||||
line-height: var(--typo-leading-normal);
|
||||
}
|
||||
|
||||
dt {
|
||||
margin-block: calc(1em * 1.4 * var(--vspace-snug))
|
||||
calc(1em * 1.4 * var(--vspace-compressed));
|
||||
padding: var(--spacing-snug);
|
||||
|
||||
font-family: var(--el-dt-font-family), serif;
|
||||
font-size: var(--typo-size-lg);
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
color: var(--el-dt-color);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.035em;
|
||||
|
||||
background: var(--el-dt-background);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-block: calc(
|
||||
1em * var(--typo-leading-normal) * var(--vspace-compressed)
|
||||
)
|
||||
calc(1em * var(--typo-leading-normal) * var(--vspace-tight));
|
||||
padding: 0 var(--spacing-comfortable);
|
||||
|
||||
font-family: var(--el-dd-font-family), sans-serif;
|
||||
font-size: var(--typo-size-md);
|
||||
line-height: var(--typo-leading-normal);
|
||||
color: var(--el-dd-color);
|
||||
}
|
||||
|
||||
/* === HR === */
|
||||
|
||||
hr {
|
||||
position: relative;
|
||||
|
||||
overflow: visible;
|
||||
|
||||
height: var(--size-3);
|
||||
margin-block: var(--spacing-relaxed) 0;
|
||||
border: none;
|
||||
|
||||
background: var(--hr-color);
|
||||
|
||||
&::after {
|
||||
content: '▼';
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
padding: 0 0.25em;
|
||||
|
||||
font-size: var(--typo-size-4xl);
|
||||
line-height: var(--typo-leading-compressed);
|
||||
color: var(--hr-symbol-color);
|
||||
|
||||
background: var(--hr-symbol-background);
|
||||
}
|
||||
}
|
||||
|
||||
/* === Inline Elements === */
|
||||
|
||||
em,
|
||||
i {
|
||||
font-style: italic;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
|
||||
padding: 0.1em 0.2em;
|
||||
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: var(--size-1);
|
||||
text-underline-offset: 2px;
|
||||
|
||||
transition:
|
||||
color 0.5s ease-in-out,
|
||||
background 0.5s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: var(--color-surface-base);
|
||||
text-decoration: none;
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
&:visited,
|
||||
&:active {
|
||||
color: var(--color-primary-emphasis);
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: var(--typo-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 0.5625em;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
del,
|
||||
s {
|
||||
color: var(--color-text-tertiary);
|
||||
text-decoration: line-through;
|
||||
text-decoration-thickness: var(--size-1);
|
||||
}
|
||||
|
||||
ins {
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--color-primary);
|
||||
text-decoration-thickness: var(--size-1);
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
abbr {
|
||||
cursor: help;
|
||||
text-decoration: underline dotted;
|
||||
text-underline-offset: var(--size-1);
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
cite {
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
q {
|
||||
font-style: normal;
|
||||
|
||||
&::before {
|
||||
content: '»';
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '«';
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* === Article Lead Paragraph === */
|
||||
|
||||
& article {
|
||||
& > p:first-of-type {
|
||||
font-size: var(--typo-size-xl);
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.022em;
|
||||
|
||||
&::first-letter {
|
||||
float: left;
|
||||
|
||||
margin: 0.1em 0.1em 0 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: var(--font-display), serif;
|
||||
font-size: 4em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
color: var(--color-primary);
|
||||
|
||||
@supports (initial-letter: 4) {
|
||||
float: none;
|
||||
|
||||
margin: 0;
|
||||
padding-right: var(--spacing-snug);
|
||||
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
|
||||
initial-letter: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,68 +1,577 @@
|
||||
.content {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--typo-size-responsive);
|
||||
font-size: clamp(1rem, 2.5vw, 1.25rem);
|
||||
}
|
||||
|
||||
.prose {
|
||||
@mixin py var(--space-8);
|
||||
@mixin typo_body;
|
||||
|
||||
font-size: clamp(1rem, 2.5vw, 1.25rem);
|
||||
|
||||
& ::selection {
|
||||
color: var(--color-palette-ice-blue);
|
||||
background: var(--color-primary)
|
||||
}
|
||||
|
||||
& > :first-child,
|
||||
& > article > :first-child {
|
||||
@mixin mt var(--size-0);
|
||||
}
|
||||
|
||||
& > :last-child,
|
||||
& > article > :last-child {
|
||||
@mixin mb var(--size-0);
|
||||
}
|
||||
|
||||
/* === HEADINGS === */
|
||||
& h2 {
|
||||
@mixin heading-2;
|
||||
@mixin pl var(--spacing-snug);
|
||||
@mixin border-l var(--size-4), solid, var(--el-h2-color);
|
||||
|
||||
& + p,
|
||||
& + ul,
|
||||
& + ol,
|
||||
& + blockquote {
|
||||
margin-block: calc(1em * var(--typo-leading-normal) * var(--vspace-tight))
|
||||
calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
|
||||
}
|
||||
|
||||
& + h3 {
|
||||
margin-block: calc(1em * 1.125 * var(--vspace-compressed))
|
||||
calc(1em * 1.125 * var(--vspace-snug));
|
||||
}
|
||||
@mixin typo_heading-1;
|
||||
@mixin mt var(--space-11);
|
||||
@mixin mb var(--space-6);
|
||||
@mixin pl var(--space-4);
|
||||
@mixin border-l var(--size-8), solid, var(--color-text-primary);
|
||||
}
|
||||
|
||||
& h3 {
|
||||
@mixin heading-3;
|
||||
@mixin py var(--spacing-tight);
|
||||
@mixin px var(--spacing-snug);
|
||||
@mixin typo_heading-3;
|
||||
@mixin mt var(--space-10);
|
||||
@mixin mb var(--space-6);
|
||||
@mixin py var(--space-2);
|
||||
@mixin px var(--space-4);
|
||||
|
||||
color: var(--color-text-inverse);
|
||||
background: var(--color-surface-inverse);
|
||||
}
|
||||
|
||||
& h4 {
|
||||
@mixin heading-4;
|
||||
@mixin py var(--spacing-tight);
|
||||
@mixin px var(--spacing-snug);
|
||||
@mixin border-t var(--size-3), solid, var(--el-h4-color);
|
||||
@mixin border-b var(--size-3), solid, var(--el-h4-color);
|
||||
@mixin typo_heading-4;
|
||||
@mixin mt var(--space-9);
|
||||
@mixin mb var(--space-4);
|
||||
@mixin py var(--space-2);
|
||||
@mixin px var(--space-4);
|
||||
@mixin border-y var(--size-6), solid, var(--color-text-secondary);
|
||||
|
||||
color: var(--el-h4-color);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
& h5 {
|
||||
@mixin heading-5;
|
||||
@mixin py var(--spacing-tight);
|
||||
@mixin px var(--spacing-snug);
|
||||
@mixin typo_heading-5;
|
||||
@mixin mt var(--space-9);
|
||||
@mixin mb var(--space-4);
|
||||
|
||||
color: var(--el-h5-color);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
@mixin pr var(--spacing-tight);
|
||||
|
||||
content: "";
|
||||
line-height: var(--typo-leading-compressed);
|
||||
}
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
&::before {
|
||||
content: '▼';
|
||||
@mixin pr var(--space-2);
|
||||
|
||||
content: "▼";
|
||||
}
|
||||
}
|
||||
|
||||
& h6 {
|
||||
@mixin heading-6;
|
||||
@mixin typo_heading-6;
|
||||
@mixin mt var(--space-8);
|
||||
@mixin mb var(--space-2);
|
||||
|
||||
color: var(--el-h6-color);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/* === BODY TEXT === */
|
||||
|
||||
& p {
|
||||
@mixin my var(--space-6);
|
||||
|
||||
hyphens: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
& blockquote {
|
||||
@mixin my var(--space-8);
|
||||
@mixin py var(--space-4);
|
||||
@mixin pl var(--space-6);
|
||||
@mixin border-l var(--size-8), solid, var(--color-text-tertiary);
|
||||
|
||||
font-style: italic;
|
||||
color: var(--color-text-tertiary);
|
||||
|
||||
& p {
|
||||
@mixin ma var(--size-0);
|
||||
|
||||
hyphens: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
& p + p {
|
||||
@mixin mt var(--space-4);
|
||||
}
|
||||
}
|
||||
|
||||
/* === CODE === */
|
||||
|
||||
& pre {
|
||||
@mixin typo_code;
|
||||
@mixin my var(--space-8);
|
||||
@mixin pa var(--space-6);
|
||||
|
||||
scrollbar-color: var(--color-border-normal) transparent;
|
||||
scrollbar-width: thin;
|
||||
|
||||
overflow-x: auto;
|
||||
|
||||
color: var(--color-tertiary);
|
||||
|
||||
background: var(--color-surface-inverse);
|
||||
|
||||
& code {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& :not(pre) > code {
|
||||
@mixin py var(--size-1);
|
||||
@mixin px var(--space-2);
|
||||
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--type--1);
|
||||
color: var(--color-tertiary);
|
||||
background: var(--color-surface-inverse);
|
||||
}
|
||||
|
||||
& kbd {
|
||||
@mixin py var(--size-1);
|
||||
@mixin px var(--space-2);
|
||||
|
||||
border: var(--size-1) solid var(--color-border-normal);
|
||||
border-bottom-width: var(--size-2);
|
||||
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--type--3);
|
||||
color: var(--color-text-inverse);
|
||||
text-transform: uppercase;
|
||||
|
||||
background: var(--color-surface-inverse);
|
||||
}
|
||||
|
||||
& samp {
|
||||
@mixin py var(--size-1);
|
||||
@mixin px var(--space-2);
|
||||
@mixin border-l var(--size-2), solid, var(--color-text-tertiary);
|
||||
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--type--1);
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-surface-elevated-2);
|
||||
}
|
||||
|
||||
& var {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* === LISTS === */
|
||||
|
||||
& ul,
|
||||
& ol {
|
||||
@mixin my var(--space-6);
|
||||
}
|
||||
|
||||
& ul ul,
|
||||
& ul ol,
|
||||
& ol ol,
|
||||
& ol ul {
|
||||
@mixin my var(--space-2);
|
||||
@mixin pl var(--space-4);
|
||||
}
|
||||
|
||||
& li {
|
||||
@mixin my var(--space-2);
|
||||
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
/* == UNORDERED == */
|
||||
|
||||
& ul {
|
||||
@mixin pl var(--space-5);
|
||||
|
||||
list-style: none;
|
||||
|
||||
& > li {
|
||||
@mixin pl var(--space-4);
|
||||
@mixin ml var(--space-2);
|
||||
}
|
||||
}
|
||||
|
||||
& ul > li::marker {
|
||||
content: "⎊";
|
||||
}
|
||||
|
||||
& ul ul > li::marker {
|
||||
content: '⋊';
|
||||
}
|
||||
|
||||
& ul ul ul > li::marker {
|
||||
content: "⸪";
|
||||
}
|
||||
|
||||
& ul ul ul ul > li::marker {
|
||||
content: "⸭";
|
||||
}
|
||||
|
||||
/* == ORDERED == */
|
||||
|
||||
& ol {
|
||||
@mixin pl var(--space-8);
|
||||
|
||||
counter-reset: ol-l1;
|
||||
contain: style;
|
||||
list-style: none;
|
||||
|
||||
& li {
|
||||
@mixin ml var(--space-6);
|
||||
@mixin pl var(--space-4);
|
||||
|
||||
counter-increment: ol-l1;
|
||||
|
||||
&::marker {
|
||||
content: counter(ol-l1, decimal-leading-zero) '.)';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& ol ol {
|
||||
counter-reset: ol-l2;
|
||||
|
||||
& > li {
|
||||
@mixin ml var(--space-7);
|
||||
|
||||
counter-increment: ol-l2;
|
||||
|
||||
&::marker {
|
||||
content: counter(ol-l2, lower-alpha) '.)';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& ol ol ol {
|
||||
counter-reset: ol-l3;
|
||||
|
||||
& > li {
|
||||
@mixin ml var(--space-7);
|
||||
|
||||
counter-increment: ol-l3;
|
||||
|
||||
&::marker {
|
||||
content: counter(ol-l3, upper-roman) '.)';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& ol ol ol ol {
|
||||
counter-reset: ol-l4;
|
||||
|
||||
& > li {
|
||||
@mixin ml var(--size-9);
|
||||
|
||||
counter-increment: ol-l4;
|
||||
|
||||
&::marker {
|
||||
content: counter(ol-l4, lower-greek) '.)';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* === TABLES === */
|
||||
& table {
|
||||
@mixin my var(--space-9);
|
||||
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
border: var(--size-4) solid var(--color-text-primary);
|
||||
|
||||
& th {
|
||||
@mixin typo_table-header;
|
||||
@mixin py var(--space-2);
|
||||
@mixin px var(--space-4);
|
||||
|
||||
border: var(--size-1) solid var(--color-border-strong);
|
||||
color: var(--color-text-inverse);
|
||||
text-align: left;
|
||||
background: var(--color-surface-inverse);
|
||||
}
|
||||
|
||||
& td {
|
||||
@mixin typo_table-data;
|
||||
@mixin pa var(--space-4);
|
||||
|
||||
border: var(--size-1) solid var(--color-border-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
/* === DEFINTION LISTS === */
|
||||
& dl {
|
||||
@mixin my var(--space-3);
|
||||
}
|
||||
|
||||
& dt {
|
||||
@mixin typo_definition-header;
|
||||
@mixin mt var(--space-6);
|
||||
@mixin pa var(--space-4);
|
||||
|
||||
color: var(--color-text-inverse);
|
||||
background: var(--color-surface-inverse);
|
||||
}
|
||||
|
||||
& dd {
|
||||
@mixin typo_definition-data;
|
||||
@mixin mt var(--space-2);
|
||||
@mixin mb var(--space-4);
|
||||
@mixin px var(--space-4);
|
||||
}
|
||||
|
||||
/* === DETAILS / SUMMARY === */
|
||||
& details {
|
||||
@mixin mr var(--space-8);
|
||||
@mixin border-l var(--size-4), solod, var(--color-border-normal);
|
||||
|
||||
&[open] {
|
||||
@mixin pb var(--space-4);
|
||||
|
||||
& > summary {
|
||||
@mixin mb var(--space-4);
|
||||
@mixin border-b var(--size-1), solid, var(--color-border-subtle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& summary {
|
||||
@mixin typo_label;
|
||||
@mixin py var(--space-2);
|
||||
@mixin px var(--space-4);
|
||||
|
||||
cursor: pointer;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
list-style: none;
|
||||
|
||||
&::before {
|
||||
@mixin pr var(--space-2);
|
||||
|
||||
content: "▶";
|
||||
}
|
||||
|
||||
details[open] > &::before {
|
||||
content: "▼";
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
& details > *:not(summary) {
|
||||
@mixin px var(--space-6);
|
||||
}
|
||||
|
||||
& hr {
|
||||
@mixin my var(--space-10);
|
||||
|
||||
position: relative;
|
||||
|
||||
overflow: visible;
|
||||
|
||||
height: var(--size-6);
|
||||
border: none;
|
||||
|
||||
background: var(--color-text-tertiary);
|
||||
|
||||
&::after {
|
||||
|
||||
@mixin px var(--space-4);
|
||||
|
||||
content: '▼';
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
font-size: var(--type-3);
|
||||
line-height: 1;
|
||||
color: var(--color-text-tertiary);
|
||||
|
||||
background: var(--color-surface-base);
|
||||
}
|
||||
}
|
||||
|
||||
/* === FIGURES === */
|
||||
& figure {
|
||||
@mixin my var(--space-10);
|
||||
|
||||
& img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& figcaption {
|
||||
@mixin typo_fine;
|
||||
@mixin mt var(--space-2);
|
||||
@mixin py var(--space-2);
|
||||
@mixin border-b var(--size-1), solid, var(--color-border-subtle);
|
||||
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
/* === INLINE ELEMENTS === */
|
||||
|
||||
& em,
|
||||
& i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
& b,
|
||||
& strong {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
& a {
|
||||
position: relative;
|
||||
|
||||
font-weight: 700;
|
||||
color: var(--text-color-tertiary);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: var(--space-2);
|
||||
text-decoration-skip-ink: auto;
|
||||
text-underline-offset: var(--space-2);
|
||||
|
||||
transition:
|
||||
color var(--motion-normal) var(--ease-out),
|
||||
background var(--motion-normal) var(--ease-out);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text-inverse);
|
||||
text-decoration: none;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@mixin focus-ring;
|
||||
}
|
||||
|
||||
& mark {
|
||||
@mixin px var(--size-1);
|
||||
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-tertiary);
|
||||
}
|
||||
|
||||
& small {
|
||||
@mixin typo_fine;
|
||||
|
||||
color: var(--color-text-teriary);
|
||||
}
|
||||
|
||||
& sub,
|
||||
& sup {
|
||||
font-size: var(--type--3);
|
||||
font-weight: 700;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
& del,
|
||||
& s {
|
||||
color: var(--color-text-tertiary);
|
||||
text-decoration: line-through;
|
||||
text-decoration-thickness: var(--space-2);
|
||||
}
|
||||
|
||||
& ins {
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--color-primary);
|
||||
text-decoration-thickness: var(--space-2);
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
& abbr[title] {
|
||||
cursor: help;
|
||||
text-decoration: underline dotted;
|
||||
text-decoration-thickness: var(--size-1);
|
||||
text-underline-offset: var(--size-2);
|
||||
}
|
||||
|
||||
& dfn {
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
& cite {
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
& q {
|
||||
font-style: normal;
|
||||
|
||||
&::before {
|
||||
content: '»';
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '«';
|
||||
}
|
||||
}
|
||||
|
||||
& time {
|
||||
@mixin typo_label;
|
||||
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/** LEAD PARAGRAPH */
|
||||
|
||||
& > article {
|
||||
& > p:first-of-type {
|
||||
font-size: var(--type-1);
|
||||
font-weight: 700;
|
||||
line-height: var(--leading-1);
|
||||
letter-spacing: var(--tracking-1);
|
||||
|
||||
&::first-letter {
|
||||
@mixin mr var(--space-2);
|
||||
|
||||
float:left;
|
||||
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--type-9);
|
||||
line-height: 0.8;
|
||||
color: var(--color-primary);
|
||||
|
||||
@supports (initial-letter: 3) {
|
||||
@mixin pr var(--space-2);
|
||||
|
||||
float: none;
|
||||
|
||||
margin: 0;
|
||||
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
initial-letter: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,95 +0,0 @@
|
||||
@layer tokens {
|
||||
:root {
|
||||
/* === DIMENSIONS === */
|
||||
|
||||
/* == Base Size Units == */
|
||||
--size-0: 0;
|
||||
--size-px: 1px;
|
||||
--size-05: 0.125rem;
|
||||
--size-1: 0.25rem;
|
||||
--size-2: 0.5rem;
|
||||
--size-3: 0.75rem;
|
||||
--size-4: 1rem;
|
||||
--size-5: 1.25rem;
|
||||
--size-6: 1.5rem;
|
||||
--size-8: 2rem;
|
||||
--size-10: 2.5rem;
|
||||
--size-12: 3rem;
|
||||
--size-16: 4rem;
|
||||
--size-20: 5rem;
|
||||
--size-24: 6rem;
|
||||
--size-32: 8rem;
|
||||
--size-40: 10rem;
|
||||
--size-48: 12rem;
|
||||
--size-64: 16rem;
|
||||
--size-80: 20rem;
|
||||
--size-96: 24rem;
|
||||
--size-128: 32rem;
|
||||
--size-160: 40rem;
|
||||
--size-192: 48rem;
|
||||
--size-256: 64rem;
|
||||
--size-320: 80rem;
|
||||
--size-360: 90rem;
|
||||
--size-384: 96rem;
|
||||
--size-400: 100rem;
|
||||
--size-480: 120rem;
|
||||
|
||||
/* == Flexible Dimensions == */
|
||||
--dim-full: 100%;
|
||||
--dim-1-2: 50%;
|
||||
--dim-1-3: 33.3333%;
|
||||
--dim-2-3: 66.6667%;
|
||||
--dim-1-4: 25%;
|
||||
--dim-2-4: var(--dim-1-2);
|
||||
--dim-3-4: 75%;
|
||||
--dim-1-5: 20%;
|
||||
--dim-2-5: 40%;
|
||||
--dim-3-5: 60%;
|
||||
--dim-4-5: 80%;
|
||||
--dim-1-6: 16.6667%;
|
||||
--dim-2-6: var(--dim-1-3);
|
||||
--dim-3-6: var(--dim-1-2);
|
||||
--dim-4-6: var(--dim-2-3);
|
||||
--dim-5-6: 83.3333%;
|
||||
--dim-1-8: 12.5%;
|
||||
--dim-2-8: var(--dim-1-4);
|
||||
--dim-3-8: 37.5%;
|
||||
--dim-4-8: var(--dim-1-2);
|
||||
--dim-5-8: 62.5%;
|
||||
--dim-6-8: var(--dim-3-4);
|
||||
--dim-7-8: 87.5%;
|
||||
--dim-1-10: 10%;
|
||||
--dim-2-10: var(--dim-1-5);
|
||||
--dim-3-10: 30%;
|
||||
--dim-4-10: var(--dim-2-5);
|
||||
--dim-5-10: var(--dim-1-2);
|
||||
--dim-6-10: var(--dim-3-5);
|
||||
--dim-7-10: 70%;
|
||||
--dim-8-10: var(--dim-4-5);
|
||||
--dim-9-10: 90%;
|
||||
--dim-1-12: 8.3333%;
|
||||
--dim-2-12: var(--dim-1-6);
|
||||
--dim-3-12: var(--dim-1-4);
|
||||
--dim-4-12: var(--dim-1-3);
|
||||
--dim-5-12: 41.6667%;
|
||||
--dim-6-12: var(--dim-1-2);
|
||||
--dim-7-12: 58.3333%;
|
||||
--dim-8-12: var(--dim-2-3);
|
||||
--dim-9-12: var(--dim-3-4);
|
||||
--dim-10-12: 83.3333%;
|
||||
--dim-11-12: 91.6667%;
|
||||
|
||||
/* == Semantic Spacing == */
|
||||
--spacing-none: var(--size-0);
|
||||
--spacing-hairline: var(--size-px);
|
||||
--spacing-tight: var(--size-1);
|
||||
--spacing-snug: var(--size-2);
|
||||
--spacing-cozy: var(--size-4);
|
||||
--spacing-comfortable: var(--size-6);
|
||||
--spacing-relaxed: var(--size-8);
|
||||
--spacing-spacious: var(--size-12);
|
||||
--spacing-generous: var(--size-16);
|
||||
--spacing-luxurious: var(--size-24);
|
||||
--spacing-expansive: var(--size-32);
|
||||
}
|
||||
}
|
||||
@@ -1,127 +0,0 @@
|
||||
:root {
|
||||
/* === Heading Colors & Font Sizes === */
|
||||
|
||||
--el-h1-color: var(--color-text-primary);
|
||||
--el-h1-font-family: var(--font-display);
|
||||
--el-h1-font-size: var(--typo-size-7xl);
|
||||
--el-h1-leading: 1.125;
|
||||
--el-h2-color: var(--color-text-primary);
|
||||
--el-h2-font-family: var(--font-header);
|
||||
--el-h2-font-size: var(--typo-size-5xl);
|
||||
--el-h2-leading: 1.1765;
|
||||
--el-h3-color: var(--color-text-secondary);
|
||||
--el-h3-font-family: var(--font-header);
|
||||
--el-h3-font-size: var(--typo-size-4xl);
|
||||
--el-h3-leading: 1.2;
|
||||
--el-h4-color: var(--color-text-secondary);
|
||||
--el-h4-font-family: var(--font-header);
|
||||
--el-h4-font-size: var(--typo-size-3xl);
|
||||
--el-h4-leading: 1.125;
|
||||
--el-h5-color: var(--color-text-secondary);
|
||||
--el-h5-font-family: var(--font-header);
|
||||
--el-h5-font-size: var(--typo-size-2xl);
|
||||
--el-h5-leading: 1.28;
|
||||
--el-h6-color: var(--color-text-secondary);
|
||||
--el-h6-font-family: var(--font-header);
|
||||
--el-h6-font-size: var(--typo-size-xl);
|
||||
--el-h6-leading: 1.4;
|
||||
|
||||
/* === Heading Vertical Spacing === */
|
||||
--el-h1-vspace-base: calc(1em * var(--el-h1-leading));
|
||||
--el-h1-vspace-top: calc(var(--el-h1-vspace-base) * var(--vspace-snug));
|
||||
--el-h1-vspace-bottom: calc(
|
||||
var(--el-h1-vspace-base) * var(--vspace-compressed)
|
||||
);
|
||||
--el-h2-vspace-base: calc(1em * var(--el-h2-leading));
|
||||
--el-h2-vspace-top: calc(var(--el-h2-vspace-base) * var(--vspace-snug));
|
||||
--el-h2-vspace-bottom: calc(
|
||||
var(--el-h2-vspace-base) * var(--vspace-compressed)
|
||||
);
|
||||
--el-h3-vspace-base: calc(1em * var(--el-h3-leading));
|
||||
--el-h3-vspace-top: calc(var(--el-h3-vspace-base) * var(--vspace-cozy));
|
||||
--el-h3-vspace-bottom: calc(var(--el-h3-vspace-base) * var(--vspace-snug));
|
||||
--el-h4-vspace-base: calc(1em * var(--el-h4-leading));
|
||||
--el-h4-vspace-top: calc(var(--el-h4-vspace-base) * var(--vspace-normal));
|
||||
--el-h4-vspace-bottom: calc(var(--el-h4-vspace-base) * var(--vspace-tight));
|
||||
--el-h5-vspace-base: calc(1em * var(--el-h5-leading));
|
||||
--el-h5-vspace-top: calc(var(--el-h5-vspace-base) * var(--vspace-cozy));
|
||||
--el-h5-vspace-bottom: calc(var(--el-h5-vspace-base) * var(--vspace-tight));
|
||||
--el-h6-vspace-base: calc(1em * var(--el-h6-leading));
|
||||
--el-h6-vspace-top: calc(var(--el-h6-vspace-base) * var(--vspace-snug));
|
||||
--el-h6-vspace-bottom: calc(
|
||||
var(--el-h6-vspace-base) * var(--vspace-compressed)
|
||||
);
|
||||
|
||||
/* === Body Text === */
|
||||
--el-p-color: var(--color-text-primary);
|
||||
--el-p-font-family: var(--font-body);
|
||||
--el-p-font-size: var(--typo-size-md);
|
||||
--el-p-vspace-base: calc(1em * var(--typo-leading-normal));
|
||||
--el-p-vspace-top: calc(var(--el-p-vspace-base) * var(--vspace-snug));
|
||||
--el-p-vspace-bottom: calc(var(--el-p-vspace-base) * var(--vspace-snug));
|
||||
|
||||
/* === Blockquote === */
|
||||
--el-blockquote-color: var(--color-text-tertiary);
|
||||
--el-blockquote-font-family: var(--font-body);
|
||||
--el-blockquote-font-size: var(--typo-size-md);
|
||||
--el-blockquote-vspace-base: calc(1em * var(--typo-leading-comfortable));
|
||||
--el-blockquote-vspace-top: calc(
|
||||
var(--el-blockquote-vspace-base) * var(--vspace-snug)
|
||||
);
|
||||
--el-blockquote-vspace-bottom: calc(
|
||||
var(--el-blockquote-vspace-base) * var(--vspace-snug)
|
||||
);
|
||||
|
||||
/* === Pre / Code === */
|
||||
--el-pre-color: var(--color-text-inverse);
|
||||
--el-pre-background: var(--color-surface-inverse);
|
||||
--el-pre-font-family: var(--font-mono);
|
||||
--el-pre-font-size: var(--typo-size-sm);
|
||||
--el-pre-vspace-base: calc(1em * 1.5385);
|
||||
--el-pre-vspace-top: calc(var(--el-pre-vspace-base) * var(--vspace-normal));
|
||||
--el-pre-vspace-bottom: calc(
|
||||
var(--el-pre-vspace-base) * var(--vspace-normal)
|
||||
);
|
||||
|
||||
/* === Lists === */
|
||||
--el-list-color: var(--color-text-primary);
|
||||
--el-list-font-size: var(--typo-size-md);
|
||||
--el-list-vspace-base: calc(1em * var(--typo-leading-normal));
|
||||
--el-list-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-snug));
|
||||
--el-list-vspace-bottom: calc(
|
||||
var(--el-list-vspace-base) * var(--vspace-snug)
|
||||
);
|
||||
--el-list-nested-vspace-top: calc(
|
||||
var(--el-list-vspace-base) * var(--vspace-snug)
|
||||
);
|
||||
--el-list-nested-vspace-bottom: calc(
|
||||
var(--el-list-vspace-base) * var(--vspace-snug)
|
||||
);
|
||||
--el-li-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-snug));
|
||||
--el-li-vspace-bottom: calc(var(--el-list-vspace-base) * var(--vspace-snug));
|
||||
--el-li-nested-vspace-top: calc(
|
||||
var(--el-list-vspace-base) * var(--vspace-tight)
|
||||
);
|
||||
--el-li-nested-vspace-bottom: calc(
|
||||
var(--el-list-vspace-base) * var(--vspace-tight)
|
||||
);
|
||||
|
||||
/* === Table === */
|
||||
--el-th-color: var(--color-text-inverse);
|
||||
--el-th-background: var(--color-surface-inverse);
|
||||
--el-th-font-family: var(--font-header);
|
||||
--el-td-color: var(--color-text-primary);
|
||||
--el-td-font-family: var(--font-mono);
|
||||
|
||||
/* === DL/DT/DD === */
|
||||
--el-dt-color: var(--color-text-inverse);
|
||||
--el-dt-background: var(--color-surface-inverse);
|
||||
--el-dt-font-family: var(--font-header);
|
||||
--el-dd-color: var(--color-text-primary);
|
||||
--el-dd-font-family: var(--font-body);
|
||||
|
||||
/* === HR === */
|
||||
--hr-color: var(--color-text-tertiary);
|
||||
--hr-symbol-color: var(--color-text-tertiary);
|
||||
--hr-symbol-background: var(--color-surface-base);
|
||||
}
|
||||
@@ -1,19 +1,31 @@
|
||||
@import '@fontsource/blaka';
|
||||
@import '@fontsource-variable/geist-mono';
|
||||
@import '@fontsource-variable/geist';
|
||||
@import url('@fontsource/blaka');
|
||||
@import url('@fontsource-variable/geist-mono');
|
||||
@import url('@fontsource-variable/geist');
|
||||
|
||||
@font-face {
|
||||
font-family: 'Unigrim Dee';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
||||
font-display: swap;
|
||||
src: url('/src/fonts/UnigrimDee-Regular.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka Slab';
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
|
||||
font-display: swap;
|
||||
src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-Light.woff2')
|
||||
format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka Slab';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
||||
font-display: swap;
|
||||
src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-Regular.woff2')
|
||||
format('woff2');
|
||||
@@ -21,25 +33,37 @@
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka Slab';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
|
||||
font-display: swap;
|
||||
src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-Bold.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka Slab';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
|
||||
font-display: swap;
|
||||
font-variant-ligatures: normal;
|
||||
src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-Heavy.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka Slab';
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
|
||||
font-display: swap;
|
||||
src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-LightItalic.woff2')
|
||||
format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka Slab';
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
|
||||
font-display: swap;
|
||||
src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-Italic.woff2')
|
||||
format('woff2');
|
||||
@@ -47,8 +71,9 @@
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka Slab';
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
srcfont-weight: 700;
|
||||
|
||||
font-display: swap;
|
||||
src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-BoldItalic.woff2')
|
||||
format('woff2');
|
||||
@@ -56,8 +81,9 @@
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka Slab';
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
srcfont-weight: 900;
|
||||
|
||||
font-display: swap;
|
||||
src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-HeavyItalic.woff2')
|
||||
format('woff2');
|
||||
@@ -65,9 +91,60 @@
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka Mono';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
srcfont-weight: 400;
|
||||
|
||||
font-display: swap;
|
||||
src: url('/src/fonts/IosevkaSansMono/IosevkaSansMono-Regular.woff2')
|
||||
format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka Mono';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
|
||||
font-display: swap;
|
||||
src: url('/src/fonts/IosevkaSansMono/IosevkaSansMono-Bold.woff2')
|
||||
format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka Mono';
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
|
||||
font-display: swap;
|
||||
src: url('/src/fonts/IosevkaSansMono/IosevkaSansMono-ExtraBold.woff2')
|
||||
format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka Mono';
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
|
||||
font-display: swap;
|
||||
src: url('/src/fonts/IosevkaSansMono/IosevkaSansMono-Italic.woff2')
|
||||
format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka Mono';
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
|
||||
font-display: swap;
|
||||
src: url('/src/fonts/IosevkaSansMono/IosevkaSansMono-BoldItalic.woff2')
|
||||
format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka Mono';
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
|
||||
font-display: swap;
|
||||
src: url('/src/fonts/IosevkaSansMono/IosevkaSansMono-ExtraBoldItalic.woff2')
|
||||
format('woff2');
|
||||
}
|
||||
|
||||
213
src/styles/base/primitives.css
Normal file
213
src/styles/base/primitives.css
Normal file
@@ -0,0 +1,213 @@
|
||||
.ui {
|
||||
/* === TYPE SCALE === */
|
||||
|
||||
/*
|
||||
* Major Second (1.12), 14px base, 20px line height
|
||||
* Step Size (rem) Leading Tracking
|
||||
* ------------------------------------------------------------------
|
||||
* 10 2.75 1.1818 -0.0205em
|
||||
* 9 2.5 1.2 -0.0195em
|
||||
* 8 2.1875 1.1429 -0.018em
|
||||
* 7 1.9375 1.1613 -0.0165em
|
||||
* 6 1.75 1.2857 -0.015em
|
||||
* 5 1.5625 1.28 -0.0132em
|
||||
* 4 1.375 1.2727 -0.0109em
|
||||
* 3 1.25 1.4 -0.009em
|
||||
* 2 1.125 1.3333 -0.0067em
|
||||
* 1 1 1.5 -0.0037em
|
||||
* 0 0.875 1.4286 0em ← base
|
||||
* -1 0.75 1.6667 0.005em
|
||||
* -2 0.6875 1.4545 0.0082em
|
||||
* -3 0.625 1.6 0.012em
|
||||
*/
|
||||
|
||||
/* == Font Sizes == */
|
||||
--type--3: 0.625rem;
|
||||
--type--2: 0.6875rem;
|
||||
--type--1: 0.75rem;
|
||||
--type-0: 0.875rem;
|
||||
--type-1: 1rem;
|
||||
--type-2: 1.125rem;
|
||||
--type-3: 1.25rem;
|
||||
--type-4: 1.375rem;
|
||||
--type-5: 1.5625rem;
|
||||
--type-6: 1.75rem;
|
||||
--type-7: 1.9375rem;
|
||||
--type-8: 2.1875rem;
|
||||
--type-9: 2.5rem;
|
||||
--type-10: 2.75rem;
|
||||
|
||||
/* == Line Heights == */
|
||||
--leading--3: 1.6;
|
||||
--leading--2: 1.4545;
|
||||
--leading--1: 1.6667;
|
||||
--leading-0: 1.4286;
|
||||
--leading-1: 1.5;
|
||||
--leading-2: 1.3333;
|
||||
--leading-3: 1.4;
|
||||
--leading-4: 1.2727;
|
||||
--leading-5: 1.28;
|
||||
--leading-6: 1.2857;
|
||||
--leading-7: 1.1613;
|
||||
--leading-8: 1.1429;
|
||||
--leading-9: 1.2;
|
||||
--leading-10: 1.1818;
|
||||
|
||||
/* == Letter Spacing == */
|
||||
--tracking--3: 0.012em;
|
||||
--tracking--2: 0.0082em;
|
||||
--tracking--1: 0.005em;
|
||||
--tracking-0: 0em;
|
||||
--tracking-1: -0.0037em;
|
||||
--tracking-2: -0.0067em;
|
||||
--tracking-3: -0.009em;
|
||||
--tracking-4: -0.0109em;
|
||||
--tracking-5: -0.0132em;
|
||||
--tracking-6: -0.015em;
|
||||
--tracking-7: -0.0165em;
|
||||
--tracking-8: -0.018em;
|
||||
--tracking-9: -0.0195em;
|
||||
--tracking-10: -0.0205em;
|
||||
}
|
||||
|
||||
.content {
|
||||
/* === TYPE SCALE === */
|
||||
|
||||
/*
|
||||
* Minor Third (1.19), 16px base, 24px line height
|
||||
* Step Size (em) Leading Tracking
|
||||
* ------------------------------------------------------------------
|
||||
* 10 5.6875 1.0989 -0.0247em
|
||||
* 9 4.75 1.1053 -0.0237em
|
||||
* 8 4 1.125 -0.0225em
|
||||
* 7 3.375 1.1852 -0.0211em
|
||||
* 6 2.8125 1.1556 -0.0193em
|
||||
* 5 2.375 1.2632 -0.0174em
|
||||
* 4 2 1.25 -0.015em
|
||||
* 3 1.6875 1.3333 -0.0122em
|
||||
* 2 1.4375 1.3913 -0.0091em
|
||||
* 1 1.1875 1.4737 -0.0047em
|
||||
* 0 1 1.5 0em ← base
|
||||
* -1 0.8125 1.5385 0.0069em
|
||||
* -2 0.6875 1.8182 0.0136em
|
||||
* -3 0.625 2 0.018em
|
||||
*/
|
||||
|
||||
/* == Font Sizes == */
|
||||
--type--3: 0.625em;
|
||||
--type--2: 0.6875em;
|
||||
--type--1: 0.8125em;
|
||||
--type-0: 1em;
|
||||
--type-1: 1.1875em;
|
||||
--type-2: 1.4375em;
|
||||
--type-3: 1.6875em;
|
||||
--type-4: 2em;
|
||||
--type-5: 2.375em;
|
||||
--type-6: 2.8125em;
|
||||
--type-7: 3.375em;
|
||||
--type-8: 4em;
|
||||
--type-9: 4.75em;
|
||||
--type-10: 5.6875em;
|
||||
|
||||
/* == Line Heights == */
|
||||
--leading--3: 2;
|
||||
--leading--2: 1.8182;
|
||||
--leading--1: 1.5385;
|
||||
--leading-0: 1.5;
|
||||
--leading-1: 1.4737;
|
||||
--leading-2: 1.3912;
|
||||
--leading-3: 1.3333;
|
||||
--leading-4: 1.25;
|
||||
--leading-5: 1.2632;
|
||||
--leading-6: 1.1556;
|
||||
--leading-7: 1.1852;
|
||||
--leading-8: 1.125;
|
||||
--leading-9: 1.1053;
|
||||
--leading-10: 1.0989;
|
||||
|
||||
/* == Letter Spacing == */
|
||||
--tracking--3: 0.018em;
|
||||
--tracking--2: 0.0136em;
|
||||
--tracking--1: 0.0069em;
|
||||
--tracking-0: 0em;
|
||||
--tracking-1: -0.0047em;
|
||||
--tracking-2: -0.0091em;
|
||||
--tracking-3: -0.0122em;
|
||||
--tracking-4: -0.015em;
|
||||
--tracking-5: -0.0174em;
|
||||
--tracking-6: -0.0193em;
|
||||
--tracking-7: -0.0211em;
|
||||
--tracking-8: -0.0225em;
|
||||
--tracking-9: -0.0237em;
|
||||
--tracking-10: -0.0247em;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* === FONT FAMILIES === */
|
||||
--font-header: 'Geist Variable', sans;
|
||||
--font-display: 'Blaka',serif;
|
||||
--font-body: 'Iosevka Slab', sans;
|
||||
--font-mono: 'Iosevka Mono', monospace;
|
||||
--font-symbols: 'Unigrim Dee', fantasy;
|
||||
|
||||
/* === SIZE (REM-based) === */
|
||||
--size-0: 0;
|
||||
--size-px: 0.0625rem;
|
||||
--size-1: 0.125rem;
|
||||
--size-2: 0.25rem;
|
||||
--size-3: 0.375rem;
|
||||
--size-4: 0.5rem;
|
||||
--size-5: 0.625rem;
|
||||
--size-6: 0.75rem;
|
||||
--size-7: 0.875rem;
|
||||
--size-8: 1rem;
|
||||
--size-9: 1.25rem;
|
||||
--size-10: 1.5rem;
|
||||
--size-11: 2rem;
|
||||
--size-12: 2.5rem;
|
||||
--size-13: 3rem;
|
||||
--size-14: 4rem;
|
||||
--size-15: 5rem;
|
||||
--size-16: 6rem;
|
||||
|
||||
/* === SPACING (EM-based) === */
|
||||
--space-0: 0;
|
||||
--space-px: 0.0625em;
|
||||
--space-1: 0.125em;
|
||||
--space-2: 0.25em;
|
||||
--space-3: 0.375rem;
|
||||
--space-4: 0.5em;
|
||||
--space-5: 0.625em;
|
||||
--space-6: 0.75em;
|
||||
--space-7: 0.875em;
|
||||
--space-8: 1em;
|
||||
--space-9: 1.25em;
|
||||
--space-10: 1.5em;
|
||||
--space-11: 2em;
|
||||
--space-12: 2.5em;
|
||||
--space-13: 3em;
|
||||
--space-14: 4em;
|
||||
--space-15: 5em;
|
||||
--space-16: 6em;
|
||||
|
||||
/* === Z-INDEX === */
|
||||
--z-base: 1;
|
||||
--z-sticky: 10;
|
||||
--z-overlay: 20;
|
||||
--z-modal: 30;
|
||||
--z-toast: 40;
|
||||
|
||||
/* === MOTION === */
|
||||
--motion-fast: 150ms;
|
||||
--motion-normal: 300ms;
|
||||
--motion-slow: 500ms;
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
|
||||
/* === LAYOUT === */
|
||||
--layout-content-width: minmax(0, 72ch);
|
||||
--layout-margin-width: minmax(18ch, 1fr);
|
||||
--layout-gutter: var(--space-6);
|
||||
--layout-page-margin: var(--space-8);
|
||||
--layout-max-width: 90rem;
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
:root {
|
||||
/* === Font Families === */
|
||||
--font-header: 'Geist Variable', sans;
|
||||
--font-display: 'Blaka',serif;
|
||||
--font-body: 'Iosevka Slab', sans;
|
||||
--font-mono: 'Iosevka Mono', monospace;
|
||||
--font-symbols: 'Unigrim Dee', fantasy;
|
||||
|
||||
/* === Type Scale === */
|
||||
--typo-size-responsive: clamp(1rem, 2.5vw, 1.25rem);
|
||||
--typo-size-base: 16px;
|
||||
--typo-size-8xl: 8em;
|
||||
--typo-size-7xl: 6.375em;
|
||||
--typo-size-6xl: 5.0625em;
|
||||
--typo-size-5xl: 4em;
|
||||
--typo-size-4xl: 3.1875em;
|
||||
--typo-size-3xl: 2.5em;
|
||||
--typo-size-2xl: 2em;
|
||||
--typo-size-xl: 1.5625em;
|
||||
--typo-size-lg: 1.25em;
|
||||
--typo-size-md: 1em;
|
||||
--typo-size-sm: 0.8125em;
|
||||
--typo-size-xs: 0.625em;
|
||||
--typo-size-2xs: 0.5em;
|
||||
|
||||
/* == Letter Spacing == */
|
||||
--typo-spacing-tightest: -0.05em;
|
||||
--typo-spacing-tighter: -0.025em;
|
||||
--typo-spacing-tight: -0.0125em;
|
||||
--typo-spacing-normal: 0em;
|
||||
--typo-spacing-relaxed: 0.025em;
|
||||
--typo-spacing-comfortable: 0.05em;
|
||||
--typo-spacing-loose: 0.1em;
|
||||
--typo-spacing-looser: 0.15em;
|
||||
--typo-spacing-loosest: 0.2em;
|
||||
|
||||
/* === Line Height === */
|
||||
--typo-leading-compressed: 1;
|
||||
--typo-leading-tight: 1.125;
|
||||
--typo-leading-snug: 1.25;
|
||||
--typo-leading-cozy: 1.375;
|
||||
--typo-leading-normal: 1.5;
|
||||
--typo-leading-relaxed: 1.625;
|
||||
--typo-leading-comfortable: 1.75;
|
||||
--typo-leading-loose: 1.875;
|
||||
--typo-leading-spacious: 2;
|
||||
|
||||
/* === Vertical Spacing Multipliers === */
|
||||
--vspace-compressed: 0.25;
|
||||
--vspace-tight: 0.5;
|
||||
--vspace-snug: 0.75;
|
||||
--vspace-cozy: 1;
|
||||
--vspace-normal: 1.25;
|
||||
--vspace-relaxed: 1.5;
|
||||
--vspace-comfortable: 1.75;
|
||||
--vspace-loose: 2;
|
||||
--vspace-spacious: 2.5;
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
/* UI Specific Variables */
|
||||
:root {
|
||||
/* Spacing */
|
||||
--ui-spacing-hairline: 0.0625rem;
|
||||
--ui-spacing-tight: 0.125rem;
|
||||
--ui-spacing-snug: 0.25rem;
|
||||
--ui-spacing-cozy: 0.375rem;
|
||||
--ui-spacing-comfortable:0.5rem;
|
||||
--ui-spacing-relaxed: 0.625rem;
|
||||
--ui-spacing-spacious: 0.75rem;
|
||||
--ui-spacing-generous: 0.875rem;
|
||||
--ui-spacing-luxurious: 1rem;
|
||||
--ui-spacing-expansive: 1.25rem;
|
||||
|
||||
/* Font Size */
|
||||
--ui-typo-size-2xs: 0.5625rem;
|
||||
--ui-typo-size-xs: 0.625rem;
|
||||
--ui-typo-size-sm: 0.6875rem;
|
||||
--ui-typo-size-md: 0.8125rem;
|
||||
--ui-typo-size-lg: 0.875rem;
|
||||
--ui-typo-size-xl: 1rem;
|
||||
--ui-typo-size-2xl: 1.25rem;
|
||||
--ui-typo-size-3xl: 1.5rem;
|
||||
--ui-typo-size-4xl: 1.75rem;
|
||||
--ui-typo-size-5xl: 2rem;
|
||||
|
||||
/* === MastHead === */
|
||||
--ui-masthead-font-size: var(--ui-font-size-xl);
|
||||
--ui-masthead-line-height: var(--typo-leading-snug);
|
||||
--ui-masthead-paddingY: var(--ui-spacing-relaxed);
|
||||
--ui-masthead-height: calc(
|
||||
(var(--ui-masthead-font-size) * var(--ui-masthead-line-height)) +
|
||||
(var(--ui-masthead-paddingY) * 2)
|
||||
);
|
||||
|
||||
/* === Content/Marginalia === */
|
||||
--ui-content-width: minmax(0, 72ch);
|
||||
--ui-margin-width: minmax(18ch, 1fr);
|
||||
--ui-layout-width: 90rem;
|
||||
}
|
||||
@@ -1,12 +1,9 @@
|
||||
@import url('./base/fonts.css');
|
||||
@import url('./base/foundation.css');
|
||||
@import url('./base/colors.css');
|
||||
@import url('./base/dimensions.css');
|
||||
@import url('./base/typography.css');
|
||||
@import url('./base/elements.css');
|
||||
@import url('./base/custom-media.css');
|
||||
@import url('./base/content.css');
|
||||
@import url('./base/ui.css');
|
||||
@import url("base/custom-media.css");
|
||||
@import url("base/fonts.css");
|
||||
@import url("base/foundation.css");
|
||||
@import url("base/colors.css");
|
||||
@import url("base/primitives.css");
|
||||
@import url("base/content.css");
|
||||
|
||||
body {
|
||||
font-variant-ligatures: discretionary-ligatures;
|
||||
|
||||
@@ -53,3 +53,8 @@
|
||||
@define-mixin circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@define-mixin focus-ring $width: 2px, $color: var(--color-focus-ring), $offset: 2px {
|
||||
outline: $width solid $color;
|
||||
outline-offset: $offset;
|
||||
}
|
||||
|
||||
112
src/styles/mixins/colors.css
Normal file
112
src/styles/mixins/colors.css
Normal file
@@ -0,0 +1,112 @@
|
||||
:root {
|
||||
/* == Neutrals == */
|
||||
--color-palette-black-ink: oklch(21.9% 0.006 285.911deg);
|
||||
--color-palette-charcoal: oklch(26.6% 0.008 240.166deg);
|
||||
--color-palette-charcoal-gray: oklch(33.7% 0.026 266.801deg);
|
||||
--color-palette-carbon: oklch(39.8% 0 89.876deg);
|
||||
--color-palette-cloud-gray: oklch(53.6% 0.005 236.565deg);
|
||||
--color-palette-stone: oklch(64.3% 0.005 91.471deg);
|
||||
--color-palette-silver: oklch(72.9% 0.001 17.185deg);
|
||||
--color-palette-light-silver: oklch(82.6% 0.002 247.844deg);
|
||||
--color-palette-pale-gray: oklch(91.3% 0.004 91.449deg);
|
||||
--color-palette-very-pale-gray: oklch(94.3% 0 89.876deg);
|
||||
--color-palette-off-white: oklch(98.1% 0.003 247.858deg);
|
||||
--color-palette-ice-blue: oklch(99.9% 0.001 197.139deg);
|
||||
|
||||
/* == Accents == */
|
||||
--color-palette-lava: oklch(63.6% 0.193 17.075deg);
|
||||
--color-palette-cerise: oklch(60.7% 0.23 18.554deg);
|
||||
--color-palette-persimmon: oklch(68.6% 0.179 40.01deg);
|
||||
--color-palette-fuchsia: oklch(49.6% 0.181 351.176deg);
|
||||
--color-palette-bright-canary: oklch(89% 0.157 97.726deg);
|
||||
--color-palette-lime-green: oklch(74.6% 0.18 129.939deg);
|
||||
--color-palette-royal-blue: oklch(46.1% 0.07 245.64deg);
|
||||
--color-palette-electric-blue: oklch(90.8% 0.128 188.419deg);
|
||||
|
||||
/* === Semantic Colors === */
|
||||
|
||||
/* == Primary / Secondary / Tertiary == */
|
||||
--color-primary: var(--color-palette-lava);
|
||||
--color-primary-surface: oklch(from var(--color-primary) calc(l + 0.1) c h);
|
||||
--color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h);
|
||||
--color-secondary: var(--color-palette-lime-green);
|
||||
--color-secondary-surface: oklch(
|
||||
from var(--color-secondary) calc(l + 0.1) c h
|
||||
);
|
||||
--color-secondary-emphasis: oklch(
|
||||
from var(--color-secondary) calc(l - 0.15) c h
|
||||
);
|
||||
--color-tertiary: var(--color-palette-bright-canary);
|
||||
--color-tertiary-surface: oklch(from var(--color-tertiary) calc(l + 0.1) c h);
|
||||
--color-tertiary-emphasis: oklch(
|
||||
from var(--color-tertiary) calc(l - 0.15) c h
|
||||
);
|
||||
|
||||
/* == Text == */
|
||||
--color-text-primary: var(--color-palette-black-ink);
|
||||
--color-text-secondary: var(--color-palette-charcoal);
|
||||
--color-text-tertiary: var(--color-palette-charcoal-gray);
|
||||
--color-text-quarternary: var(--color-palette-carbon);
|
||||
--color-text-inverse: var(--color-palette-ice-blue);
|
||||
--color-text-disabled: var(--color-palette-cloud-gray);
|
||||
|
||||
/* == Surfaces == */
|
||||
--color-surface-base: var(--color-palette-ice-blue);
|
||||
--color-surface-elevated-1: var(--color-palette-off-white);
|
||||
--color-surface-elevated-2: var(--color-palette-very-pale-gray);
|
||||
--color-surface-elevated-3: var(--color-palette-pale-gray);
|
||||
--color-surface-elevated-4: var(--color-palette-light-silver);
|
||||
--color-surface-inverse: var(--color-palette-black-ink);
|
||||
|
||||
/* == Borders == */
|
||||
--color-border-subtle: var(--color-palette-silver);
|
||||
--color-border-normal: var(--color-palette-stone);
|
||||
--color-border-strong: var(--color-palette-charcoal-gray);
|
||||
|
||||
/* == States == */
|
||||
--color-state-error: var(--color-palette-cerise);
|
||||
--color-state-warning: var(--color-palette-persimmon);
|
||||
--color-state-success: var(--color-palette-lime-green);
|
||||
--color-state-info: var(--color-palette-royal-blue);
|
||||
|
||||
/* == Links == */
|
||||
--color-text-link: var(--color-text-tertiary);
|
||||
--color-text-link-hover: var(--color-secondary);
|
||||
--color-text-link-visited: var(--color-palette-fuchsia);
|
||||
|
||||
/* == Focus == */
|
||||
--color-focus-ring: var(--color-primary);
|
||||
|
||||
/* == Overlays == */
|
||||
--color-overlay-light: oklch(0% 0 0deg / 10%);
|
||||
--color-overlay-medium: oklch(0% 0 0deg / 30%);
|
||||
--color-overlay-heavy: oklch(0% 0 0deg / 60%);
|
||||
|
||||
/* == Shadows == */
|
||||
--color-shadow: oklch(0% 0 0deg / 10%);
|
||||
--color-shadow-strong: oklch(0% 0 0deg / 25%);
|
||||
|
||||
/* == Utility == */
|
||||
--color-highlight: var(--color-tertiary-surface);
|
||||
--color-highlight-strong: var(--color-tertiary);
|
||||
--color-skeleton-base: var(--color-surface-elevated-2);
|
||||
--color-skeleton-shimmer: var(--color-surface-elevated-1);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-text-primary: var(--color-palette-ice-blue);
|
||||
--color-text-secondary: var(--color-palette-pale-gray);
|
||||
--color-text-tertiary: var(--color-palette-light-silver);
|
||||
--color-text-quarternary: var(--color-palette-silver);
|
||||
--color-text-inverse: var(--color-palette-black-ink);
|
||||
--color-text-disabled: var(--color-palette-cloud-gray);
|
||||
--color-surface-base: var(--color-palette-black-ink);
|
||||
--color-surface-elevated-1: var(--color-palette-charcoal);
|
||||
--color-surface-elevated-2: var(--color-palette-charcoal-gray);
|
||||
--color-surface-elevated-3: var(--color-palette-carbon);
|
||||
--color-surface-elevated-4: var(--color-palette-cloud-gray);
|
||||
--color-surface-inverse: var(--color-palette-ice-blue);
|
||||
--color-border-subtle: var(--color-palette-charcoal-gray);
|
||||
--color-border-normal: var(--color-palette-carbon);
|
||||
--color-border-strong: var(--color-palette-silver);
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
@define-mixin responsive-wrapper $vspacing: 0, $hspacing: var(--spacing-cozy),
|
||||
$fontSize: var(--typo-size-responsive) {
|
||||
@mixin mx auto;
|
||||
|
||||
max-width: clamp(60ch, 90vw, 90ch);
|
||||
padding: $vspacing $hspacing;
|
||||
font-family: var(--font-body);
|
||||
font-size: $fontSize;
|
||||
}
|
||||
|
||||
@define-mixin layout-wrapper {
|
||||
@mixin mx auto;
|
||||
@mixin px var(--spacing-comfortable);
|
||||
|
||||
width: 100%;
|
||||
max-width: var(--ui-layout-width);
|
||||
|
||||
@media screen and (--max-layout) {
|
||||
@mixin px var(--spacing-comfortable);
|
||||
}
|
||||
}
|
||||
|
||||
@define-mixin position $position: absolute, $inset-values {
|
||||
position: $position;
|
||||
inset: $inset-values;
|
||||
}
|
||||
16
src/styles/mixins/helpers.css
Normal file
16
src/styles/mixins/helpers.css
Normal file
@@ -0,0 +1,16 @@
|
||||
@define-mixin layout-wrapper {
|
||||
@mixin mx auto;
|
||||
@mixin px var(--layout-page-margin);
|
||||
|
||||
width: 100%;
|
||||
max-width: var(--layout-max-width);
|
||||
|
||||
@media screen and (--bp-desktop) {
|
||||
@mixin px var(--scape-0);
|
||||
}
|
||||
}
|
||||
|
||||
@define-mixin position $position: absolute, $inset-values {
|
||||
position: $position;
|
||||
inset: $inset-values;
|
||||
}
|
||||
@@ -1,73 +1,198 @@
|
||||
@define-mixin heading-1 {
|
||||
@mixin mt var(--el-h1-vspace-top);
|
||||
@mixin mb var(--el-h1-vspace-bottom);
|
||||
@mixin pb var(--spacing-snug);
|
||||
|
||||
font-family: var(--el-h1-font-family);
|
||||
font-size: var(--el-h1-font-size);
|
||||
@define-mixin typo_display-1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--type-10);
|
||||
font-weight: 400;
|
||||
line-height: var(--el-h1-leading);
|
||||
color: var(--el-h1-color);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.0137em;
|
||||
line-height: var(--leading-10);
|
||||
text-transform: none;
|
||||
letter-spacing: var(--tracking-10);
|
||||
}
|
||||
|
||||
@define-mixin heading-2 {
|
||||
@mixin mt var(--el-h2-vspace-top);
|
||||
@mixin mb var(--el-h2-vspace-bottom);
|
||||
@define-mixin typo_display-2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--type-9);
|
||||
font-weight: 400;
|
||||
line-height: var(--leading-9);
|
||||
text-transform: none;
|
||||
letter-spacing: var(--tracking-9);
|
||||
}
|
||||
|
||||
font-family: var(--el-h2-font-family);
|
||||
font-size: var(--el-h2-font-size);
|
||||
@define-mixin typo_heading-1 {
|
||||
font-family: var(--font-header);
|
||||
font-size: var(--type-8);
|
||||
font-weight: 900;
|
||||
line-height: var(--el-h2-leading);
|
||||
line-height: var(--leading-8);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.0096em;
|
||||
letter-spacing: var(--tracking-8);
|
||||
}
|
||||
|
||||
@define-mixin heading-3 {
|
||||
@mixin mt var(--el-h3-vspace-top);
|
||||
@mixin mb var(--el-h3-vspace-bottom);
|
||||
|
||||
font-family: var(--el-h3-font-family);
|
||||
font-size: var(--el-h3-font-size);
|
||||
@define-mixin typo_heading-2 {
|
||||
font-family: var(--font-header);
|
||||
font-size: var(--type-7);
|
||||
font-weight: 800;
|
||||
line-height: var(--el-h3-leading);
|
||||
line-height: var(--leading-7);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.004em;
|
||||
letter-spacing: var(--tracking-7);
|
||||
}
|
||||
|
||||
@define-mixin heading-4 {
|
||||
@mixin mt var(--el-h4-vspace-top);
|
||||
@mixin mb var(--el-h4-vspace-bottom);
|
||||
|
||||
font-family: var(--el-h4-font-family);
|
||||
font-size: var(--el-h4-font-size);
|
||||
@define-mixin typo_heading-3 {
|
||||
font-family: var(--font-header);
|
||||
font-size: var(--type-6);
|
||||
font-weight: 800;
|
||||
line-height: var(--el-h4-leading);
|
||||
line-height: var(--leading-6);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.0025em;
|
||||
letter-spacing: var(--tracking-6);
|
||||
}
|
||||
|
||||
@define-mixin heading-5 {
|
||||
@mixin mt var(--el-h5-vspace-top);
|
||||
@mixin mb var(--el-h5-vspace-bottom);
|
||||
|
||||
font-family: var(--el-h5-font-family);
|
||||
font-size: var(--el-h5-font-size);
|
||||
@define-mixin typo_heading-4 {
|
||||
font-family: var(--font-header);
|
||||
font-size: var(--type-5);
|
||||
font-weight: 800;
|
||||
line-height: var(--el-h5-leading);
|
||||
line-height: var(--leading-5);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
letter-spacing: var(--tracking-5);
|
||||
}
|
||||
|
||||
@define-mixin heading-6 {
|
||||
@mixin mt var(--el-h6-vspace-top);
|
||||
@mixin mb var(--el-h6-vspace-bottom);
|
||||
|
||||
font-family: var(--el-h6-font-family);
|
||||
font-size: var(--el-h6-font-size);
|
||||
font-weight: 900;
|
||||
line-height: var(--el-h6-leading);
|
||||
@define-mixin typo_heading-5 {
|
||||
font-family: var(--font-header);
|
||||
font-size: var(--type-4);
|
||||
font-weight: 700;
|
||||
line-height: var(--leading-4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.035em;
|
||||
letter-spacing: var(--tracking-4);
|
||||
}
|
||||
|
||||
@define-mixin typo_heading-6 {
|
||||
font-family: var(--font-header);
|
||||
font-size: var(--type-3);
|
||||
font-weight: 700;
|
||||
line-height: var(--leading-3);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--tracking-3);
|
||||
}
|
||||
|
||||
@define-mixin typo_body-large {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--type-2);
|
||||
font-weight: 400;
|
||||
line-height: var(--leading-2);
|
||||
text-transform: none;
|
||||
letter-spacing: var(--tracking-2);
|
||||
}
|
||||
|
||||
@define-mixin typo_body-alt {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--type-1);
|
||||
font-weight: 400;
|
||||
line-height: var(--leading-1);
|
||||
text-transform: none;
|
||||
letter-spacing: var(--tracking-1);
|
||||
}
|
||||
|
||||
@define-mixin typo_body {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--type-0);
|
||||
font-weight: 400;
|
||||
line-height: var(--leading-0);
|
||||
text-transform: none;
|
||||
letter-spacing: var(--tracking-0);
|
||||
}
|
||||
|
||||
@define-mixin typo_body-small {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--type--1);
|
||||
font-weight: 400;
|
||||
line-height: var(--leading--1);
|
||||
text-transform: none;
|
||||
letter-spacing: var(--tracking--1);
|
||||
}
|
||||
|
||||
@define-mixin typo_label {
|
||||
font-family: var(--font-header);
|
||||
font-size: var(--type--2);
|
||||
font-weight: 700;
|
||||
line-height: var(--leading--2);
|
||||
text-transform: none;
|
||||
letter-spacing: var(--tracking--2);
|
||||
}
|
||||
|
||||
@define-mixin typo_fine {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--type--3);
|
||||
font-weight: 400;
|
||||
line-height: var(--leading--3);
|
||||
text-transform: none;
|
||||
letter-spacing: var(--tracking--3);
|
||||
}
|
||||
|
||||
@define-mixin typo_code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--type--1);
|
||||
font-weight: 400;
|
||||
line-height: var(--leading--1);
|
||||
text-transform: none;
|
||||
letter-spacing: var(--tracking-0);
|
||||
}
|
||||
|
||||
@define-mixin typo_table-header {
|
||||
font-family: var(--font-header);
|
||||
font-size: var(--type--1);
|
||||
font-weight: 700;
|
||||
line-height: var(--leading-0);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--tracking-0);
|
||||
}
|
||||
|
||||
@define-mixin typo_table-data {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--type--1);
|
||||
font-weight: 400;
|
||||
line-height: var(--leading--1);
|
||||
text-transform: none;
|
||||
letter-spacing: var(--tracking-0);
|
||||
}
|
||||
|
||||
@define-mixin typo_definition-header {
|
||||
font-family: var(--font-header);
|
||||
font-size: var(--type--0);
|
||||
font-weight: 700;
|
||||
line-height: var(--leading-0);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--tracking-0);
|
||||
}
|
||||
|
||||
@define-mixin typo_definition-data {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--type--1);
|
||||
font-weight: 400;
|
||||
line-height: var(--leading--1);
|
||||
text-transform: none;
|
||||
letter-spacing: var(--tracking-0);
|
||||
}
|
||||
|
||||
@define-mixin typo_subtitle {
|
||||
font-family: var(--font-header);
|
||||
font-size: var(--type-0);
|
||||
font-weight: 300;
|
||||
line-height: var(--leading-0);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.0875em;
|
||||
}
|
||||
|
||||
@define-mixin typo_meta-label {
|
||||
font-family: var(--font-header);
|
||||
font-size: var(--type--2);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--size-1);
|
||||
|
||||
leading: var(--leading--3);
|
||||
}
|
||||
|
||||
@define-mixin typo_meta-data {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--type-0);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--size--3);
|
||||
|
||||
leading: var(--leading-0);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user