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

Added WIP Menu

Browse Source
This commit is contained in:
Dave
2025-09-29 15:20:46 +02:00
parent 1773687814
commit bfbe687b63
56 changed files with 4726 additions and 1070 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
src/styles/globals/elements.css Normal file
View File

@@ -0,0 +1,266 @@
@layer tokens {
:root {
/* === H1 VARIABLES === */
--el-h1-color: var(--color-text-primary);
--el-h1-font-family: var(--font-display);
--el-h1-font-size: var(--typo-size-7xl);
--el-h1-font-weight: var(--typo-weight-black);
--el-h1-letter-spacing: -0.0137em;
--el-h1-line-height: 1.125;
--el-h1-text-transform: uppercase;
--el-h1-vspace-base: calc(1em * var(--el-h1-line-height));
--el-h1-vspace-top: calc(var(--el-h1-vspace-base) * var(--vspace-spacious));
--el-h1-vspace-bottom: calc(var(--el-h1-vspace-base) * var(--vspace-comfortable));
/* === H2 VARIABLES === */
--el-h2-color: var(--color-text-primary);
--el-h2-font-family: var(--font-header);
--el-h2-font-size: var(--typo-size-5xl);
--el-h2-font-weight: var(--typo-weight-black);
--el-h2-letter-spacing: -0.0096em;;
--el-h2-line-height: 1.1765;
--el-h2-text-transform: uppercase;
--el-h2-vspace-base: calc(1em * var(--el-h2-line-height));
--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));
/* === H3 VARIABLES === */
--el-h3-color: var(--color-text-secondary);
--el-h3-font-family: var(--font-header);
--el-h3-font-size: var(--typo-size-4xl);
--el-h3-font-weight: var(--typo-weight-extrabold);
--el-h3-letter-spacing: -0.004em;
--el-h3-line-height: 1.2;
--el-h3-text-transform: uppercase;
--el-h3-vspace-base: calc(1em * var(--el-h3-line-height));
--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));
/* === H4 VARIABLES === */
--el-h4-color: var(--color-text-secondary);
--el-h4-font-family: var(--font-header);
--el-h4-font-size: var(--typo-size-3xl);
--el-h4-font-weight: var(--typo-weight-extrabold);
--el-h4-letter-spacing: 0.0025em;
--el-h4-line-height: 1.125;
--el-h4-text-transform: uppercase;
--el-h4-vspace-base: calc(1em * var(--el-h4-line-height));
--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));
/* === H5 VARIABLES === */
--el-h5-color: var(--color-text-secondary);
--el-h5-font-family: var(--font-header);
--el-h5-font-size: var(--typo-size-2xl);
--el-h5-font-weight: var(--typo-weight-extrabold);
--el-h5-letter-spacing: 0.05em;
--el-h5-line-height: 1.28;
--el-h5-text-transform: uppercase;
--el-h5-vspace-base: calc(1em * var(--el-h5-line-height));
--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));
/* === H6 VARIABLES === */
--el-h6-color: var(--color-text-secondary);
--el-h6-font-family: var(--font-header);
--el-h6-font-size: var(--typo-size-xl);
--el-h6-font-weight: var(--typo-weight-black);
--el-h6-letter-spacing: 0.035em;
--el-h6-line-height: 1.4;
--el-h6-text-transform: uppercase;
--el-h6-vspace-base: calc(1em * var(--el-h6-line-height));
--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));
/* === PARAGRAPH VARIABLES === */
--el-p-color: var(--color-text-primary);
--el-p-font-family: var(--font-body);
--el-p-font-size: var(--typo-size-md);
--el-p-font-weight: var(--typo-weight-regular);
--el-p-line-height: var(--typo-leading-normal);
--el-p-text-align: justify;
--el-p-vspace-base: calc(1em * var(--el-p-line-height));
--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 VARIABLES === */
--el-blockquote-color: var(--color-text-tertiary);
--el-border-color: var(--color-text-tertiary);
--el-blockquote-font-family: var(--font-body);
--el-blockquote-font-size: var(--typo-size-md);
--el-blockquote-font-style: var(--typo-weight-regular);
--el-blockquote-font-weight: var(--typo-weight-medium);
--el-blockquote-line-height: var(--typo-leading-comfortable);
--el-blockquote-vspace-base: calc(1em * var(--el-blockquote-line-height));
--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 VARIABLES === */
--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-line-height: 1.5385;
--el-pre-vspace-base: calc(1em * var(--el-pre-line-height));
--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));
/* === CODE VARIABLES === */
--el-code-color: var(--color-text-inverse);
--el-code-background: var(--color-surface-inverse);
--el-code-font-family: var(--font-mono);
--el-code-font-size: var(--typo-size-sm);
/* === List Variables (For UL/OL) === */
--el-list-color: var(--color-text-primary);
--el-list-line-height: var(--typo-leading-normal);
--el-list-font-size: var(--typo-size-md);
--el-list-vspace-base: calc(1em * var(--el-list-line-height));
--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));
/* === UL VARIABLES === */
--el-ul-indent-l1: var(--spacing-cozy);
--el-ul-indent-l2: var(--spacing-cozy);
--el-ul-indent-l3: var(--spacing-cozy);
--el-ul-indent-l4: var(--spacing-cozy);
--el-ul-item-padding: var(--spacing-cozy);
--el-ul-symbol-l1: '⯃';
--el-ul-symbol-l1-color: var(--color-text-primary);
--el-ul-symbol-l2: '⯁';
--el-ul-symbol-l2-color: var(--color-text-primary);
--el-ul-symbol-l3: '⯆';
--el-ul-symbol-l3-color: var(--color-text-primary);
--el-ul-symbol-l4: '⯀';
--el-ul-symbol-l4-color: var(--color-text-primary);
/* === OL VARIABLES === */
--el-ol-indent-l1: var(--spacing-cozy);
--el-ol-item-indent-l1: 1.5em;
--el-ol-indent-l2: var(--spacing-cozy);
--el-ol-item-indent-l2: 0.825em;
--el-ol-indent-l3: var(--spacing-cozy);
--el-ol-item-indent-l3: 0;
--el-ol-indent-l4: var(--spacing-cozy);
--el-ol-item-indent-l4: 0;
--el-ol-item-padding: var(--spacing-cozy);
--el-ol-line-height: var(--typo-leading-normal);
--el-ol-marker-color-l1: var(--color-text-primary);
--el-ol-prefix-l1: '';
--el-ol-style-l1: decimal-leading-zero;
--el-ol-suffix-l1: '.)';
--el-ol-marker-color-l2: var(--color-text-primary);
--el-ol-prefix-l2: '';
--el-ol-style-l2: lower-alpha;
--el-ol-suffix-l2: '.)';
--el-ol-marker-color-l3: var(--color-text-primary);
--el-ol-prefix-l3: '';
--el-ol-style-l3: upper-roman;
--el-ol-suffix-l3: '.)';
--el-ol-marker-color-l4: var(--color-text-primary);
--el-ol-prefix-l4: '';
--el-ol-style-l4: lower-greek;
--el-ol-suffix-l4: '.)';
/* === DL VARIABLES === */
--el-dl-font-size: var(--typo-size-md);
--el-dl-line-height: var(--typo-leading-normal);
--el-dl-vspace-base: calc(1em * var(--el-dl-line-height));
--el-dl-vspace-top: calc(var(--el-dl-vspace-base) * var(--vspace-snug));
--el-dl-vspace-bottom: calc(var(--el-dl-vspace-base) * var(--vspace-compressed));
/* === DT VARIABLES === */
--el-dt-color: var(--color-text-inverse);
--el-dt-background: var(--color-surface-inverse);
--el-dt-font-family: var(--font-header);
--el-dt-font-size: var(--typo-size-lg);
--el-dt-font-weight: var(--typo-weight-bold);
--el-dt-line-height: 1.4;
--el-dt-text-transform: uppercase;
--el-dt-letter-spacing: 0.035em;
--el-dt-padding: var(--spacing-snug);
--el-dt-vspace-base: calc(1em * var(--el-dt-line-height));
--el-dt-vspace-top: calc(var(--el-dt-vspace-base) * var(--vspace-snug));
--el-dt-vspace-bottom: calc(var(--el-dt-vspace-base) * var(--vspace-compressed));
/* === DD VARIABLES === */
--el-dd-color: var(--color-text-primary);
--el-dd-font-family: var(--font-body);
--el-dd-font-size: var(--typo-size-md);
--el-dd-line-height: var(--typo-leading-normal);
--el-dd-indent: 0 var(--spacing-comfortable);
--el-dd-vspace-base: calc(1em * var(--el-dd-line-height));
--el-dd-vspace-top: calc(var(--el-dd-vspace-base) * var(--vspace-compressed));
--el-dd-vspace-bottom: calc(var(--el-dd-vspace-base) * var(--vspace-tight));
/* === TABLE VARIABLES === */
--el-table-font-size: var(--typo-size-sm);
--el-table-line-height: 1.2;
--el-table-border: var(--size-2) solid var(--color-text-primary);
--el-table-vspace-top: var(--spacing-tight);
--el-table-vspace-bottom: var(--spacing-tight);
/* === TH VARIABLES === */
--el-th-color: var(--color-text-inverse);
--el-th-background: var(--color-surface-inverse);
--el-th-font-family: var(--font-header);
--el-th-font-size: var(--typo-size-sm);
--el-th-font-weight: var(--typo-weight-black);
--el-th-text-transform: uppercase;
--el-th-line-height: var(--el-table-line-height);
--el-th-padding: 0 var(--spacing-snug) var(--spacing-snug);
/* === TD VARIABLES === */
--el-td-color: var(--color-text-primary);
--el-td-font-family: var(--font-mono);
--el-td-font-size: var(--typo-size-sm);
--el-td-line-height: var(--el-table-line-height);
--el-td-padding: var(--spacing-snug);
--el-td-border: var(--size-1) solid var(--color-text-secondary);
/* === CAPTION VARIABLES === */
--el-caption-color: var(--color-text-tertiary);
--el-caption-font-family: var(--font-body);
--el-caption-font-size: var(--typo-size-sm);
--el-caption-font-style: italic;
--el-caption-text-align: center;
/* === FIGCAPTION VARIABLES === */
--el-figcaption-color: var(--color-text-tertiary);
--el-figcaption-font-family: var(--font-body);
--el-figcaption-font-size: var(--typo-size-xs);
--el-figcaption-font-style: italic;
--el-figcaption-text-align: center;
/* === SMALL VARIABLES === */
--el-small-color: var(--color-text-tertiary);
--el-small-font-family: var(--font-body);
--el-small-font-size: var(--typo-size-xs);
/* HR */
--hr-height: var(--size-3);
--hr-margin: var(--spacing-relaxed) 0;
--hr-color: var(--color-text-tertiary);
--hr-symbol-content: "▼";
--hr-symbol-size: var(--typo-size-4xl);
--hr-symbol-space: 0 0.25em;
--hr-symbol-line-height: var(--typo-leading-compressed);
--hr-symbol-color: var(--color-text-tertiary);
--hr-symbol-background: var(--color-surface-base);
/* Header */
--el-header-font-size: var(--typo-size-responsive);
--el-header-line-height: var(--typo-leading-snug);
--el-header-paddingY: var(--spacing-snug);
--el-header-height: calc(
(var(--typo-size-responsive) * var(--el-header-line-height)) +
(var(--el-header-paddingY) * 2)
);
}
}