header css -> tw
This commit is contained in:
parent
4457f9357e
commit
8351654c8c
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
Loading…
Reference in New Issue