358 lines
7.8 KiB
CSS
358 lines
7.8 KiB
CSS
@property --prose-line {
|
|
inherits: true;
|
|
initial-value: 0;
|
|
syntax: "<length>";
|
|
}
|
|
|
|
@layer components {
|
|
.prose {
|
|
@mixin typo_body;
|
|
|
|
counter-reset: sec sub tbl fig;
|
|
|
|
& > :first-child {
|
|
margin-block-start: var(--size-0);
|
|
}
|
|
|
|
& > :last-child {
|
|
margin-block-end: var(--size-0);
|
|
}
|
|
|
|
& ::selection {
|
|
color: var(--color-text-on-accent);
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
/* === Paragraphs === */
|
|
& p {
|
|
@mixin my var(--space-6);
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
/* === HEADINGS === */
|
|
& h2 {
|
|
@mixin typo_heading-2;
|
|
@mixin mt var(--space-11);
|
|
@mixin mb var(--space-8);
|
|
@mixin ps var(--size-9);
|
|
counter-set: sub 0 fig 0;
|
|
counter-increment: sec;
|
|
|
|
clear: both;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
|
|
border-inline-start: var(--slot-prose-bar) solid var(--color-text-primary);
|
|
|
|
text-wrap: balance;
|
|
|
|
&::before {
|
|
@mixin pt var(--space-4);
|
|
content: "§ " counter(sec, upper-roman);
|
|
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: var(--font-weight-emphasis);
|
|
line-height: 1;
|
|
letter-spacing: var(--tracking-label);
|
|
}
|
|
}
|
|
|
|
& h3 {
|
|
@mixin typo_heading-3;
|
|
@mixin mt var(--space-10);
|
|
@mixin mb var(--space-7);
|
|
@mixin py var(--size-3);
|
|
@mixin px var(--size-7);
|
|
counter-increment: sub;
|
|
|
|
display: flex;
|
|
gap: var(--size-7);
|
|
align-items: baseline;
|
|
|
|
color: var(--color-text-inverse);
|
|
|
|
background-color: var(--color-surface-inverse);
|
|
|
|
&::before {
|
|
content: counter(sec, upper-roman) "." counter(sub);
|
|
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: var(--font-weight-emphasis);
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
& h4 {
|
|
@mixin typo_heading-4;
|
|
@mixin mt var(--space-9);
|
|
@mixin mb var(--space-6);
|
|
@mixin py var(--size-2);
|
|
border-block: var(--border-shell) solid var(--color-text-primary);
|
|
}
|
|
|
|
/* === LISTS === */
|
|
|
|
& ul,
|
|
& ol {
|
|
@mixin my var(--space-6);
|
|
@mixin pl var(--size-0);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
list-style: none;
|
|
|
|
& li {
|
|
--prose-line: 1lh;
|
|
display: grid;
|
|
grid-template-columns: var(--slot-prose-marker) minmax(0, 1fr);
|
|
column-gap: var(--slot-prose-gap);
|
|
|
|
& > * {
|
|
grid-column: 2;
|
|
}
|
|
|
|
& > ul,
|
|
& > ol {
|
|
@mixin mt var(--space-3);
|
|
@mixin mb var(--size-0);
|
|
gap: var(--space-3);
|
|
}
|
|
}
|
|
}
|
|
|
|
& ul {
|
|
& > li {
|
|
&::before {
|
|
content: "";
|
|
|
|
justify-self: center;
|
|
|
|
width: 0.625rem;
|
|
height: 0.625rem;
|
|
margin-block-start: calc((var(--prose-line) - 0.625rem) / 2);
|
|
|
|
background-color: var(--color-text-primary);
|
|
}
|
|
|
|
& ul {
|
|
& > li {
|
|
&::before {
|
|
background-color: transparent;
|
|
box-shadow: inset 0 0 0 var(--border-card) var(--color-text-primary);
|
|
}
|
|
}
|
|
|
|
& ul {
|
|
& > li {
|
|
&::before {
|
|
height: var(--size-2);
|
|
margin-block-start: calc((var(--prose-line) - var(--size-2)) / 2);
|
|
background-color: var(--color-text-primary);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& ol {
|
|
counter-reset: step;
|
|
|
|
& > li {
|
|
counter-increment: step;
|
|
|
|
&::before {
|
|
content: counter(step, decimal-leading-zero);
|
|
|
|
display: grid;
|
|
place-items: center;
|
|
|
|
height: 1.375rem;
|
|
margin-block-start: calc((var(--prose-line) - 1.375rem) / 2);
|
|
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: var(--font-weight-emphasis);
|
|
line-height: 1;
|
|
color: var(--color-text-inverse);
|
|
|
|
background-color: var(--color-surface-inverse);
|
|
}
|
|
|
|
& ol {
|
|
& > li {
|
|
&::before {
|
|
content: counter(step, lower-alpha);
|
|
color: var(--color-text-primary);
|
|
background-color: transparent;
|
|
box-shadow: inset 0 0 0 var(--border-card) var(--color-text-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* === QUOTES & RULES === */
|
|
& blockquote {
|
|
@mixin my var(--space-6);
|
|
@mixin ps 3ch;
|
|
font-style: italic;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
& hr {
|
|
@mixin my var(--space-10);
|
|
@mixin border-t var(--border-hairline), solid, var(--color-border-strong);
|
|
border-block-end: none;
|
|
border-inline: none;
|
|
}
|
|
|
|
/* === INLINE === */
|
|
& :not(pre) {
|
|
& > code {
|
|
@mixin px var(--space-2);
|
|
@mixin py var(--space-px);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875em;
|
|
background-color: var(--color-surface-elevated-3);
|
|
}
|
|
}
|
|
|
|
& sup {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
& pre {
|
|
@mixin typo_code;
|
|
@mixin my var(--space-9);
|
|
@mixin py var(--size-7);
|
|
@mixin px var(--size-8);
|
|
overflow: auto;
|
|
border: var(--border-card) solid var(--color-border-strong);
|
|
tab-size: 2;
|
|
background-color: var(--color-surface-elevated-1);
|
|
|
|
& code {
|
|
@mixin pa var (--size-0);
|
|
font: inherit;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
& a {
|
|
color: var(--color-text-link);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: var(--size-1);
|
|
text-underline-offset: var(--size-2);
|
|
|
|
transition: color var(--motion-fast) var(--ease-out);
|
|
|
|
&:visited {
|
|
color: var(--color-text-link-visited);
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--color-text-link-hover);
|
|
}
|
|
|
|
&:focus-visible {
|
|
@mixin focus-ring;
|
|
}
|
|
}
|
|
|
|
& em {
|
|
font-style: italic;
|
|
}
|
|
|
|
& b,
|
|
& strong {
|
|
font-weight: var(--font-weight-emphasis);
|
|
}
|
|
|
|
& mark {
|
|
@mixin px var(--size-1);
|
|
color: var(--color-text-on-accent);
|
|
background-color: var(--color-tertiary);
|
|
}
|
|
|
|
& del,
|
|
& s {
|
|
color: var(--color-text-tertiary);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/* === TABLES === */
|
|
table {
|
|
@mixin typo_table-data;
|
|
@mixin my var(--space-10);
|
|
border-spacing: 0;
|
|
border-collapse: separate;
|
|
width: 100%;
|
|
|
|
& th,
|
|
& td {
|
|
@mixin py var(--space-4);
|
|
@mixin px var(--space-6);
|
|
@mixin border-b var(--border-hairline), solid, var(--color-border-subtle);
|
|
}
|
|
|
|
& thead {
|
|
& th {
|
|
@mixin typo_table-header;
|
|
@mixin border-b var(--border-card), solid, var(--color-border-strong);
|
|
}
|
|
}
|
|
|
|
& tbody {
|
|
& tr {
|
|
&:last-child {
|
|
& :is(th, td) {
|
|
@mixin border-b var(--border-card), solid, var(--color-border-strong);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--color-surface-hover);
|
|
}
|
|
}
|
|
|
|
& th[scope="row"] {
|
|
font-family: var(--font-header);
|
|
font-weight: var(--font-weight-heading);
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
|
|
& :is(tfoot, tr.total) {
|
|
& :is(th, td) {
|
|
@mixin border-t var(--border-card), solid, var(--color-border-strong);
|
|
}
|
|
}
|
|
|
|
& .num {
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
& .key {
|
|
font-weight: var(--font-weight-emphasis);
|
|
}
|
|
|
|
td.text {
|
|
font-family: var(--font-body);
|
|
font-size: 1.077em;
|
|
line-height: 1.55;
|
|
color: var(--color-text-secondary);
|
|
text-wrap: pretty;
|
|
}
|
|
}
|
|
}
|