From 5a8b20b16e1493d4a6238acd81718f8b500c1ac4 Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Sun, 13 Aug 2023 11:26:27 +0200
Subject: [PATCH] fix: mobile layout on footer and message component

---
 src/components/Home/Message/Message.astro |  5 +++-
 src/components/Layout/Footer/Footer.astro | 14 ++++++-----
 src/components/Layout/Navbar/Navbar.astro | 29 ++++++++++++++++++++++-
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/components/Home/Message/Message.astro b/src/components/Home/Message/Message.astro
index fda4177..5be7a94 100644
--- a/src/components/Home/Message/Message.astro
+++ b/src/components/Home/Message/Message.astro
@@ -1,7 +1,10 @@
 ---
 ---
 
-<section id="message" class="bg-primary py-16 px-40 space-y-4">
+<section
+  id="message"
+  class="bg-primary py-16 px-10 md:px-20 xl:px-40 space-y-4"
+>
   <h2 class="text-3xl font-bold text-black font-display">
     A message from Derrick
   </h2>
diff --git a/src/components/Layout/Footer/Footer.astro b/src/components/Layout/Footer/Footer.astro
index 573c763..5366ed9 100644
--- a/src/components/Layout/Footer/Footer.astro
+++ b/src/components/Layout/Footer/Footer.astro
@@ -2,7 +2,9 @@
 import logo from "/src/assets/lume-logo.png";
 ---
 
-<footer class="flex flex-row py-24 font-body mb-3 mx-40">
+<footer
+  class="flex flex-col lg:flex-row py-24 font-body mb-3 mx-10 md:mx-20 xl:mx-40 max-w-screen"
+>
   <div class="flex-1">
     <a href="/">
       <img src={logo.src} class="w-36 mb-2" alt="Lume" />
@@ -28,11 +30,11 @@ import logo from "/src/assets/lume-logo.png";
       </svg>
       contact@lumeweb.com
     </a>
-    <div class="text-lg text-primary font-bold font-display mt-10">
+    <div class="text-lg text-primary font-bold font-display my-10">
       Freedom. Privacy. <br />Ownership.
     </div>
   </div>
-  <div class="flex-1">
+  <div class="flex-1 my-5 lg:my-0">
     <h5 class="text-3xl mb-3">General</h5>
     <ul class="text-body font-body text-xl">
       <li>
@@ -43,7 +45,7 @@ import logo from "/src/assets/lume-logo.png";
       </li>
     </ul>
   </div>
-  <div class="flex-1">
+  <div class="flex-1 my-5 lg:my-0">
     <h5 class="text-3xl mb-3">Community</h5>
     <ul class="text-body font-body text-xl">
       <li>
@@ -61,7 +63,7 @@ import logo from "/src/assets/lume-logo.png";
       </li>
     </ul>
   </div>
-  <div class="flex-1">
+  <div class="flex-1 my-5 lg:my-0">
     <h5 class="text-3xl mb-3">Ecosystem</h5>
     <ul class="text-body font-body text-xl">
       <li>
@@ -69,7 +71,7 @@ import logo from "/src/assets/lume-logo.png";
       </li>
     </ul>
   </div>
-  <div class="flex-1">
+  <div class="flex-1 my-5 lg:my-0">
     <h5 class="text-3xl mb-3">Support Us</h5>
     <ul class="text-body font-body text-xl">
       <li>
diff --git a/src/components/Layout/Navbar/Navbar.astro b/src/components/Layout/Navbar/Navbar.astro
index 2f10e77..5b7208e 100644
--- a/src/components/Layout/Navbar/Navbar.astro
+++ b/src/components/Layout/Navbar/Navbar.astro
@@ -42,7 +42,34 @@ function getActiveClass(linkView) {
     class="hidden lg:hidden bg-black/40 w-screen h-screen fixed z-10 top-0 botton-0 right-0 left-0"
   >
   </div>
-  <button id="hamburger" class="z-30 text-4xl lg:hidden">☰</button>
+  <button id="hamburger" class="z-30 text-4xl lg:hidden">
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 52 43"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 1.06787H51.295"
+        stroke="white"
+        stroke-width="1.28"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+      <path
+        d="M1 21.5728H51.295"
+        stroke="white"
+        stroke-width="1.28"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+      <path
+        d="M1 42.0776H51.295"
+        stroke="white"
+        stroke-width="1.28"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+    </svg>
+  </button>
   <script>
     const navbarOverlayEl = document.getElementById("navbar-overlay");
     const hamburgerEl = document.getElementById("hamburger");