Update CSS space variables names: use numbers instead of T-shirts sizes
This commit is contained in:
parent
df8b08ee6d
commit
a240c3a016
10 changed files with 106 additions and 103 deletions
|
|
@ -30,13 +30,14 @@
|
|||
--color-disabled: var(--color-grey-400);
|
||||
|
||||
/* Space scale */
|
||||
--space: .275em; /* typographic space */
|
||||
--space-xs: .25rem; /* 4px */
|
||||
--space-sm: .5rem; /* 8px */
|
||||
--space-md: .75rem; /* 12px */
|
||||
--space-lg: 1rem; /* 16px */
|
||||
--space-xl: 1.5rem; /* 24px */
|
||||
--space-2xl: 2rem; /* 32px */
|
||||
--space-1: .275em; /* typographic space */
|
||||
--space-4: .25rem;
|
||||
--space-8: .5rem;
|
||||
--space-12: .75rem;
|
||||
--space-16: 1rem;
|
||||
--space-24: 1.5rem;
|
||||
--space-32: 2rem;
|
||||
--space-40: 2.5rem;
|
||||
|
||||
/* Type scale */
|
||||
--text-xs: .75rem; /* 12px */
|
||||
|
|
@ -59,7 +60,7 @@
|
|||
--sidebar-width: 22.25rem; /* 356px */
|
||||
--flow-space: 1rem;
|
||||
--auto-grid-placement: auto-fill;
|
||||
--gap: var(--space-lg);
|
||||
--gap: var(--space-16);
|
||||
|
||||
/* Borders */
|
||||
--rounded-xs: 1px;
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ body {
|
|||
-webkit-font-feature-settings: "liga", "clig";
|
||||
font-feature-settings: "liga", "clig";
|
||||
background-color: var(--color-grey-50);
|
||||
color: var(--color-text, black);
|
||||
padding: 2rem var(--gutter);
|
||||
color: var(--color-text, currentColor);
|
||||
padding: var(--gutter);
|
||||
}
|
||||
|
||||
/* If an element is [hidden] it needs to be max priority */
|
||||
|
|
@ -64,7 +64,7 @@ h6 > a {
|
|||
|
||||
*:not(.sr-only) + h2,
|
||||
*:not(.sr-only) + h3 {
|
||||
margin-top: var(--space-xs);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ blockquote {
|
|||
padding-left: 0;
|
||||
}
|
||||
blockquote > * {
|
||||
padding-left: var(--space-md);
|
||||
padding-left: var(--space-12);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -104,7 +104,7 @@ hr {
|
|||
|
||||
hr,
|
||||
hr + * {
|
||||
--flow-space: var(--space-xs);
|
||||
--flow-space: var(--space-4);
|
||||
}
|
||||
|
||||
/* Sub and sup */
|
||||
|
|
@ -126,6 +126,9 @@ sup {
|
|||
|
||||
/* Details */
|
||||
|
||||
details {
|
||||
position: relative;
|
||||
}
|
||||
summary {
|
||||
-webkit-appearance: none;
|
||||
list-style: none;
|
||||
|
|
@ -140,22 +143,21 @@ summary::marker {
|
|||
display: none;
|
||||
content: "";
|
||||
}
|
||||
summary::before {
|
||||
content: '+';
|
||||
margin-right: var(--space);
|
||||
summary::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background-color: var(--color-background);
|
||||
background-image: var(--icon-summary);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
summary + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
summary + .gallery,
|
||||
summary + figure {
|
||||
margin-top: .5em;
|
||||
}
|
||||
details > *:last-child {
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
details[open] > summary::before {
|
||||
content: '−';
|
||||
details[open] > summary::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -175,7 +177,7 @@ figcaption::before {
|
|||
margin-left: var(--gap);
|
||||
}
|
||||
figure + p {
|
||||
margin-top: var(--space-xs);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
video {
|
||||
|
|
@ -234,7 +236,7 @@ a.link-full:focus-visible::after {
|
|||
|
||||
form {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
input {
|
||||
font: inherit;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,6 @@
|
|||
flex-wrap: var(--wrap, wrap);
|
||||
align-items: var(--items, center);
|
||||
justify-content: var(--justify, flex-start);
|
||||
column-gap: var(--column-gap, var(--gutter, var(--space-sm)));
|
||||
row-gap: var(--row-gap, var(--gutter, var(--space-sm)));
|
||||
column-gap: var(--column-gap, var(--gutter, var(--space-8)));
|
||||
row-gap: var(--row-gap, var(--gutter, var(--space-8)));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
.with-sidebar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2xl);
|
||||
gap: var(--space-32);
|
||||
}
|
||||
|
||||
.with-sidebar > :first-child {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
padding: var(--space-12) var(--space-16);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: var(--text-sm);
|
||||
|
|
|
|||
|
|
@ -6,6 +6,6 @@
|
|||
align-items: flex-start;
|
||||
min-height: var(--header-height);
|
||||
padding: 0 var(--gutter);
|
||||
margin-bottom: var(--space-xl);
|
||||
margin-bottom: var(--space-24);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
gap: var(--space-8);
|
||||
padding: var(--space-4) var(--space-12);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: var(--text-sm);
|
||||
|
|
@ -22,6 +22,6 @@
|
|||
}
|
||||
|
||||
.pill[data-icon] {
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
padding: var(--space-8) var(--space-16);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,80 +5,80 @@
|
|||
.m-0 { margin: 0 }
|
||||
|
||||
.mb-0 { margin-bottom: 0 }
|
||||
.mb-xs { margin-bottom: var(--space-xs) }
|
||||
.mb-sm { margin-bottom: var(--space-sm) }
|
||||
.mb-md { margin-bottom: var(--space-md) }
|
||||
.mb-lg { margin-bottom: var(--space-lg) }
|
||||
.mb-xl { margin-bottom: var(--space-xl) }
|
||||
.mb-2xl { margin-bottom: var(--space-2xl) }
|
||||
.mb-xs { margin-bottom: var(--space-4) }
|
||||
.mb-sm { margin-bottom: var(--space-8) }
|
||||
.mb-md { margin-bottom: var(--space-12) }
|
||||
.mb-lg { margin-bottom: var(--space-16) }
|
||||
.mb-xl { margin-bottom: var(--space-24) }
|
||||
.mb-2xl { margin-bottom: var(--space-32) }
|
||||
|
||||
.ml-auto { margin-left: auto }
|
||||
.ml-xs { margin-left: var(--space-xs) }
|
||||
.ml-sm { margin-left: var(--space-sm) }
|
||||
.ml-md { margin-left: var(--space-md) }
|
||||
.ml-lg { margin-left: var(--space-lg) }
|
||||
.ml-xl { margin-left: var(--space-xl) }
|
||||
.ml-xs { margin-left: var(--space-4) }
|
||||
.ml-sm { margin-left: var(--space-8) }
|
||||
.ml-md { margin-left: var(--space-12) }
|
||||
.ml-lg { margin-left: var(--space-16) }
|
||||
.ml-xl { margin-left: var(--space-24) }
|
||||
|
||||
.mr-auto { margin-right: auto }
|
||||
.mr-xs { margin-right: var(--space-xs) }
|
||||
.mr-sm { margin-right: var(--space-sm) }
|
||||
.mr-md { margin-right: var(--space-md) }
|
||||
.mr-lg { margin-right: var(--space-lg) }
|
||||
.mr-xl { margin-right: var(--space-xl) }
|
||||
.mr-xs { margin-right: var(--space-4) }
|
||||
.mr-sm { margin-right: var(--space-8) }
|
||||
.mr-md { margin-right: var(--space-12) }
|
||||
.mr-lg { margin-right: var(--space-16) }
|
||||
.mr-xl { margin-right: var(--space-24) }
|
||||
|
||||
.-mt-px { margin-top: -1px }
|
||||
.mt-0 { margin-top: 0 }
|
||||
.mt-xs { margin-top: var(--space-xs) }
|
||||
.mt-sm { margin-top: var(--space-sm) }
|
||||
.mt-md { margin-top: var(--space-md) }
|
||||
.mt-lg { margin-top: var(--space-lg) }
|
||||
.mt-xl { margin-top: var(--space-xl) }
|
||||
.mt-2xl { margin-top: var(--space-2xl) }
|
||||
.mt-xs { margin-top: var(--space-4) }
|
||||
.mt-sm { margin-top: var(--space-8) }
|
||||
.mt-md { margin-top: var(--space-12) }
|
||||
.mt-lg { margin-top: var(--space-16) }
|
||||
.mt-xl { margin-top: var(--space-24) }
|
||||
.mt-2xl { margin-top: var(--space-32) }
|
||||
|
||||
.mx-px { margin-left: 1px ; margin-right: 1px }
|
||||
.mx-xs { margin-left: var(--space-xs) ; margin-right: var(--space-xs) }
|
||||
.mx-sm { margin-left: var(--space-sm) ; margin-right: var(--space-sm) }
|
||||
.mx-md { margin-left: var(--space-md) ; margin-right: var(--space-md) }
|
||||
.mx-lg { margin-left: var(--space-lg) ; margin-right: var(--space-lg) }
|
||||
.mx-xl { margin-left: var(--space-xl) ; margin-right: var(--space-xl) }
|
||||
.mx-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl) }
|
||||
.mx-xs { margin-left: var(--space-4) ; margin-right: var(--space-4) }
|
||||
.mx-sm { margin-left: var(--space-8) ; margin-right: var(--space-8) }
|
||||
.mx-md { margin-left: var(--space-12) ; margin-right: var(--space-12) }
|
||||
.mx-lg { margin-left: var(--space-16) ; margin-right: var(--space-16) }
|
||||
.mx-xl { margin-left: var(--space-24) ; margin-right: var(--space-24) }
|
||||
.mx-2xl { margin-left: var(--space-32); margin-right: var(--space-32) }
|
||||
|
||||
.my-xs { margin-top: var(--space-xs) ; margin-bottom: var(--space-xs) }
|
||||
.my-sm { margin-top: var(--space-sm) ; margin-bottom: var(--space-sm) }
|
||||
.my-md { margin-top: var(--space-md) ; margin-bottom: var(--space-md) }
|
||||
.my-lg { margin-top: var(--space-lg) ; margin-bottom: var(--space-lg) }
|
||||
.my-xl { margin-top: var(--space-xl) ; margin-bottom: var(--space-xl) }
|
||||
.my-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl) }
|
||||
.my-xs { margin-top: var(--space-4) ; margin-bottom: var(--space-4) }
|
||||
.my-sm { margin-top: var(--space-8) ; margin-bottom: var(--space-8) }
|
||||
.my-md { margin-top: var(--space-12) ; margin-bottom: var(--space-12) }
|
||||
.my-lg { margin-top: var(--space-16) ; margin-bottom: var(--space-16) }
|
||||
.my-xl { margin-top: var(--space-24) ; margin-bottom: var(--space-24) }
|
||||
.my-2xl { margin-top: var(--space-32); margin-bottom: var(--space-32) }
|
||||
|
||||
|
||||
/* Padding */
|
||||
|
||||
.pl-0 { padding-left: 0 }
|
||||
|
||||
.pt-xs { padding-top: var(--space-xs) }
|
||||
.pt-sm { padding-top: var(--space-sm) }
|
||||
.pt-md { padding-top: var(--space-md) }
|
||||
.pt-lg { padding-top: var(--space-lg) }
|
||||
.pt-xl { padding-top: var(--space-xl) }
|
||||
.pt-2xl { padding-top: var(--space-2xl) }
|
||||
.pt-xs { padding-top: var(--space-4) }
|
||||
.pt-sm { padding-top: var(--space-8) }
|
||||
.pt-md { padding-top: var(--space-12) }
|
||||
.pt-lg { padding-top: var(--space-16) }
|
||||
.pt-xl { padding-top: var(--space-24) }
|
||||
.pt-2xl { padding-top: var(--space-32) }
|
||||
|
||||
.pb-xs { padding-bottom: var(--space-xs) }
|
||||
.pb-sm { padding-bottom: var(--space-sm) }
|
||||
.pb-md { padding-bottom: var(--space-md) }
|
||||
.pb-lg { padding-bottom: var(--space-lg) }
|
||||
.pb-xl { padding-bottom: var(--space-xl) }
|
||||
.pb-2xl { padding-bottom: var(--space-2xl) }
|
||||
.pb-xs { padding-bottom: var(--space-4) }
|
||||
.pb-sm { padding-bottom: var(--space-8) }
|
||||
.pb-md { padding-bottom: var(--space-12) }
|
||||
.pb-lg { padding-bottom: var(--space-16) }
|
||||
.pb-xl { padding-bottom: var(--space-24) }
|
||||
.pb-2xl { padding-bottom: var(--space-32) }
|
||||
|
||||
.px-xs { padding-left: var(--space-xs) ; padding-right: var(--space-xs) }
|
||||
.px-sm { padding-left: var(--space-sm) ; padding-right: var(--space-sm) }
|
||||
.px-md { padding-left: var(--space-md) ; padding-right: var(--space-md) }
|
||||
.px-lg { padding-left: var(--space-lg) ; padding-right: var(--space-lg) }
|
||||
.px-xl { padding-left: var(--space-xl) ; padding-right: var(--space-xl) }
|
||||
.px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl) }
|
||||
.px-xs { padding-left: var(--space-4) ; padding-right: var(--space-4) }
|
||||
.px-sm { padding-left: var(--space-8) ; padding-right: var(--space-8) }
|
||||
.px-md { padding-left: var(--space-12) ; padding-right: var(--space-12) }
|
||||
.px-lg { padding-left: var(--space-16) ; padding-right: var(--space-16) }
|
||||
.px-xl { padding-left: var(--space-24) ; padding-right: var(--space-24) }
|
||||
.px-2xl { padding-left: var(--space-32); padding-right: var(--space-32) }
|
||||
|
||||
.py-xs { padding-top: var(--space-xs) ; padding-bottom: var(--space-xs) }
|
||||
.py-sm { padding-top: var(--space-sm) ; padding-bottom: var(--space-sm) }
|
||||
.py-md { padding-top: var(--space-md) ; padding-bottom: var(--space-md) }
|
||||
.py-lg { padding-top: var(--space-lg) ; padding-bottom: var(--space-lg) }
|
||||
.py-xl { padding-top: var(--space-xl) ; padding-bottom: var(--space-xl) }
|
||||
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl) }
|
||||
.py-xs { padding-top: var(--space-4) ; padding-bottom: var(--space-4) }
|
||||
.py-sm { padding-top: var(--space-8) ; padding-bottom: var(--space-8) }
|
||||
.py-md { padding-top: var(--space-12) ; padding-bottom: var(--space-12) }
|
||||
.py-lg { padding-top: var(--space-16) ; padding-bottom: var(--space-16) }
|
||||
.py-xl { padding-top: var(--space-24) ; padding-bottom: var(--space-24) }
|
||||
.py-2xl { padding-top: var(--space-32); padding-bottom: var(--space-32) }
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ const frenchFormattedModified = dayjs(project.modified).format(
|
|||
.project-item h3 {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--text-lg);
|
||||
margin-bottom: var(--space-sm);
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
.project-item p {
|
||||
font-size: var(--text-sm);
|
||||
|
|
@ -61,7 +61,7 @@ const frenchFormattedModified = dayjs(project.modified).format(
|
|||
--color: var(--color-primary-100);
|
||||
flex: 1 1 0%;
|
||||
display: flex;
|
||||
gap: var(--space-lg);
|
||||
gap: var(--space-16);
|
||||
margin-top: -2.75rem;
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,15 +54,15 @@ function changeTab(tabId) {
|
|||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--space-md);
|
||||
margin: 0 auto var(--space-12);
|
||||
border-radius: var(--rounded-full);
|
||||
min-height: 60px;
|
||||
height: 3.75rem; /* 60px */
|
||||
}
|
||||
|
||||
[role="tab"] {
|
||||
--tab-height: 2.5rem;
|
||||
--tab-py: var(--space-md);
|
||||
--tab-px: var(--space-lg);
|
||||
--tab-py: var(--space-12);
|
||||
--tab-px: var(--space-16);
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -74,7 +74,7 @@ function changeTab(tabId) {
|
|||
padding: var(--tab-py) var(--tab-px);
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
gap: var(--space-lg);
|
||||
gap: var(--space-16);
|
||||
height: var(--tab-height);
|
||||
}
|
||||
[role="tab"]:focus,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue