home page rework complete, continue work on further components

This commit is contained in:
cymon 2023-05-29 21:53:41 +00:00
parent 05eb109938
commit 076ae962a1
40 changed files with 420 additions and 377 deletions

BIN
src/assets/astronaut.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

Before

Width:  |  Height:  |  Size: 434 B

After

Width:  |  Height:  |  Size: 434 B

BIN
src/assets/what-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 525 KiB

View File

@ -1,4 +1,5 @@
@import "../../styles/mixins.scss";
@import "../../styles/colors.scss";
footer {
display: flex;
@ -6,8 +7,9 @@ footer {
padding-top: 3.16%;
padding-bottom: 4.61%;
@include fluid-padding-lr;
font-family: var(--font-family-jaldi);
@include fluid-font-size(1.3125rem);
background: var(--blue-charcoal);
background: $body-bg-darker;
> div {
flex-basis: 0;
@ -36,7 +38,6 @@ footer {
}
li {
font-family: var(--font-family-jaldi);
line-height: 138%;
color: var(--cloud);
list-style-type: none;
@ -52,7 +53,6 @@ footer {
.footer-contact {
margin: auto 0;
font-family: var(--font-family-jaldi);
color: var(--cloud);
a {
@ -71,9 +71,10 @@ footer {
.footer-phrase {
margin: auto 0 0;
color: var(--aquamarine);
font-family: var(--font-family-jetbrains-mono);
font-weight: bold;
line-height: 133%;
color: var(--aquamarine);
}
@media screen and (width >= 48rem) and (width < 64rem) {

View File

@ -1,37 +1,21 @@
---
import "./CTOStyles.css";
import './CTO.scss';
import ctoAvatar from '../../../assets/cto-avatar.webp';
---
<div class="cto-container w-full transition-[0.5s];">
<div class="cto-geometric-bg">
<div class="cto-shadow w-full transition-[0.5s] rounded-[72.5px];">
<span id="cto"></span>
<div class="w-full transition-[0.5s] rounded-[72.5px];">
<h2
class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
>
community-powered
</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 class="cto-mini-bio">
<div class="cto-info">
<h5>Derrick Hammer</h5>
<h6>CTO</h6>
<section id="home-cto">
<div class="feature-group">
<h2>Community-Powered</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 class="bio">
<img src={ctoAvatar.src} />
<div>
<strong>Derrick Hammer</strong><br />
CTO
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@ -0,0 +1,45 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss";
#home-cto {
min-height: 28em;
@include fluid-font-size(1.3125rem);
background-image: url("../../../assets/geometric-bg.webp");
background-position: 99% 100%;
background-repeat: no-repeat;
background-size: contain;
> div {
@include fluid-margin-lr;
max-width: 28em;
padding: 3.14em 0;
}
.bio {
display: flex;
align-items: center;
margin-top: 1.57em;
gap: 1.33em;
font-family: var(--font-family-jaldi);
color: var(--cloud);
img {
@include fluid-width-height(5.875rem, 5.875rem);
}
strong {
@include fluid-font-size(1.625rem);
line-height: 133%;
color: var(--white);
}
}
@media screen and (width < 80rem) {
p {
background: rgba($body-bg, 0.65);
border-radius: 0 0.5em 0.5em 0;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}
}
}

View File

@ -1,88 +0,0 @@
.cto-geometric-bg {
background-image: url('../../../assets/geometric-bg.webp');
background-position: 75vh -2vh;
background-size: contain;
background-repeat: no-repeat;
position: relative;
height: 588px;
width: 100%;
transition: 0.5s;
}
.cto-mini-bio {
height: 96px;
width: 100%;
object-fit: contain;
display: inline-flex;
justify-content: center;
flex-direction: column;
background-repeat: no-repeat;
background-image: url('../../../assets/cto-avatar.webp');
margin-top: 3vh;
z-index: 999 !important;
}
.cto-info {
margin-left: 7em;
transition: 0.5s;
}
.cto-translucent {
background-color: #020e10ac;
border-radius: 15px;
transition: 0.5s;
}
@media screen and (width >0px) and (width <=600px) {
.cto-container {
background-position: 100px 50px;
background-size: cover;
background-repeat: no-repeat;
background-origin: content-box;
transition: 0.5s;
justify-content: center;
max-width: 80%;
}
.cto-bp {
padding-right: 0%;
transition: 0.5s;
}
.shadowdrop {
border-radius: 72.5px;
box-shadow: 4px 4px #00000040;
transition: 0.5s;
justify-content: center;
}
.cto-shadow {
align-items: flex-start;
display: flex;
vertical-align: center;
padding-left: 15%;
}
}
@media screen and (width >=601px) {
.cto-container {
background-position: 100px 50px;
background-size: cover;
background-repeat: no-repeat;
background-origin: content-box;
transition: 0.5s;
width: 100%;
}
.cto-bp {
padding-right: 0%;
transition: 0.5s;
}
.cto-shadow {
align-items: flex-start;
display: flex;
vertical-align: center;
padding-inline: 12%;
}
}

View File

@ -1,13 +1,12 @@
---
import "./Meme.scss";
import './Meme.scss';
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 id="home-meme" class="tilted-bg">
<section id="home-meme" class="tilted-bg">
<div class="meme-text feature-group">
<h2>TITLE</h2>
<h3>Building a new world for your data</h3>
@ -36,4 +35,4 @@ import meme4 from '../../../assets/meme-4.png';
Web3
</div>
</div>
</div>
</section>

View File

@ -18,23 +18,24 @@
display: grid;
grid-template-columns: 50% 50%;
gap: 1rem;
max-width: 31.25rem;
max-width: 22em;
img {
margin-bottom: 0.5rem;
margin-bottom: 0.5em;
}
> div {
color: var(--aquamarine);
font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300)) / 2.5);
@include fluid-font-size(1.5625rem);
font-weight: 700;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--aquamarine);
}
}
@media screen and (width <=900px) {
@media screen and (width < 48rem) {
#home-meme {
flex-direction: column;
padding: 20% 8%;

View File

@ -1,8 +1,8 @@
---
import "./PoweredBy.scss";
import siaLogo from "../../../assets/sia-logo.webp";
import hnsLogo from "../../../assets/hsn-logo.webp";
import osiLogo from "../../../assets/osi-logo.webp";
import './PoweredBy.scss';
import siaLogo from '../../../assets/sia-logo.webp';
import hnsLogo from '../../../assets/hsn-logo.webp';
import osiLogo from '../../../assets/osi-logo.webp';
---
<section id="home-powered-by">
@ -12,4 +12,4 @@ import osiLogo from "../../../assets/osi-logo.webp";
<img src={hnsLogo.src} class="hns-logo" />
<img src={osiLogo.src} class="osi-logo" />
</div>
</div>
</section>

View File

@ -1,21 +1,17 @@
---
import "./SocialsStyles.css";
import './Socials.scss';
import githubLogo from '../../../assets/github-logo.webp';
import discordLogo from '../../../assets/discord-logo.webp';
import twitterLogo from '../../../assets/twitter-logo.webp';
import facebookLogo from '../../../assets/facebook-logo.webp';
---
<div class="grid place-items-center overflow-hidden h-auto my-[115px]">
<section id="home-socials">
<h2>Get in touch</h2>
<div>
<h2
class="centered grid place-items-center overflow-hidden h-auto mt-[35px] mb-[1.5vh] text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
>
get in touch
</h2>
<div class="grid place-items-center overflow-hidden h-auto mb-[1.5vh];">
<div class="flex ml-[-5%] pb-[8vh]">
<div class="github"></div>
<div class="discord"></div>
<div class="twitter"></div>
<div class="fb"></div>
<img src={githubLogo.src} class="github-logo" />
<img src={discordLogo.src} class="discord-logo" />
<img src={twitterLogo.src} class="twitter-logo" />
<img src={facebookLogo.src} class="facebook-logo" />
</div>
</div>
</div>
</div>
</section>

View File

@ -0,0 +1,42 @@
@import "../../../styles/mixins.scss";
#home-socials {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5em;
margin: 5em 0 4.25em;
@include fluid-font-size(1.25rem);
div {
display: flex;
align-items: center;
gap: 1.5em;
padding: 0.375em;
}
h2 {
@include fluid-font-size(1.5625rem);
font-weight: 700;
line-height: 100%;
text-transform: uppercase;
color: var(--aquamarine);
}
.github-logo {
@include fluid-width-height(4.375rem, 4.375rem);
}
.discord-logo {
@include fluid-width-height(4.3125rem, 4.375rem);
}
.twitter-logo {
@include fluid-width-height(4.375rem, 4.375rem);
}
.facebook-logo {
@include fluid-width-height(3.75rem, 3.75rem);
}
}

View File

@ -1,47 +0,0 @@
.socials-wrapper {
display: flex;
margin-left: -5%;
padding-bottom: 5vh;
margin-bottom: 5vh;
}
.github {
background-image: url('../../../assets/github-logo.webp');
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
height: 48.3px;
width: 55px;
}
.discord {
background-image: url('../../../assets/discord-logo.webp');
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
height: 48.3px;
width: 48.3px;
margin-top: 0.4vh;
margin-left: 18px;
}
.twitter {
background-image: url('../../../assets/twitter-logo.webp');
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
height: 48.3px;
width: 55px;
margin-left: 18px;
}
.fb {
background-image: url('../../../assets/fb-logo.webp');
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
margin-top: 0.5vh;
height: 42px;
width: 50px;
margin-left: 18px;
}

View File

@ -2,8 +2,8 @@
import "./Vision.scss";
---
<section id="home-vision" class="feature-group">
<div>
<section id="home-vision">
<div class="feature-group">
<h2>Our Vision</h2>
<h3>Make Web3 easy for everyone</h3>
<p>

View File

@ -21,9 +21,9 @@
@media screen and (width < 80rem) {
p {
background: rgba($body-bg, 0.65);
border-radius: 0 0.5em 0.5em 0;
padding: 0.5em 0.5em;
margin: -0.5em -0.5em;
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}
}
}

View File

@ -40,7 +40,7 @@
width: 100%;
height: 38.9em;
max-width: 30.34em;
margin: -19em 0 0;
margin: -19.25em 0 0;
background-image: url("../../../src/assets/img-left.webp");
background-position: left;
background-repeat: no-repeat;
@ -60,9 +60,9 @@
@media screen and (width < 80rem) {
p {
background: rgba(2, 13, 17, 0.65);
border-radius: 0 0.5em 0.5em 0;
padding: 0.5em 0.5em;
margin: -0.5em -0.5em;
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}
}
}

View File

@ -0,0 +1,12 @@
---
import './JoinCommunity.scss';
---
<section id="join-community">
<h2>
Join our community, lend a hand.
</h2>
<p>
Web3 gives people control over their data, privacy, and ownership.
</p>
</section>

View File

@ -0,0 +1,28 @@
@import "../../styles/mixins.scss";
#join-community {
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%;
}
}

