From 8ee8671ead4445b6f3e9cc1133959527848c2ac8 Mon Sep 17 00:00:00 2001 From: roryjshelton <76418221+roryjshelton@users.noreply.github.com> Date: Thu, 27 Apr 2023 23:17:06 -0700 Subject: [PATCH] add components --- package.json | 2 +- src/components/Navbar/Navbar.jsx | 24 +-- src/components/Navbar/NavbarStyles.css | 28 ++-- src/components/P1/Header/Header.astro | 2 +- src/components/P1/Header/HeaderStyles.css | 142 ++++-------------- src/components/P1/Vision/Vision.astro | 6 +- src/components/P1/Whatisweb3/Whatisweb3.astro | 36 +++++ .../P1/Whatisweb3/Whatisweb3Styles.css | 122 +++++++++++++++ src/pages/index.astro | 2 + tailwind.config.cjs | 27 +--- 10 files changed, 222 insertions(+), 169 deletions(-) create mode 100644 src/components/P1/Whatisweb3/Whatisweb3.astro create mode 100644 src/components/P1/Whatisweb3/Whatisweb3Styles.css diff --git a/package.json b/package.json index 30b7bc1..42fcfdf 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index e7a133c..d4c28e9 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -8,33 +8,33 @@ function Navbar() { const toggleNav = () => setNav(!nav) return ( -
-
+
+ -
    + -
    - +
    +
    - ) diff --git a/src/components/Navbar/NavbarStyles.css b/src/components/Navbar/NavbarStyles.css index 86bad2b..f43be54 100644 --- a/src/components/Navbar/NavbarStyles.css +++ b/src/components/Navbar/NavbarStyles.css @@ -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 { diff --git a/src/components/P1/Header/Header.astro b/src/components/P1/Header/Header.astro index 451437c..2ebaa55 100644 --- a/src/components/P1/Header/Header.astro +++ b/src/components/P1/Header/Header.astro @@ -3,7 +3,7 @@ import "./HeaderStyles.css"; import HeaderContent from "./HeaderContent.jsx"; --- -
    +
    diff --git a/src/components/P1/Header/HeaderStyles.css b/src/components/P1/Header/HeaderStyles.css index 01f9a23..f27cf17 100644 --- a/src/components/P1/Header/HeaderStyles.css +++ b/src/components/P1/Header/HeaderStyles.css @@ -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) } } \ No newline at end of file diff --git a/src/components/P1/Vision/Vision.astro b/src/components/P1/Vision/Vision.astro index 33ac52f..9ae6a23 100644 --- a/src/components/P1/Vision/Vision.astro +++ b/src/components/P1/Vision/Vision.astro @@ -2,7 +2,7 @@ import "./VisionStyles.css"; --- -
    +

    Make Web3 easy for everyone

    -

    +

    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. diff --git a/src/components/P1/Whatisweb3/Whatisweb3.astro b/src/components/P1/Whatisweb3/Whatisweb3.astro new file mode 100644 index 0000000..c45f31a --- /dev/null +++ b/src/components/P1/Whatisweb3/Whatisweb3.astro @@ -0,0 +1,36 @@ +--- +import React from "react"; +import "./Whatisweb3Styles.css"; +--- + +
    +
    +
    +
    +
    + +

    + what is the web? +

    +

    + Why Web3 matters +

    +

    + 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. +

    +
    + Learn More +
    +
    +
    +
    +
    diff --git a/src/components/P1/Whatisweb3/Whatisweb3Styles.css b/src/components/P1/Whatisweb3/Whatisweb3Styles.css new file mode 100644 index 0000000..736ec8b --- /dev/null +++ b/src/components/P1/Whatisweb3/Whatisweb3Styles.css @@ -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%; + } +} \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index 67a8e71..6281b24 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -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";
    + diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 4381645..8555a46 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -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' }, - }, - }, - }, - }, - } \ No newline at end of file + theme: { } +} \ No newline at end of file