refactor: revise and restructure css/layout/header/footer/meme/etc (wip)
This commit is contained in:
parent
c6d06537ae
commit
966fc14ae4
|
|
@ -1 +1,2 @@
|
|||
node_modules
|
||||
node_modules
|
||||
dist
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
import tailwind from '@astrojs/tailwind';
|
||||
import react from '@astrojs/react';
|
||||
import image from "@astrojs/image";
|
||||
import image from '@astrojs/image';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [tailwind(), image(), react()]
|
||||
});
|
||||
integrations: [tailwind({ config: { applyBaseStyles: false } }), image(), react()],
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"@types/react-dom": "^18.2.1",
|
||||
"astro": "^2.3.2",
|
||||
"astro-icon": "^0.8.0",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"dynamic-react-grid": "^0.2.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
"@types/react-dom": "^18.2.1",
|
||||
"astro": "^2.3.2",
|
||||
"astro-icon": "^0.8.0",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"dynamic-react-grid": "^0.2.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
"tailwindcss/nesting": {},
|
||||
"tailwindcss": {},
|
||||
},
|
||||
};
|
||||
|
|
@ -1,3 +1,2 @@
|
|||
User-Agent: *
|
||||
Allow: /
|
||||
|
||||
Allow: /
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 254 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
import "./FooterStyles.css";
|
||||
import logo from "../../../src/assets/lume-logo.webp";
|
||||
---
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<div class="footer-logo">
|
||||
<a href="/">
|
||||
<img src={logo.src} alt="Lume" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="footer-contact">
|
||||
<a href="mailto:contact@lumeweb.com">
|
||||
<span></span> contact@lumeweb.com
|
||||
</a>
|
||||
</div>
|
||||
<div class="footer-phrase">Freedom, privacy, ownership.</div>
|
||||
</div>
|
||||
<div>
|
||||
<h5>General</h5>
|
||||
<ul>
|
||||
<li>Home</li>
|
||||
<li>Get Started</li>
|
||||
<li>Documentation</li>
|
||||
<li>Projects</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Community</h5>
|
||||
<ul>
|
||||
<li>GitHub</li>
|
||||
<li>Discord</li>
|
||||
<li>Twitter</li>
|
||||
<li>Facebook</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Ecosystem</h5>
|
||||
<ul>
|
||||
<li>Browser</li>
|
||||
<li>Extension</li>
|
||||
<li>Universal Storage</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Other</h5>
|
||||
<ul>
|
||||
<li>Browser</li>
|
||||
<li>Extension</li>
|
||||
<li>Universal Storage</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Support Us</h5>
|
||||
<ul>
|
||||
<li>Donate</li>
|
||||
<li>Download App</li>
|
||||
<li>Partnerships</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
footer {
|
||||
display: flex;
|
||||
gap: 2.5rem;
|
||||
padding: 4% 12%;
|
||||
background-color: #020E10;
|
||||
|
||||
> div {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
|
||||
&:first-child {
|
||||
flex-grow: 2 !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
@apply text-2xl;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
@apply text-xl leading-8;
|
||||
font-family: var(--font-family-jaldi);
|
||||
color: var(--cloud);
|
||||
list-style-type: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 126px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
margin: auto 0;
|
||||
color: var(--cloud);
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
background-image: url('../../assets/email-icon.webp');
|
||||
background-size: cover;
|
||||
margin-right: 0.5rem;
|
||||
width: 1.0625rem;
|
||||
height: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-phrase {
|
||||
@apply text-xl;
|
||||
margin: auto 0 0;
|
||||
color: var(--aquamarine);
|
||||
}
|
||||
|
||||
@media screen and (width <= 900px) {
|
||||
footer {
|
||||
flex-direction: column;
|
||||
padding: 12% 8% 12%;
|
||||
text-align: center;
|
||||
|
||||
> div:first-child {;
|
||||
margin-top: 1.5rem;
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
margin: 4% 0;
|
||||
|
||||
a {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
---
|
||||
import "./MemeStyles.css";
|
||||
|
||||
import meme1 from '../../../assets/meme-1.png';
|
||||
import meme2 from '../../../assets/meme-2.png';
|
||||
import meme3 from '../../../assets/meme-3.png';
|
||||
import meme4 from '../../../assets/meme-4.png';
|
||||
---
|
||||
|
||||
<div class="meme-wrapper">
|
||||
<div class="meme-text">
|
||||
<h2>TITLE</h2>
|
||||
<h3>Building a new world for your data</h3>
|
||||
<p>
|
||||
Right now, Lume has only one full-time developer and limited
|
||||
helper staff! We need help from developers, fundraisers,
|
||||
funders, and contributors to bring the new internet to the
|
||||
masses.
|
||||
</p>
|
||||
</div>
|
||||
<div class="meme-grid">
|
||||
<div>
|
||||
<img src={meme1.src} alt="Web 1" />
|
||||
Web1
|
||||
</div>
|
||||
<div>
|
||||
<img src={meme2.src} />
|
||||
Web2
|
||||
</div>
|
||||
<div>
|
||||
<img src={meme3.src} />
|
||||
Crypto & Defi
|
||||
</div>
|
||||
<div>
|
||||
<img src={meme4.src} />
|
||||
Web3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
.meme-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 8% 12%;
|
||||
background-image: url("../../../assets/tilted-rectangle.webp");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.meme-text {
|
||||
width: 60%;
|
||||
margin-right: 5%;
|
||||
flex-shrink: 0;
|
||||
|
||||
p {
|
||||
margin-top: 1rem;
|
||||
font-size: calc(15px + (21 - 15) * ((100vw - 300px) / (1600 - 300)));
|
||||
color: var(--cloud);
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.meme-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
gap: 1rem;
|
||||
max-width: 31.25rem;
|
||||
|
||||
img {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
> div {
|
||||
color: var(--aquamarine);
|
||||
font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300)) / 2.5);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <=900px) {
|
||||
.meme-wrapper {
|
||||
flex-direction: column;
|
||||
padding: 20% 8%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.meme-text {
|
||||
width: auto;
|
||||
margin: 0 0 10%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
import "./VisionStyles.css";
|
||||
---
|
||||
|
||||
<div
|
||||
class="mt-[166px] items-start flex pb-[5vh] bg-[url(../../../src/assets/video-placeholder.webp)] pb-[10%] bg-[80%_65%] bg-no-repeat bg-contain transition-[0.5s]"
|
||||
style="padding-bottom: 5vh; vertical-align: center; padding-inline: 11.9%;"
|
||||
>
|
||||
<div>
|
||||
<span id="vision"></span>
|
||||
<h2
|
||||
class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
|
||||
>
|
||||
OUR VISION
|
||||
</h2>
|
||||
<h3
|
||||
class="text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
|
||||
>
|
||||
Make Web3 easy for <br /> everyone
|
||||
</h3>
|
||||
<h4
|
||||
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>
|
||||
<a class="btn-main mt-8" href="#">Download Extension</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
.vt {
|
||||
background-color: rgba(0 0 0 0%);
|
||||
}
|
||||
|
||||
@media screen and (width <=1200px) {
|
||||
.vt {
|
||||
background-color: #031418a7;
|
||||
border-radius: 15px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +1,54 @@
|
|||
import React, {useState} from 'react'
|
||||
import './NavbarStyles.css'
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import './NavbarStyles.css';
|
||||
import logo from '../../../src/assets/lume-logo.png';
|
||||
|
||||
function Navbar() {
|
||||
const [nav, setNav] = useState(false)
|
||||
const toggleNav = () => setNav(!nav)
|
||||
function Navbar({ view }) {
|
||||
const [nav, setNav] = useState(false);
|
||||
const toggleNav = () => setNav(!nav);
|
||||
|
||||
return (
|
||||
<div class='w-full h-20 flex justify-between items-center whitespace-nowrap gap-9 bg-[#031418] pt-[75px] px-[3%]'>
|
||||
<div class="bg-[url(../../src/assets/lume-logo.webp)] bg-no-repeat bg-contain h-[55px] min-w-[210px] z-[998] ml-[1%]">
|
||||
</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>
|
||||
<li><a href="#vision">Vision</a></li>
|
||||
<li><a href="#whatisweb3">What is Web3</a></li>
|
||||
<li>Donate</li>
|
||||
<div class='text-[color:var(--black)] font-normal not-italic items-end bg-[color:var(--aquamarine)] flex h-[52px] max-w-[195px] transition-[0.5s] border px-[5.2px] py-3 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid;'>
|
||||
<a class='download-btn' href="#">Download Extension</a>
|
||||
</div>
|
||||
</ul>
|
||||
useEffect(() => {
|
||||
let resizeTimeout;
|
||||
const onResize = () => {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(() => {
|
||||
if(nav && window.innerWidth > 940) {
|
||||
setNav(false);
|
||||
}
|
||||
}, 25);
|
||||
};
|
||||
|
||||
<div class="transition-opacity duration-150 ease-out nav-menu hamburger" onClick={toggleNav}>
|
||||
☰
|
||||
</div>
|
||||
<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}><a href="#donate">Donate</a></li>
|
||||
<div class='text-[color:var(--black)] text-[length:var(--font-size-s)] font-normal not-italic items-end bg-[color:var(--aquamarine)] flex h-[52px] min-w-[245px] transition-[0.5s] border px-[5.2px] py-3 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid transition-[0.5s] ml-[-0.8em] scale-[0.7] hover:scale-75'>
|
||||
<a class="download-btn pl-2.5" href="#">Download Extension</a>
|
||||
</div>
|
||||
</ul>
|
||||
<div class="mobile-menu-btn"></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
window.addEventListener('resize', onResize);
|
||||
|
||||
return () => window.removeEventListener('resize', onResize);
|
||||
}, [nav]);
|
||||
|
||||
return (
|
||||
<nav>
|
||||
<div className="logo">
|
||||
<a href="/">
|
||||
<img src={logo.src} alt="Lume" />
|
||||
</a>
|
||||
</div>
|
||||
<menu className={nav ? 'active' : undefined}>
|
||||
<li>
|
||||
<a href="/" className={view === 'home' ? 'underline' : undefined} aria-current={view === 'home' ? 'page' : undefined}>Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/vision" className={view === 'vision' ? 'underline' : undefined} aria-current={view === 'vision' ? 'page' : undefined}>Vision</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/what-is-web3" className={view === 'what-is-web3' ? 'underline' : undefined} aria-current={view === 'what-is-web3' ? 'page' : undefined}>What is Web3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/donate" className={view === 'donate' ? 'underline' : undefined} aria-current={view === 'donate' ? 'page' : undefined}>Donate</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className='btn-main download-btn' href="#">Download Extension</a>
|
||||
</li>
|
||||
</menu>
|
||||
<button className="hamburger" onClick={toggleNav}>☰</button>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
export default Navbar
|
||||
|
|
|
|||
|
|
@ -1,83 +1,73 @@
|
|||
.nav-menu {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 1em;
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 9.375rem;
|
||||
padding: 2.5rem 3%;
|
||||
background: #031418;
|
||||
font-size: 1.125rem;
|
||||
white-space: nowrap;
|
||||
|
||||
.logo {
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 13.125rem;
|
||||
height: 4.274rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 1rem;
|
||||
}
|
||||
menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header-alt {
|
||||
color: var(--aquamarine);
|
||||
font-family: var(--font-family-jetbrains-mono);
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
letter-spacing: 0;
|
||||
min-height: 26px;
|
||||
text-align: center;
|
||||
width: 234px;
|
||||
li > a {
|
||||
display: block;
|
||||
padding: 1rem 1.125rem;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
display: none;
|
||||
font-size: var(--font-size-xxl);
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
margin: 0 2.125rem;
|
||||
}
|
||||
|
||||
@media screen and (width <=940px) {
|
||||
.nav-menu {
|
||||
display: none;
|
||||
menu {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: -100vh;
|
||||
right: 3%;
|
||||
padding: 1rem;
|
||||
border: 1px solid red;
|
||||
border-radius: 0.5rem;
|
||||
transition: top 250ms;
|
||||
|
||||
&.active {
|
||||
top: 2.25rem;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: block;
|
||||
position: flex;
|
||||
max-width: fit-content;
|
||||
z-index: 999;
|
||||
font-size: var(--font-size-xl);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
margin-left: 50%;
|
||||
top: -100vh;
|
||||
right: 0;
|
||||
opacity: 100;
|
||||
position: absolute;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
background-color: #031418;
|
||||
border-radius: 10px;
|
||||
outline: solid #07363fa7 0.1px;
|
||||
box-shadow: 0.1px 4px 4px #00000096;
|
||||
transition: 0.55s;
|
||||
z-index: 998 !important;
|
||||
}
|
||||
|
||||
.active {
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
.mobile-menu li {
|
||||
padding: 1em 0.5em;
|
||||
margin: 0 1em;
|
||||
li > a {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
letter-spacing: 0;
|
||||
min-height: 26px;
|
||||
text-align: center;
|
||||
width: 234px;
|
||||
display: block;
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,144 +0,0 @@
|
|||
---
|
||||
import "./FooterStyles.css";
|
||||
---
|
||||
|
||||
<div class="footer-cards">
|
||||
<div class="h-auto bg-[#020E10];">
|
||||
<h6>
|
||||
<div class="footer-logo"></div>
|
||||
<ul>
|
||||
<span class="footer-email"></span><span
|
||||
class="text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic pr-[6vw]"
|
||||
>contact@lumeweb.com</span
|
||||
>
|
||||
<span class="footer-h2">Freedom, privacy, ownership.</span>
|
||||
<div class="footer-span"></div>
|
||||
</ul>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="h-auto bg-[#020E10];">
|
||||
<h5
|
||||
class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
|
||||
style="padding-left: 0.25em;"
|
||||
>
|
||||
General
|
||||
</h5><br /><h6>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
Home
|
||||
</li>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
Get Started
|
||||
</li>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
Documentation
|
||||
</li>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
Projects
|
||||
</li>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="h-auto bg-[#020E10];">
|
||||
<h5
|
||||
class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
|
||||
style="padding-left: 0.25em;"
|
||||
>
|
||||
Community
|
||||
</h5><br /><h6>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
GitHub
|
||||
</li>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
Discord
|
||||
</li>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
Twitter
|
||||
</li>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
facebook
|
||||
</li>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="h-auto bg-[#020E10];">
|
||||
<h5
|
||||
class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
|
||||
style="padding-left: 0.25em;"
|
||||
>
|
||||
Ecosystem
|
||||
</h5><br /><h6>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
Browser
|
||||
</li>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
Extension
|
||||
</li>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
Universal Storage
|
||||
</li>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="h-auto bg-[#020E10];">
|
||||
<h5
|
||||
class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
|
||||
style="padding-left: 0.25em;"
|
||||
>
|
||||
Other
|
||||
</h5><br /><h6>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
BrowserUniversal
|
||||
</li>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
Storage
|
||||
</li>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="h-auto bg-[#020E10];">
|
||||
<h5
|
||||
class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
|
||||
style="padding-left: 0.25em;"
|
||||
>
|
||||
Support Us
|
||||
</h5><br /><h6>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
Donate
|
||||
</li>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
Download App
|
||||
</li>
|
||||
<li
|
||||
class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
|
||||
>
|
||||
Partnerships
|
||||
</li>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
.footer-li {
|
||||
font-family: var(--font-family-jaldi);
|
||||
margin-inline: 0.5vw;
|
||||
list-style-type: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.footer-cards {
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 7% 12%;
|
||||
background-color: #020E10;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (width >=600px) {
|
||||
.footer-cards {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.footer-li {
|
||||
margin-inline: 0.7vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >=900px) {
|
||||
.footer-cards {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
.footer-li {
|
||||
margin-inline: 0.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <=600px) {
|
||||
.footer-li {
|
||||
margin-inline: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
background-image: url('../../../assets/lume-logo.webp');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
height: 8.1vh;
|
||||
min-width: 130px;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
z-index: 998 !important;
|
||||
}
|
||||
|
||||
.footer-email {
|
||||
background-image: url('../../../assets/email-icon.webp');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: left;
|
||||
margin-right: 2%;
|
||||
padding-inline: 10px;
|
||||
height: 14px;
|
||||
line-height: 5.5vh;
|
||||
}
|
||||
|
||||
.footer-h2 {
|
||||
font-size: calc(12px + (20 - 10) * ((100vw - 300px) / (1600 - 300)));
|
||||
color: var(--aquamarine);
|
||||
line-height: 1vh;
|
||||
z-index: 999;
|
||||
margin-top: 5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.footer-padding {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-size: calc(15px + (21 - 10) * ((100vw - 300px) / (1600 - 300)));
|
||||
margin-inline: -5px;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.footer-span {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
---
|
||||
import "./MemeStyles.css";
|
||||
---
|
||||
|
||||
<div class="meme-container">
|
||||
<div class="meme-wrapper">
|
||||
<div class="meme-bg">
|
||||
<span
|
||||
class="absolute leading-[18.5vh] text-[#2C9940] left-[65%] top-[10%]"
|
||||
>web1<br />web2<br />crypto & defi<br />web3</span
|
||||
>
|
||||
<div class="meme-columns meme-translucent">
|
||||
<h2
|
||||
class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
|
||||
>
|
||||
TITLE
|
||||
</h2>
|
||||
<h3
|
||||
class="left meme-bp text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
|
||||
>
|
||||
Building a new world <wbr /> for your data
|
||||
</h3>
|
||||
<h4
|
||||
class="left 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]"
|
||||
>
|
||||
Right now, Lume has only one full-time developer and limited
|
||||
helper staff! We need help from developers, fundraisers,
|
||||
funders, and contributors to bring the new internet to the
|
||||
masses.
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="img-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
.meme-container {
|
||||
align-self: flex-start;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-block: 5vh;
|
||||
padding-block: 5vh;
|
||||
}
|
||||
|
||||
.meme-bp {
|
||||
padding-right: 45%;
|
||||
}
|
||||
|
||||
.meme-wrapper {
|
||||
background-image: url("../../../assets/tilted-rectangle.webp");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
padding-block: 2.1em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
height: 80vh;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.meme-bg {
|
||||
background-image: url("../../../assets/meme.webp");
|
||||
background-position: 60% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: calc(100% + 3vh);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.meme-columns {
|
||||
display: grid;
|
||||
position: relative;
|
||||
margin-block: calc(10% + 1.5625vh);
|
||||
}
|
||||
|
||||
@media screen and (width <=1050px) {
|
||||
.meme-container {
|
||||
z-index: 999 !important;
|
||||
width: 100%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.meme-bp {
|
||||
padding-right: 0%;
|
||||
}
|
||||
|
||||
.meme-wrapper {
|
||||
width: 100%;
|
||||
padding-inline: 15%;
|
||||
padding-left: 18%;
|
||||
height: 80vh;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.meme-translucent {
|
||||
max-width: 100%;
|
||||
transition: 0.5s;
|
||||
background-color: #020e10ac;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.meme-bg {
|
||||
background-position: 50% 50%;
|
||||
z-index: 999 !important;
|
||||
}
|
||||
|
||||
.meme-columns {
|
||||
display: grid;
|
||||
position: relative;
|
||||
margin-block: calc(25% + 1.5625vh);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width >=2200px) {
|
||||
.meme-container {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
display: inline-block;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.meme-translucent {
|
||||
max-width: 30%;
|
||||
transition: 0.5s;
|
||||
background-color: none;
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes textShine {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
---
|
||||
import "./VisionStyles.css";
|
||||
---
|
||||
|
||||
<div
|
||||
class="mt-[166px] items-start flex pb-[5vh] bg-[url(../../../src/assets/video-placeholder.webp)] pb-[10%] bg-[80%_65%] bg-no-repeat bg-contain transition-[0.5s]"
|
||||
style="padding-bottom: 5vh; vertical-align: center; padding-inline: 11.9%;"
|
||||
>
|
||||
<div>
|
||||
<span id="vision"></span>
|
||||
<h2
|
||||
class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
|
||||
>
|
||||
OUR VISION
|
||||
</h2>
|
||||
<h3
|
||||
class="text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
|
||||
>
|
||||
Make Web3 easy for <br /> everyone
|
||||
</h3>
|
||||
<h4
|
||||
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 transition-[0.3s] hover:text-[white] bg-[color:var(--aquamarine)] flex h-[49px] ml-[-1.5px] max-w-[195px] text-black mt-[22px] px-[3px] py-0 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid transition-[0.5s]"
|
||||
>
|
||||
<a
|
||||
class="tracking-[0] min-h-[26px] text-center w-[234px] block"
|
||||
href="#"
|
||||
>
|
||||
Download Extension</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
.vt {
|
||||
background-color: rgba(0 0 0 0%);
|
||||
}
|
||||
|
||||
@media screen and (width <=1200px) {
|
||||
.vt {
|
||||
background-color: #031418a7;
|
||||
border-radius: 15px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
import "../styles/global.css";
|
||||
import Navbar from "../components/Navbar/Navbar.jsx";
|
||||
import Footer from "../components/Footer/Footer.astro";
|
||||
|
||||
export interface Props {
|
||||
view: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { view, title } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{title}</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
|
||||
<meta name="description" 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" />
|
||||
</head>
|
||||
<body>
|
||||
<Navbar view={view} client:load />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout view="donate" title="Donate - Lume Web">
|
||||
|
||||
</Layout>
|
||||
|
|
@ -1,45 +1,24 @@
|
|||
---
|
||||
import Navbar from "../components/Navbar/Navbar.jsx";
|
||||
import CTO from "../components/P1/CTO/CTO.astro";
|
||||
import Footer from "../components/P1/Footer/Footer.astro";
|
||||
import Grids from "../components/P1/Grid/Grid.astro";
|
||||
import Header from "../components/P1/Header/Header.astro";
|
||||
import Meme from "../components/P1/Meme/Meme.astro";
|
||||
import Message from "../components/P1/Message/Message.astro";
|
||||
import Powered from "../components/P1/Powered/Powered.astro";
|
||||
import Socials from "../components/P1/Socials/Socials.astro";
|
||||
import Vision from "../components/P1/Vision/Vision.astro";
|
||||
import Whatisweb3 from "../components/P1/Whatisweb3/Whatisweb3.astro";
|
||||
import "../index.css";
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import CTO from "../components/Home/CTO/CTO.astro";
|
||||
import Grids from "../components/Home/Grid/Grid.astro";
|
||||
import Header from "../components/Home/Header/Header.astro";
|
||||
import Meme from "../components/Home/Meme/Meme.astro";
|
||||
import Message from "../components/Home/Message/Message.astro";
|
||||
import Powered from "../components/Home/Powered/Powered.astro";
|
||||
import Socials from "../components/Home/Socials/Socials.astro";
|
||||
import Vision from "../components/Home/Vision/Vision.astro";
|
||||
import Whatisweb3 from "../components/Home/Whatisweb3/Whatisweb3.astro";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Lume Web - Web3 for the masses</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=5.0"
|
||||
/>
|
||||
<meta
|
||||
name="description"
|
||||
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" />
|
||||
<link rel="stylesheet" href="./src/index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<Navbar client:load />
|
||||
<Header />
|
||||
<Vision />
|
||||
<Whatisweb3 />
|
||||
<Powered />
|
||||
<Meme />
|
||||
<Grids />
|
||||
<Socials />
|
||||
<CTO />
|
||||
<Message />
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
<Layout view="home" title="Lume Web - Web3 for the masses">
|
||||
<Header />
|
||||
<Vision />
|
||||
<Whatisweb3 />
|
||||
<Powered />
|
||||
<Meme />
|
||||
<Grids />
|
||||
<Socials />
|
||||
<CTO />
|
||||
<Message />
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout view="vision" title="Vision - Lume Web">
|
||||
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout view="what-is-web3" title="What is Web3? - Lume Web">
|
||||
|
||||
</Layout>
|
||||
|
|
@ -1,55 +1,51 @@
|
|||
@import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400");
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--primary-dark: rgba(0 0 0 100%);
|
||||
--primary-light: rgba(255 255 255 100%);
|
||||
--black:
|
||||
rgba(0 0 0);
|
||||
--blue-charcoal:
|
||||
rgba(1 14 16);
|
||||
--blue-charcoal-2:
|
||||
rgba(3 21 24);
|
||||
--aquamarine:
|
||||
rgba(122 252 187);
|
||||
--cloud:
|
||||
rgba(199 199 199);
|
||||
--alto:
|
||||
rgba(217 217 217);
|
||||
--white:
|
||||
rgba(255 255 255);
|
||||
--font-size-s: 20px;
|
||||
--font-size-m: 21px;
|
||||
--font-size-l: 25px;
|
||||
--font-size-xl: 30px;
|
||||
--font-size-xxl: 32px;
|
||||
--font-size-xxxl: 45px;
|
||||
--font-size-xxxxl: 100px;
|
||||
--black: rgba(0 0 0);
|
||||
--blue-charcoal: rgba(1 14 16);
|
||||
--blue-charcoal-2: rgba(3 21 24);
|
||||
--aquamarine: rgba(122 252 187);
|
||||
--cloud: rgba(199 199 199);
|
||||
--alto: rgba(217 217 217);
|
||||
--white: rgba(255 255 255);
|
||||
--font-size-s: 10.25rem; /* 20px */
|
||||
--font-size-m: 1.3125rem; /* 21px */
|
||||
--font-size-l: 1.5625rem; /* 25px */
|
||||
--font-size-xl: 1.875rem; /* 30px */
|
||||
--font-size-xxl: 2rem; /* 32px */
|
||||
--font-size-xxxl: 2.8125rem; /* 45px */
|
||||
--font-size-xxxxl: 6.25rem; /* 100px */
|
||||
--font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari";
|
||||
--font-family-jaldi: "Jaldi";
|
||||
--font-family-jetbrains-mono: "JetBrains Mono";
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: "JetBrains Mono", sans-serif;
|
||||
background-color: rgb(3 20 24);
|
||||
color: white;
|
||||
}
|
||||
|
||||
main {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.body-block {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
@ -96,7 +92,6 @@ h2 {
|
|||
|
||||
h3 {
|
||||
font-size: calc(30px + (45 - 30) * ((100vw - 300px) / (1600 - 300)));
|
||||
min-width: 75vw;
|
||||
margin-top: 0.5em;
|
||||
z-index: 999;
|
||||
}
|
||||
|
|
@ -131,17 +126,28 @@ h6 {
|
|||
max-width: 300;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1240px;
|
||||
margin: auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@media screen and (width <=1050px) {
|
||||
.btn-main {
|
||||
display: inline-block;
|
||||
color: var(--black);
|
||||
background: var(--aquamarine);
|
||||
border: 1px solid var(--aquamarine);
|
||||
padding: 0.625rem 1rem;
|
||||
border-radius: 0.3125rem;
|
||||
transition: color 200ms, background 200ms;
|
||||
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 1050px) {
|
||||
.left {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
|
@ -171,4 +177,4 @@ ul {
|
|||
font-style: normal;
|
||||
max-width: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
theme: { }
|
||||
}
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
theme: { }
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue