From 44231a1d995198f6029567b29e55c4fc4a66879b Mon Sep 17 00:00:00 2001 From: cymon Date: Wed, 7 Jun 2023 21:34:40 +0000 Subject: [PATCH] optimize styles, background positions and fluid types, fix build issues, code refactoring and cleanup --- src/components/Donate/How/How.scss | 17 ++- .../Donate/Jumbotron/Jumbotron.astro | 2 +- src/components/Donate/Legal/Legal.scss | 8 +- src/components/Donate/Methods/Methods.astro | 2 +- src/components/Donate/Methods/Methods.scss | 14 +- src/components/Donate/Why/Why.scss | 32 +++-- src/components/Home/CTO/CTO.astro | 28 ++-- src/components/Home/CTO/CTO.scss | 63 ++++----- src/components/Home/Grid/Grid.astro | 4 +- src/components/Home/Grid/Grid.scss | 2 +- src/components/Home/Header/Header.astro | 10 -- src/components/Home/Header/Header.scss | 22 --- src/components/Home/Meme/Meme.astro | 10 +- src/components/Home/Meme/Meme.scss | 54 +++++--- src/components/Home/Message/Message.astro | 4 +- src/components/Home/Message/Message.scss | 10 +- src/components/Home/PoweredBy/PoweredBy.astro | 2 +- src/components/Home/PoweredBy/PoweredBy.scss | 8 +- src/components/Home/Socials/Socials.astro | 2 +- src/components/Home/Socials/Socials.scss | 8 +- .../Home/Typewriter/Typewriter.astro | 10 ++ .../Home/Typewriter/Typewriter.scss | 24 ++++ .../TypewriterContent.jsx} | 0 src/components/Home/Vision/Vision.astro | 4 +- src/components/Home/Vision/Vision.scss | 32 +++-- .../WhatIsWeb3.astro => Web3/Web3.astro} | 4 +- .../WhatIsWeb3.scss => Web3/Web3.scss} | 25 ++-- src/components/Layout/Footer/Footer.astro | 2 +- src/components/Layout/Footer/Footer.scss | 23 ++-- .../Layout/JoinCommunity/JoinCommunity.scss | 6 +- src/components/Layout/Navbar/Navbar.jsx | 2 +- src/components/Layout/Navbar/Navbar.scss | 8 +- .../Vision/Community/Community.astro | 2 +- .../Vision/Community/Community.scss | 28 ++-- src/components/Vision/Grid/Grid.astro | 2 +- src/components/Vision/Grid/Grid.scss | 6 +- .../Vision/Jumbotron/Jumbotron.astro | 2 +- src/components/Vision/People/People.astro | 2 +- src/components/Vision/People/People.scss | 27 ++-- src/components/What/Astronaut/Astronaut.astro | 2 +- src/components/What/Astronaut/Astronaut.scss | 43 +++--- src/components/What/Building/Building.scss | 30 ++-- src/components/What/Grid/Grid.astro | 2 +- src/components/What/Grid/Grid.scss | 3 +- src/components/What/Jumbotron/Jumbotron.astro | 2 +- src/env.d.ts | 2 +- src/layouts/Layout.astro | 2 +- src/pages/index.astro | 22 +-- src/styles/global.scss | 129 +++++++++--------- src/styles/jumbotron.scss | 8 +- src/styles/mixins.scss | 99 +++++++------- 51 files changed, 446 insertions(+), 409 deletions(-) delete mode 100644 src/components/Home/Header/Header.astro delete mode 100644 src/components/Home/Header/Header.scss create mode 100644 src/components/Home/Typewriter/Typewriter.astro create mode 100644 src/components/Home/Typewriter/Typewriter.scss rename src/components/Home/{Header/HeaderContent.jsx => Typewriter/TypewriterContent.jsx} (100%) rename src/components/Home/{WhatIsWeb3/WhatIsWeb3.astro => Web3/Web3.astro} (84%) rename src/components/Home/{WhatIsWeb3/WhatIsWeb3.scss => Web3/Web3.scss} (60%) diff --git a/src/components/Donate/How/How.scss b/src/components/Donate/How/How.scss index 4693390..372329b 100644 --- a/src/components/Donate/How/How.scss +++ b/src/components/Donate/How/How.scss @@ -1,25 +1,24 @@ -@import "../../../styles/mixins.scss"; -@import "../../../styles/vars.scss"; +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; #how { display: flex; flex-direction: column; justify-content: center; - margin-top: 4em; + margin-top: 8em; @include fluid-padding-lr; - padding-top: 7em; - padding-bottom: 7em; - @include fluid-font-size(1.3125rem); + padding-top: 14em; + padding-bottom: 16em; &::before { - background-image: url("../../../src/assets/donate-gfx-right.png"); + background-image: url("/src/assets/donate-gfx-right.png"); background-position: 85% 100%; background-repeat: no-repeat; background-size: contain; } - > div { - max-width: 29em; + .feature-group { + max-width: 64em; } @media screen and (max-width: 80rem) { diff --git a/src/components/Donate/Jumbotron/Jumbotron.astro b/src/components/Donate/Jumbotron/Jumbotron.astro index de8fdc7..5a0c0f3 100644 --- a/src/components/Donate/Jumbotron/Jumbotron.astro +++ b/src/components/Donate/Jumbotron/Jumbotron.astro @@ -2,7 +2,7 @@ import '../../../styles/jumbotron.scss'; --- -
+

