Added a hamburger menu for the navbar

assets/css/style.css

@@ -25,9 +25,9 @@ body {
 	color: white;
 	font-family: "system-ui", sans-serif;
 	overflow-x: hidden;
+	padding-right: 140px;
 }
 
-/* === NAVBAR ON THE RIGHT === */
 .navbar {
 	width: 140px;
 	background: rgba(60, 26, 77, 0.55);
@@ -47,6 +47,7 @@ body {
 	z-index: 20;
 	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.4);
 }
+
 .navbar ul {
 	list-style: none;
 	margin: 0;
@@ -81,13 +82,8 @@ body {
 	transition: background-color 0.2s ease;
 }
 
-.navbar a::before {
+.navbar a::before { top: 0; }
-	top: 0;
+.navbar a::after { bottom: 0; }
-}
-
-.navbar a::after {
-	bottom: 0;
-}
 
 .navbar a:hover {
 	background-color: #5e2b7a;
@@ -133,12 +129,24 @@ body {
 	margin-top: 4px;
 }
 
-.tor-label {
+.tor-label { color: #6e2b9e; }
-	color: #6e2b9e;
+.ygg-label { color: #92ffb3; }
-}
 
-.ygg-label {
+.mobile-nav-toggle {
-	color: #92ffb3;
+	display: none;
+	position: fixed;
+	top: 12px;
+	right: 12px;
+	z-index: 50;
+	background: rgba(60, 26, 77, 0.6);
+	color: #fff;
+	font-size: 1.8rem;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+	border-radius: 6px;
+	padding: 4px 10px;
+	cursor: pointer;
+	backdrop-filter: blur(6px);
+	-webkit-backdrop-filter: blur(6px);
 }
 
 .footer {
@@ -153,37 +161,14 @@ body {
 	z-index: 10;
 }
 
-/* === LINKS === */
+a { text-decoration: none; color: #447fc6; }
-a {
-	text-decoration: none;
-	color: #447fc6;
-}
 
-::-moz-selection {
+::-moz-selection { color: #000000; background: #a57ae9; }
-	color: #000000;
+::selection { color: #000000; background: #a57ae9; }
-	background: #a57ae9;
+a::-moz-selection { color: #000; background: #447fc6; }
-}
+a::selection { color: #000; background: #447fc6; }
+a:not(:has(img)):hover { text-decoration: underline; }
 
-::selection {
-	color: #000000;
-	background: #a57ae9;
-}
-
-a::-moz-selection {
-	color: #000;
-	background: #447fc6;
-}
-
-a::selection {
-	color: #000;
-	background: #447fc6;
-}
-
-a:not(:has(img)):hover {
-	text-decoration: underline;
-}
-
-/* === MAIN CONTENT === */
 .content {
 	display: flex;
 	align-items: center;
@@ -195,6 +180,7 @@ a:not(:has(img)):hover {
 	position: relative;
 	box-sizing: border-box;
 	flex-wrap: wrap;
+	max-width: calc(100% - 140px);
 }
 
 .left {
@@ -218,6 +204,7 @@ a:not(:has(img)):hover {
 	justify-content: center;
 	text-align: left;
 	z-index: 10;
+	max-width: 800px;
 }
 
 .middle h1 {
@@ -245,13 +232,10 @@ a:not(:has(img)):hover {
 	width: 88px;
 	height: 31px;
 	border: none;
-	image-rendering: -webkit-optimize-contrast;
-	image-rendering: -moz-crisp-edges;
-	image-rendering: -o-pixelated;
 	image-rendering: pixelated;
 }
 
-/* === BACKGROUND CANVAS === */
+/* Background */
 #night {
 	position: fixed;
 	top: 0;
@@ -281,13 +265,13 @@ a:not(:has(img)):hover {
 	filter: blur(1px);
 }
 
-/* === PROJECT PAGE === */
+/* Project Page */
 .project-page {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	text-align: center;
-	max-width: 800px;
+	max-width: calc(100% - 140px);
 	margin: 0 auto;
 	padding: 5rem 2rem 8rem;
 }
@@ -297,8 +281,6 @@ a:not(:has(img)):hover {
 .project-page h3 {
 	font-family: "Clockopia", sans-serif;
 	color: #fff5a8;
-	margin-top: auto;
-	margin-bottom: auto;
 }
 
 .project-page a {
@@ -316,18 +298,42 @@ a:not(:has(img)):hover {
 	max-width: 600px;
 }
 
-
 .project-page p {
 	max-width: 700px;
 	line-height: 1.5;
 	margin-bottom: auto;
 }
 
+/*Shit to make it not terrible for mobile users.*/
+@media (max-width: 1200px) {
+	.content {
+		flex-direction: column;
+		text-align: center;
+		padding: 3rem 2rem;
+		max-width: 100%;
+	}
 
-/* === RESPONSIVE FIXES === */
+	.left, .middle {
+		flex: unset;
+		width: 100%;
+	}
+
+	.uzi {
+		width: 60%;
+		max-width: 600px;
+		margin-bottom: 2rem;
+	}
+
+	.middle {
+		text-align: center;
+		align-items: center;
+	}
+}
+
+/* Full mobile mode */
 @media (max-width: 900px) {
 	body {
-		flex-direction: column;
+		padding-right: 0;
 	}
 
 	.navbar {
@@ -337,6 +343,8 @@ a:not(:has(img)):hover {
 		flex-direction: row;
 		justify-content: center;
 		padding: 0.5rem 0;
+		border-left: none;
+		border-right: none;
 	}
 
 	.navbar ul {
@@ -344,15 +352,18 @@ a:not(:has(img)):hover {
 		gap: 1rem;
 	}
 
-	.content {
+	.content,
+	.project-page {
+		max-width: 100%;
 		flex-direction: column;
-		padding: 2rem;
+		padding: 2rem 1.5rem;
 		text-align: center;
 	}
 
 	.middle {
 		text-align: center;
 		align-items: center;
+		max-width: 100%;
 	}
 
 	.uzi {
@@ -363,28 +374,65 @@ a:not(:has(img)):hover {
 	.footer {
 		padding-bottom: 2rem;
 	}
-	
-	.navbar-top-icons {
-	margin-bottom: 0.5rem;
-	}
 
-	.navbar-top-icons img {
-	width: 22px;
-	height: 22px;
-	}
-	
 	.navbar-top-icons {
-	gap: 10px;
+		margin-bottom: 0.5rem;
-	margin-bottom: 0.5rem;
+		gap: 10px;
 	}
 
 	.icon-item img {
-	width: 24px;
+		width: 24px;
-	height: 24px;
+		height: 24px;
 	}
 
 	.icon-label {
-	font-size: 0.7rem;
+		font-size: 0.7rem;
+	}
+}
+.mobile-nav-toggle {
+	display: none;
+	position: fixed;
+	top: 12px;
+	right: 12px;
+	z-index: 50;
+	background: rgba(60, 26, 77, 0.6);
+	color: #fff;
+	font-size: 1.8rem;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+	border-radius: 6px;
+	padding: 4px 10px;
+	cursor: pointer;
+	backdrop-filter: blur(6px);
+	-webkit-backdrop-filter: blur(6px);
+}
+
+@media (max-width: 900px) {
+	.mobile-nav-toggle {
+		display: block;
 	}
 
-}
+	.navbar {
+		position: fixed;
+		right: -100%;
+		top: 0;
+		bottom: 0;
+		width: 200px;
+		padding-top: 3.5rem;
+		flex-direction: column;
+		height: 100vh;
+		transition: right 0.3s ease;
+	}
+
+	.navbar.open {
+		right: 0;
+	}
+
+	.navbar ul {
+		flex-direction: column;
+		gap: 0;
+	}
+
+	body {
+		padding-right: 0;
+	}
+}

assets/js/script.js

@@ -161,4 +161,15 @@ function base_main() {
 }
 document.addEventListener("DOMContentLoaded", () => {
     base_main();
-});
+});
+
+document.addEventListener("DOMContentLoaded", () => {
+	const toggle = document.querySelector(".mobile-nav-toggle");
+	const navbar = document.querySelector(".navbar");
+
+	if (toggle && navbar) {
+		toggle.addEventListener("click", () => {
+			navbar.classList.toggle("open");
+		});
+	}
+});

index.html

@@ -83,6 +83,10 @@
 
 	</div>
 	</div>
+
+	<button class="mobile-nav-toggle" aria-label="Toggle menu">
+	☰
+	</button>
 	
 	<nav class="navbar">
 	<div class="navbar-top-icons">

pages/contact.html

@@ -13,6 +13,9 @@
 </head>
 
 <body>
+	<button class="mobile-nav-toggle" aria-label="Toggle menu">
+	☰
+	</button>
 	<nav class="navbar">
 	<div class="navbar-top-icons">
 	<div class="icon-item">

pages/projects.html

@@ -20,6 +20,9 @@
 </head>
 
 <body>
+	<button class="mobile-nav-toggle" aria-label="Toggle menu">
+	☰
+	</button>
 	<nav class="navbar">
 	<div class="navbar-top-icons">
 	<div class="icon-item">