LumeWeb
/
lumeweb.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: mobile menu, css cleanup, component details

This commit is contained in:
cymon 2023-05-31 22:30:45 +00:00
parent b86e45511e
commit 0c6391e3a1
26 changed files with 280 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/donate-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 270 KiB

6
src/components/Donate/How/How.scss
View File

@ -1,5 +1,5 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#donate-how {
display: flex;
@ -22,9 +22,9 @@
max-width: 29em;
}
@media screen and (width < 80rem) {
@media screen and (max-width: 80rem) {
p {
background: rgba($body-bg-darker, 0.65);
background: rgba($color-blue-charcoal, 0.65);
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;

5
src/components/Donate/Legal/Legal.scss
View File

@ -1,4 +1,5 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#donate-legal {
display: flex;
@ -15,10 +16,10 @@
p {
margin-top: 1.5em;
font-family: var(--font-family-jaldi);
font-family: $font-family-jaldi;
@include fluid-font-size(1.3125rem);
line-height: 157%;
color: var(--cloud);
color: $color-cloud;
}
strong {

12
src/components/Donate/Methods/Methods.scss
View File

@ -1,5 +1,5 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#donate-methods {
display: flex;
@ -21,7 +21,7 @@
gap: 0.9em;
@include fluid-font-size(1.25rem);
@media screen and (width >= 48rem) {
@media screen and (min-width: 48rem) {
grid-template-columns: repeat(2, 1fr);
}
@ -30,13 +30,13 @@
flex-direction: column;
justify-content: center;
padding: 2.95em 1.95em;
background: $body-bg-darker;
background: $color-blue-charcoal;
border: 0.05em solid transparent;
border-radius: 0.5em;
transition: border-color 200ms;
&:hover {
border-color: var(--aquamarine);
border-color: $color-aquamarine;
}
> div {
@ -57,9 +57,9 @@
p {
margin-top: 1.5em;
font-family: var(--font-family-jaldi);
font-family: $font-family-jaldi;
@include fluid-font-size(1.0625rem);
line-height: 157%;
color: var(--cloud);
color: $color-cloud;
}
}

48
src/components/Donate/Why/Why.scss
View File

@ -1,29 +1,5 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss";
@mixin fluid-margin {
$min-vw: 48rem;
$max-vw: 96rem;
$min-margin: 3.75%;
$max-margin: 7.5%;
& {
margin-left: min(calc(43.9em + $min-margin), max($min-margin, calc(100vw - 28em - $min-margin)));
margin-right: $min-margin;
@media screen and (width >= $min-vw) {
$margin: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
margin-left: min(calc(43.9em + $margin), max($margin, calc(100vw - 28em - $margin)));
margin-right: $margin;
}
@media screen and (width >= $max-vw) {
margin-left: min(calc(43.9em + $max-margin), max($max-margin, calc(100vw - 28em - $max-margin)));
margin-right: $max-margin;
}
}
}
@import "../../../styles/vars.scss";
#donate-why {
position: relative;
@ -35,25 +11,35 @@
top: 0;
left: 0;
width: 92.2em;
max-width: 100vw;
max-width: 200vw;
height: 58.8em;
background-image: url("../../../assets/donate-why-bg.png");
background-position: 0%;
background-repeat: no-repeat;
background-size: contain;
z-index: -1;
}
> div {
.feature-group {
@include fluid-font-size(1.3125rem);
@include fluid-margin;
@include fluid-position-left(43.9em, 28em);
max-width: 29em;
padding: 0.5em 0;
}
@media screen and (width < 80rem) {
@media screen and (max-width: 80rem) {
ul, p {
background: rgba($color-body-bg, 0.65);
}
ul {
border-radius: 0.5em 0.5em 0 0;
padding: 0.3em 0.5em 0.3em 2em;
margin: -0.3em -0.5em 0.28em;
}
p {
background: rgba($body-bg, 0.65);
border-radius: 0 0.5em 0.5em 0;
border-radius: 0 0 0.5em 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}

22
src/components/Home/CTO/CTO.scss
View File

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

5
src/components/Home/Header/Header.scss
View File

@ -1,4 +1,5 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#home-header {
display: flex;
@ -14,4 +15,8 @@
letter-spacing: -0.06em;
text-align: center;
}
.highlight {
color: $color-aquamarine;
}
}

41
src/components/Home/Header/HeaderContent.jsx
View File

@ -1,27 +1,26 @@
import Typewriter from "typewriter-effect";
const HeaderContent = () => {
var headerStrings = [
`Access to the web <br /> for the masses`, `An open web for business`, `Web3 for the masses`, `Web3 for you`
],
randomString = headerStrings[Math.floor(Math.random() * headerStrings.length)];
function lastWord(words) {
var n = words.split(" ");
return n[n.length - 1];
}
var lastIndex = randomString.lastIndexOf(" ");
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>`)
}
}/>
);
var
headerStrings = [
'Access to the web <br /> for the masses',
'An open web for business',
'Web3 for the masses',
'Web3 for you'
],
randomString = headerStrings[Math.floor(Math.random() * headerStrings.length)],
words = randomString.split(' ');
return (
<Typewriter options={{ cursor: '<span class="highlight">_</span>' }} onInit={ (typewriter) => {
typewriter
.changeDelay(50)
.typeString(randomString.substring(0, randomString.lastIndexOf(' ')) + ' ')
.start();
typewriter
.typeString('<span class="highlight">' + words[words.length - 1] + '</span>')
} }/>
);
};
export default HeaderContent;

9
src/components/Home/Meme/Meme.scss
View File

@ -1,4 +1,5 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#home-meme {
display: flex;
@ -32,19 +33,19 @@
@include fluid-font-size(1.5625rem);
font-weight: 700;
text-align: center;
color: var(--aquamarine);
color: $color-aquamarine;
text-transform: uppercase;
}
p {
font-family: var(--font-family-jaldi);
font-family: $font-family-jaldi;
@include fluid-font-size(1.3125rem);
line-height: 123.81%;
color: var(--cloud);
color: $color-cloud;
}
}
@media screen and (width < 48rem) {
@media screen and (max-width: 47.99999rem) {
.meme-item {
div {
flex-direction: column;

9
src/components/Home/Message/Message.scss
View File

@ -1,13 +1,14 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#home-message {
padding-top: 3.16%;
padding-bottom: 3.16%;
@include fluid-padding-lr;
background: var(--aquamarine);
color: var(--blue-charcoal);
background: $color-aquamarine;
color: $color-blue-charcoal-2;
@media screen and (width < 48rem) {
@media screen and (max-width: 47.99999rem) {
text-align: center;
}
@ -21,7 +22,7 @@
}
p {
font-family: var(--font-family-jaldi);
font-family: $font-family-jaldi;
@include fluid-font-size(1.3125rem);
line-height: 157%;
}

7
src/components/Home/PoweredBy/PoweredBy.scss
View File

@ -1,4 +1,5 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#home-powered-by {
display: flex;
@ -8,7 +9,7 @@
margin: 5em 0;
@include fluid-font-size(1.25rem);
@media screen and (width < 48rem) {
@media screen and (max-width: 47.99999rem) {
flex-direction: column;
gap: 1em;
}
@ -24,9 +25,9 @@
font-weight: 700;
line-height: 100%;
text-transform: uppercase;
color: var(--aquamarine);
color: $color-aquamarine;
@media screen and (width >= 48rem) {
@media screen and (min-width: 48rem) {
margin-top: 0.75em;
}
}

3
src/components/Home/Socials/Socials.scss
View File

@ -1,4 +1,5 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#home-socials {
display: flex;
@ -21,7 +22,7 @@
font-weight: 700;
line-height: 100%;
text-transform: uppercase;
color: var(--aquamarine);
color: $color-aquamarine;
}
.github-logo {

6
src/components/Home/Vision/Vision.scss
View File

@ -1,5 +1,5 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#home-vision {
display: flex;
@ -18,9 +18,9 @@
max-width: 29em;
}
@media screen and (width < 80rem) {
@media screen and (max-width: 80rem) {
p {
background: rgba($body-bg, 0.65);
background: rgba($color-body-bg, 0.65);
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;

32
src/components/Home/WhatIsWeb3/WhatIsWeb3.scss
View File

@ -1,29 +1,5 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss";
@mixin fluid-margin {
$min-vw: 48rem;
$max-vw: 96rem;
$min-margin: 3.75%;
$max-margin: 7.5%;
& {
margin-left: min(27.8em, max($min-margin, calc(100vw - 28em - $min-margin)));
margin-right: $min-margin;
@media screen and (width >= $min-vw) {
$margin: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
margin-left: min(calc(27.8em + $margin), max($margin, calc(100vw - 28em - $margin)));
margin-right: $margin;
}
@media screen and (width >= $max-vw) {
margin-left: min(calc(27.8em + $max-margin), max($max-margin, calc(100vw - 28em - $max-margin)));
margin-right: $max-margin;
}
}
}
@import "../../../styles/vars.scss";
#home-whatisweb3 {
display: flex;
@ -49,7 +25,7 @@
}
.feature-group {
@include fluid-margin;
@include fluid-position-left(27.8em, 28em);
max-width: 28em;
z-index: 1;
@ -57,9 +33,9 @@
margin-top: 1em;
}
@media screen and (width < 80rem) {
@media screen and (max-width: 80rem) {
p {
background: rgba(2, 13, 17, 0.65);
background: rgba($color-blue-charcoal, 0.65);
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;

20
src/components/Layout/Footer/Footer.scss
View File

@ -1,5 +1,5 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/colors.scss";
@import "../../../styles/vars.scss";
footer {
display: flex;
@ -7,9 +7,9 @@ footer {
padding-top: 3.16%;
padding-bottom: 4.61%;
@include fluid-padding-lr;
font-family: var(--font-family-jaldi);
font-family: $font-family-jaldi;
@include fluid-font-size(1.3125rem);
background: $body-bg-darker;
background: $color-blue-charcoal;
> div {
flex-basis: 0;
@ -27,7 +27,7 @@ footer {
}
a:hover {
color: var(--white);
color: $color-white;
}
h5 {
@ -39,7 +39,7 @@ footer {
li {
line-height: 138%;
color: var(--cloud);
color: $color-cloud;
list-style-type: none;
white-space: nowrap;
}
@ -53,7 +53,7 @@ footer {
.footer-contact {
margin: auto 0;
color: var(--cloud);
color: $color-cloud;
a {
display: inline-flex;
@ -71,13 +71,13 @@ footer {
.footer-phrase {
margin: auto 0 0;
font-family: var(--font-family-jetbrains-mono);
font-family: $font-family-jetbrains-mono;
font-weight: bold;
line-height: 133%;
color: var(--aquamarine);
color: $color-aquamarine;
}
@media screen and (width >= 48rem) and (width < 64rem) {
@media screen and (min-width: 48rem) and (max-width: 64rem) {
footer {
flex-wrap: wrap;
@ -100,7 +100,7 @@ footer {
}
}
@media screen and (width < 48rem) {
@media screen and (max-width: 47.99999rem) {
footer {
flex-direction: column;
padding-top: 1.25rem;

9
src/components/Layout/JoinCommunity/JoinCommunity.scss
View File

@ -1,13 +1,14 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#join-community {
padding-top: 3.16%;
padding-bottom: 3.16%;
@include fluid-padding-lr;
background: var(--aquamarine);
color: var(--blue-charcoal);
background: $color-aquamarine;
color: $color-blue-charcoal-2;
@media screen and (width < 48rem) {
@media screen and (max-width: 48rem) {
text-align: center;
}
@ -21,7 +22,7 @@
}
p {
font-family: var(--font-family-jaldi);
font-family: $font-family-jaldi;
@include fluid-font-size(1.3125rem);
line-height: 157%;
}

30
src/components/Layout/Navbar/Navbar.jsx
View File

@ -1,18 +1,38 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useCallback, useEffect } from 'react';
import './Navbar.scss';
import logo from '../../../../src/assets/lume-logo.png';
function Navbar({ view }) {
const [nav, setNav] = useState(false);
const toggleNav = () => setNav(!nav);
const toggleNav = () => {
if(nav) {
document.body.classList.remove("scroll-lock");
setNav(false);
} else {
document.body.classList.add("scroll-lock");
setNav(true);
}
}
const onMenuClick = function(event) {
if(!nav) {
return;
}
if(event.pageX < event.target.offsetLeft) {
// click outside of menu
toggleNav();
}
}
useEffect(() => {
let resizeTimeout;
const onResize = () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
if(nav && window.innerWidth >= 768) {
setNav(false);
if(nav && window.innerWidth >= 900) {
toggleNav();
}
}, 25);
};
@ -29,7 +49,7 @@ function Navbar({ view }) {
<img src={logo.src} alt="Lume" />
</a>
</div>
<menu className={nav ? 'active' : undefined}>
<menu className={nav ? 'active' : undefined} onClick={onMenuClick}>
<li>
<a href="/" className={view === 'home' ? 'underline' : undefined} aria-current={view === 'home' ? 'page' : undefined}>Home</a>
</li>

58
src/components/Layout/Navbar/Navbar.scss
View File

@ -1,4 +1,5 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
nav {
display: flex;
@ -36,36 +37,51 @@ menu {
font-size: 2rem;
cursor: pointer;
z-index: 1;
margin: 0 2.125rem;
margin: 0 3.75% 0 2rem;
}
@media screen and (width < 48rem) {
@media screen and (max-width: 56rem) {
nav {
position: sticky;
top: 0;
background: rgba($color-body-bg, 0.85);
z-index: 1;
}
menu {
display: flex;
align-items: flex-start;
flex-direction: column;
position: absolute;
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;
position: fixed;
top: 0;
right: min(20rem, -100vw);
bottom: 0;
padding: 7.5em 7.5% 1em;
background: rgba($color-body-bg, 0.85);
transition: right 200ms;
overflow-y: auto;
&.active {
top: 1.4rem;
right: 0;
&::before {
content: "";
position: fixed;
inset: 0;
background: $color-black;
animation: 200ms bg-opacity forwards;
z-index: -1;
}
}
li > a {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 1.25rem;
padding-left: 0.8em;
}
.download-btn {
margin: 0.5rem 0 0 0;
font-size: 1.25rem;
margin: 1.1em 0 0 0;
}
}
@ -73,3 +89,13 @@ menu {
display: block;
}
}
@keyframes bg-opacity {
0% {
opacity: 0;
}
100% {
opacity: 0.85;
}
}

6
src/components/Vision/CommunityPower/CommunityPower.scss
View File

@ -1,5 +1,5 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/colors.scss";
@import "../../../styles/vars.scss";
#vision-community-power {
position: relative;
@ -21,9 +21,9 @@
max-width: 27em;
}
@media screen and (width < 80rem) {
@media screen and (max-width: 80rem) {
p {
background: rgba($body-bg-darker, 0.65);
background: rgba($color-blue-charcoal, 0.65);
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;

5
src/components/Vision/Grid/Grid.scss
View File

@ -1,4 +1,5 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#vision-grid {
padding-top: 2.05em;
@ -10,10 +11,10 @@
}
h2 {
font-family: var(--font-family-jetbrains-mono);
font-family: $font-family-jetbrains-mono;
@include fluid-font-size(2.75rem);
font-weight: 700;
line-height: 129.55%;
color: var(--aquamarine);
color: $color-aquamarine;
}
}

6
src/components/What/Astronaut/Astronaut.scss
View File

@ -1,5 +1,5 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#what-astronaut {
position: relative;
@ -28,9 +28,9 @@
z-index: 1;
}
@media screen and (width < 80rem) {
@media screen and (max-width: 80rem) {
p {
background: rgba($body-bg-darker, 0.65);
background: rgba($color-blue-charcoal, 0.65);
border-radius: 0 0.5em 0.5em 0;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;

12
src/styles/colors.scss
View File

@ -1,12 +0,0 @@
$body-bg: #031418;
$body-bg-darker: #020e10;
$primary-dark: #000;
$primary-light: #fff;
$black: rgba(0 0 0);
$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);

81
src/styles/global.scss
View File

@ -1,5 +1,5 @@
@import "colors.scss";
@import "mixins.scss";
@import "vars.scss";
@import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400");
@ -7,24 +7,11 @@
@tailwind components;
@tailwind utilities;
:root {
--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);
--font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari";
--font-family-jaldi: "Jaldi";
--font-family-jetbrains-mono: "JetBrains Mono";
}
html {
display: flex;
flex-direction: column;
height: 100%;
min-width: 20rem;
min-height: 100%;
scroll-behavior: smooth;
}
@ -33,9 +20,14 @@ body {
display: flex;
flex-direction: column;
font-family: "JetBrains Mono", sans-serif;
background: $body-bg;
color: #fff;
background: $color-body-bg;
color: $color-white;
overflow-x: hidden;
overflow-y: scroll;
&.scroll-lock {
overflow-y: hidden;
}
}
main {
@ -49,15 +41,15 @@ a {
.btn-main {
display: inline-block;
color: var(--black);
background: var(--aquamarine);
border: 0.05em solid var(--aquamarine);
color: $color-black;
background: $color-aquamarine;
border: 0.05em solid $color-aquamarine;
padding: 0.5em 0.8em;
border-radius: 0.25em;
transition: color 200ms, background 200ms;
&:hover {
color: var(--white);
color: $color-white;
background: transparent;
}
}
@ -72,7 +64,7 @@ main.vision {
left: 50%;
margin-left: max(-51.55em, -50vw);
z-index: -1;
background: url(../assets/vision-bg.png);
background: url("../assets/vision-bg.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
@ -85,11 +77,28 @@ main.what {
position: absolute;
width: max(min(151.3em, 100vw), 32em);
height: max(min(122.4em, 100vw), 56em);
top: -20em;
top: -2em;
left: 50%;
margin-left: max(-75.65em, -50vw);
z-index: -1;
background: url(../assets/what-bg.png);
background: url("../assets/what-bg.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
main.donate {
&::before {
content: "";
position: absolute;
width: max(min(144em, 100vw), 32em);
height: max(min(93.3em, 100vw), 56em);
top: -3em;
left: 50%;
margin-left: max(-72em, -50vw);
z-index: -1;
background: url("../assets/donate-bg.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
@ -102,7 +111,7 @@ main.what {
@include fluid-font-size(1.5625rem);
line-height: 100%;
text-transform: uppercase;
color: var(--aquamarine);
color: $color-aquamarine;
}
h3 {
@ -113,13 +122,13 @@ main.what {
h2, h3 {
font-weight: 700;
text-shadow: 1px 1px 2px rgba($body-bg-darker, 0.65);
text-shadow: 0.017em 0.017em 0.034em rgba($color-blue-charcoal, 0.65);
}
p, li {
font-family: var(--font-family-jaldi);
font-family: $font-family-jaldi;
line-height: 167%;
color: var(--cloud);
color: $color-cloud;
transition: background 200ms;
}
@ -142,11 +151,11 @@ main.what {
@include fluid-padding-lr;
@include fluid-font-size(1.25rem);
@media screen and (width >= 48rem) {
@media screen and (min-width: 48rem) {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (width >= 64rem) {
@media screen and (min-width: 64rem) {
grid-template-columns: repeat(3, 1fr);
}
@ -155,14 +164,14 @@ main.what {
flex-direction: column;
justify-content: center;
padding: 2.95em 1.95em;
background: $body-bg-darker;
background: $color-blue-charcoal;
border: 0.05em solid transparent;
border-radius: 0.5em;
font-family: var(--font-family-jaldi);
font-family: $font-family-jaldi;
transition: border-color 200ms;
&:hover {
border-color: var(--aquamarine);
border-color: $color-aquamarine;
}
}
@ -175,7 +184,7 @@ main.what {
@include fluid-font-size(1.3125rem);
margin-top: 0.67em;
line-height: 123.81%;
color: var(--cloud);
color: $color-cloud;
}
}
@ -190,7 +199,7 @@ main.what {
bottom: 0;
left: -5%;
margin: 2% 0;
background: $body-bg-darker;
background: $color-blue-charcoal;
transform: matrix(1, -0.04, 0.04, 1, 0, 0);
z-index: -1;
}
@ -207,7 +216,7 @@ main.what {
bottom: 0;
left: -5%;
margin: 2% 0;
background: $body-bg-darker;
background: $color-blue-charcoal;
transform: matrix(1, 0.04, -0.04, 1, 0, 0);
z-index: -1;
}

6
src/styles/jumbotron.scss
View File

@ -1,5 +1,5 @@
@import "./mixins.scss";
@import "./colors.scss";
@import "./vars.scss";
.jumbotron {
display: flex;
@ -10,11 +10,11 @@
h1 {
max-width: 21em;
font-family: var(--font-family-ibm-plex-sans-devanagari);
font-family: $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: 0.017em 0.017em 0.034em rgba($body-bg-darker, 0.65);
text-shadow: 0.017em 0.017em 0.034em rgba($color-blue-charcoal, 0.65);
}
}

54
src/styles/mixins.scss
View File

@ -46,11 +46,11 @@ $screen-default: 96rem; // 1536px
& {
font-size: $min-font-size;
@media screen and (width >= $min-vw) {
@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 (width >= $max-vw) {
@media screen and (min-width: $max-vw) {
font-size: $max-font-size;
}
}
@ -70,15 +70,15 @@ $screen-default: 96rem; // 1536px
& {
font-size: $min-font-size;
@media screen and (width >= 20rem) and (width < $min-vw) {
@media screen and (min-width: 20rem) {
font-size: calc(#{$min-font-size} + #{strip-unit($medium-font-size - $min-font-size)} * ((100vw - 20rem) / (80 - 20)));
}
@media screen and (width >= $min-vw) {
@media screen and (min-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) {
@media screen and (min-width: $max-vw) {
font-size: $max-font-size;
}
}
@ -102,12 +102,12 @@ $screen-default: 96rem; // 1536px
width: $min-width;
height: $min-height;
@media screen and (width >= $min-vw) {
@media screen and (min-width: $min-vw) {
width: calc(#{$min-width} + #{strip-unit($max-width - $min-width)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $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) {
@media screen and (min-width: $max-vw) {
width: $max-width;
height: $max-height;
}
@ -127,11 +127,11 @@ $screen-default: 96rem; // 1536px
& {
width: $min-width;
@media screen and (width >= $min-vw) {
@media screen and (min-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) {
@media screen and (min-width: $max-vw) {
width: $max-width;
}
}
@ -150,17 +150,41 @@ $screen-default: 96rem; // 1536px
& {
height: $min-height;
@media screen and (width >= $min-vw) {
@media screen and (min-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) {
@media screen and (min-width: $max-vw) {
height: $max-height;
}
}
}
}
@mixin fluid-position-left($offset, $width) {
$min-vw: 48rem;
$max-vw: 96rem;
$min-margin: 3.75%;
$max-margin: 7.5%;
& {
margin-left: min(calc($offset + $min-margin), max($min-margin, calc(100vw - $width - $min-margin)));
margin-right: $min-margin;
@media screen and (min-width: $min-vw) {
$margin: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
margin-left: min(calc($offset + $margin), max($margin, calc(100vw - $width - $margin)));
margin-right: $margin;
}
@media screen and (min-width: $max-vw) {
margin-left: min(calc($offset + $max-margin), max($max-margin, calc(100vw - $width - $max-margin)));
margin-right: $max-margin;
}
}
}
@mixin fluid-padding-lr {
$min-vw: 48rem;
$max-vw: 96rem;
@ -172,12 +196,12 @@ $screen-default: 96rem; // 1536px
padding-left: $min-padding;
padding-right: $min-padding;
@media screen and (width >= $min-vw) {
@media screen and (min-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) {
@media screen and (min-width: $max-vw) {
padding-left: $max-padding;
padding-right: $max-padding;
}
@ -195,12 +219,12 @@ $screen-default: 96rem; // 1536px
margin-left: $min-margin;
margin-right: $min-margin;
@media screen and (width >= $min-vw) {
@media screen and (min-width: $min-vw) {
margin-left: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
margin-right: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
}
@media screen and (width >= $max-vw) {
@media screen and (min-width: $max-vw) {
margin-left: $max-margin;
margin-right: $max-margin;
}

12
src/styles/vars.scss Normal file
View File

@ -0,0 +1,12 @@
$color-body-bg: #031418;
$color-black: #000;
$color-white: #fff;
$color-blue-charcoal: #020e10;
$color-blue-charcoal-2: #031518;
$color-aquamarine: rgba(122 252 187);
$color-cloud: rgba(199 199 199);
$color-alto: rgba(217 217 217);
$font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari";
$font-family-jaldi: "Jaldi";
$font-family-jetbrains-mono: "JetBrains Mono";