From f9362fa577172a017c8df26aefc88abba042b092 Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Mon, 14 Aug 2023 11:47:21 +0200
Subject: [PATCH] fix: overall improvements of the responsive layout

---
 src/components/Home/Meme/Meme.astro           |   2 +-
 .../Home/Typewriter/Typewriter.astro          |  12 +-
 .../Home/Typewriter/TypewriterContent.jsx     |   2 +-
 src/components/Home/Web3/Web3.astro           |   6 +-
 src/components/Layout/Navbar/Navbar.astro     |  11 ++
 src/layouts/Layout.astro                      |  71 ++++----
 src/pages/index.astro                         |   5 +
 src/styles/global.scss                        | 158 +-----------------
 8 files changed, 62 insertions(+), 205 deletions(-)

diff --git a/src/components/Home/Meme/Meme.astro b/src/components/Home/Meme/Meme.astro
index f111a2b..a4fd2d2 100644
--- a/src/components/Home/Meme/Meme.astro
+++ b/src/components/Home/Meme/Meme.astro
@@ -2,7 +2,7 @@
 import mulletMeme from "/src/assets/centralized-mullet-meme.png";
 ---
 
-<section id="meme" class="tilted-bg">
+<section id="meme" class="tilted-bgs">
   <div class="flex flex-col-reverse lg:flex-row gap-10 mx-10 sm:mx-20 xl:mx-40">
     <div class="space-y-10">
       <h2
diff --git a/src/components/Home/Typewriter/Typewriter.astro b/src/components/Home/Typewriter/Typewriter.astro
index 3e65314..ba4f082 100644
--- a/src/components/Home/Typewriter/Typewriter.astro
+++ b/src/components/Home/Typewriter/Typewriter.astro
@@ -1,21 +1,13 @@
 ---
-import bg from "../../../assets/home-hero-bg.webp"
 import TypewriterContent from "./TypewriterContent.jsx";
 ---
 
-<div class="absolute -z-10 -right-[250px] top-[250px] w-[1250px]">
-  <img
-    class="object-contain w-[1250px]"
-    src={bg.src}
-  />
-</div>
-
 <section
   id="typewriter"
-  class="w-full overflow-hidden flex flex-row items-center justify-center"
+  class="w-full flex flex-row items-center justify-center"
 >
   <h1
-    class="text-7xl md:text-9xl mt-10 mb-10 min-h-[375px] max-w-full px-10 text-center"
+    class="text-6xl md:text-9xl mb-10 min-h-[375px] px-10 text-center break-words"
   >
     <TypewriterContent client:load />
   </h1>
