dave-dmg/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored prose and added style for ToC.astro

Browse Source
This commit is contained in:
Dave
2026-09-28 12:03:07 +02:00
parent d06f0293ce
commit 99d2635763
15 changed files with 559 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
src/styles/components/prose.css Normal file
View File

@@ -0,0 +1,357 @@
@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;
}
}
}