old website

_src/assets/css/default.css

@@ -0,0 +1,186 @@
+body {
+	font-family: sans-serif;
+	font-size: 100%;
+	margin: 0;
+	padding: 0;
+}
+main {
+	padding: 2rem 2rem 4rem calc(240px + 2rem);
+}
+h1,h2,h3,h4 {
+	margin: 0;
+}
+article {
+	height: max-content;
+	overflow: hidden;
+	padding: 32px;
+}
+article li,article p {
+	font-size: 1rem;
+	margin-bottom: .8rem;
+}
+/* Header */
+header {
+	margin: 0 0 0 240px;
+}
+header svg {
+	height: 32px;
+	margin-right: 8px;
+	width: 32px;
+}
+header h1 {
+	align-content: center;
+	display: flex;
+	height: 4rem;
+	line-height: 64px;
+	margin: 0;
+	position: absolute;
+	width: max-content;
+	z-index: 1;
+}
+h2 time {
+	font-size: initial;
+	font-weight: initial;
+}
+/* Navigation */
+body>nav {
+	display: flex;
+	flex-direction: column;
+	max-width: 240px;
+	overflow: hidden;
+	padding: 0 2rem 2rem 0;
+	position: fixed;
+	top: 0;
+	width: 240px;
+}
+body>nav ul {
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	padding: 0;
+}
+body>nav ul div {
+	display: flex;
+	align-items: center;
+	height: 48px;
+	margin: 0 auto;
+	padding: 0 8px;
+}
+body>nav a {
+	display: flex;
+	font-size: 1.125rem;
+	font-weight: bold;
+	height: 32px;
+	line-height: 32px;
+}
+/* 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 {
+	margin: 0 8px 0 8px;
+	width: 20px;
+	height: 20px;
+}
+body>nav li img,body>nav a svg,header svg {
+	align-self: center;
+}
+body>nav>ul>svg {
+	overflow: visible;
+	text-anchor: start;
+}
+/* Images */
+article img {
+	height: 200px;
+}
+img[src*="/assets/img/pkmn/"],footer img {
+	height: fit-content;
+	image-rendering: pixelated;
+}
+img[src*="/assets/img/favicon/"] {
+	margin: 0 4px -4px 0;
+	height: 20px;
+	width: 20px;
+}
+img[src*="/assets/img/flag/"] {
+	display: flex;
+	height: 32px;
+}
+ul:has(img, svg):not(article ul) {
+	list-style-type: none;
+}
+article a:has(img) {
+	display: inline-block;
+}
+/* Footer */
+footer>nav {
+	align-items: center;
+	bottom: 0;
+	display: flex;
+	text-wrap: nowrap;
+	height: 3rem;
+	left: 0;
+	overflow-x: scroll;
+	position: fixed;
+	right: 0;
+	transition: .2s;
+	z-index: 10;
+}
+footer>nav ul {
+	column-gap: 6px;
+	display: inherit;
+	margin: 0;
+	padding: 0;
+}
+footer>nav li,
+footer>nav a {
+	display: inherit;
+}
+article {
+	max-width: 75ch;
+}
+iframe {
+	border: 0;
+}
+img[id="meow"]:hover {
+	background-image: url("/assets/img/button/second.gif")
+}
+/* Mobile view */
+@media screen and (max-width: 1400px) {
+    header {
+        margin:0;
+        align-items: center;
+    }
+	main {
+		padding: 2vw 2vw 6vw 2vw;
+	}
+	main>section:not([id]) {
+		flex-direction: column;
+	}
+	main>section {
+		width: initial;
+	}
+	article {
+		max-width: initial;
+		width: auto;
+	}
+	body>nav {
+		display: flex;
+		flex-direction: row;
+		height: 42px;
+		max-width: initial;
+		overflow-x: scroll;
+		padding: 0;
+		position: fixed;
+		width: 100%;
+		z-index: 10;
+	}
+	body>nav ul {
+		flex-direction: row;
+	}
+}