LumeWeb
/
lumeweb.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: mobile layout on footer and message component

This commit is contained in:
Juan Di Toro 2023-08-13 11:26:27 +02:00
parent 87cf3024b7
commit 5a8b20b16e
3 changed files with 40 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Home/Message/Message.astro
View File

@ -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>

14
src/components/Layout/Footer/Footer.astro
View File

@ -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>

29
src/components/Layout/Navbar/Navbar.astro
View File

@ -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");