340 lines
9.0 KiB
CSS
340 lines
9.0 KiB
CSS
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
/* Default is light theme */
|
|
--light--primary-background: #ffffff;
|
|
--light--secondary-background: #fdf8f5;
|
|
|
|
--light--primary-accent: #1482e3;
|
|
--light--primary-accent-soft: #5caff9;
|
|
--light--primary-accent-light: #c4e0f8;
|
|
--light--primary-accent-lighter: #e1eefa;
|
|
--light--primary-accent-lightest: #f7fbff;
|
|
|
|
--light--secondary-accent: #4ed4b2;
|
|
--light--secondary-accent-light: #dcf6f0;
|
|
|
|
--light--primary-heading: #2a2a62;
|
|
|
|
--light--primary-text: #2a2a62;
|
|
--light--text: #000000;
|
|
--light--text-light: #FFFFFF;
|
|
--light--sidebar-text: #2a2a62;
|
|
--light--author-text: #525284;
|
|
--light--mini-event-card-text: #000000;
|
|
|
|
--light--primary-title: #2a2a62;
|
|
--light--primary-subtitle: #2a2a62;
|
|
--light--secondary-subtitle: #2a2a62;
|
|
|
|
--light--form-invalid: #9f616a;
|
|
--light--warning-background: #dd0014;
|
|
--light--warning-text: #ffffff;
|
|
|
|
--light--link: #1482e3;
|
|
--light--link-hover: #4ed3b2;
|
|
|
|
--light--input-background: #f0f0f0;
|
|
--light--input-placeholder-text: #bbbbbb;
|
|
--light--input-text: #6b6b6b;
|
|
|
|
--light--icon: #2A2A62;
|
|
|
|
--light--navbar-page-overlay: hsla(0, 0%, 47.1%, 0.6980392156862745);
|
|
--light--code-background: #f0f0f0;
|
|
|
|
--light--button-background: #1482e3;
|
|
--light--footer-background: #2a2a62;
|
|
--light--card-background: #FFFFFF;
|
|
--light--dark-card-background: #DCF6F0;
|
|
--light--table-header: #DCF6F0;
|
|
--light--table-section: #f7fbff;
|
|
|
|
--light--blue-gradient: #1481E3;
|
|
--light--border: #2a2a62;
|
|
--light--marker: #1482e3;
|
|
|
|
--dark--scrollbar-hover: #626294;
|
|
--dark--scrollbar-thumb: var(--dark--code-background);
|
|
--dark--scrollbar-track: var(--dark--secondary-background);
|
|
|
|
--light--scrollbar-hover: var(--light--blue-gradient);
|
|
--light--scrollbar-thumb: var(--dark--primary-accent-soft);
|
|
--light--scrollbar-track: var(--light--dark-card-background);
|
|
|
|
--dark--primary-background: #171729;
|
|
--dark--secondary-background: #252542;
|
|
|
|
--dark--primary-accent: #5CAFF9;
|
|
--dark--primary-accent-soft: #5cb0f9;
|
|
--dark--primary-accent-light: #252542;
|
|
--dark--primary-accent-lighter: #171729;
|
|
--dark--primary-accent-lightest: #464671;
|
|
|
|
--dark--secondary-accent: #4ed3b2;
|
|
--dark--secondary-accent-light: #525284;
|
|
|
|
--dark--primary-heading: #fcf7f4;
|
|
|
|
--dark--form-invalid: #9f616a;
|
|
--dark--warning-background: #dd0014;
|
|
--dark--warning-text: #ffffff;
|
|
|
|
--dark--link: #4ED4B2;
|
|
--dark--link-hover: #C1F0E4;
|
|
|
|
--dark--primary-text: #ffffff;
|
|
--dark--text: #AFAFD3;
|
|
--dark--text-light: #FFFFFF;
|
|
--dark--sidebar-text: #AFAFD3;
|
|
--dark--author-text: #ABABF2;
|
|
--dark--mini-event-card-text: #5CAFF9;
|
|
|
|
--dark--input-background: #C4C4C4;
|
|
--dark--input-placeholder-text: #bbbbbb;
|
|
--dark--input-text: #6b6b6b;
|
|
|
|
--dark--icon: #ffffff;
|
|
|
|
--dark--primary-title: #5CAFF9;
|
|
--dark--primary-subtitle: #E0E0F7;
|
|
--dark--secondary-subtitle: #ABABF2;
|
|
|
|
--dark--navbar-page-overlay: rgba(0, 0, 0, 0.7);
|
|
--dark--code-background: #3d3d68;
|
|
|
|
--dark--button-background: #1482e3;
|
|
--dark--footer-background: #525284;
|
|
--dark--card-background: #272751;
|
|
--dark--dark-card-background: #272751;
|
|
--dark--table-header: #252542;
|
|
--dark--table-section: #202037;
|
|
|
|
--dark--blue-gradient: #5CAFF9;
|
|
--dark--border: #2A2A62;
|
|
--dark--marker: #C5C5F0;
|
|
|
|
--primary-background: var(--light--primary-background);
|
|
--secondary-background: var(--light--secondary-background);
|
|
|
|
--primary-accent: var(--light--primary-accent);
|
|
--primary-accent-soft: var(--light--primary-accent-soft);
|
|
--primary-accent-light: var(--light--primary-accent-light);
|
|
--primary-accent-lighter: var(--light--primary-accent-lighter);
|
|
--primary-accent-lightest: var(--light--primary-accent-lightest);
|
|
|
|
--secondary-accent: var(--light--secondary-accent);
|
|
--secondary-accent-light: var(--light--secondary-accent-light);
|
|
|
|
--scrollbar-track: var(--light--scrollbar-track);
|
|
--scrollbar-thumb: var(--light--link);
|
|
--scrollbar-hover: var(--light--link-hover);
|
|
|
|
--primary-heading: var(--light--primary-heading);
|
|
|
|
--form-invalid: var(--light--form-invalid);
|
|
--warning-background: var(--light--warning-background);
|
|
--warning-text: var(--light--warning-text);
|
|
|
|
--link: var(--light--link);
|
|
--link-hover: var(--light--link-hover);
|
|
|
|
--primary-text: var(--light--primary-text);
|
|
--text: var(--light--text);
|
|
--text-light: var(--light--text-light);
|
|
--sidebar-text: var(--light--sidebar-text);
|
|
--author-text: var(--light--author-text);
|
|
--mini-event-card-text: var(--light--mini-event-card-text);
|
|
|
|
--input-background: var(--light--input-background);
|
|
--input-placeholder-text: var(--light--input-placeholder-text);
|
|
--input-text: var(--light--input-text);
|
|
|
|
--icon: var(--light--icon);
|
|
|
|
--primary-title: var(--light--primary-title);
|
|
--primary-subtitle: var(--light--primary-subtitle);
|
|
--secondary-subtitle: var(--light--secondary-subtitle);
|
|
|
|
--navbar-page-overlay: var(--light--navbar-page-overlay);
|
|
--code-background: var(--light--code-background);
|
|
|
|
--button-background: var(--light--button-background);
|
|
--footer-background: var(--light--footer-background);
|
|
--card-background: var(--light--card-background);
|
|
--dark-card-background: var(--light--dark-card-background);
|
|
--table-header: var(--light--table-header);
|
|
--table-section: var(--light--table-section);
|
|
|
|
--blue-gradient: var(--light--blue-gradient);
|
|
--border: var(--light--border);
|
|
--marker: var(--light--marker);
|
|
|
|
background-color: var(--primary-background);
|
|
color: var(--text);
|
|
font-family: "Poppins", "sans-serif";
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: calc(30 / 16);
|
|
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
|
|
input {
|
|
font-family: "Poppins", "sans-serif";
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-style: normal;
|
|
line-height: 1.5;
|
|
color: var(--primary-heading);
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
margin-top: calc(32rem / 16);
|
|
margin-bottom: calc(16rem / 16);
|
|
}
|
|
|
|
h1 {
|
|
font-size: calc(48rem / 16);
|
|
font-weight: 700;
|
|
}
|
|
|
|
h2 {
|
|
font-size: calc(36rem / 16);
|
|
font-weight: 600;
|
|
}
|
|
|
|
h3 {
|
|
margin-top: calc(24rem / 16);
|
|
margin-bottom: calc(16rem / 16);
|
|
|
|
font-size: calc(24rem / 16);
|
|
font-weight: 600;
|
|
}
|
|
|
|
h4 {
|
|
margin-top: calc(24rem / 16);
|
|
margin-bottom: calc(8rem / 16);
|
|
|
|
font-size: calc(18rem / 16);
|
|
font-weight: 600;
|
|
}
|
|
|
|
p {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
/*
|
|
* A lot of elements right next to an h4 (eg p, ol, ul, etc) have a 16px margin.
|
|
* We need to make sure that the next item has an 8px margin-top.
|
|
*/
|
|
h4+* {
|
|
margin-top: calc(8rem / 16);
|
|
}
|
|
|
|
@media only screen and (max-width: calc(768rem / 16)) {
|
|
|
|
/* h1, h2 = h3 on mobile */
|
|
h1,
|
|
h2 {
|
|
margin-top: calc(24rem / 16);
|
|
margin-bottom: calc(16rem / 16);
|
|
|
|
font-size: calc(24rem / 16);
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media only screen and (prefers-color-scheme: dark) {
|
|
body {
|
|
--primary-background: var(--dark--primary-background);
|
|
--secondary-background: var(--dark--secondary-background);
|
|
|
|
--primary-accent: var(--dark--primary-accent);
|
|
--primary-accent-soft: var(--dark--primary-accent-soft);
|
|
--primary-accent-light: var(--dark--primary-accent-light);
|
|
--primary-accent-lighter: var(--dark--primary-accent-lighter);
|
|
--primary-accent-lightest: var(--dark--primary-accent-lightest);
|
|
|
|
--secondary-accent: var(--dark--secondary-accent);
|
|
--secondary-accent-light: var(--dark--secondary-accent-light);
|
|
|
|
--primary-heading: var(--dark--primary-heading);
|
|
|
|
--form-invalid: var(--dark--form-invalid);
|
|
--warning-background: var(--dark--warning-background);
|
|
--warning-text: var(--dark--warning-text);
|
|
|
|
--link: var(--dark--link);
|
|
--link-hover: var(--dark--link-hover);
|
|
|
|
--primary-text: var(--dark--primary-text);
|
|
--text: var(--dark--text);
|
|
--text-light: var(--dark--text-light);
|
|
--sidebar-text: var(--dark--sidebar-text);
|
|
--author-text: var(--dark--author-text);
|
|
--mini-event-card-text: var(--dark--mini-event-card-text);
|
|
|
|
--input-background: var(--dark--input-background);
|
|
--input-placeholder-text: var(--dark--input-placeholder-text);
|
|
--input-text: var(--dark--input-text);
|
|
|
|
--icon: var(--dark--icon);
|
|
|
|
--scrollbar-track: var(--dark--scrollbar-track);
|
|
--scrollbar-thumb: var(--dark--scrollbar-thumb);
|
|
--scrollbar-hover: var(--dark--scrollbar-hover);
|
|
|
|
--primary-title: var(--dark--primary-title);
|
|
--primary-subtitle: var(--dark--primary-subtitle);
|
|
--secondary-subtitle: var(--dark--secondary-subtitle);
|
|
|
|
--navbar-page-overlay: var(--dark--navbar-page-overlay);
|
|
--code-background: var(--dark--code-background);
|
|
|
|
--button-background: var(--dark--button-background);
|
|
--footer-background: var(--dark--footer-background);
|
|
--card-background: var(--dark--card-background);
|
|
--table-header: var(--dark--table-header);
|
|
--table-section: var(--dark--table-section);
|
|
|
|
--blue-gradient: var(--dark--blue-gradient);
|
|
--border: var(--dark--border);
|
|
--marker: var(--dark--marker);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: var(--scrollbar-track);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar-thumb);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--scrollbar-hover);
|
|
} |