add variables for most spacing and size values
This commit is contained in:
@ -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;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user