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

padding fix

This commit is contained in:
roryjshelton 2023-05-07 16:29:00 +02:00
parent 8ff7194511
commit 64a986fef3
13 changed files with 37 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Navbar/Navbar.jsx
View File

@ -8,15 +8,15 @@ function Navbar() {
const toggleNav = () => setNav(!nav) const toggleNav = () => setNav(!nav)
return ( return (
<div class='w-full h-20 flex justify-between items-center whitespace-nowrap gap-9 bg-[#031418] pt-[75px] pb-[3%] px-[7%]'> <div class='w-full h-20 flex justify-between items-center whitespace-nowrap gap-9 bg-[#031418] pt-[75px] px-[3%]'>
<div class="bg-[url(../../src/assets/lume-logo.webp)] bg-no-repeat bg-contain h-[55px] min-w-[210px] z-[998] ml-[5px]"> <div class="bg-[url(../../src/assets/lume-logo.webp)] bg-no-repeat bg-contain h-[55px] min-w-[210px] z-[998] ml-[1%]">
</div> </div>
<ul class='transition-opacity duration-150 ease-out md:max-lg:opacity-0 lg:opacity-100 nav-menu'> <ul class='transition-opacity duration-150 ease-out md:max-lg:opacity-0 lg:opacity-100 nav-menu'>
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
<li><a href="#vision">Vision</a></li> <li><a href="#vision">Vision</a></li>
<li><a href="#whatisweb3">What is Web3</a></li> <li><a href="#whatisweb3">What is Web3</a></li>
<li>Donate</li> <li>Donate</li>
<div class='download-btn-container class="transition duration-[0.3s]"'> <div class='text-[color:var(--black)] text-[length:var(--font-size-s)] font-normal not-italic items-end bg-[color:var(--aquamarine)] flex h-[52px] min-w-[245px] transition-[0.5s] border px-[5.2px] py-3 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid;'>
<a class='download-btn' href="#">Download Extension</a> <a class='download-btn' href="#">Download Extension</a>
</div> </div>
</ul> </ul>
@ -30,8 +30,8 @@ function Navbar() {
<li onClick={toggleNav}><a href="#vision">Vision</a></li> <li onClick={toggleNav}><a href="#vision">Vision</a></li>
<li onClick={toggleNav}><a href="#whatisweb3">What is Web3</a></li> <li onClick={toggleNav}><a href="#whatisweb3">What is Web3</a></li>
<li onClick={toggleNav}>Donate</li> <li onClick={toggleNav}>Donate</li>
<div class='download-btn-container'> <div class='text-[color:var(--black)] text-[length:var(--font-size-s)] font-normal not-italic items-end bg-[color:var(--aquamarine)] flex h-[52px] min-w-[245px] transition-[0.5s] border px-[5.2px] py-3 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid transition-[0.5s] ml-[-0.8em] scale-[0.7] hover:scale-75;'>
<a class="download-btn" href="#">Download Extension</a> <a class="download-btn pl-2.5" href="#">Download Extension</a>
</div> </div>
</ul> </ul>
<div class="mobile-menu-btn"></div> <div class="mobile-menu-btn"></div>

37
src/components/Navbar/NavbarStyles.css
View File

@ -8,37 +8,11 @@ li {
padding: 1rem; padding: 1rem;
} }
.download-btn-container {
color: var(--black) !important;
font-family: var(--font-family-jetbrains-mono);
font-size: var(--font-size-s);
font-weight: 400;
font-style: normal;
align-items: flex-end;
background-color: var(--aquamarine);
border-radius: 5px;
display: flex;
height: 52px;
min-width: 245px;
padding: 12px 5.2px;
transform: scale(1);
transition: 0.3s;
}
.header-alt { .header-alt {
color: var(--aquamarine); color: var(--aquamarine);
font-family: var(--font-family-jetbrains-mono); font-family: var(--font-family-jetbrains-mono);
} }
.download-btn-container a {
color: black;
}
.download-btn-container:hover {
transform: scale(1.01);
transition: 0.3s;
}
.download-btn { .download-btn {
letter-spacing: 0; letter-spacing: 0;
min-height: 26px; min-height: 26px;
@ -99,17 +73,6 @@ li {
margin: 0 1em; margin: 0 1em;
} }
.download-btn-container {
transform: scale(0.7);
transition: 0.3s;
margin-left: -0.8em;
}
.download-btn-container:hover {
transform: scale(0.75);
transition: 0.3s;
}
.download-btn { .download-btn {
letter-spacing: 0; letter-spacing: 0;
min-height: 26px; min-height: 26px;

4
src/components/P1/CTO/CTO.astro
View File

@ -6,9 +6,7 @@ import "./CtoStyles.css";
<div class="cto-geometric-bg"> <div class="cto-geometric-bg">
<div class="cto-shadow w-full transition-[0.5s] rounded-[72.5px];"> <div class="cto-shadow w-full transition-[0.5s] rounded-[72.5px];">
<span id="cto"></span> <span id="cto"></span>
<div <div class="w-full transition-[0.5s] rounded-[72.5px];">
class="shadowdrop shadow-[0px_4px_4px_#00000040] w-full transition-[0.5s] rounded-[72.5px];"
>
<h2 <h2
class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold" class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
> >

4
src/components/P1/CTO/CTOStyles.css
View File

@ -35,13 +35,13 @@
@media screen and (width >0px) and (width <=600px) { @media screen and (width >0px) and (width <=600px) {
.cto-container { .cto-container {
margin-left: -3em;
background-position: 100px 50px; background-position: 100px 50px;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-origin: content-box; background-origin: content-box;
transition: 0.5s; transition: 0.5s;
justify-content: center; justify-content: center;
max-width: 80%;
} }
.cto-bp { .cto-bp {
@ -51,7 +51,7 @@
.shadowdrop { .shadowdrop {
border-radius: 72.5px; border-radius: 72.5px;
box-shadow: 4px 4px #00000040; box-shadow: 0px 4px 4px #00000040;
margin-left: 12%; margin-left: 12%;
transition: 0.5s; transition: 0.5s;
justify-content: center; justify-content: center;

4
src/components/P1/Footer/FooterStyles.css
View File

@ -2,13 +2,14 @@
font-family: var(--font-family-jaldi); font-family: var(--font-family-jaldi);
margin-inline: 5px; margin-inline: 5px;
list-style-type: none; list-style-type: none;
white-space: nowrap;
} }
.footer-cards { .footer-cards {
margin: 0 auto; margin: 0 auto;
display: grid; display: grid;
gap: 1rem; gap: 1rem;
padding: 5% 11.5%; padding: 7% 14.7%;
background-color: #020E10; background-color: #020E10;
height: auto; height: auto;
} }
@ -42,6 +43,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
background-position: left; background-position: left;
margin-right: 2%;
padding-inline: 10px; padding-inline: 10px;
height: 14px; height: 14px;
object-fit: cover; object-fit: cover;

5
src/components/P1/Grid/GridStyles.css
View File

@ -1,8 +1,9 @@
.cards { .cards {
max-width: 1200px; max-width: 81%;
margin: 10vh auto; margin: 126px auto;
display: grid; display: grid;
gap: 1rem; gap: 1rem;
/* padding-left: 5.5%; */
} }
@media (width >=600px) { @media (width >=600px) {

2
src/components/P1/Header/Header.astro
View File

@ -2,7 +2,7 @@
import HeaderContent from "./HeaderContent.jsx"; import HeaderContent from "./HeaderContent.jsx";
--- ---
<div class="mt-[7%] items-start flex items-start flex z-[-1]"> <div class="mt-[145.5px] items-start flex items-start flex z-[-1]">
<div <div
class="text-[color:var(--white)] font-normal not-italic tracking-[-6px] leading-[calc(75px_+_(110_-_75)_*_((100vw_-_300px)_/_(1600_-_300)))] text-center w-full" class="text-[color:var(--white)] font-normal not-italic tracking-[-6px] leading-[calc(75px_+_(110_-_75)_*_((100vw_-_300px)_/_(1600_-_300)))] text-center w-full"
> >

2
src/components/P1/Message/MessageStyles.css
View File

@ -5,7 +5,7 @@
flex-direction: column; flex-direction: column;
gap: 7px; gap: 7px;
min-height: 237px; min-height: 237px;
padding: 5% 12%; padding: 5% 15%;
width: 100%; width: 100%;
} }

4
src/components/P1/Powered/Powered.astro
View File

@ -2,9 +2,9 @@
import "./PoweredStyles.css"; import "./PoweredStyles.css";
--- ---
<div class="p-l-container"> <div class="p-l-container my-[125px]">
<div class="p-l-wrapper"> <div class="p-l-wrapper">
<h2 class="centered"><br /><br />POWERED BY</h2> <h2 class="centered mt-[10px]">POWERED BY</h2>
<div <div
class="flex-row place-items-center overflow-hidden flex h-auto w-full mb-[1.5vh]" class="flex-row place-items-center overflow-hidden flex h-auto w-full mb-[1.5vh]"
> >

8
src/components/P1/Socials/Socials.astro
View File

@ -2,13 +2,15 @@
import "./SocialsStyles.css"; import "./SocialsStyles.css";
--- ---
<div class="grid place-items-center overflow-hidden h-auto mb-[1.5vh];"> <div class="grid place-items-center overflow-hidden h-auto my-[115px]">
<div> <div>
<h2 class="grid place-items-center overflow-hidden h-auto mb-[1.5vh];"> <h2
class="centered grid place-items-center overflow-hidden h-auto mt-[35px] mb-[1.5vh];"
>
get in touch get in touch
</h2> </h2>
<div class="grid place-items-center overflow-hidden h-auto mb-[1.5vh];"> <div class="grid place-items-center overflow-hidden h-auto mb-[1.5vh];">
<div class="flex ml-[-5%] mb-[5vh] pb-[5vh]"> <div class="flex ml-[-5%] pb-[8vh]">
<div class="github"></div> <div class="github"></div>
<div class="discord"></div> <div class="discord"></div>
<div class="twitter"></div> <div class="twitter"></div>

4
src/components/P1/Vision/Vision.astro
View File

@ -3,7 +3,7 @@ import "./VisionStyles.css";
--- ---
<div <div
class="mt-[10%] items-start flex pb-[5vh]" class="mt-[166px] items-start flex pb-[5vh]"
style="padding-bottom: 5vh; vertical-align: center; padding-inline: 15%;" style="padding-bottom: 5vh; vertical-align: center; padding-inline: 15%;"
> >
<div <div
@ -28,7 +28,7 @@ import "./VisionStyles.css";
easy usage without censorship or backdoors. easy usage without censorship or backdoors.
</h4> </h4>
<div <div
class="items-center bg-[color:var(--aquamarine)] flex h-[49px] ml-[-1.5px] max-w-[195px] transition-[0.3s] text-black mt-[22px] px-[3px] py-0 rounded-[5px] scale-100 hover:transition-[0.3s] hover:scale-[1.01]" class="items-center transition-[0.3s] hover:text-[white] bg-[color:var(--aquamarine)] flex h-[49px] ml-[-1.5px] max-w-[195px] text-black mt-[22px] px-[3px] py-0 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid transition-[0.5s]"
> >
<a <a
class="tracking-[0] min-h-[26px] text-center w-[234px] block" class="tracking-[0] min-h-[26px] text-center w-[234px] block"

13
src/components/P1/Whatisweb3/Whatisweb3.astro
View File

@ -2,14 +2,14 @@
import "./Whatisweb3Styles.css"; import "./Whatisweb3Styles.css";
--- ---
<div class="centered"> <div class="centered mt-[100px]">
<div <div
class="self-start relative w-full justify-center;" class="self-start relative w-full justify-center;"
style="padding-block: 5vh;" style="padding-block: 5vh;"
> >
<div class="whatisweb3-wrapper"> <div class="whatisweb3-wrapper">
<div <div
class="bg-[url(../../../src/assets/img-left.webp)] bg-[50%_50%] bg-contain bg-no-repeat h-[817px] absolute flex w-[637px] z-[998] left-[11%]" class="bg-[url(../../../src/assets/img-left.webp)] bg-[50%_50%] bg-contain bg-no-repeat h-[817px] absolute flex w-[637px] z-[998] left-[0%]"
> >
</div> </div>
<div class="w3-container"> <div class="w3-container">
@ -32,8 +32,13 @@ import "./Whatisweb3Styles.css";
transition from Web2 to Web3, which matters for privacy and transition from Web2 to Web3, which matters for privacy and
security. security.
</h4> </h4>
<div class="w3-btn-container"> <div
<a class="w3-btn" href="#">Learn More</a> class="items-center bg-[color:var(--aquamarine)] flex h-[49px] ml-[-1.5px] max-w-[116px] transition-[0.3s] text-black mt-[22px] px-[3px] py-0 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent transition-[0.5s] hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid"
>
<a
class="tracking-[0] min-h-[26px] text-center w-[234px] block"
href="#">Learn More</a
>
</div> </div>
</div> </div>
</div> </div>

39
src/components/P1/Whatisweb3/Whatisweb3Styles.css
View File

@ -1,17 +1,17 @@
.w3-container { .w3-container {
z-index: 999 !important; z-index: 999 !important;
width: 100%; width: 100%;
padding-left: 53vw; padding-left: 50vw;
transition: 0.5s; transition: 0.5s;
} }
.whatisweb3-wrapper { .whatisweb3-wrapper {
background-image: url("../../../assets/tilted-rectangle.webp"); background-image: url("../../../assets/tilted-rectangle.webp");
background-size: 100% 100%; background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
left: 0%;
width: 80%; width: 80%;
padding-block: 10em; padding-block: 11em;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
@ -19,39 +19,6 @@
padding-left: calc(8px + 1.5625vw); padding-left: calc(8px + 1.5625vw);
} }
.w3-btn-container {
align-items: center;
z-index: 999 !important;
background-color: var(--aquamarine);
border-radius: 5px;
display: flex;
height: 49px;
margin-left: -1.5px;
margin-top: 22px;
max-width: 105px;
padding: 0 3px;
transform: scale(1);
transition: 0.5s;
}
.w3-btn-container:hover {
transform: scale(1.01);
transition: 0.5s;
}
.w3-btn-container a {
color: black;
}
.w3-btn {
letter-spacing: 0;
min-height: 26px;
text-align: center;
width: 105px;
display: block;
font-size: 15px;
}
.w3-transluscent { .w3-transluscent {
background-color: #020e1076; background-color: #020e1076;
border-radius: 15px; border-radius: 15px;