ColormaticStudios/Colormatic-Website
5
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 11 Wiki Activity

Massive refactor: integrate Tailwind, use components, data-driven lists

Browse Source 
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.
This commit is contained in:
Zakarya
2025-07-04 10:33:30 -07:00
parent a2058f08d4
commit be8716a6a0
24 changed files with 665 additions and 1048 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/style/main.scss
View File

@ -1,5 +1,3 @@
@use "global.scss";
:root {
--text-color: #383c3f;
}
@ -7,21 +5,17 @@
body {
font-family: "Noto Sans", sans-serif;
margin: 0;
color: global.$text-color;
color: var(--text-color);
}
@media (prefers-color-scheme: dark) {
body {
background-color: black; // Don't flashbang dark theme users
background-color: black; // Don't flashbang dark theme users (CSS loads faster than JS)
}
:root {
--text-color: white;
}
}
spacer {
display: block;
margin-top: 8%;
// Javascript does this
// :root {
// --text-color: white;
// }
}
a {
@ -44,144 +38,22 @@ a:visited:hover {
color: #21afff;
}
a.btn,
button.btn {
padding: 8px 18px;
border-radius: 6px;
font-size: 100px;
text-decoration: none;
margin: 8px;
a.text-color {
color: var(--text-color);
}
a.btn.lg,
button.btn.lg {
font-size: 120%;
}
a.btn.blue,
button.btn.blue {
background-color: #2194ff;
border: 1px solid #21afff;
color: white;
}
div.divider {
margin: 38px;
border-top: 1px solid global.$text-color;
}
div.panel {
color: global.$text-color;
border: solid 1px;
border-color: #00000033;
border-radius: 8px;
box-shadow: 1px 1px 8px #00000033;
background-color: #ffffff22;
backdrop-filter: blur(5px);
}
main.dark-theme div.panel {
border-color: #ffffff33;
}
div.panel.dark-theme {
border-color: #ffffff33;
}
main div.hero {
width: 60%;
margin: 16px auto;
padding: 16px;
text-align: center;
}
@media screen and (max-width: global.$mobile-width) {
spacer {
margin-top: 24%;
}
main div.hero {
width: 80%;
}
}
main div.hero h1 a {
color: global.$text-color;
a.text-color:hover {
color: #21afff;
}
p.justify {
text-align: justify;
text-justify: auto;
}
main div.hero p.justify {
width: 60%;
width: 100%;
margin-left: auto;
margin-right: auto;
}
main div.hero ul {
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: global.$mobile-width) {
main div.hero p.justify {
width: 100%;
}
}
ul.linktree {
list-style-type: none;
margin: 0;
padding: 8px;
padding-left: 8px;
width: 30%;
}
ul.linktree li {
margin: 12px;
text-align: center;
}
@media screen and (max-width: global.$mobile-width) {
ul.linktree {
@media (width >= 64rem) {
width: 60%;
}
ul.linktree li {
margin: 12px 0;
}
}
ul.linktree li a {
/* Pill button shape */
text-decoration: none;
color: white;
background-color: #4c5053;
padding: 8px;
border-radius: 50px;
box-shadow: 2px 2px 4px #00000066;
transition-duration: 0.5s;
display: inline-block;
width: 100%;
box-sizing: border-box;
}
ul.linktree li a:hover {
cursor: pointer;
background-color: #383c3f;
}
div.double-linktree {
display: flex;
justify-content: center;
}
div.double-linktree ul.linktree {
margin: 0;
}
img.pixelart {
image-rendering: pixelated;
}