From f03642658a8b32e13f65c60a5ddd67e6c505a762 Mon Sep 17 00:00:00 2001
From: tree <tree@tree.fail>
Date: Mon, 13 Nov 2023 04:07:21 +0100
Subject: [PATCH] responsivity

---
 src/layouts/base.astro | 24 +++++++++++++++++++-----
 src/pages/index.astro  |  2 +-
 src/styles/base.css    | 34 ++++++++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+), 6 deletions(-)
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index 6567474..a3d2df8 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -36,15 +36,24 @@ import cfonts from 'cfonts';
 		/>
 	</head>
 	<body class="bg-black text-white">
+		<div class="nav-links">
+			{config.header.menu.map((menuItem) => (
+				<a href={menuItem.url} class="inline-block hover:underline px-4 py-2" target={menuItem.url.match(/^http/) ? '_blank' : '_self'}>{menuItem.name}</a>
+			))}
+		</div>
 		<div class="w-full z-10" class:list={[banner ? "h-[600px]" : "pb-6"]} id={banner ? "intro" : "no-intro"}>
 			<header class="flex pt-6 middle-pane-big">
-				<div class="w-40">
+				<div class="mr-4 lg:hidden">
+					<div class="hamburger"></div>
+				</div>
+
+				<div class="w-32 lg:w-40">
 					<img src="/logo.svg" class:list={["w-40", banner ? "hidden" : "block"]} />
 				</div>
-				<div class="flex gap-8 mt-2 ml-10">
+				<div class="hidden lg:flex gap-2 ml-10">
 					{config.header.menu.map((menuItem) => (
-						<div class="uppercase hover:underline" class:list={[menuItem.url.match(/^http/) ? "external" : "", Astro.url.pathname === menuItem.url ? "text-white" : ""]}>
-							<a href={menuItem.url} class="" target={menuItem.url.match(/^http/) ? '_blank' : '_self'}>{menuItem.name}</a>
+						<div class="uppercase" class:list={[menuItem.url.match(/^http/) ? "external" : "", Astro.url.pathname === menuItem.url ? "text-white" : ""]}>
+							<a href={menuItem.url} class="inline-block hover:underline px-4 py-2" target={menuItem.url.match(/^http/) ? '_blank' : '_self'}>{menuItem.name}</a>
 						</div>
 					))}
 				</div>
@@ -73,7 +82,7 @@ import cfonts from 'cfonts';
 
 		<div class="border border-t-2 border-b-0 border-l-0 border-r-0 border-[#0f0f0f] mt-20 pt-10 pb-10">
 			<div class="middle-pane-big">
-				<div class="flex gap-10 text-lg items-center" id="footerMenu">
+				<div class="flex gap-10 text-lg items-center flex-wrap" id="footerMenu">
 					<div class="grow">
 						<img src="/logo.svg" class="w-44" />
 					</div>
@@ -86,5 +95,10 @@ import cfonts from 'cfonts';
 				</div>
 			</div>
 		</div>
+		<script>
+			document.querySelector('.hamburger').addEventListener('click', () => {
+			  document.querySelector('.nav-links').classList.toggle('expanded');
+			});
+		  </script>
 	</body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cbdcb0d..610077a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -70,7 +70,7 @@ import contributors from '../contributors.json';
 				))}
 			</div>
 
-			<div class="flex gap-10 pt-4">
+			<div class="flex gap-4 lg:gap-10 pt-4 flex-wrap">
 				<a href="" class="button inverted"><button>Enter the community</button></a>
 				<a href="" class="button inverted"><button>Become the contributor</button></a>
 				<a href="" class="button inverted"><button>Become the partner</button></a>
diff --git a/src/styles/base.css b/src/styles/base.css
index 1fabcd4..bbe998a 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -136,4 +136,38 @@
   #footerMenu .menuItem:hover .icon {
     @apply opacity-100;
   }
+
+  .hamburger {
+    width: 24px;
+    height: 24px;
+    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_1327_1074" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_1327_1074)"><path d="M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z" fill="white"/></g></svg>');
+  }
+}
+
+.nav-links {
+  width: 100%;
+  top: 5rem;
+  left: 48px;
+  background-color: #ff9776;
+  display: none;
+  margin: 0;
+}
+
+.nav-links a {
+  display: block;
+  text-align: center;
+  padding: 10px 0;
+  text-decoration: none;
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.nav-links a:hover, a:focus {
+  background-color: white;
+  text-color: black;
+}
+
+.expanded {
+  display: unset;
 }
\ No newline at end of file