View File

@ -11,7 +11,7 @@ function Navbar({ view }) {
const onResize = () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
if(nav && window.innerWidth > 940) {
if(nav && window.innerWidth >= 768) {
setNav(false);
}
}, 25);
@ -37,13 +37,13 @@ function Navbar({ view }) {
<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>
<a href="/what-is-web3" className={view === 'what' ? 'underline' : undefined} aria-current={view === 'what' ? '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>
<a className="btn-main download-btn" href="#">Download Extension</a>
</li>
</menu>
<button className="hamburger" onClick={toggleNav}></button>

View File

@ -33,13 +33,13 @@ menu {
.hamburger {
display: none;
font-size: var(--font-size-xxl);
font-size: 2rem;
cursor: pointer;
z-index: 1;
margin: 0 2.125rem;
}
@media screen and (width < 768px) {
@media screen and (width < 48rem) {
menu {
display: flex;
align-items: flex-start;

View File

@ -1,10 +1,13 @@
---
import "./CommunityPower.scss";
import communityPower from "../../../../src/assets/community-power.png";
import './CommunityPower.scss';
---
<section id="community-power">
<div class="community-power-wrapper">
<div class="community-power-description"></div>
<section id="vision-community-power">
<div class="feature-group">
<h2>Community-Powered</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>
</section>

View File

@ -1,7 +1,32 @@
#community-power {
@import "../../../styles/mixins.scss";
@import "../../../styles/colors.scss";
#vision-community-power {
position: relative;
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%);
@include fluid-font-size(1.3125rem);
.feature-group {
position: absolute;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
@include fluid-margin-lr;
max-width: 27em;
}
@media screen and (width < 80rem) {
p {
background: rgba($body-bg-darker, 0.65);
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}
}
}

View File

@ -1,5 +1,5 @@
---
import "./Grid.scss";
import './Grid.scss';
---
<section id="vision-grid" class="feature-grid">

View File

@ -10,8 +10,10 @@
}
h2 {
font-family: var(--font-family-jetbrains-mono);
@include fluid-font-size(2.75rem);
font-weight: bold;
font-weight: 700;
line-height: 129.55%;
color: var(--aquamarine);
}
}

View File

@ -1,5 +1,5 @@
---
import "./Jumbotron.scss";
import './Jumbotron.scss';
---
<section id="vision-jumbotron">

View File

@ -1,4 +1,5 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/colors.scss";
#vision-jumbotron {
display: flex;
@ -9,8 +10,9 @@
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%;
line-height: 137%;
letter-spacing: -0.06em;
text-align: center;
text-shadow: 1px 1px 2px rgba($body-bg-darker, 0.65);
}
}

