wip figures and images

_src/assets/css/default.css

@@ -1,37 +1,119 @@
 @import url("/assets/css/variables.css");
-
+@import url("/assets/css/nav.css");
+@import url("/assets/css/theme-light.css");
+@import url("/assets/css/theme-dark.css");
 :root {
 	--view: 18rem;
 }
 
 body {
-	font-family: sans-serif;
+	font-family: "Rubik", sans-serif;
 	font-size: 100%;
 	margin: 0;
 	padding: 0;
 }
 
 main {
-	padding: 2rem 2rem 4rem calc(var(--view) + 2rem);
+	padding: var(--pad-xl) var(--pad-xl) 4rem calc(var(--view) + var(--pad-xl));
 	overflow: hidden;
 }
 
 article {
+	border-style: solid;
+	border-width: 2px;
+	border-radius: var(--round);
 	height: max-content;
-	padding: 2rem;
+	padding: var(--pad-xl);
 
-	& p {
-		margin: 1rem 0;
+	& a {
+		font-weight: 500;
+	}
 
-		&:last-child {
-			margin-bottom: 0;
+	& s {
+		text-decoration-style: line-through;
+		text-decoration-thickness: 0.1em;
+	}
+
+	& ul {
+		& li {
+			margin: 0;
+
+			& p {
+				margin: 0;
+			}
 		}
 	}
-}
 
-/* Header */
-header {
-	margin: 0 var(--view);
+	& u {
+		text-decoration-style: double;
+		text-decoration-thickness: 2px;
+	}
+
+	& em {
+		font-weight: 200;
+	}
+
+	& p {
+		word-wrap: break-word;
+		padding: var(--pad-sm)
+	}
+
+	& code:not(pre *) {
+		padding: 0 var(--pad-sm);
+	}
+
+	& pre {
+		display: flex;
+		width: auto;
+		overflow: scroll;
+		padding: var(--pad-m);
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+
+	& pre,
+	code:not(pre *) {
+		transition: background-color var(--trans), border-color var(--trans);
+		border-style: solid;
+		border-width: 2px;
+		border-radius: var(--round);
+		font-weight: bold;
+	}
+
+	& h3 {
+		font-size: 1.6rem;
+		margin: 0;
+
+		& a {
+			display: inline-block;
+			transition: color var(--trans), background-color var(--trans);
+			border-radius: inherit;
+			height: max-content;
+			padding: 0 0.4rem;
+		}
+	}
+	& figure {
+		margin: 0;
+		border-style: solid;
+		border-width: 2px;
+		padding: var(--pad-m);
+		border-radius: var(--round);
+		display: flex;
+		flex-direction: column;
+	}
+	& section {
+		& a {
+			text-decoration: none;
+		}
+		& figure img {
+			border-radius: var(--round);
+		}
+		& figcaption {
+			font-weight: normal;
+			font-style: italic;
+			padding: var(--pad-l);
+		}
+	}
 }
 
 /* Navigation */
@@ -52,7 +134,10 @@ body > nav ul {
 }
 
 nav > details {
-	font-size: 1.5rem;
+	font-size: 1.4rem;
+}
+nav > details > summary::marker {
+	content: none;
 }
 
 body > nav ul li {
@@ -64,8 +149,8 @@ body > nav a {
 	display: flex;
 	font-size: 1.125rem;
 	font-weight: bold;
-	height: 2rem;
-	line-height: 2rem;
+	height: var(--pad-xl);
+	line-height: var(--pad-xl);
 }
 
 details {
@@ -106,24 +191,77 @@ body > nav > ul > svg {
 	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;
 }
+:is(main article, main section):not(:last-child) {
+	margin-bottom: var(--pad-xl);
+}
+img[src*="/assets/img/flag/"] {
+	height: 32px;
+    border-radius: 0.2rem;
+    border-style: solid;
+	border-width: 2px;
+	border-color: #fff;
+}
+/* Mobile view */
+@media screen and (max-width: 920px) {
+	body > nav {
+		position: initial;
+		width: 100%;
+	}
 
-article {
-	max-width: 75ch;
+	main {
+		padding: var(--pad-l);
+	}
+
+	main > section {
+		flex-direction: column;
+	}
+
+	main > section {
+		width: initial;
+	}
+
+	article {
+		max-width: initial;
+		width: auto;
+	}
+
+	body > nav::before {
+		content: none;
+	}
+
+	body > nav {
+		flex-direction: row;
+		top: 0;
+		border-right: 0;
+		width: 100%;
+
+		& details {
+			height: fit-content;
+		}
+
+		& details {
+			width: 100%;
+		}
+	}
+	body::after {
+		content: "";
+	}
 }
 
-iframe {
-	border: 0;
+@media screen and (max-width: 400px) {
+	article {
+		padding: var(--pad-l) !important;
+	}
+
+	body > nav {
+		flex-direction: column;
+		justify-content: start;
+
+		& details[open] {
+			width: 100%;
+		}
+	}
 }