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

more tailwind

This commit is contained in:
roryjshelton 2023-04-28 23:34:08 -07:00
parent 236a9de21a
commit d09532dbb7
16 changed files with 1355 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

1
.stylelintrc.json Normal file
View File

@ -0,0 +1 @@
{ "extends": ["stylelint-config-standard"] }

1308
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -22,5 +22,9 @@
"react-icons": "^4.8.0",
"tailwindcss": "^3.3.2",
"typewriter-effect": "^2.19.0"
},
"devDependencies": {
"stylelint": "^15.6.0",
"stylelint-config-standard": "^33.0.0"
}
}

3
robots.txt Normal file
View File

@ -0,0 +1,3 @@
User-Agent: *
Allow: /

BIN
src/.DS_Store vendored Normal file
View File

Binary file not shown.

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

@ -8,8 +8,8 @@ function Navbar() {
const toggleNav = () => setNav(!nav)
return (
<div class='navbar'>
<div class="logo">
<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="bg-[url(../../src/assets/lume-logo.webp)] bg-no-repeat bg-contain h-[55px] min-w-[210px] z-[998] ml-[5px]">
</div>
<ul class='transition-opacity duration-150 ease-out md:max-lg:opacity-0 lg:opacity-100 nav-menu'>
<li><a href="#">Home</a></li>

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

@ -1,33 +1,3 @@
.logo {
background-image: url(../../assets/lume-logo.webp);
background-repeat: no-repeat;
background-size: contain;
margin-left: 5px;
height: 55px;
min-width: 210px;
z-index: 998 !important;
}
.navbar-container {
white-space: nowrap;
display: inline-block;
}
.navbar {
width: 100%;
height: 80px;
display: flex;
padding-top: 75px;
padding-left: 7%;
padding-right: 7%;
padding-bottom: 3%;
justify-content: space-between;
align-items: center;
white-space: nowrap;
gap: 36px;
background-color: #031418;
}
.nav-menu {
display: flex;
align-items: flex-end;
@ -40,7 +10,7 @@ li {
.download-btn-container {
color: var(--black);
font-family: var(--font-family-jetbrains_mono);
font-family: var(--font-family-jetbrains-mono);
font-size: var(--font-size-s);
font-weight: 400;
font-style: normal;
@ -57,7 +27,7 @@ li {
.header-alt {
color: var(--aquamarine);
font-family: var(--font-family-jetbrains_mono);
font-family: var(--font-family-jetbrains-mono);
}
.download-btn-container a {
@ -85,7 +55,7 @@ li {
display: none;
}
@media screen and (max-width: 940px) {
@media screen and (width <=940px) {
.nav-menu {
display: none;
}
@ -97,12 +67,6 @@ li {
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 {
@ -118,10 +82,8 @@ li {
align-items: flex-end;
background-color: #031418;
border-radius: 10px;
outline-style: solid;
outline-width: 0.1px;
outline-color: #07363fa7;
box-shadow: 0px 4px 4px #00000096;
outline: solid #07363fa7 0.1px;
box-shadow: 0.1px 4px 4px #00000096;
transition: 0.55s;
z-index: 998 !important;
}

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

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

3
src/components/P1/Header/HeaderContent.jsx
View File

@ -1,4 +1,3 @@
import React, {useState, useEffect} from "react";
import Typewriter from "typewriter-effect";
const HeaderContent = () => {
@ -20,7 +19,7 @@ const HeaderContent = () => {
typewriter.changeDelay(50).typeString(`${
randomString.substring(0, lastIndex)
}` + ' ').start();
typewriter.typeString(`<span class="header-alt">${
typewriter.typeString(`<span class="text-[color:var(--aquamarine)]">${
lastWord(randomString)
}</span>`)
}

45
src/components/P1/Header/HeaderStyles.css
View File

@ -1,45 +0,0 @@
.header-container {
align-items: flex-start;
display: flex;
margin-block: calc(77px + 1.5625vw);
/* padding-bottom: calc(77px + 1.5625vw); */
z-index: -1 !important;
}
.header {
color: var(--white);
font-family: var(--font-family-jetbrains_mono);
font-weight: 400;
font-style: normal;
letter-spacing: -6px;
line-height: calc(75px + (110 - 75) * ((100vw - 300px) / (1600 - 300)));
text-align: center;
width: 100%;
}
.header-alt {
color: var(--aquamarine);
font-family: var(--font-family-jetbrains_mono);
}
.header-alignment {
display: flex;
flex-direction: column;
justify-content: center;
}
.header-underscore {
animation: blink 1.3s step-end infinite;
}
@keyframes blink {
from,
to {
color: transparent
}
50% {
color: rgba(245, 245, 245)
}
}

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

@ -2,8 +2,13 @@
import "./VisionStyles.css";
---
<div class="mt-[10%] items-start flex vision-container">
<div class="bg-contain bg-no-repeat vision-wrapper">
<div
class="mt-[10%] items-start flex pb-[5vh]"
style="padding-bottom: 5vh; vertical-align: center; padding-inline: 15%;"
>
<div
class="bg-[url(../../../src/assets/video-placeholder.webp)] bg-[100%_50%] bg-no-repeat bg-contain transition-[0.5s]"
>
<span id="vision"></span>
<h2
class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
@ -16,14 +21,14 @@ import "./VisionStyles.css";
Make Web3 easy for <wbr /> everyone
</h3>
<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]"
class="left vt transition-[0.5s] rounded-[15px] 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.
</h4>
<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 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]"
>
<a
class="tracking-[0] min-h-[26px] text-center w-[234px] block"

31
src/components/P1/Vision/VisionStyles.css
View File

@ -1,32 +1,9 @@
.vision-container {
margin-block: 5vh;
padding-bottom: 5vh;
vertical-align: center;
padding-inline: 15%;
.vt {
background-color: rgba(0 0 0 0%);
}
.vision-wrapper {
background-image: url(../../../assets/video-placeholder.webp);
background-position: 100% 50%;
transition: 0.5s;
}
.vision-btn {
letter-spacing: 0;
min-height: 26px;
text-align: center;
width: 234px;
display: block;
}
.vision-transluscent {
background-color: none;
border-radius: 15px;
transition: 0.5s;
}
@media screen and (max-width: 1200px) {
.vision-transluscent {
@media screen and (width <=1200px) {
.vt {
background-color: #031418a7;
border-radius: 15px;
transition: 0.5s;

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

@ -3,9 +3,15 @@ import "./Whatisweb3Styles.css";
---
<div class="centered">
<div class="Whatisweb3-container">
<div class="Whatisweb3-wrapper">
<div class="img-left"></div>
<div
class="self-start relative w-full justify-center;"
style="padding-block: 5vh;"
>
<div class="whatisweb3-wrapper">
<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%]"
>
</div>
<div class="w3-container">
<span id="whatisweb3"></span>
<h2

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

@ -1,12 +1,3 @@
.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%;
@ -14,9 +5,8 @@
transition: 0.5s;
}
.Whatisweb3-wrapper {
align-items: flex-start;
background-image: url(../../../assets/tilted-rectangle.webp);
.whatisweb3-wrapper {
background-image: url("../../../assets/tilted-rectangle.webp");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
@ -29,19 +19,6 @@
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;
@ -82,15 +59,14 @@
max-width: 71.5%;
}
@media screen and (max-width: 1050px) {
@media screen and (width <=1050px) {
.w3-container {
z-index: 999 !important;
width: 100%;
padding-inline: 12%;
z-index: 999 !important;
}
.Whatisweb3-wrapper {
.whatisweb3-wrapper {
width: 100%;
}
@ -104,7 +80,7 @@
}
}
@media screen and (min-width: 2200px) {
@media screen and (width >=2200px) {
.w3-container {
padding-inline: 96vw;
width: 100%;

6
src/index.css
View File

@ -1,8 +1,8 @@
@import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400");
:root {
--primary-dark: #000000;
--primary-light: #ffffff;
--primary-dark: #000;
--primary-light: #fff;
}
:root {
@ -31,7 +31,7 @@
--font-family-ibm_plex_sans_devanagari: "IBM Plex Sans Devanagari";
--font-family-jaldi: "Jaldi";
--font-family-jetbrains_mono: "JetBrains Mono";
--font-family-jetbrains-mono: "JetBrains Mono";
}
* {