yay website

_src/assets/css/default.css

@@ -0,0 +1,129 @@
+@import url("/assets/css/variables.css");
+
+:root {
+	--view: 18rem;
+}
+
+body {
+	font-family: sans-serif;
+	font-size: 100%;
+	margin: 0;
+	padding: 0;
+}
+
+main {
+	padding: 2rem 2rem 4rem calc(var(--view) + 2rem);
+	overflow: hidden;
+}
+
+article {
+	height: max-content;
+	padding: 2rem;
+
+	& p {
+		margin: 1rem 0;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+
+/* Header */
+header {
+	margin: 0 var(--view);
+}
+
+/* Navigation */
+body > nav {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	padding: 1rem;
+	position: fixed;
+	top: 0;
+	width: var(--view);
+	height: 100%;
+}
+
+body > nav ul {
+	margin: 0;
+	padding: 0;
+}
+
+nav > details {
+	font-size: 1.5rem;
+}
+
+body > nav ul li {
+	display: inherit;
+	flex-direction: row;
+}
+
+body > nav a {
+	display: flex;
+	font-size: 1.125rem;
+	font-weight: bold;
+	height: 2rem;
+	line-height: 2rem;
+}
+
+details {
+	cursor: pointer;
+}
+
+/* Navigation > Icons */
+svg {
+	fill: currentColor;
+	stroke: currentColor;
+	stroke-width: 0;
+}
+
+body > nav li img {
+	border-radius: 100%;
+}
+
+body > nav a svg,
+body > nav li img,
+body > nav summary svg {
+	margin: 0 8px 0 8px;
+	width: 20px;
+	height: 20px;
+}
+
+body > nav li img,
+body > nav a svg {
+	align-self: center;
+}
+
+body > nav details {
+	display: flex;
+	align-items: center;
+}
+
+body > nav > ul > svg {
+	overflow: visible;
+	text-anchor: start;
+}
+
+/* Images */
+img[src*="/assets/img/pkmn/"] {
+	height: fit-content;
+	image-rendering: pixelated;
+}
+
+img[src*="/assets/img/flag/"] {
+	height: 32px;
+}
+
+ul:has(img, svg):not(article ul) {
+	list-style-type: none;
+}
+
+article {
+	max-width: 75ch;
+}
+
+iframe {
+	border: 0;
+}