diff --git a/src/components/Home/Typewriter/TypewriterContent.jsx b/src/components/Home/Typewriter/TypewriterContent.jsx
index 07245dd..6f0c22e 100644
--- a/src/components/Home/Typewriter/TypewriterContent.jsx
+++ b/src/components/Home/Typewriter/TypewriterContent.jsx
@@ -4,7 +4,7 @@ const HeaderContent = () => {
   var
     headerStrings = [
       'Access to the web <br /> for the masses',
-      'An open web for business',
+      'An open web <br /> for business',
       'Web3 for the masses',
       'Web3 for you'
     ],
diff --git a/src/components/Home/Web3/Web3.astro b/src/components/Home/Web3/Web3.astro
index d510994..bac4169 100644
--- a/src/components/Home/Web3/Web3.astro
+++ b/src/components/Home/Web3/Web3.astro
@@ -6,8 +6,10 @@ import gfxLeft from "../../../assets/home-gfx-left.png";
   id="web3"
   class="flex flex-col lg:flex-row lg:bg-transparent lg:p-0 gap-10 mx-10 sm:mx-20 xl:mx-40"
 >
-  <div class="flex-1 -ml-10 -mr-20 lg:-ml-40 lg:mr-0">
-    <img src={gfxLeft.src} class="w-full" />
+  <div class="flex-1 max-w-[calc(100% + 20px)] overflow-hidden -mx-10">
+    <div class="flex-1 -ml-10 -mr-10 lg:-ml-40 lg:mr-0">
+      <img src={gfxLeft.src} class="w-full" />
+    </div>
   </div>
   <div class="flex-1 -mt-40 space-y-10 flex flex-col justify-center">
     <h2
diff --git a/src/components/Layout/Navbar/Navbar.astro b/src/components/Layout/Navbar/Navbar.astro
index 5a5ae86..16ef1cc 100644
--- a/src/components/Layout/Navbar/Navbar.astro
+++ b/src/components/Layout/Navbar/Navbar.astro
@@ -75,6 +75,15 @@ function getActiveClass(linkView) {
     const hamburgerEl = document.getElementById("hamburger");
     const menuEl = document.querySelector("menu");
 
+    function toggleScrollBlock() {
+      // When not hidden, should block scroll
+      if (!navbarOverlayEl.classList.contains("hidden")) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = null;
+      }
+    }
+
     function handleMenuClick() {
       // Toggle menu open/closed
       ["hidden", "flex"].forEach((className) => {
@@ -82,6 +91,7 @@ function getActiveClass(linkView) {
       });
 
       navbarOverlayEl.classList.toggle("hidden");
+      toggleScrollBlock();
     }
 
     function handleOverlayClick() {
@@ -91,6 +101,7 @@ function getActiveClass(linkView) {
       });
 
       navbarOverlayEl.classList.toggle("hidden");
+      toggleScrollBlock();
     }
 
     hamburgerEl.addEventListener("click", handleMenuClick);
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index ef56a80..3708319 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -5,53 +5,56 @@ import Footer from "../components/Layout/Footer/Footer.astro";
 import JoinCommunity from "../components/Layout/JoinCommunity/JoinCommunity.astro";
 
 export interface Props {
-    view: string;
-    title: string;
+  view: string;
+  title: string;
 }
 
-const {view, title} = Astro.props;
+const { view, title } = Astro.props;
 ---
 
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
     <title>{title}</title>
-    <meta charset="utf-8"/>
+    <meta charset="utf-8" />
     <meta
-        name="viewport"
-        content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
     />
     <meta
-        name="description"
-        content="A platform, network and experience that allows you to control and own your online web, and access all of the possibilities Web3 has to offer. Join the open web."
+      name="description"
+      content="A platform, network and experience that allows you to control and own your online web, and access all of the possibilities Web3 has to offer. Join the open web."
+    />
+    <meta
+      name="keywords"
+      content="Web3 Extension, web3 browser, Lume Web, Web3, dWeb, p2p, handshake, eth, ethereum, ipfs, open web, privacy, decentralization, blockchain"
     />
-    <meta name="keywords"
-          content="Web3 Extension, web3 browser, Lume Web, Web3, dWeb, p2p, handshake, eth, ethereum, ipfs, open web, privacy, decentralization, blockchain"/>
     <!-- Matomo -->
     <script is:inline>
-        var _paq = window._paq = window._paq || [];
-        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-        _paq.push(['trackPageView']);
-        _paq.push(['enableLinkTracking']);
-        (function () {
-            var u = "//piwiki.lumeweb.com/";
-            _paq.push(['setTrackerUrl', u + 'matomo.php']);
-            _paq.push(['setSiteId', '1']);
-            var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
-            g.async = true;
-            g.src = u + 'matomo.js';
-            s.parentNode.insertBefore(g, s);
-        })();
+      var _paq = (window._paq = window._paq || []);
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(["trackPageView"]);
+      _paq.push(["enableLinkTracking"]);
+      (function () {
+        var u = "//piwiki.lumeweb.com/";
+        _paq.push(["setTrackerUrl", u + "matomo.php"]);
+        _paq.push(["setSiteId", "1"]);
+        var d = document,
+          g = d.createElement("script"),
+          s = d.getElementsByTagName("script")[0];
+        g.async = true;
+        g.src = u + "matomo.js";
+        s.parentNode.insertBefore(g, s);
+      })();
     </script>
     <!-- End Matomo Code -->
-</head>
-<body class="max-w-[1600px] mx-auto">
-<Navbar view={view}/>
-<main class={view + " space-y-40"}>
-    <slot/>
-</main>
-{view !== "home" &&
-    <JoinCommunity/>}
-<Footer/>
-</body>
+  </head>
+  <body class="max-w-[1600px] mx-auto">
+    <Navbar view={view} />
+    <main class={view + " space-y-40 overflow-x-hidden relative "}>
+      <slot />
+    </main>
+    {view !== "home" && <JoinCommunity />}
+    <Footer />
+  </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 29d058e..7887689 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,9 +9,14 @@ import WebComparison from "../components/Home/WebComparison/WebComparison.astro"
 import Socials from "../components/Home/Socials/Socials.astro";
 import CTO from "../components/Home/CTO/CTO.astro";
 import Message from "../components/Home/Message/Message.astro";
+import bg from "../assets/home-hero-bg.webp";
 ---
 
 <Layout view="home" title="Lume Web - Your Open Web">
+  <img
+    class="absolute -z-10 -right-[250px] top-[250px] object-contain w-[1250px] max-w-none"
+    src={bg.src}
+  />
   <Typewriter />
   <Vision />
   <Web3 />
diff --git a/src/styles/global.scss b/src/styles/global.scss
index dfc0567..860e044 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -75,111 +75,6 @@ a, button {
   transition: color $transition-duration;
 }
 
-.btn-main {
-  display: inline-block;
-  padding: 0.5em 0.8em;
-  color: $color-black;
-  background: $color-aquamarine;
-  border: 0.05em solid $color-aquamarine;
-  border-radius: 0.25em;
-  transition: color $transition-duration, background $transition-duration;
-  white-space: nowrap;
-
-  &:hover {
-    color: $color-white;
-    background: $color-blue-charcoal;
-  }
-}
-
-.feature-group {
-  h2 {
-    margin-bottom: 1em;
-    @include fluid-font-size(1.5625rem);
-    font-weight: 700;
-    line-height: 100%;
-    text-transform: uppercase;
-    color: $color-aquamarine;
-  }
-
-  h3 {
-    margin-bottom: 0.65em;
-    @include fluid-font-size(2.8125rem);
-    line-height: 109%;
-  }
-
-  h2, h3 {
-    text-shadow: 0.017em 0.017em 0.034em rgba($color-blue-charcoal, 0.65);
-  }
-
-  p, ul {
-    @include fluid-font-size(1.375rem);
-    font-family: $font-family-jaldi;
-    line-height: 148%;
-    color: $color-cloud;
-    transition: background $transition-duration;
-  }
-
-  p + p, ul + p {
-    margin-top: 0.78em;
-  }
-
-  ul {
-    list-style-type: disc;
-    margin-left: 1em;
-  }
-
-  .btn-main {
-    font-family: $font-family-jaldi;
-    @include fluid-font-size(1.5rem);
-    margin-top: 1.57em;
-  }
-}
-
-.feature-grid {
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  gap: 0.9em;
-  padding: 0 7.5%;
-  @include fluid-font-size(1.25rem);
-
-  @media screen and (min-width: 48rem) {
-    grid-template-columns: repeat(2, 1fr);
-    grid-auto-rows: 1fr;
-  }
-
-  @media screen and (min-width: 64rem) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  div {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 2.5em 2em;
-    background: $color-blue-charcoal;
-    border: 0.05em solid transparent;
-    border-radius: 0.5em;
-    font-family: $font-family-jaldi;
-    transition: border-color $transition-duration;
-
-    &:hover {
-      border-color: $color-aquamarine;
-    }
-  }
-
-  h3 {
-    @include fluid-font-size(2rem);
-    line-height: 109%;
-  }
-
-  p {
-    @include fluid-font-size(1.375rem);
-    margin-top: 0.67em;
-    line-height: 124%;
-    color: $color-cloud;
-  }
-}
-
 .tilted-bg {
   position: relative;
 
@@ -212,55 +107,4 @@ a, button {
     transform: matrix(1, 0.04, -0.04, 1, 0, 0);
     z-index: -1;
   }
-}
-
-main.home {
-  .feature-group h3 {
-    font-weight: 700;
-  }
-}
-
-main.vision {
-  &::before {
-    content: "";
-    position: absolute;
-    top: -0.5em;
-    left: 50%;
-    width: 132.9em;
-    height: 94.63334em;
-    transform: translate(-50%, 0);
-    background: url("/src/assets/main-vision-bg.png");
-    background-size: contain;
-    z-index: -1;
-  }
-}
-
-main.what {
-  &::before {
-    content: "";
-    position: absolute;
-    top: -2em;
-    left: 50%;
-    width: 151.3em;
-    height: 122.4em;
-    background: url("/src/assets/main-what-bg.png");
-    background-size: contain;
-    transform: translate(-50%, 0);
-    z-index: -1;
-  }
-}
-
-main.donate {
-  &::before {
-    content: "";
-    position: absolute;
-    top: -3em;
-    left: 50%;
-    width: 144em;
-    height: 93.3em;
-    background: url("/src/assets/main-donate-bg.png");
-    background-size: contain;
-    transform: translate(-50%, 0);
-    z-index: -1;
-  }
-}
+}
\ No newline at end of file