fix: overall improvements of the responsive layout

This commit is contained in:
Juan Di Toro 2023-08-14 11:47:21 +02:00
parent ea8261dc10
commit f9362fa577
8 changed files with 62 additions and 205 deletions

View File

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

View File

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

View File

@ -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'
],

View File

@ -6,9 +6,11 @@ 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">
<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
class="font-display text-primary font-bold text-xl md:text-2xl uppercase"

View File

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

View File

@ -9,14 +9,14 @@ export interface Props {
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"
@ -25,33 +25,36 @@ const {view, title} = Astro.props;
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 || [];
var _paq = (window._paq = window._paq || []);
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
_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];
_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';
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>

View File

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

View File

@ -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;
@ -213,54 +108,3 @@ a, button {
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;
}
}