add variables for most spacing and size values

This commit is contained in:
elisejakob
2024-06-21 12:21:01 +02:00
parent 8ba4fa8d04
commit 5762655653
29 changed files with 137 additions and 127 deletions

View File

@ -44,9 +44,13 @@
--color-menu-background: var(--color-goldenBeige);
// spacing
--spacing-sitepadding: 2rem;
--spacing-gap-column: 2rem;
--spacing-gap-row: 1.5rem;
--spacing-sitepadding-block: 2rem;
--spacing-sitepadding-inline: 2rem;
--spacing-gap-column: var(--spacing-sitepadding-block);
--spacing-gap-row: calc(var(--spacing-gap-column)*-.25);
--spacing-xs: .5rem;
--spacing-s: 1rem;
--spacing-m: 2rem;
--spacing-l: 3rem;
--spacing-xl: 6rem;
--spacing-section-bottom: var(--spacing-l);
@ -54,10 +58,26 @@
// sizes
--size-width-p: 36rem;
--size-icon: 1em;
--size-icon-circle: 3rem;
--size-icon-large: 3.4rem;
// animations
--transition-easing: .3s ease;
--border: 1px solid var(--color-neufPink);
--border-s: 1px solid var(--color-chateauBlue-05);
}
@media (min-width: 1400px) {
:root {
--spacing-sitepadding-block: 2.5rem;
--spacing-sitepadding-inline: 6rem;
}
}
@media (min-width: 1920px) {
:root {
--spacing-sitepadding-block: 3rem;
--spacing-sitepadding-inline: 10rem;
}
}