feat: sass support, mixins for fluid design, refactoring, work on components
This commit is contained in:
parent
966fc14ae4
commit
97012911aa
File diff suppressed because it is too large
Load Diff
|
|
@ -21,6 +21,7 @@
|
|||
"dynamic-react-grid": "^0.2.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"sass": "^1.62.1",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"typewriter-effect": "^2.19.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
"tailwindcss/nesting": {},
|
||||
"tailwindcss": {},
|
||||
},
|
||||
plugins: [
|
||||
require('tailwindcss/nesting'),
|
||||
require('tailwindcss'),
|
||||
require('autoprefixer')
|
||||
]
|
||||
};
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 843 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 787 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import "./FooterStyles.css";
|
||||
import logo from "../../../src/assets/lume-logo.webp";
|
||||
import "./Footer.scss";
|
||||
import logo from "../../../src/assets/lume-logo.png";
|
||||
---
|
||||
|
||||
<footer>
|
||||
|
|
@ -20,43 +20,77 @@ import logo from "../../../src/assets/lume-logo.webp";
|
|||
<div>
|
||||
<h5>General</h5>
|
||||
<ul>
|
||||
<li>Home</li>
|
||||
<li>Get Started</li>
|
||||
<li>Documentation</li>
|
||||
<li>Projects</li>
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Get Started</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Documentation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Projects</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Community</h5>
|
||||
<ul>
|
||||
<li>GitHub</li>
|
||||
<li>Discord</li>
|
||||
<li>Twitter</li>
|
||||
<li>Facebook</li>
|
||||
<li>
|
||||
<a href="#">GitHub</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Discord</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Twitter</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Facebook</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Ecosystem</h5>
|
||||
<ul>
|
||||
<li>Browser</li>
|
||||
<li>Extension</li>
|
||||
<li>Universal Storage</li>
|
||||
<li>
|
||||
<a href="#">Browser</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Extension</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Universal Storage</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Other</h5>
|
||||
<ul>
|
||||
<li>Browser</li>
|
||||
<li>Extension</li>
|
||||
<li>Universal Storage</li>
|
||||
<li>
|
||||
<a href="#">Browser</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Extension</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Universal Storage</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Support Us</h5>
|
||||
<ul>
|
||||
<li>Donate</li>
|
||||
<li>Download App</li>
|
||||
<li>Partnerships</li>
|
||||
<li>
|
||||
<a href="#">Donate</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Download App</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Partnerships</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,132 @@
|
|||
@import "../../styles/mixins.scss";
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
gap: 2%;
|
||||
padding-top: 3.16%;
|
||||
padding-bottom: 4.61%;
|
||||
@include fluid-padding-lr;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
background: var(--blue-charcoal);
|
||||
|
||||
> div {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
|
||||
&:first-child {
|
||||
flex-grow: 1.5 !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
@include fluid-width(8.4375rem);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include fluid-font-size(1.875rem);
|
||||
line-height: 100%;
|
||||
white-space: nowrap;
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
li {
|
||||
font-family: var(--font-family-jaldi);
|
||||
line-height: 138%;
|
||||
color: var(--cloud);
|
||||
list-style-type: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
margin: auto 0;
|
||||
font-family: var(--font-family-jaldi);
|
||||
color: var(--cloud);
|
||||
|
||||
a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
background-image: url('../../assets/email-icon.webp');
|
||||
background-size: cover;
|
||||
margin-right: 0.375em;
|
||||
@include fluid-width(1.0625rem);
|
||||
@include fluid-height(0.875rem);
|
||||
}
|
||||
}
|
||||
|
||||
.footer-phrase {
|
||||
margin: auto 0 0;
|
||||
color: var(--aquamarine);
|
||||
font-weight: bold;
|
||||
line-height: 133%;
|
||||
}
|
||||
|
||||
@media screen and (width >= 48rem) and (width < 64rem) {
|
||||
footer {
|
||||
flex-wrap: wrap;
|
||||
|
||||
> div:first-child {
|
||||
order: 1;
|
||||
flex: 0 0 100%;
|
||||
margin-top: 3%;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-phrase {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width < 48rem) {
|
||||
footer {
|
||||
flex-direction: column;
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 5rem;
|
||||
text-align: center;
|
||||
font-size: 1.3125rem;
|
||||
|
||||
> div {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
> div:first-child {
|
||||
margin-top: 5rem;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 8.4375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
margin: 1.25rem 0;
|
||||
|
||||
a {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,10 @@
|
|||
---
|
||||
import "./Header.scss";
|
||||
import HeaderContent from "./HeaderContent.jsx";
|
||||
---
|
||||
|
||||
<div class="mt-[145.5px] 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"
|
||||
>
|
||||
<h1
|
||||
class="flex flex-col justify-center text-[calc(26px_+_(82_-_26)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin"
|
||||
>
|
||||
<HeaderContent client:load />
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<section id="home-header">
|
||||
<h1 class="flex flex-col justify-center">
|
||||
<HeaderContent client:load />
|
||||
</h1>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
|
||||
#home-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 7.5%;
|
||||
|
||||
h1 {
|
||||
height: 1.1em;
|
||||
margin-top: 1.1em;
|
||||
@include fluid-font-size-s(6.25rem);
|
||||
line-height: 110%;
|
||||
letter-spacing: -0.06em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,22 +10,18 @@ const HeaderContent = () => {
|
|||
return n[n.length - 1];
|
||||
}
|
||||
var lastIndex = randomString.lastIndexOf(" ");
|
||||
return <div>
|
||||
<Typewriter options={
|
||||
{cursor: `<span class="text-[color:var(--aquamarine)]">${
|
||||
'_'
|
||||
}</span>`}
|
||||
return (
|
||||
<Typewriter options={{ cursor: `<span class="text-[color:var(--aquamarine)]">_</span>` }} onInit={
|
||||
(typewriter) => {
|
||||
typewriter.changeDelay(50).typeString(`${
|
||||
randomString.substring(0, lastIndex)
|
||||
}` + ' ').start();
|
||||
typewriter.typeString(`<span class="text-[color:var(--aquamarine)]">${
|
||||
lastWord(randomString)
|
||||
}</span>`)
|
||||
}
|
||||
onInit={
|
||||
(typewriter) => {
|
||||
typewriter.changeDelay(50).typeString(`${
|
||||
randomString.substring(0, lastIndex)
|
||||
}` + ' ').start();
|
||||
typewriter.typeString(`<span class="text-[color:var(--aquamarine)]">${
|
||||
lastWord(randomString)
|
||||
}</span>`)
|
||||
}
|
||||
}/></div>;
|
||||
}/>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderContent;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import "./MemeStyles.css";
|
||||
import "./Meme.scss";
|
||||
|
||||
import meme1 from '../../../assets/meme-1.png';
|
||||
import meme2 from '../../../assets/meme-2.png';
|
||||
|
|
@ -7,7 +7,7 @@ import meme3 from '../../../assets/meme-3.png';
|
|||
import meme4 from '../../../assets/meme-4.png';
|
||||
---
|
||||
|
||||
<div class="meme-wrapper">
|
||||
<div id="home-meme">
|
||||
<div class="meme-text">
|
||||
<h2>TITLE</h2>
|
||||
<h3>Building a new world for your data</h3>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.meme-wrapper {
|
||||
#home-meme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
}
|
||||
|
||||
@media screen and (width <=900px) {
|
||||
.meme-wrapper {
|
||||
#home-meme {
|
||||
flex-direction: column;
|
||||
padding: 20% 8%;
|
||||
text-align: center;
|
||||
|
|
@ -1,18 +1,12 @@
|
|||
---
|
||||
import "./MessageStyles.css";
|
||||
import "./Message.scss";
|
||||
---
|
||||
|
||||
<div class="message-container">
|
||||
<div
|
||||
class="message-header text-[color:var(--blue-charcoal-2)] text-[calc(25px_+_(32_-_24)_*_((100vw_-_300px)_/_(1600_-_300)))] font-bold leading-[2em] not-italic;"
|
||||
>
|
||||
A message from Derrick
|
||||
</div>
|
||||
<div
|
||||
class="message-content text-[color:var(--blue-charcoal-2)] text-[calc(15px_+_(21_-_14)_*_((100vw_-_300px)_/_(1600_-_300)))] max-w-[100%] font-normal not-italic;"
|
||||
>
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<section id="home-message">
|
||||
<h2>
|
||||
A message from Derrick
|
||||
</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
|
||||
#home-message {
|
||||
padding-top: 3.16%;
|
||||
padding-bottom: 3.16%;
|
||||
@include fluid-padding-lr;
|
||||
background: var(--aquamarine);
|
||||
color: var(--blue-charcoal);
|
||||
|
||||
@media screen and (width < 48rem) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0.25em;
|
||||
@include fluid-font-size(2rem);
|
||||
font-weight: 700;
|
||||
line-height: 153%;
|
||||
text-transform: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--font-family-jaldi);
|
||||
@include fluid-font-size(1.3125rem);
|
||||
line-height: 157%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
.message-container {
|
||||
align-items: flex-start;
|
||||
background-color: var(--aquamarine);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
min-height: 237px;
|
||||
padding: 5% 12%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
font-family: var(--font-family-jetbrains-mono);
|
||||
}
|
||||
|
||||
.message-content {
|
||||
font-family: var(--font-family-jaldi);
|
||||
}
|
||||
|
|
@ -7,12 +7,7 @@ import "./VisionStyles.css";
|
|||
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>
|
||||
<h2>Our Vision</h2>
|
||||
<h3
|
||||
class="text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import './NavbarStyles.css';
|
||||
import './Navbar.scss';
|
||||
import logo from '../../../src/assets/lume-logo.png';
|
||||
|
||||
function Navbar({ view }) {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
@import "../../styles/mixins.scss";
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 9.375rem;
|
||||
padding: 2.5rem 3%;
|
||||
background: #031418;
|
||||
font-size: 1.125rem;
|
||||
padding: 2em 3.75%;
|
||||
@include fluid-font-size(1.25rem);
|
||||
white-space: nowrap;
|
||||
|
||||
.logo {
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 13.125rem;
|
||||
height: 4.274rem;
|
||||
@include fluid-width(13.125rem);
|
||||
@include fluid-height(4.375rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -24,11 +24,11 @@ menu {
|
|||
|
||||
li > a {
|
||||
display: block;
|
||||
padding: 1rem 1.125rem;
|
||||
padding: 0.55em 0.9em;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
margin-left: 1.25rem;
|
||||
margin-left: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ menu {
|
|||
margin: 0 2.125rem;
|
||||
}
|
||||
|
||||
@media screen and (width <=940px) {
|
||||
@media screen and (width < 768px) {
|
||||
menu {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
|
@ -49,12 +49,15 @@ menu {
|
|||
top: -100vh;
|
||||
right: 3%;
|
||||
padding: 1rem;
|
||||
font-size: 1.25rem;
|
||||
background: var(--blue-charcoal);
|
||||
border: 1px solid red;
|
||||
border-radius: 0.5rem;
|
||||
transition: top 250ms;
|
||||
z-index: 1;
|
||||
|
||||
&.active {
|
||||
top: 2.25rem;
|
||||
top: 1.4rem;
|
||||
}
|
||||
|
||||
li > a {
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
import "./CommunityPower.scss";
|
||||
import communityPower from "../../../../src/assets/community-power.png";
|
||||
---
|
||||
|
||||
<section id="community-power">
|
||||
<div class="community-power-wrapper">
|
||||
<div class="community-power-description"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
#community-power {
|
||||
background-image: url("../../../assets/community-power-bg.png");
|
||||
margin-top: 7.8125rem;
|
||||
background-size: max(75rem, 100%);
|
||||
background-position: right;
|
||||
padding-top: max(29.25rem, 39.02%);
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
import "./Grid.scss";
|
||||
---
|
||||
|
||||
<section id="vision-grid">
|
||||
<div>
|
||||
<h2>Freedom, Privacy, Ownership.</h2>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Web3 Universal Storage</h3>
|
||||
<p>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Web3 Gateway</h3>
|
||||
<p>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Web3 Universal Storage</h3>
|
||||
<p>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Web3 Gateway</h3>
|
||||
<p>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Build Your Site, Censorship Free</h3>
|
||||
<p>Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
|
||||
#vision-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
gap: 1.125rem;
|
||||
padding-top: 2.5625rem;
|
||||
@include fluid-padding-lr;
|
||||
|
||||
@media screen and (width >= 48rem) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media screen and (width >= 64rem) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 39px;
|
||||
color: var(--white);
|
||||
border: 1px solid transparent;
|
||||
font-family: var(--font-family-jaldi);
|
||||
|
||||
&:not(:first-child) {
|
||||
background: var(--blue-charcoal);
|
||||
transition: border-color 200ms;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--aquamarine);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include fluid-font-size(2.75rem);
|
||||
font-weight: bold;
|
||||
line-height: 129.55%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include fluid-font-size(1.875rem);
|
||||
line-height: 103.33%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.67em;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
line-height: 123.81%;
|
||||
color: #c7c7c7;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
import "./Jumbotron.scss";
|
||||
---
|
||||
|
||||
<section id="vision-jumbotron">
|
||||
<h1>
|
||||
Easy Web3 access, storage, publishing, and payment for content creation.
|
||||
</h1>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
|
||||
#vision-jumbotron {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
h1 {
|
||||
max-width: 21em;
|
||||
margin: 2.12em 7.5% 0;
|
||||
font-family: var(--font-family-ibm-plex-sans-devanagari);
|
||||
@include fluid-font-size-s(3.6875rem);
|
||||
line-height: 137.29%;
|
||||
letter-spacing: -0.06em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import "../styles/global.css";
|
||||
import "../styles/global.scss";
|
||||
import Navbar from "../components/Navbar/Navbar.jsx";
|
||||
import Footer from "../components/Footer/Footer.astro";
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ const { view, title } = Astro.props;
|
|||
</head>
|
||||
<body>
|
||||
<Navbar view={view} client:load />
|
||||
<main>
|
||||
<main class={view}>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Jumbotron from "../components/Vision/Jumbotron/Jumbotron.astro";
|
||||
import CommunityPower from "../components/Vision/CommunityPower/CommunityPower.astro";
|
||||
import Grid from "../components/Vision/Grid/Grid.astro";
|
||||
---
|
||||
|
||||
<Layout view="vision" title="Vision - Lume Web">
|
||||
|
||||
<Jumbotron />
|
||||
<CommunityPower />
|
||||
<Grid />
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "mixins.scss";
|
||||
|
||||
@import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400");
|
||||
|
||||
@tailwind base;
|
||||
|
|
@ -30,6 +32,7 @@ html {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-width: 20rem;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
|
|
@ -46,6 +49,10 @@ main {
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: color 200ms;
|
||||
}
|
||||
|
||||
.body-block {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
@ -60,17 +67,6 @@ main {
|
|||
margin-bottom: 1.5vh;
|
||||
}
|
||||
|
||||
.home {
|
||||
background-color: rgb(3 20 24);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
display: absolute;
|
||||
overflow: hidden;
|
||||
border: 1px none;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 57px;
|
||||
letter-spacing: -1.5px;
|
||||
|
|
@ -78,22 +74,14 @@ main {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(26px + (82 - 26) * ((100vw - 300px) / (1600 - 300)));
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300)));
|
||||
@include fluid-font(1rem, 2rem); /* 16px - 32px */
|
||||
color: var(--aquamarine);
|
||||
text-transform: uppercase;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(30px + (45 - 30) * ((100vw - 300px) / (1600 - 300)));
|
||||
margin-top: 0.5em;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
|
@ -137,8 +125,8 @@ h6 {
|
|||
color: var(--black);
|
||||
background: var(--aquamarine);
|
||||
border: 1px solid var(--aquamarine);
|
||||
padding: 0.625rem 1rem;
|
||||
border-radius: 0.3125rem;
|
||||
padding: 0.5em 0.8em;
|
||||
border-radius: 0.25em;
|
||||
transition: color 200ms, background 200ms;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -178,3 +166,18 @@ h6 {
|
|||
max-width: 300;
|
||||
}
|
||||
}
|
||||
|
||||
main.vision {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1031px;
|
||||
height: 733px;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -515.5px;
|
||||
z-index: -1;
|
||||
background: url(../assets/vision-bg.png);
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
@use "sass:math";
|
||||
|
||||
$min-vw: 80rem;
|
||||
$max-vw: 384rem;
|
||||
|
||||
@function strip-unit($value) {
|
||||
@return math.div($value, ($value * 0 + 1));
|
||||
}
|
||||
|
||||
@mixin fluid-font($min-font-size, $max-font-size) {
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($min-font-size);
|
||||
$u4: unit($max-font-size);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
|
||||
& {
|
||||
font-size: $min-font-size;
|
||||
|
||||
@media screen and (min-width: $min-vw) {
|
||||
font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (min-width: $max-vw) {
|
||||
font-size: $max-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-font-size($font-size) {
|
||||
$min-font-size: calc($font-size / 1.2);
|
||||
$max-font-size: calc($font-size * 2);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($font-size);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 {
|
||||
& {
|
||||
font-size: $min-font-size;
|
||||
|
||||
@media screen and (width >= $min-vw) {
|
||||
font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (width >= $max-vw) {
|
||||
font-size: $max-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-font-size-s($font-size) {
|
||||
$min-font-size: calc($font-size / 4.8);
|
||||
$medium-font-size: calc($font-size / 1.2);
|
||||
$max-font-size: calc($font-size * 2);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($font-size);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 {
|
||||
& {
|
||||
font-size: $min-font-size;
|
||||
|
||||
@media screen and (width >= 20rem) and (width < $min-vw) {
|
||||
font-size: calc(#{$min-font-size} + #{strip-unit($medium-font-size - $min-font-size)} * ((100vw - 20rem) / (80 - 20)));
|
||||
}
|
||||
|
||||
@media screen and (width >= $min-vw) {
|
||||
font-size: calc(#{$medium-font-size} + #{strip-unit($max-font-size - $medium-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (width >= $max-vw) {
|
||||
font-size: $max-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-width($width) {
|
||||
$min-width: calc($width / 1.2);
|
||||
$max-width: calc($width * 2);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($width);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 {
|
||||
& {
|
||||
width: $min-width;
|
||||
|
||||
@media screen and (width >= $min-vw) {
|
||||
width: calc(#{$min-width} + #{strip-unit($max-width - $min-width)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (width >= $max-vw) {
|
||||
width: $max-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-height($height) {
|
||||
$min-height: calc($height / 1.2);
|
||||
$max-height: calc($height * 2);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($height);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 {
|
||||
& {
|
||||
height: $min-height;
|
||||
|
||||
@media screen and (width >= $min-vw) {
|
||||
height: calc(#{$min-height} + #{strip-unit($max-height - $min-height)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (width >= $max-vw) {
|
||||
height: $max-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-padding-lr {
|
||||
$min-vw: 48rem;
|
||||
$max-vw: 96rem;
|
||||
|
||||
$min-padding: 3.75%;
|
||||
$max-padding: 7.5%;
|
||||
|
||||
& {
|
||||
padding-left: $min-padding;
|
||||
padding-right: $min-padding;
|
||||
|
||||
@media screen and (width >= $min-vw) {
|
||||
padding-left: calc(#{$min-padding} + #{strip-unit($max-padding - $min-padding)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
padding-right: calc(#{$min-padding} + #{strip-unit($max-padding - $min-padding)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (width >= $max-vw) {
|
||||
padding-left: $max-padding;
|
||||
padding-right: $max-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue