add components

This commit is contained in:
roryjshelton 2023-04-27 23:17:06 -07:00
parent c9ae52b5ef
commit 8ee8671ead
10 changed files with 222 additions and 169 deletions

View File

@ -3,7 +3,7 @@
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"dev": "TAILWIND_MODE=watch astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",

View File

@ -8,33 +8,33 @@ function Navbar() {
const toggleNav = () => setNav(!nav)
return (
<div className='navbar'>
<div className="logo">
<div class='navbar'>
<div class="logo">
</div>
<ul className="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="#vision">Vision</a></li>
<li><a href="#whatisweb3">What is Web3</a></li>
<li>Donate</li>
<div className='download-btn-container'>
<a className="download-btn" href="#">Download Extension</a>
<div class='download-btn-container class="transition duration-[0.3s]"'>
<a class='download-btn' href="#">Download Extension</a>
</div>
</ul>
<div className="hamburger" onClick={toggleNav}>
<HiOutlineMenuAlt4 className='icon items-end'/>
<div class="transition-opacity duration-150 ease-out nav-menu hamburger" onClick={toggleNav}>
<HiOutlineMenuAlt4 class='icon'/>
</div>
<div className={nav ? 'mobile-menu active' : 'mobile-menu'}>
<ul className="mobile-nav">
<div class={nav ? 'mobile-menu active class="transition duration-[0.55s] linear"' : 'mobile-menu class="transition duration-[0.55s] linear"'}>
<ul class="mobile-nav">
<li onClick={toggleNav}><a href="#">Home</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}>Donate</li>
<div className='download-btn-container'>
<a className="download-btn" href="#">Download Extension</a>
<div class='download-btn-container'>
<a class="download-btn" href="#">Download Extension</a>
</div>
</ul>
<div className="mobile-menu-btn"></div>
<div class="mobile-menu-btn"></div>
</div>
</div>
)

View File

@ -32,7 +32,6 @@
display: flex;
align-items: flex-end;
padding: 1em;
transition: all 1s linear;
}
li {
@ -56,6 +55,11 @@ li {
transition: 0.3s;
}
.header-alt {
color: var(--aquamarine);
font-family: var(--font-family-jetbrains_mono);
}
.download-btn-container a {
color: black;
}
@ -75,14 +79,6 @@ li {
.hamburger {
display: none;
font-size: var(--font-size-xl);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mobile-menu {
@ -91,11 +87,7 @@ li {
@media screen and (max-width: 940px) {
.nav-menu {
opacity: 0;
visibility: hidden;
width: 1px;
transition: all 0s linear;
position: fixed;
display: none;
}
.hamburger {
@ -103,6 +95,14 @@ li {
position: flex;
max-width: fit-content;
z-index: 999;
font-size: var(--font-size-xl);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mobile-menu {

View File

@ -3,7 +3,7 @@ import "./HeaderStyles.css";
import HeaderContent from "./HeaderContent.jsx";
---
<div class="items-start flex header-container">
<div class="mt-[7%] items-start flex header-container">
<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"
>

View File

@ -1,131 +1,45 @@
.logo {
/* background-image: url(../../../assets/lume-logo.webp); */
background-position: 50%;
background-size: cover;
margin-left: 5px;
height: 70px;
width: 210px;
}
.navbar-container {
white-space: nowrap;
display: inline-block;
}
.navbar {
width: 100%;
height: 80px;
.header-container {
align-items: flex-start;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 5px;
white-space: nowrap;
gap: 36px;
margin-block: calc(77px + 1.5625vw);
/* padding-bottom: calc(77px + 1.5625vw); */
z-index: -1 !important;
}
.nav-menu {
display: flex;
align-items: flex-end;
padding: 1em;
}
li {
padding: 1rem;
}
.download-btn-container {
color: var(--black);
.header {
color: var(--white);
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;
}
.download-btn-container a {
color: black;
}
.download-btn-container:hover {
transform: scale(1.01);
transition: 0.3s;
}
.download-btn {
letter-spacing: 0;
min-height: 26px;
letter-spacing: -6px;
line-height: calc(75px + (110 - 75) * ((100vw - 300px) / (1600 - 300)));
text-align: center;
width: 234px;
display: block;
width: 100%;
}
.hamburger {
display: none;
.header-alt {
color: var(--aquamarine);
font-family: var(--font-family-jetbrains_mono);
}
.mobile-menu {
display: none;
.header-alignment {
display: flex;
flex-direction: column;
justify-content: center;
}
@media screen and (max-width: 940px) {
.nav-menu {
display: none;
.header-underscore {
animation: blink 1.3s step-end infinite;
}
@keyframes blink {
from,
to {
color: transparent
}
.hamburger {
display: block;
position: flex;
max-width: fit-content;
z-index: 999;
}
.mobile-menu {
display: flex;
flex-direction: column;
width: 55%;
margin-left: 50%;
top: -100vh;
left: 0;
position: absolute;
justify-content: space-between;
align-items: flex-end;
background-color: #031418;
transition: 0.2s;
}
.active {
top: 2em;
}
.mobile-menu li {
padding: 1em 0.5em;
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 {
letter-spacing: 0;
min-height: 26px;
text-align: center;
width: 234px;
display: block;
50% {
color: rgba(245, 245, 245)
}
}

View File

@ -2,7 +2,7 @@
import "./VisionStyles.css";
---
<div class="items-start flex vision-container">
<div class="mt-[10%] items-start flex vision-container">
<div class="bg-contain bg-no-repeat vision-wrapper">
<span id="vision"></span>
<h2
@ -15,7 +15,9 @@ import "./VisionStyles.css";
>
Make Web3 easy for <wbr /> everyone
</h3>
<h4 class="left vision-transluscent">
<h4
class="left vision-transluscent text-[calc(15px_+_(21_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] text-[length:var(--font-size-m)] font-normal not-italic max-w-[550px] leading-[35px] mt-[0.5em]"
>
Web3 offers freedom of speech, data sovereignty, and privacy. We
simplify Web3 by bridging the gap between the two webs, enabling
easy usage without censorship or backdoors.

View File

@ -0,0 +1,36 @@
---
import React from "react";
import "./Whatisweb3Styles.css";
---
<div class="centered">
<div class="Whatisweb3-container">
<div class="Whatisweb3-wrapper">
<div class="img-left"></div>
<div class="w3-container">
<span id="whatisweb3"></span>
<h2
class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
>
what is the web?
</h2>
<h3
class="text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
>
Why Web3 matters
</h3>
<h4
class="w3-transluscent text-[calc(15px_+_(21_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] text-[length:var(--font-size-m)] font-normal not-italic max-w-[550px] leading-[35px] mt-[0.5em]"
>
Web3 gives people control over their data, privacy, and
ownership. Lume's affordable Web3 tech aims to speed up the
transition from Web2 to Web3, which matters for privacy and
security.
</h4>
<div class="w3-btn-container">
<a class="w3-btn" href="#">Learn More</a>
</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,122 @@
.Whatisweb3-container {
align-self: flex-start;
position: relative;
width: 100%;
justify-content: center;
padding-block: 5vh;
/* padding-top: 15vh; */
}
.w3-container {
z-index: 999 !important;
width: 100%;
padding-left: 53vw;
transition: 0.5s;
}
.Whatisweb3-wrapper {
align-items: flex-start;
background-image: url(../../../assets/tilted-rectangle.webp);
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
width: 80%;
padding-block: 10em;
justify-content: center;
align-items: center;
overflow: hidden;
display: flex;
padding-left: calc(8px + 1.5625vw);
}
.img-left {
background-image: url(../../../assets/img-left.webp);
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
height: 817px;
left: 11%;
position: absolute;
display: flex;
width: 637px;
z-index: 998 !important;
}
.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 {
background-color: #020e1076;
border-radius: 15px;
transition: 0.5s;
max-width: 71.5%;
}
@media screen and (max-width: 1050px) {
.w3-container {
z-index: 999 !important;
width: 100%;
padding-inline: 12%;
z-index: 999 !important;
}
.Whatisweb3-wrapper {
width: 100%;
}
.img-left {
left: 15%;
transition: 0.5s;
}
.w3-transluscent {
max-width: 100%;
}
}
@media screen and (min-width: 2200px) {
.w3-container {
padding-inline: 96vw;
width: 100%;
justify-content: center;
display: grid;
}
.img-left {
left: 5.5%;
}
.w3-transluscent {
max-width: 30%;
}
}

View File

@ -2,6 +2,7 @@
import Navbar from "../components/Navbar/Navbar.jsx";
import Header from "../components/P1/Header/Header.astro";
import Vision from "../components/P1/Vision/Vision.astro";
import Whatisweb3 from "../components/P1/Whatisweb3/Whatisweb3.astro";
import "../index.css";
---
@ -25,5 +26,6 @@ import "../index.css";
<Navbar client:load />
<Header />
<Vision />
<Whatisweb3 />
</body>
</html>

View File

@ -1,28 +1,5 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {
animation: {
cursor: 'cursor .6s linear infinite alternate',
type: 'type 1.8s ease-out .8s 1 normal both',
'type-reverse': 'type 1.8s ease-out 0s infinite alternate-reverse both',
},
keyframes: {
type: {
'0%': { width: '0ch' },
'5%, 10%': { width: '1ch' },
'15%, 20%': { width: '2ch' },
'25%, 30%': { width: '3ch' },
'35%, 40%': { width: '4ch' },
'45%, 50%': { width: '5ch' },
'55%, 60%': { width: '6ch' },
'65%, 70%': { width: '7ch' },
'75%, 80%': { width: '8ch' },
'85%, 90%': { width: '9ch' },
'95%': { width: '10ch' },
},
},
},
},
}
theme: { }
}