frog-website/src/lib/css/variables.scss

45 lines
986 B
SCSS

$mobile-breakpoint: "max-width: 768px";
:root {
--background-dark: url("/img/background-black-red.jpg");
--background-red: url("/img/background-red.jpg");
--color-text: #161616;
--color-surface: #ffffff;
--color-primary: #DB2937;
--color-on-primary: #ffffff;
--color-dark: #161616;
--color-on-dark: #ffffff;
--color-link: var(--color-primary);
--space-xsmall: 5px;
--space-small: 10px;
--space-medium: 20px;
--space-large: 30px;
--space-xlarge: 60px;
--width: 1100px;
--fz-1: 4rem;
--fz-2: 2rem;
--fz-3: 1.5rem;
--fz-4: 1.125rem;
--border-radius-small: 3px;
--border-radius-medium: 7px;
--elevation-high: 0px 5px 5px 0px rgba(22, 22, 22, 0.5);
--elevation-medium: 0px 2px 7px 0px rgba(22, 22, 22, 0.3);
--transitions-duration: 0.2s;
@media ($mobile-breakpoint) {
--fz-1: 2.8rem;
--fz-2: 1.825rem;
--fz-3: 1.5rem;
--fz-4: 1.125rem;
}
}