generated from autonomic-cooperative/astro-payload-template
108 lines
2.1 KiB
CSS
108 lines
2.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
.light {
|
|
|
|
--black: 10, 16, 19;
|
|
--white: 243, 252, 248;
|
|
--absolute-black: 0, 0, 0;
|
|
--absolute-white: 255, 255, 255;
|
|
|
|
/* Use these in tailwind.config.cjs */
|
|
--primary: var(--black);
|
|
--secondary: var(--black);
|
|
--tertiary: var(--black);
|
|
|
|
--text: var(--black);
|
|
--textInverted: var(--absolute-white);
|
|
--link: var(--black);
|
|
--background: var(--white);
|
|
}
|
|
|
|
.dark {
|
|
|
|
--black: 10, 16, 19;
|
|
--white: 243, 252, 248;
|
|
--absolute-black: 0, 0, 0;
|
|
--absolute-white: 255, 255, 255;
|
|
|
|
/* Use these in tailwind.config.cjs */
|
|
--primary: var(--white);
|
|
--secondary: var(--white);
|
|
--tertiary: var(--white);
|
|
|
|
--text: var(--white);
|
|
--textInverted: var(--absolute-black);
|
|
--link: var(--white);
|
|
--background: var(--black);
|
|
}
|
|
|
|
.autonomic {
|
|
/* Palette */
|
|
/* RGBA instead of hex so that opacity will work */
|
|
--absolute-white: 255, 255, 255;
|
|
--white: 243, 252, 248;
|
|
--shocking-pink: 253, 0, 159;
|
|
--shamrock-green: 0, 198, 88;
|
|
--bubblegum-pink: 255, 133, 203;
|
|
--bright-orange: 255, 96, 21;
|
|
|
|
/* Use these in tailwind.config.cjs */
|
|
--primary: var(--shocking-pink);
|
|
--secondary: var(--shamrock-green);
|
|
--tertiary: var(--bright-orange);
|
|
|
|
--text: var(--shocking-pink);
|
|
--textInverted: var(--absolute-white);
|
|
--link: var(--shamrock-green);
|
|
--background: var(--white);
|
|
}
|
|
|
|
@layer components {
|
|
|
|
:root {
|
|
@apply ring-secondary;
|
|
}
|
|
|
|
h1 {
|
|
@apply text-5xl font-bold;
|
|
}
|
|
|
|
h2 {
|
|
@apply text-4xl font-semibold;
|
|
}
|
|
|
|
h3 {
|
|
@apply text-2xl font-semibold;
|
|
}
|
|
|
|
h4, h5, h6 {
|
|
@apply text-2xl font-medium;
|
|
}
|
|
|
|
p, span, li, a {
|
|
@apply text-xl;
|
|
}
|
|
|
|
a {
|
|
@apply text-link underline;
|
|
}
|
|
|
|
ol {
|
|
@apply list-decimal;
|
|
}
|
|
|
|
ul {
|
|
@apply list-disc;
|
|
}
|
|
|
|
select {
|
|
@apply bg-background border-primary border px-2 h-8 text-lg;
|
|
}
|
|
|
|
input {
|
|
@apply bg-background border-primary border px-2 h-8 text-lg;
|
|
}
|
|
}
|