Refactor folder structure

src/styles/classes/actions.postcss

@@ -0,0 +1,20 @@
+.actions {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+	margin-left: auto;
+	min-width: fit-content;
+
+	> *:last-child {
+		margin-top: auto;
+		color: var(--color-text-light);
+	}
+
+	@media (width <= 1000px) {
+		flex-direction: row;
+		align-items: flex-start;
+		margin-left: unset;
+	}
+}

src/styles/classes/base.postcss

@@ -0,0 +1,23 @@
+.base {
+	background-color: var(--color-bg);
+	color: var(--color-text);
+	font-family: var(--font-standard);
+	font-size: var(--font-size);
+	font-weight: var(--font-weight-regular);
+
+	scrollbar-color: var(--color-scrollbar) var(--color-bg);
+
+	&::-webkit-scrollbar {
+		width: 1rem;
+	}
+
+	&::-webkit-scrollbar-track {
+		background-color: var(--color-bg);
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background-color: var(--color-scrollbar);
+		border-radius: var(--rounded-max);
+		border: 3px solid var(--color-bg);
+	}
+}

src/styles/classes/button-group.postcss

@@ -0,0 +1,5 @@
+.button-group {
+	display: flex;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+}

src/styles/classes/card.postcss

@@ -0,0 +1,94 @@
+.card {
+	--padding: 1rem;
+
+	display: flex;
+	flex-direction: column;
+	position: relative;
+
+	background-color: var(--color-raised-bg);
+	border-radius: var(--rounded-lg);
+	box-shadow: var(--shadow-raised), var(--shadow-inset);
+
+	padding: var(--padding);
+	gap: 1rem;
+	max-width: 100%;
+
+	.profile-picture {
+		z-index: 1;
+	}
+
+	&--gap {
+		&-compressed {
+			gap: 0.5rem;
+		}
+
+		&-none {
+			gap: 0;
+		}
+	}
+
+	&--pad {
+		&-top {
+			padding-top: 2.5rem;
+		}
+	}
+
+	&__banner {
+		--inverse-padding: calc(var(--padding) * -1);
+		margin: var(--inverse-padding) var(--inverse-padding) 0 var(--inverse-padding);
+		z-index: 0;
+		background-color: var(--color-divider);
+		height: 6.5rem; /* Matches height of 2 buttons exactly */
+		object-fit: cover;
+		object-position: center;
+		border-radius: var(--rounded-top);
+
+		&:-moz-loading {
+			visibility: hidden;
+		}
+
+		&--dark {
+			filter: brightness(0.7);
+		}
+	}
+
+	&__overlay {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		gap: 0.5rem;
+
+		z-index: 1;
+
+		&--row {
+			flex-direction: row;
+		}
+	}
+
+	&--row {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	&--strip {
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	&--pad-x {
+		--padding: 1rem 1.5rem;
+	}
+
+	&.markdown {
+		--padding: 1.5rem;
+	}
+
+	p {
+		line-height: 130%;
+	}
+}

src/styles/classes/divider.postcss

@@ -0,0 +1,6 @@
+.divider {
+	margin: 0.25rem 0;
+	border: none;
+	border-top: 1px solid var(--color-divider);
+	width: 100%;
+}

src/styles/classes/illustration.postcss

@@ -0,0 +1,16 @@
+.illustration {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 2rem;
+
+	&__image {
+		max-width: 18.5rem;
+	}
+
+	&__description {
+		font-size: var(--font-size-lg);
+		color: var(--color-text-light);
+	}
+}

src/styles/classes/info-table.postcss

@@ -0,0 +1,11 @@
+.info-table {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 0.25rem 2rem;
+	width: fit-content;
+
+	&__label {
+		color: var(--color-text-lightest);
+		font-weight: var(--font-weight-medium);
+	}
+}

src/styles/classes/link.postcss

@@ -0,0 +1,25 @@
+.link {
+	color: var(--color-link);
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	line-height: 100%;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+.link-group {
+	display: grid;
+	grid-template-columns: repeat(3, auto);
+	gap: 1rem;
+
+	.link {
+		color: var(--color-text);
+
+		&:hover {
+			color: var(--color-link);
+		}
+	}
+}

src/styles/classes/markdown.postcss

@@ -0,0 +1,138 @@
+.markdown {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+
+	blockquote,
+	details,
+	dl,
+	ol,
+	p,
+	code,
+	pre,
+	table,
+	ul {
+		margin: 0;
+	}
+
+	p {
+		line-height: 1.5;
+		word-wrap: break-word;
+		overflow-wrap: anywhere;
+	}
+
+	h1,
+	h2 {
+		padding-bottom: 0.2em;
+		border-bottom: 1px solid var(--color-divider);
+	}
+
+	blockquote {
+		padding: 0 1rem;
+		color: var(--color-text);
+		border-left: 0.25rem solid var(--color-divider);
+	}
+
+	a {
+		color: var(--color-link);
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	img,
+	iframe {
+		max-width: 100%;
+		height: auto;
+		border-radius: var(--rounded-sm);
+	}
+
+	iframe {
+		width: 35rem;
+		aspect-ratio: 16/9;
+	}
+
+	code {
+		padding: 0.25rem 0.5rem;
+		font-size: 80%;
+		border-radius: var(--rounded-sm);
+		background-color: var(--color-code-bg);
+		color: var(--color-code-text);
+	}
+
+	pre {
+		padding: 1rem;
+		border-radius: var(--rounded-sm);
+		overflow-x: auto;
+		background-color: var(--color-code-bg);
+
+		code {
+			font-size: 80%;
+			padding: 0;
+			border-radius: 0;
+			background-color: unset !important;
+		}
+	}
+
+	hr {
+		margin: 0;
+		color: var(--color-divider);
+	}
+
+	table {
+		display: block;
+		width: max-content;
+		max-width: 100%;
+		overflow: auto;
+		border-collapse: collapse;
+		line-height: 1.5;
+
+		th {
+			font-weight: 600;
+		}
+
+		td,
+		th {
+			padding: 0.5rem 0.85rem;
+			border: 0var (--unit-3) solid var(--color-table-border);
+		}
+
+		tr:nth-child(2n) {
+			background-color: var(--color-table-alternate-row);
+		}
+	}
+
+	details {
+		border: 0.15rem solid var(--color-button-bg);
+		border-radius: var(--rounded-sm);
+		padding: 0.5rem 0.5rem 0;
+		overflow: hidden;
+
+		summary {
+			font-weight: bold;
+			margin: -0.5rem -0.5rem 0;
+			padding: 0.5rem 0.8rem;
+			cursor: pointer;
+			background-color: var(--color-button-bg);
+
+			&:hover {
+				background-color: var(--color-button-bg-hover);
+			}
+		}
+
+		&[open] {
+			padding: 0.5rem;
+
+			summary {
+				margin-bottom: 0.5rem;
+			}
+		}
+	}
+
+	li:has(> input) {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+}

src/styles/classes/member.postcss

@@ -0,0 +1,13 @@
+.member {
+	display: flex;
+	gap: 1rem;
+
+	&__info {
+		display: flex;
+		flex-direction: column;
+
+		&__link {
+			font-weight: var(--font-weight-medium);
+		}
+	}
+}

src/styles/classes/stat.postcss

@@ -0,0 +1,23 @@
+.stat {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5rem;
+
+	&--light {
+		color: var(--color-text-lightest);
+	}
+
+	.icon {
+		align-self: center;
+	}
+
+	strong {
+		font-size: var(--font-size-lg);
+	}
+}
+
+.stat-group {
+	display: flex;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+}

src/styles/classes/tag.postcss

@@ -0,0 +1,18 @@
+.tag {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	color: var(--color-text-lightest);
+
+	svg {
+		width: 1rem;
+		height: auto;
+	}
+}
+
+.tag-group {
+	display: inline-flex;
+	flex-wrap: wrap;
+	margin-top: auto;
+	gap: 0.25rem 0.5rem;
+}

src/styles/classes/title.postcss

@@ -0,0 +1,14 @@
+.title-primary {
+	font-size: 24px;
+	font-weight: var(--font-weight-bold);
+}
+
+.title-secondary {
+	font-size: 20px;
+	font-weight: var(--font-weight-bold);
+}
+
+.title-tertiary {
+	font-size: 16px;
+	font-weight: var(--font-weight-bold);
+}