Design refresh + a bunch of stuff (#2864)

Co-authored-by: hfcRed <hfcred@gmx.net>

app/components/SubNav.module.css

@@ -0,0 +1,90 @@
+.container {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: var(--s-4);
+	margin-block-end: var(--s-8);
+}
+
+.secondary {
+	gap: var(--s-1);
+	margin-block-end: 0;
+}
+
+.linkContainer {
+	display: flex;
+	max-width: 110px;
+	flex: 1;
+	flex-direction: column;
+	align-items: center;
+	color: var(--color-text);
+	gap: var(--s-1-5);
+}
+
+.linkContainer.active {
+	color: var(--color-text-accent);
+}
+
+.secondary .linkContainer {
+	max-width: none;
+	flex: none;
+}
+
+.secondary .linkContainer.active {
+	color: var(--color-text);
+}
+
+.link {
+	width: 100%;
+	padding: 0 var(--s-4);
+	height: var(--field-size-sm);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--radius-field);
+	font-weight: var(--weight-semi);
+	background-color: var(--color-bg-high);
+	cursor: pointer;
+	font-size: var(--font-xs);
+	text-align: center;
+	white-space: nowrap;
+}
+
+.linkSecondary {
+	height: var(--selector-size-sm);
+	border-radius: var(--radius-selector);
+	padding: 0 var(--s-2);
+	font-size: var(--font-xs);
+	color: var(--color-text-high);
+	background-color: transparent;
+}
+
+.secondary .linkContainer.active .linkSecondary {
+	background-color: var(--color-bg-higher);
+	color: var(--color-text);
+}
+
+.container.compact .link {
+	padding: var(--s-1) var(--s-2);
+}
+
+.borderGuy {
+	width: 78%;
+	height: 3px;
+	border-radius: var(--radius-box);
+	background-color: var(--color-bg-higher);
+	visibility: hidden;
+}
+
+.borderGuySecondary {
+	height: 2.5px;
+	background-color: var(--color-bg-high);
+}
+
+.linkContainer.active > .borderGuy {
+	visibility: initial;
+}
+
+.secondary .borderGuy {
+	display: none;
+}