61 lines
3.2 KiB
CSS
61 lines
3.2 KiB
CSS
:root {
|
|
--primary: rgb(255, 190, 0);
|
|
--secondary: rgb(255, 100, 0);
|
|
--light: rgb(255, 252, 245);
|
|
--dark: rgb(6, 2, 0);
|
|
--primary-100: color-mix(in lch, var(--primary), var(--light) 90%);
|
|
--primary-200: color-mix(in lch, var(--primary), var(--light) 80%);
|
|
--primary-300: color-mix(in lch, var(--primary), var(--light) 70%);
|
|
--primary-400: color-mix(in lch, var(--primary), var(--light) 60%);
|
|
--primary-500: color-mix(in lch, var(--primary), var(--light));
|
|
--primary-600: color-mix(in lch, var(--primary), var(--light) 40%);
|
|
--primary-700: color-mix(in lch, var(--primary), var(--light) 30%);
|
|
--primary-800: color-mix(in lch, var(--primary), var(--light) 20%);
|
|
--primary-900: color-mix(in lch, var(--primary), var(--light) 10%);
|
|
--primary-dark-100: color-mix(in lch, var(--primary), var(--dark) 90%);
|
|
--primary-dark-200: color-mix(in lch, var(--primary), var(--dark) 80%);
|
|
--primary-dark-300: color-mix(in lch, var(--primary), var(--dark) 70%);
|
|
--primary-dark-400: color-mix(in lch, var(--primary), var(--dark) 60%);
|
|
--primary-dark-500: color-mix(in lch, var(--primary), var(--dark));
|
|
--primary-dark-600: color-mix(in lch, var(--primary), var(--dark) 40%);
|
|
--primary-dark-700: color-mix(in lch, var(--primary), var(--dark) 30%);
|
|
--primary-dark-800: color-mix(in lch, var(--primary), var(--dark) 20%);
|
|
--primary-dark-900: color-mix(in lch, var(--primary), var(--dark) 10%);
|
|
--secondary-light-100: color-mix(in lch, var(--secondary), var(--light) 90%);
|
|
--secondary-light-200: color-mix(in lch, var(--secondary), var(--light) 80%);
|
|
--secondary-light-300: color-mix(in lch, var(--secondary), var(--light) 70%);
|
|
--secondary-light-400: color-mix(in lch, var(--secondary), var(--light) 60%);
|
|
--secondary-light-500: color-mix(in lch, var(--secondary), var(--light));
|
|
--secondary-light-600: color-mix(in lch, var(--secondary), var(--light) 40%);
|
|
--secondary-light-700: color-mix(in lch, var(--secondary), var(--light) 30%);
|
|
--secondary-light-800: color-mix(in lch, var(--secondary), var(--light) 20%);
|
|
--secondary-light-900: color-mix(in lch, var(--secondary), var(--light) 10%);
|
|
--secondary-100: color-mix(in lch, var(--secondary), var(--dark) 90%);
|
|
--secondary-200: color-mix(in lch, var(--secondary), var(--dark) 80%);
|
|
--secondary-300: color-mix(in lch, var(--secondary), var(--dark) 70%);
|
|
--secondary-400: color-mix(in lch, var(--secondary), var(--dark) 60%);
|
|
--secondary-500: color-mix(in lch, var(--secondary), var(--dark));
|
|
--secondary-600: color-mix(in lch, var(--secondary), var(--dark) 40%);
|
|
--secondary-700: color-mix(in lch, var(--secondary), var(--dark) 30%);
|
|
--secondary-800: color-mix(in lch, var(--secondary), var(--dark) 20%);
|
|
--secondary-900: color-mix(in lch, var(--secondary), var(--dark) 10%);
|
|
--trans: 300ms;
|
|
--image: 24rem;
|
|
--post: 75ch;
|
|
--round: 16px;
|
|
--pad-xl: 2rem;
|
|
--pad-lm: 1.4rem;
|
|
--pad-l: 1rem;
|
|
--pad-m: 0.8rem;
|
|
--pad-sm: 0.4rem;
|
|
--paw: url("/assets/img/theme/paw.svg");
|
|
}
|
|
@font-face {
|
|
font-family: Rubik;
|
|
src: url("/assets/fonts/Rubik.ttf") format("truetype");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Urbanist;
|
|
src: url("/assets/fonts/Urbanist-Bold.ttf") format("truetype");
|
|
}
|