Lume is people-powered.

diff --git a/src/components/Donate/Legal/Legal.scss b/src/components/Donate/Legal/Legal.scss index 8a91504..b6263be 100644 --- a/src/components/Donate/Legal/Legal.scss +++ b/src/components/Donate/Legal/Legal.scss @@ -1,5 +1,5 @@ -@import "../../../styles/mixins.scss"; -@import "../../../styles/vars.scss"; +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; #legal { display: flex; @@ -10,14 +10,14 @@ h2 { margin-bottom: 1em; - @include fluid-font-size(2.5rem); + @include fluid-font-size(2.8125rem); line-height: 122%; } p { margin-top: 1.5em; font-family: $font-family-jaldi; - @include fluid-font-size(1.3125rem); + @include fluid-font-size(1.375rem); line-height: 157%; color: $color-cloud; } diff --git a/src/components/Donate/Methods/Methods.astro b/src/components/Donate/Methods/Methods.astro index 15bc3a7..7e7a018 100644 --- a/src/components/Donate/Methods/Methods.astro +++ b/src/components/Donate/Methods/Methods.astro @@ -9,7 +9,7 @@ const addCurrency = async (id, title, address) => { id: id, title: title, address: address, - svgLogo: await import('./icons/' + id + '.svg?raw'), + svgLogo: await import(`./icons/${id}.svg?raw`), qrSmall: await QRCode.toDataURL(address, { version: 6, scale: 1, margin: 1 }), qrLarge: await QRCode.toDataURL(address, { version: 6, scale: 7, margin: 2 }) }); diff --git a/src/components/Donate/Methods/Methods.scss b/src/components/Donate/Methods/Methods.scss index 9aba4ef..118e728 100644 --- a/src/components/Donate/Methods/Methods.scss +++ b/src/components/Donate/Methods/Methods.scss @@ -1,5 +1,5 @@ -@import "../../../styles/mixins.scss"; -@import "../../../styles/vars.scss"; +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; #methods { display: flex; @@ -12,7 +12,7 @@ h2 { margin-bottom: 1em; - @include fluid-font-size(2.5rem); + @include fluid-font-size(2.8125rem); line-height: 122%; } @@ -53,7 +53,7 @@ h3 { flex-grow: 1; font-family: $font-family-jetbrains-mono; - @include fluid-font-size(1.4375rem); + @include fluid-font-size(1.5rem); } img { @@ -73,7 +73,7 @@ order: 1; flex-grow: 1; position: relative; - @include fluid-font-size(1.3125rem); + @include fluid-font-size(1.375rem); word-break: break-all; user-select: all; } @@ -134,13 +134,13 @@ p { margin-top: 1em; - @include fluid-font-size(1.0625rem); + @include fluid-font-size(1.25rem); line-height: 157%; color: $color-cloud; } .btn-main { - @include fluid-font-size(1.3125rem); + @include fluid-font-size(1.5rem); } #donate-bitcoin:hover { diff --git a/src/components/Donate/Why/Why.scss b/src/components/Donate/Why/Why.scss index cbcc3dc..73cbf8d 100644 --- a/src/components/Donate/Why/Why.scss +++ b/src/components/Donate/Why/Why.scss @@ -1,30 +1,34 @@ -@import "../../../styles/mixins.scss"; -@import "../../../styles/vars.scss"; +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; #why { position: relative; - margin: 9em 0; + display: flex; + justify-content: flex-end; + align-items: center; + max-width: 185.6em; + min-height: 58.8em; + margin: 0 auto; &::before { content: ""; position: absolute; top: 0; - left: 0; - width: 92.2em; - max-width: 100vw; - height: 58.8em; - background-image: url("../../../assets/donate-why-bg.png"); - background-position: 0%; + bottom: 0; + left: min(0em, calc((100% - 92.2em) / 2)); + width: calc(100% - 64em - 7.5%); + min-width: 92.2em; + background-image: url("/src/assets/donate-why-bg.png"); + background-position: 50% 0; background-repeat: no-repeat; background-size: contain; z-index: -1; } .feature-group { - @include fluid-font-size(1.3125rem); - @include fluid-position-left(43.9em, 28em); - max-width: 29em; - padding: 0.5em 0; + box-sizing: content-box; + margin: 2em 7.5%; + max-width: 64em; } @media screen and (max-width: 80rem) { @@ -34,7 +38,7 @@ ul { border-radius: 0.5em 0.5em 0 0; - padding: 0.3em 0.5em 0.3em 2em; + padding: 0.3em 0.5em 0.3em 1.5em; margin: -0.3em -0.5em 0.28em; } diff --git a/src/components/Home/CTO/CTO.astro b/src/components/Home/CTO/CTO.astro index 0299154..5331c52 100644 --- a/src/components/Home/CTO/CTO.astro +++ b/src/components/Home/CTO/CTO.astro @@ -1,22 +1,20 @@ --- import './CTO.scss'; -import ctoAvatar from '../../../assets/cto-avatar.webp'; +import avatar from '/src/assets/cto-avatar.webp'; --- -
-
-
-

