Zakarya
be8716a6a0
This is the result of many, many hours sat at my keyboard trying different things, most of which failing. Figuring out how to install Tailwind in this setup was a real adventure with all of the resources online pulling me in two different ways. Documentation is hard. I definitely do prefer having the codebase use the tools available more, instead of the old simple web dev stuff I'm used to. We're using what's available through Svelte a lot more now. I think that these changes will make the codebase easier to work in, with the architecture being more familiar to regular web developers, and these changes should also reduce friction when adding new content, which is the main goal. I'll never get this time back though, and I'm still slightly contemplating whether it was really worth it.
60 lines
775 B
SCSS
60 lines
775 B
SCSS
:root {
|
|
--text-color: #383c3f;
|
|
}
|
|
|
|
body {
|
|
font-family: "Noto Sans", sans-serif;
|
|
margin: 0;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background-color: black; // Don't flashbang dark theme users (CSS loads faster than JS)
|
|
}
|
|
// Javascript does this
|
|
// :root {
|
|
// --text-color: white;
|
|
// }
|
|
}
|
|
|
|
a {
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
a:link {
|
|
color: #2194ff;
|
|
}
|
|
|
|
a:visited {
|
|
color: #2178ff;
|
|
}
|
|
|
|
a:link:hover {
|
|
color: #21afff;
|
|
}
|
|
|
|
a:visited:hover {
|
|
color: #21afff;
|
|
}
|
|
|
|
a.text-color {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
a.text-color:hover {
|
|
color: #21afff;
|
|
}
|
|
|
|
p.justify {
|
|
text-align: justify;
|
|
text-justify: auto;
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
@media (width >= 64rem) {
|
|
width: 60%;
|
|
}
|
|
}
|