Refactored primitives & content.css
This commit is contained in:
@@ -1,68 +1,577 @@
|
||||
.content {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--typo-size-responsive);
|
||||
font-family: var(--font-body);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user