131 lines
2.3 KiB
CSS
131 lines
2.3 KiB
CSS
body {
|
|
/* Default is light theme */
|
|
--white: #ffffff;
|
|
--off-white: #fdf8f5;
|
|
--teal-1: #76ffdc;
|
|
--teal-2: #4ed4b2;
|
|
--teal-2-20: #4ed4b234;
|
|
--blue-1: #5caff9;
|
|
--blue-1-05: #5caff90d;
|
|
--blue-1-20: #5caff934;
|
|
--blue-2: #1482e3;
|
|
--blue-2-25: #1482e340;
|
|
--purple-1: #525284;
|
|
--purple-2: #2a2a62;
|
|
--black: #000000;
|
|
--grey-1: #c4c4c4;
|
|
--grey-1-24: #c4c4c440;
|
|
--grey-2: #bbbbbb;
|
|
--grey-3: #6b6b6b;
|
|
--red: #9f616a;
|
|
--gradient-blue-green: linear-gradient(
|
|
99.94deg,
|
|
#1481e3 -17.95%,
|
|
#4ed4b2 172.82%
|
|
);
|
|
/* used in mobile navbar background */
|
|
--navbar-gray: #787878b2;
|
|
/* used in home page */
|
|
--home-title-purple: #27153e;
|
|
|
|
color: var(--black);
|
|
font-family: "Poppins", "sans-serif";
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: calc(30 / 16);
|
|
|
|
margin: 0;
|
|
}
|
|
|
|
input {
|
|
font-family: "Poppins", "sans-serif";
|
|
}
|
|
|
|
/* FIXME: Dark theme is the same as light theme right now */
|
|
.dark {
|
|
--white: #ffffff;
|
|
--off-white: #fdf8f5;
|
|
--teal-1: #76ffdc;
|
|
--teal-2: #4ed4b2;
|
|
--blue-1: #5caff9;
|
|
--blue-1-05: #5caff90d;
|
|
--blue-1-20: #5caff934;
|
|
--blue-2: #1482e3;
|
|
--purple-1: #525284;
|
|
--purple-2: #2a2a62;
|
|
--gradient-blue-green: linear-gradient(
|
|
99.94deg,
|
|
#1481e3 -17.95%,
|
|
#4ed4b2 172.82%
|
|
);
|
|
/* used in mobile navbar background */
|
|
--navbar-gray: #787878b2;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-style: normal;
|
|
line-height: 1.5;
|
|
color: var(--purple-2);
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|