View File

@ -0,0 +1,16 @@
---
import './Astronaut.scss';
---
<section id="what-astronaut">
<div class="feature-group">
<h2>Community-Powered</h2>
<h3>Re-defining Web3, for the good of all</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. 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>
<a href="#" class="btn-main">Contribute to our cause</a>
</div>
</div>
</section>

View File

@ -0,0 +1,39 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss";
#what-astronaut {
position: relative;
display: flex;
align-items: center;
margin-top: 5rem;
min-height: 36.72em;
@include fluid-font-size(1.3125rem);
background-image: url("../../../assets/astronaut.png");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
&::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 1;
}
> div {
@include fluid-margin-lr;
max-width: 30em;
padding: 3.14em 0;
z-index: 1;
}
@media screen and (width < 80rem) {
p {
background: rgba($body-bg-darker, 0.65);
border-radius: 0 0.5em 0.5em 0;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}
}
}

View File

@ -0,0 +1,30 @@
---
import './Grid.scss';
---
<section id="what-grid" class="feature-grid">
<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>
<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>
<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>
</section>

View File

@ -0,0 +1,3 @@
#what-grid {
padding-top: 5.5em;
}

View File

@ -0,0 +1,9 @@
---
import './Jumbotron.scss';
---
<section id="what-jumbotron">
<h1>
A new web that is fair and accessible to all, where each user can have a say in its infrastructure.
</h1>
</section>

