overhauled old theme

_src/assets/css/default/nav.css

@@ -1,4 +1,4 @@
-body>nav::before,
+body > nav::before,
 body::after {
 	z-index: -1;
 	content: "";
@@ -11,7 +11,7 @@ body::after {
 	pointer-events: none;
 }
 
-body>nav::before {
+body > nav::before {
 	bottom: 0;
 	left: 0;
 	mask-size: 160%;
@@ -19,20 +19,6 @@ body>nav::before {
 	-webkit-mask-position-y: 90%;
 }
 
-body>nav::after {
-	top: 0;
-	left: 0;
-	width: var(--view);
-	content: "";
-	position: absolute;
-	height: 100%;
-	z-index: -2;
-	pointer-events: none;
-	mask-image: var(--paw-tiled);
-	animation: navbg 10s linear infinite;
-	mask-size: 128px;
-}
-
 body::after {
 	content: none;
 	mask-size: 100%;
@@ -42,15 +28,16 @@ body::after {
 	-webkit-mask-position-y: bottom;
 }
 
-body>nav {
+body > nav {
 	display: flex;
 	flex-direction: column;
-	overflow: hidden;
-	padding: 1rem;
+	overflow-x: hidden;
+	padding: var(--pad-l);
 	position: fixed;
 	width: var(--view);
 	height: 100%;
-
+	overflow-y: scroll;
+	scrollbar-width: none;
 	& * svg,
 	li img {
 		margin: 0 8px 0 8px;
@@ -88,15 +75,13 @@ body>nav {
 		font-size: 1.125rem;
 		width: 100%;
 		font-weight: bold;
-		height: var(--pad-xl);
+		height: 36px;
 		line-height: var(--pad-xl);
 	}
 }
 
 body {
-	font-family: "Rubik", sans-serif;
-
-	&>nav {
+	& > nav {
 		gap: var(--pad-m);
 		border-right-width: 1px;
 		border-right-style: solid;
@@ -114,31 +99,50 @@ body {
 			font-weight: bold;
 		}
 
-		& details>summary {
+		& details > summary {
 			display: flex;
 			justify-content: center;
-			padding: 0 var(--pad-lm) 0 0;
+			padding: 0;
 			height: var(--pad-xl);
-
-			&>svg {
-				transform: rotate(0deg);
-				transition: transform var(--trans);
-			}
 		}
-
-		& details:not([open])>summary {
-			border-radius: var(--round);
+		& details[open], details:not([open]) {
 			border-style: solid;
 			border-width: 2px;
 		}
-
-		& details[open] {
-			border-style: solid;
-			border-width: 2px;
-
-			&>summary svg {
-				transform: rotate(45deg);
-			}
-		}
+	}
+}
+@media screen and (max-width: 920px) {
+	body > nav {
+		position: initial;
+		width: 100%;
+		overflow: initial;
+		flex-direction: row;
+		justify-content: start;
+		& a, button {
+			line-height: initial;
+		}
+		& details {
+			width: 100%;
+			height: max-content;
+		}
+	}
+	body > nav::before {
+		content: none;
+	}
+}
+@media screen and (max-width: 620px) {
+	body > nav {
+		flex-direction: column;
+		justify-content: start;
+		border: 0;
+		width: 100%;
+
+		& details {
+			height: fit-content;
+		}
+	}
+
+	body::after {
+		content: "";
 	}
 }