51 lines
1.3 KiB
SCSS
51 lines
1.3 KiB
SCSS
:root {
|
|
// font families
|
|
--font-main: 'Avenir Next', 'Avenir', sans-serif;
|
|
--font-serif: 'p22-mackinac-pro', serif;
|
|
|
|
--font-size-caption: .8rem;
|
|
--font-size-body: 1rem;
|
|
--font-size-lead: 1.4rem;
|
|
--font-size-h2: 1.8rem;
|
|
--font-size-h1: 2.4rem;
|
|
|
|
|
|
// colors
|
|
|
|
// color palette
|
|
--color-deepBrick: rgb(114, 3, 40);
|
|
--color-neufPink: rgb(205, 150, 171);
|
|
--color-betongGray: rgb(229, 226, 215);
|
|
--color-goldenOrange: rgb(255, 105, 21);
|
|
--color-goldenBeige: rgb(248, 188, 144);
|
|
--color-chateauBlue: rgb(10, 15, 109);
|
|
--color-white: #fff;
|
|
--color-black: rgb(22, 21, 22);
|
|
|
|
// additional colors adjusted for web
|
|
--color-betongGray-darkened: rgb(220, 216, 204);
|
|
|
|
// colors in use
|
|
--color-text: var(--color-chateauBlue);
|
|
--color-background: var(--color-betongGray);
|
|
--color-background-secondary: var(--color-betongGray-darkened);
|
|
--color-cta-background: var(--color-goldenOrange);
|
|
--color-cta-text: var(--color-black);
|
|
--color-placeholder: var(--color-neufPink);
|
|
--color-menu-text: var(--color-deepBrick);
|
|
--color-menu-background: var(--color-goldenBeige);
|
|
|
|
// spacing
|
|
--spacing-sitepadding: 2rem;
|
|
--spacing-gap-column: 2rem;
|
|
--spacing-gap-row: 1.5rem;
|
|
--spacing-section-bottom: 3rem;
|
|
|
|
// sizes
|
|
--size-width-p: 36rem;
|
|
|
|
// animations
|
|
--transition-easing: .3s ease;
|
|
|
|
--border: 1px solid var(--color-neufPink);
|
|
} |