View File

@ -0,0 +1,18 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/colors.scss";
#what-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%;
letter-spacing: -0.06em;
text-align: center;
text-shadow: 1px 1px 2px rgba($body-bg-darker, 0.65);
}
}

View File

@ -1,7 +1,8 @@
---
import "../styles/global.scss";
import Navbar from "../components/Navbar/Navbar.jsx";
import Footer from "../components/Footer/Footer.astro";
import '../styles/global.scss';
import Navbar from '../components/Navbar/Navbar.jsx';
import Footer from '../components/Footer/Footer.astro';
import JoinCommunity from '../components/JoinCommunity/JoinCommunity.astro';
export interface Props {
view: string;
@ -25,6 +26,7 @@ const { view, title } = Astro.props;
<main class={view}>
<slot />
</main>
{view !== 'home' && <JoinCommunity />}
<Footer />
</body>
</html>

View File

@ -1,14 +1,14 @@
---
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 PoweredBy from "../components/Home/PoweredBy/PoweredBy.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";
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 PoweredBy from '../components/Home/PoweredBy/PoweredBy.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';
---
<Layout view="home" title="Lume Web - Web3 for the masses">

View File

@ -1,8 +1,8 @@
---
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";
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">

View File

@ -1,7 +1,12 @@
---
import Layout from '../layouts/Layout.astro';
import Jumbotron from '../components/What/Jumbotron/Jumbotron.astro';
import Grid from '../components/What/Grid/Grid.astro';
import Astronaut from '../components/What/Astronaut/Astronaut.astro';
---
<Layout view="what-is-web3" title="What is Web3? - Lume Web">
<Layout view="what" title="What is Web3? - Lume Web">
<Jumbotron />
<Grid />
<Astronaut />
</Layout>

View File

@ -1,5 +1,5 @@
$body-bg: #031418;
$body-bg-darker: #020d11;
$body-bg-darker: #020e10;
$primary-dark: #000;
$primary-light: #fff;

View File

@ -8,22 +8,13 @@
@tailwind utilities;
:root {
--primary-dark: #000;
--primary-light: #fff;
--black: rgba(0 0 0);
--white: rgba(255 255 255);
--blue-charcoal: #010e10;
--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";
@ -44,9 +35,11 @@ body {
font-family: "JetBrains Mono", sans-serif;
background: $body-bg;
color: #fff;
overflow-x: hidden;
}
main {
@include fluid-font-size(0.0625rem);
flex-grow: 1;
}
@ -54,73 +47,6 @@ a {
transition: color 200ms;
}
.body-block {
align-items: center;
display: flex;
gap: 78px;
}
.centered {
display: grid;
place-items: center;
overflow: hidden;
height: auto;
margin-bottom: 1.5vh;
}
.title {
height: 57px;
letter-spacing: -1.5px;
line-height: 102px;
white-space: nowrap;
}
h2 {
@include fluid-font(1rem, 2rem); /* 16px - 32px */
color: var(--aquamarine);
text-transform: uppercase;
}
h3 {
font-size: calc(30px + (45 - 30) * ((100vw - 300px) / (1600 - 300)));
}
h4 {
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;
max-width: 550px;
margin-top: 0.5em;
line-height: 35px;
}
h5 {
font-size: calc(15px + (29 - 15) * ((100vw - 300px) / (1600 - 300)));
color: var(--white);
font-family: var(--font-family-jaldi);
font-weight: 400;
font-style: normal;
max-width: 300;
line-height: 2rem;
}
h6 {
font-size: calc(15px + (19 - 15) * ((100vw - 300px) / (1600 - 300)));
color: var(--cloud);
font-family: var(--font-family-jaldi);
font-weight: 100;
font-style: normal;
max-width: 300;
}
.container {
max-width: 1240px;
margin: auto;
padding: 0 1rem;
}
.btn-main {
display: inline-block;
color: var(--black);
@ -136,50 +62,37 @@ h6 {
}
}
@media screen and (width <= 1050px) {
.left {
display: flex;
position: relative;
overflow: hidden;
white-space: normal;
}
.h2-alignment {
margin-left: -10em;
}
h5 {
font-size: calc(20px + (29 - 15) * ((100vw - 300px) / (1600 - 300)));
color: var(--white);
font-family: var(--font-family-jaldi);
font-weight: 400;
font-style: normal;
max-width: 300;
line-height: 2rem;
}
h6 {
font-size: calc(17px + (19 - 15) * ((100vw - 300px) / (1600 - 300)));
color: var(--cloud);
font-family: var(--font-family-jaldi);
font-weight: 100;
font-style: normal;
max-width: 300;
}
}
main.vision {
&::before {
content: "";
position: absolute;
width: 1031px;
height: 733px;
width: max(min(1031em, 100vw), 320em);
height: max(min(733em, 100vw), 400em);
top: 0;
left: 50%;
margin-left: -515.5px;
margin-left: max(-515.5em, -50vw);
z-index: -1;
background: url(../assets/vision-bg.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
main.what {
&::before {
content: "";
position: absolute;
width: max(min(1513em, 100vw), 320em);
height: max(min(1224em, 100vw), 560em);
top: -20em;
left: 50%;
margin-left: max(-756.5em, -50vw);
z-index: -1;
background: url(../assets/what-bg.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
@ -187,7 +100,6 @@ main.vision {
h2 {
margin-bottom: 1em;
@include fluid-font-size(1.5625rem);
font-weight: 700;
line-height: 100%;
text-transform: uppercase;
color: var(--aquamarine);
@ -196,10 +108,14 @@ main.vision {
h3 {
margin-bottom: 0.65em;
@include fluid-font-size(2.8125rem);
font-weight: 700;
line-height: 109%;
}
h2, h3 {
font-weight: 700;
text-shadow: 1px 1px 2px rgba($body-bg-darker, 0.65);
}
p {
font-family: var(--font-family-jaldi);
line-height: 167%;
@ -267,7 +183,7 @@ main.vision {
top: 0;
right: -5%;
bottom: 0;
left: -5%;
left: -25%;
margin: 2% 0;
background: $body-bg-darker;
transform: matrix(1, -0.04, 0.04, 1, 0, 0);