Community-Powered

-

Building a new world for your data

-

- 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. -

-
- -
- Derrick Hammer
- CTO -
+
+
+

Community-Powered

+

Building a new world for your data

+

+ 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. +

+
+ +
+ Derrick Hammer
+ CTO
diff --git a/src/components/Home/CTO/CTO.scss b/src/components/Home/CTO/CTO.scss index 0e529a0..4c86a67 100644 --- a/src/components/Home/CTO/CTO.scss +++ b/src/components/Home/CTO/CTO.scss @@ -1,47 +1,44 @@ -@import "../../../styles/mixins.scss"; -@import "../../../styles/vars.scss"; +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; -#home-cto { - @include fluid-padding-lr; +#cto { + position: relative; + display: flex; + justify-content: flex-end; + align-items: center; + max-width: 185.6em; + min-height: 58.8em; + margin: 0 auto; - > div { - position: relative; - display: flex; - justify-content: flex-end; - align-items: center; - margin: 0 auto; - @include fluid-font-size(1.3125rem); - max-width: 75em; - min-height: 28em; - - &::before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: min(0rem, calc((100vw - 40rem) / 2)); - width: 100%; - min-width: 40rem; - background-image: url("../../../assets/geometric-bg.webp"); - background-position: 1%; - background-repeat: no-repeat; - background-size: contain; - z-index: -1; - } + &::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: min(0em, calc((100% - 95em) / 2)); + width: calc(100% - 64em - 7.5%); + min-width: 95em; + background-image: url("/src/assets/geometric-bg.webp"); + background-position: 50% 100%; + background-repeat: no-repeat; + background-size: contain; + z-index: -1; } .feature-group { - max-width: 28em; - padding: 3.14em 0; + box-sizing: content-box; + margin: 6em 7.5%; + max-width: 64em; } .bio { display: inline-flex; align-items: center; - margin-top: 1.57em; - gap: 1.33em; + margin-top: 1.5em; + gap: 1.2em; font-family: $font-family-jaldi; color: $color-cloud; + @include fluid-font-size(1.5rem); img { @include fluid-width-height(5.875rem, 5.875rem); @@ -55,7 +52,7 @@ } @media screen and (max-width: 80rem) { - p, .bio { + p, .bio div { background: rgba($color-blue-charcoal-2, 0.65); border-radius: 0 0.5em 0.5em 0; padding: 0.3em 0.5em; diff --git a/src/components/Home/Grid/Grid.astro b/src/components/Home/Grid/Grid.astro index fd2ba49..53ccbfa 100644 --- a/src/components/Home/Grid/Grid.astro +++ b/src/components/Home/Grid/Grid.astro @@ -1,8 +1,8 @@ --- -import "./Grid.scss"; +import './Grid.scss'; --- -
+

Web3 Universal Storage

Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.

diff --git a/src/components/Home/Grid/Grid.scss b/src/components/Home/Grid/Grid.scss index 81d246b..0abf404 100644 --- a/src/components/Home/Grid/Grid.scss +++ b/src/components/Home/Grid/Grid.scss @@ -1,3 +1,3 @@ -#home-grid { +#grid { padding-top: 5.5em; } diff --git a/src/components/Home/Header/Header.astro b/src/components/Home/Header/Header.astro deleted file mode 100644 index c785f5f..0000000 --- a/src/components/Home/Header/Header.astro +++ /dev/null @@ -1,10 +0,0 @@ ---- -import "./Header.scss"; -import HeaderContent from "./HeaderContent.jsx"; ---- - -
-

