124 lines
3.8 KiB
CSS
124 lines
3.8 KiB
CSS
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
/* Theme colours */
|
|
--pink: #EF839D;
|
|
--light-pink: #FFCAD0;
|
|
--lighter-pink: #FFE7E7;
|
|
--orange: #F5917B;
|
|
--light-orange: #FFC4A9;
|
|
--navy: #252D41;
|
|
--light-navy: #354265;
|
|
--dark-navy: #141D34;
|
|
|
|
/* Default is dark theme */
|
|
--light--primary-background: #FFFFEF;
|
|
--light--secondary-background: #FDF5ED;
|
|
--light--primary-accent: #CA634D;
|
|
--light--primary-accent-light: var(--orange);
|
|
--light--primary-accent-lighter: #FFBC9F;
|
|
--light--secondary-accent: #E55F98;
|
|
--light--translucent-accent: rgba(255, 231, 231, 0.75);
|
|
--light--secondary-accent-light: #FEA0C8;
|
|
--light--primary-heading: #D02B53;
|
|
--light--primary-text: #483B35;
|
|
--light--secondary-text: var(--pink);
|
|
--light--link: var(--orange);
|
|
--light--link-hover: #FFBC9F;
|
|
--light--card-background: #FFFFFF;
|
|
--light--label: #A98778;
|
|
|
|
--dark--primary-background: var(--navy);
|
|
--dark--secondary-background: var(--dark-navy);
|
|
--dark--tertiary-background: var(--light-navy);
|
|
--dark--primary-accent: var(--pink);
|
|
--dark--primary-accent-light: var(--light-pink);
|
|
--dark--primary-accent-lighter: var(--lighter-pink);
|
|
--dark--secondary-accent: var(--orange);
|
|
--dark--secondary-accent-light: var(--light-orange);
|
|
--dark--translucent-accent: rgba(239, 131, 157, 0.75);
|
|
--dark--primary-heading: #FFC48D;
|
|
--dark--secondary-heading: var(--pink);
|
|
--dark--link: var(--pink);
|
|
--dark--link-hover: var(--light-pink);
|
|
--dark--primary-text: #FDF5ED;
|
|
--dark--secondary-text: var(--light-pink);
|
|
--dark--card-background: #2C3651;
|
|
--dark--label: #FFFFFF;
|
|
|
|
--primary-background: var(--dark--primary-background);
|
|
--secondary-background: var(--dark--secondary-background);
|
|
--tertiary-background: var(--dark--tertiary-background);
|
|
--primary-accent: var(--dark--primary-accent);
|
|
--primary-accent-light: var(--dark--primary-accent-light);
|
|
--primary-accent-lighter: var(--dark--primary-accent-lighter);
|
|
--secondary-accent: var(--dark--secondary-accent);
|
|
--secondary-accent-light: var(--dark--secondary-accent-light);
|
|
--translucent-accent: var(--dark--translucent-accent);
|
|
--primary-heading: var(--dark--primary-heading);
|
|
--secondary-heading: var(--dark--secondary-heading);
|
|
--link: var(--dark--link);
|
|
--link-hover: var(--dark--link-hover);
|
|
--primary-text: var(--dark--primary-text);
|
|
--card-background: var(--dark--card-background);
|
|
--label: var(--dark--label);
|
|
|
|
background-color: var(--primary-background);
|
|
color: var(--primary-text);
|
|
font-family: "Inconsolata", monospace;
|
|
margin: 0;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
color: var(--primary-heading);
|
|
}
|
|
|
|
h3 {
|
|
color: var(--secondary-heading);
|
|
font-size: calc(45rem / 16);
|
|
}
|
|
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: var(--secondary-heading);
|
|
}
|
|
|
|
a {
|
|
color: var(--link);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--link-hover);
|
|
}
|
|
|
|
p {
|
|
font-size: calc(28rem / 16);
|
|
}
|
|
|
|
@media only screen and (prefers-color-scheme: dark) {
|
|
body {
|
|
--primary-background: var(--dark--primary-background);
|
|
--secondary-background: var(--dark--secondary-background);
|
|
--tertiary-background: var(--dark--tertiary-background);
|
|
--primary-accent: var(--dark--primary-accent);
|
|
--primary-accent-light: var(--dark--primary-accent-light);
|
|
--primary-accent-lighter: var(--dark--primary-accent-lighter);
|
|
--primary-accent-dark: var(--dark--primary-accent-dark);
|
|
--secondary-accent: var(--dark--secondary-accent);
|
|
--secondary-accent-light: var(--dark--secondary-accent-light);
|
|
--secondary-accent-dark: var(--primary-accent-dark);
|
|
--primary-heading: var(--dark--primary-heading);
|
|
--secondary-heading: var(--dark--secondary-heading);
|
|
--link: var(--dark--link);
|
|
--link-hover: var(--dark--link-hover);
|
|
--primary-text: var(--dark--primary-text);
|
|
--card-background: var(--dark--card-background);
|
|
--label: var(--dark--label);
|
|
}
|
|
}
|