website/styles/globals.css

84 lines
1.5 KiB
CSS

:root {
--width: 1500px;
--maxwidth: min(var(--width), 90%);
/* 1 is the base color, <1 are darker variations and >1 are lighter */
--bg-shade-0: #131733;
--bg-shade-1: #1b1f3b;
--bg-shade-2: #23274a;
--bg-shade-2-5: #2d3258;
--bg-shade-3: #373c65;
--bg-shade-3-5: #404673;
--bg-shade-4: #494f81;
--accent-shade-0: #673db6;
--accent-shade-1: #9d6ff3;
--accent-shade-2: #a185d6;
--accent-shade-3: #cab1fb;
--text-shade-0: #8990c1;
--text-shade-1: #a1a8d9;
--text-shade-2: #cac1f5;
--text-shade-3: #fff;
--green-shade-0: #37a985;
--green-shade-1: #59c9a5;
--red-shade-1: #a9375b;
--yellow-shade-1: #abbf3b;
}
body {
background: var(--bg-shade-1);
padding-bottom: env(safe-area-inset-bottom);
}
body {
width: 100%;
max-width: 100vw;
height: 100vh;
max-height: 100%;
position: relative; /* This fixes overflow-x not hiding on Safari on mobile */
overflow-x: hidden;
overflow-y: auto;
margin: 0;
color: var(--text-shade-1);
justify-content: center;
}
a {
color: var(--accent-shade-1);
text-decoration: none;
font-weight: bold;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--text-shade-3);
}
/* Scrollbar styling 'cause it's fancy */
*::-webkit-scrollbar {
width: 12px;
height: 12px;
}
*::-webkit-scrollbar-track {
background: var(--bg-shade-1);
}
*::-webkit-scrollbar-thumb {
background-color: var(--text-shade-0);
border-radius: 24px;
border: 3px solid var(--bg-shade-1);
}
*::-webkit-scrollbar-thumb:hover {
background-color: var(--accent-shade-1);
}
* {
scrollbar-width: thin;
scrollbar-color: var(--text-shade-0) var(--bg-shade-1);
}