- -

-
diff --git a/src/components/Home/Header/Header.scss b/src/components/Home/Header/Header.scss deleted file mode 100644 index e934e24..0000000 --- a/src/components/Home/Header/Header.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import "../../../styles/mixins.scss"; -@import "../../../styles/vars.scss"; - -#home-header { - display: flex; - align-items: center; - justify-content: center; - padding: 0 7.5%; - - h1 { - height: 1.1em; - margin: 1.1em 0 0.5em; - @include fluid-font-size-s(6.25rem); - line-height: 110%; - letter-spacing: -0.06em; - text-align: center; - } - - .highlight { - color: $color-aquamarine; - } -} diff --git a/src/components/Home/Meme/Meme.astro b/src/components/Home/Meme/Meme.astro index 3114d3d..107a943 100644 --- a/src/components/Home/Meme/Meme.astro +++ b/src/components/Home/Meme/Meme.astro @@ -1,12 +1,12 @@ --- 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'; +import meme1 from '/src/assets/meme-1.png'; +import meme2 from '/src/assets/meme-2.png'; +import meme3 from '/src/assets/meme-3.png'; +import meme4 from '/src/assets/meme-4.png'; --- -
+

What is the Web? diff --git a/src/components/Home/Meme/Meme.scss b/src/components/Home/Meme/Meme.scss index b612c34..a33b7db 100644 --- a/src/components/Home/Meme/Meme.scss +++ b/src/components/Home/Meme/Meme.scss @@ -1,7 +1,7 @@ -@import "../../../styles/mixins.scss"; -@import "../../../styles/vars.scss"; +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; -#home-meme { +#meme { display: flex; align-items: center; @include fluid-padding-lr; @@ -10,8 +10,7 @@ gap: 10em; .feature-group { - @include fluid-font-size(1.3125rem); - max-width: 28em; + max-width: 64em; } .meme-items { @@ -24,9 +23,7 @@ .meme-item { display: flex; align-items: center; - @include fluid-font-size(1.3125rem); gap: 2em; - max-width: 55em; div { flex-shrink: 0; @@ -40,7 +37,7 @@ } h2 { - width: 8.2em; + width: 8.6em; @include fluid-font-size(1.5625rem); font-weight: 700; text-align: center; @@ -56,18 +53,43 @@ } } - @media screen and (max-width: 47.99999rem) { + @media screen and (max-width: 80rem) { + flex-direction: column; + gap: 5em; + + .feature-group { + max-width: none; + margin: 2em 0; + } + } + + @media screen and (max-width: 56rem) { + .feature-group { + max-width: 64em; + } + + .meme-items { + gap: 3em; + } + .meme-item { - div { - flex-direction: column; - gap: 0.5em; + flex-direction: column; + max-width: 64em; + + p { + text-align: center; } + img { + @include fluid-width(11.25rem); + } + } + } + + @media screen and (min-width: 80.000001rem) and (max-width: 100rem) { + .meme-item { h2 { - width: auto; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + width: 4.5em; } } } diff --git a/src/components/Home/Message/Message.astro b/src/components/Home/Message/Message.astro index 2073645..d3908de 100644 --- a/src/components/Home/Message/Message.astro +++ b/src/components/Home/Message/Message.astro @@ -1,8 +1,8 @@ --- -import "./Message.scss"; +import './Message.scss'; --- -
+

A message from Derrick

diff --git a/src/components/Home/Message/Message.scss b/src/components/Home/Message/Message.scss index b347310..f290159 100644 --- a/src/components/Home/Message/Message.scss +++ b/src/components/Home/Message/Message.scss @@ -1,7 +1,7 @@ -@import "../../../styles/mixins.scss"; -@import "../../../styles/vars.scss"; +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; -#home-message { +#message { padding: 5em 0; @include fluid-padding-lr; background: $color-aquamarine; @@ -22,7 +22,7 @@ p { font-family: $font-family-jaldi; - @include fluid-font-size(1.3125rem); - line-height: 157%; + @include fluid-font-size(1.5rem); + line-height: 137%; } } diff --git a/src/components/Home/PoweredBy/PoweredBy.astro b/src/components/Home/PoweredBy/PoweredBy.astro index 51720af..c918773 100644 --- a/src/components/Home/PoweredBy/PoweredBy.astro +++ b/src/components/Home/PoweredBy/PoweredBy.astro @@ -2,7 +2,7 @@ import './PoweredBy.scss'; --- -
+

Powered By