118 lines
1.9 KiB
CSS
118 lines
1.9 KiB
CSS
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
/* Default is light theme */
|
|
--primary-background: #ffffff;
|
|
--secondary-background: #fdf8f5;
|
|
|
|
--primary-accent: #1482e3;
|
|
--primary-accent-soft: #5caff9;
|
|
--primary-accent-light: #c4e0f8;
|
|
--primary-accent-lighter: #e1eefa;
|
|
--primary-accent-lightest: #f7fbff;
|
|
|
|
--secondary-accent: #4ed4b2;
|
|
--secondary-accent-light: #dcf6f0;
|
|
|
|
--primary-heading: #2a2a62;
|
|
--secondary-heading: #525284;
|
|
|
|
--text: #000000;
|
|
|
|
--form-invalid: #9f616a;
|
|
|
|
--input-background: #f0f0f0;
|
|
--input-placeholder-text: #bbbbbb;
|
|
--input-text: #6b6b6b;
|
|
|
|
--code-background: #f0f0f0;
|
|
|
|
--navbar-page-overlay: #787878b2;
|
|
|
|
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";
|
|
}
|
|
|
|
.dark {
|
|
/* FIXME: Implement dark theme */
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|