header css -> tw

This commit is contained in:
roryjshelton 2023-04-27 17:05:09 -07:00
parent 4457f9357e
commit 8351654c8c
4 changed files with 11 additions and 21 deletions

View File

@ -1,13 +1,13 @@
--- ---
import React from "react";
import "./HeaderStyles.css"; import "./HeaderStyles.css";
import HeaderContent from "./HeaderContent.astro"; import HeaderContent from "./HeaderContent.astro";
import image from "@astrojs/image";
--- ---
<div class="header-container"> <div class="items-start flex header-container">
<div class="header"> <div
<h1 class="header-alignment"> class="text-[color:var(--white)] font-normal not-italic tracking-[-6px] leading-[calc(75px_+_(110_-_75)_*_((100vw_-_300px)_/_(1600_-_300)))] text-center w-full"
>
<h1 class="flex flex-col justify-center">
<HeaderContent /> <HeaderContent />
</h1> </h1>
</div> </div>

View File

@ -1,19 +1,10 @@
.header-container { .header-container {
align-items: flex-start;
display: flex;
margin-block: calc(77px + 1.5625vw); margin-block: calc(77px + 1.5625vw);
z-index: -1 !important; z-index: -1 !important;
} }
.header { .header {
color: var(--white);
font-family: var(--font-family-jetbrains_mono); 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 { .header-alt {
@ -21,12 +12,6 @@
font-family: var(--font-family-jetbrains_mono); font-family: var(--font-family-jetbrains_mono);
} }
.header-alignment {
display: flex;
flex-direction: column;
justify-content: center;
}
.header-underscore { .header-underscore {
animation: blink 1.3s step-end infinite; animation: blink 1.3s step-end infinite;
} }

View File

@ -5,7 +5,11 @@ import "./VisionStyles.css";
<div class="vision-container"> <div class="vision-container">
<div class="vision-wrapper"> <div class="vision-wrapper">
<span id="vision"></span> <span id="vision"></span>
<h2>OUR VISION</h2> <h2
class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
>
OUR VISION
</h2>
<h3>Make Web3 easy for <wbr /> everyone</h3> <h3>Make Web3 easy for <wbr /> everyone</h3>
<h4 class="left vision-transluscent"> <h4 class="left vision-transluscent">
Web3 offers freedom of speech, data sovereignty, and privacy. We Web3 offers freedom of speech, data sovereignty, and privacy. We

View File

@ -19,6 +19,7 @@ import "../index.css";
content="Lume Web - Web3 for the masses | Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge, and Firefox." content="Lume Web - Web3 for the masses | Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge, and Firefox."
/> />
<meta name="keywords" content="Web3 Extension, Lume Web, Web3" /> <meta name="keywords" content="Web3 Extension, Lume Web, Web3" />
<link rel="stylesheet" href="./src/index.css" />
</head> </head>
<body> <body>
<Navbar /> <Navbar />