new vibe who dat

app/templates/index.css

@@ -1,61 +1,64 @@
-@font-face {
-	font-family: 'Merriweather';
-	font-style: normal;
-	font-weight: 300 900;
-	font-stretch: 87% 112%;
-	font-display: swap;
-	src: url(/static/font/mwtr/mw.woff2) format('woff2');
-}
-
-:root {
-	--base-hue: 197; /* miku blue as default if no js*/
-	--spacing: 60;
-	--base-color: oklch(0.8 0.12 var(--base-hue));
-	--text-color: oklch(from var(--base-color) l c calc(h - var(--spacing)));
-	--bg-color: oklch(from var(--base-color) 0.175 0.02 calc(h + var(--spacing)));
-}
-
-
-html {
-	align-content: center;
-	height: 100%;
-	margin: 0;
-}
-
 body {
-	font-family: Merriweather, serif;
-	font-variation-settings: 'wght';
-	text-align: center;
-	font-size: 1.5rem;
-	color: var(--text-color);
-	background-color: var(--bg-color);
+	font-family: Arial, Helvetica, sans-serif;
+	font-weight: 700;
+	background-color: #e5e5e5;
+	color: #0a0a0a;
+}
+
+h1, a {
+	letter-spacing: -0.08em;
 }
 
 h1 {
-	color: var(--base-color);
-	font-size: 6rem;
-	font-variation-settings: 'wght' 850, 'wdth' 92;
-	padding: 1rem 1.75rem;
-	margin: 2rem auto;
-	width: min-content;
-	border-radius: 1.25rem;
-	border-style: solid;
-	border-color: var(--base-color);
-	border-width: 0.125ch;
+	font-size: min(35vw, 12rem);
+	width: fit-content;
+	margin-left: auto;
+	margin-right: 4vw;
+	padding: 2rem;
 }
 
 a {
-	font-variation-settings: 'wght' 600, 'wdth' 90;
-	color: var(--text-color);
-	transition: color 150ms, background-color 150ms, font-variation-settings 150ms, padding 150ms;
-	border-radius: 10px;
-	padding: 8px;
+	text-decoration: none;
+	font-size: 4rem;
+	color: #0a0a0a;
+	position: relative;
+	padding-right: 1rem;
 
 	&:hover {
-		font-variation-settings: 'wght' 750, 'wdth' 102;
-		color: var(--bg-color);
-		background-color: var(--text-color);
-		text-decoration: none;
-		padding: 12px 18px;
+		color: #bf1f22;
+		text-decoration: underline;
+	}
+}
+
+#links {
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
+	width: fit-content;
+	margin: auto;
+}
+
+#links a:not(:last-child)::after {
+	content: "";
+	position: absolute;
+	right: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 1px;
+	height: 1em;
+	background: rgb(10, 10, 10);
+}
+
+@media (max-width: 800px) {
+	#links {
+		flex-direction: column;
+	}
+
+	#links a {
+		padding-right: 0;
+	}
+
+	#links a::after {
+		display: none;
 	}
 }

app/templates/index.html.j2

@@ -7,9 +7,11 @@
 	<script>document.querySelector(':root').style.setProperty('--base-hue', Math.random() * 360);</script>
 </head>
 	<body>
-		<h1>{{ url }}</h1>
+		<h1>drath.</h1>
+		<div id="links">
 		{%- for link in links %}
 		<a href="https://{{ link }}.{{ url }}">{{ link }}</a>
 		{%- endfor %}
+		</div>
 	</body>
 </html>