From 4935177908f9411de0999048367cc384592f198a Mon Sep 17 00:00:00 2001 From: cymon Date: Fri, 26 May 2023 22:05:19 +0000 Subject: [PATCH] feat: rework several sections on home page, some refactoring --- src/components/Footer/Footer.astro | 2 +- src/components/Footer/Footer.scss | 3 +- src/components/Home/Grid/Grid.astro | 114 +++++------------- src/components/Home/Grid/Grid.scss | 3 + src/components/Home/Grid/GridStyles.css | 18 --- src/components/Home/Header/Header.scss | 2 +- src/components/Home/Meme/Meme.astro | 2 +- src/components/Home/Meme/Meme.scss | 12 +- src/components/Home/Powered/Powered.astro | 20 --- src/components/Home/Powered/PoweredStyles.css | 65 ---------- src/components/Home/PoweredBy/PoweredBy.astro | 15 +++ src/components/Home/PoweredBy/PoweredBy.scss | 45 +++++++ src/components/Home/Vision/Vision.astro | 27 ++--- src/components/Home/Vision/Vision.scss | 29 +++++ src/components/Home/Vision/VisionStyles.css | 11 -- .../Home/WhatIsWeb3/WhatIsWeb3.astro | 21 ++++ .../Home/WhatIsWeb3/WhatIsWeb3.scss | 72 +++++++++++ .../Home/Whatisweb3/Whatisweb3.astro | 46 ------- .../Home/Whatisweb3/Whatisweb3Styles.css | 65 ---------- src/components/Navbar/Navbar.scss | 3 +- src/components/Vision/Grid/Grid.astro | 4 +- src/components/Vision/Grid/Grid.scss | 60 ++------- src/pages/index.astro | 8 +- src/styles/colors.scss | 11 ++ src/styles/global.scss | 87 ++++++++++++- src/styles/mixins.scss | 59 +++++++++ 26 files changed, 396 insertions(+), 408 deletions(-) create mode 100644 src/components/Home/Grid/Grid.scss delete mode 100644 src/components/Home/Grid/GridStyles.css delete mode 100644 src/components/Home/Powered/Powered.astro delete mode 100644 src/components/Home/Powered/PoweredStyles.css create mode 100644 src/components/Home/PoweredBy/PoweredBy.astro create mode 100644 src/components/Home/PoweredBy/PoweredBy.scss create mode 100644 src/components/Home/Vision/Vision.scss delete mode 100644 src/components/Home/Vision/VisionStyles.css create mode 100644 src/components/Home/WhatIsWeb3/WhatIsWeb3.astro create mode 100644 src/components/Home/WhatIsWeb3/WhatIsWeb3.scss delete mode 100644 src/components/Home/Whatisweb3/Whatisweb3.astro delete mode 100644 src/components/Home/Whatisweb3/Whatisweb3Styles.css create mode 100644 src/styles/colors.scss diff --git a/src/components/Footer/Footer.astro b/src/components/Footer/Footer.astro index 29cb826..4e8dcb0 100644 --- a/src/components/Footer/Footer.astro +++ b/src/components/Footer/Footer.astro @@ -15,7 +15,7 @@ import logo from "../../../src/assets/lume-logo.png"; contact@lumeweb.com -
Freedom, privacy, ownership.
+
Freedom. Privacy. Ownership.
General
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss index 23cff5b..24d5d0a 100644 --- a/src/components/Footer/Footer.scss +++ b/src/components/Footer/Footer.scss @@ -65,8 +65,7 @@ footer { background-image: url('../../assets/email-icon.webp'); background-size: cover; margin-right: 0.375em; - @include fluid-width(1.0625rem); - @include fluid-height(0.875rem); + @include fluid-width-height(1.0625rem, 0.875rem); } } diff --git a/src/components/Home/Grid/Grid.astro b/src/components/Home/Grid/Grid.astro index 22b4aaf..fd2ba49 100644 --- a/src/components/Home/Grid/Grid.astro +++ b/src/components/Home/Grid/Grid.astro @@ -1,90 +1,30 @@ --- -import "./GridStyles.css"; +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. -
-
-
-
- Web3 Gateway -

- Install the Lume Web3 Extension and have a 1-click gateway into the - Web3 internet on Opera, Vivaldi, Edge, and Firefox. -
-
-
-
- Build Your Site,
Censorship Free -

- Combining Lume and Skynet technologies, you can build a website just - like you are on the Web2 internet. -
-
-
-
- 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. -
-
-
-
- Web3 Gateway -

- Install the Lume Web3 Extension and have a 1-click gateway into the - Web3 internet on Opera, Vivaldi, Edge, and Firefox. -
-
-
-
- Build Your Site,
Censorship Free -

- Combining Lume and Skynet technologies, you can build a website just - like you are on the Web2 internet. -
-
-
+
+
+

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.

+
+
+

Web3 Gateway

+

Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.

+
+
+

Build Your Site, Censorship Free

+

Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.

+
+
+

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.

+
+
+

Web3 Gateway

+

Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.

+
+
+

Build Your Site, Censorship Free

+

Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.

+
+
diff --git a/src/components/Home/Grid/Grid.scss b/src/components/Home/Grid/Grid.scss new file mode 100644 index 0000000..81d246b --- /dev/null +++ b/src/components/Home/Grid/Grid.scss @@ -0,0 +1,3 @@ +#home-grid { + padding-top: 5.5em; +} diff --git a/src/components/Home/Grid/GridStyles.css b/src/components/Home/Grid/GridStyles.css deleted file mode 100644 index 5801df6..0000000 --- a/src/components/Home/Grid/GridStyles.css +++ /dev/null @@ -1,18 +0,0 @@ -.cards { - max-width: 77.5%; - margin: 126px auto; - display: grid; - gap: 1rem; -} - -@media (width >=600px) { - .cards { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (width >=900px) { - .cards { - grid-template-columns: repeat(3, 1fr); - } -} \ No newline at end of file diff --git a/src/components/Home/Header/Header.scss b/src/components/Home/Header/Header.scss index 3cb2c39..3c26902 100644 --- a/src/components/Home/Header/Header.scss +++ b/src/components/Home/Header/Header.scss @@ -8,7 +8,7 @@ h1 { height: 1.1em; - margin-top: 1.1em; + margin: 1.1em 0 0.5em; @include fluid-font-size-s(6.25rem); line-height: 110%; letter-spacing: -0.06em; diff --git a/src/components/Home/Meme/Meme.astro b/src/components/Home/Meme/Meme.astro index cef31ec..e7b747c 100644 --- a/src/components/Home/Meme/Meme.astro +++ b/src/components/Home/Meme/Meme.astro @@ -8,7 +8,7 @@ import meme4 from '../../../assets/meme-4.png'; ---
-
+

TITLE

Building a new world for your data

diff --git a/src/components/Home/Meme/Meme.scss b/src/components/Home/Meme/Meme.scss index aca3472..0a6fc3a 100644 --- a/src/components/Home/Meme/Meme.scss +++ b/src/components/Home/Meme/Meme.scss @@ -1,8 +1,11 @@ +@import "../../../styles/mixins.scss"; + #home-meme { display: flex; justify-content: center; align-items: center; padding: 8% 12%; + @include fluid-font-size(1.3125rem); background-image: url("../../../assets/tilted-rectangle.webp"); background-size: 100% 100%; } @@ -11,15 +14,6 @@ width: 60%; margin-right: 5%; flex-shrink: 0; - - p { - margin-top: 1rem; - font-size: calc(15px + (21 - 15) * ((100vw - 300px) / (1600 - 300))); - color: var(--cloud); - font-family: var(--font-family-jaldi); - font-weight: 400; - font-style: normal; - } } .meme-grid { diff --git a/src/components/Home/Powered/Powered.astro b/src/components/Home/Powered/Powered.astro deleted file mode 100644 index 4ba8e27..0000000 --- a/src/components/Home/Powered/Powered.astro +++ /dev/null @@ -1,20 +0,0 @@ ---- -import "./PoweredStyles.css"; ---- - -

-
-

- POWERED BY -

-
- - - -
-
-
diff --git a/src/components/Home/Powered/PoweredStyles.css b/src/components/Home/Powered/PoweredStyles.css deleted file mode 100644 index 1623d29..0000000 --- a/src/components/Home/Powered/PoweredStyles.css +++ /dev/null @@ -1,65 +0,0 @@ -.p-l-wrapper { - align-items: center; - flex-direction: column; - white-space: nowrap; - display: flex; - width: 100%; - margin-left: 50%; - margin-right: 50%; -} - -.p-l-container { - justify-content: center; - align-items: center; - overflow: visible; - white-space: normal; - display: flex; -} - -@media screen and (width <=625px) { - .p-l-container { - width: 100%; - margin-top: 5%; - transition: 0.5s; - justify-content: center; - align-items: center; - overflow: visible; - display: grid; - } - - .p-l-wrapper { - margin-left: 0% - } -} - -.sia-logo { - background-image: url("../../../assets/sia-logo.webp"); - background-position: 50% 50%; - background-size: contain; - background-repeat: no-repeat; - height: 51.8px; - margin-bottom: 8px; - object-fit: cover; - width: 89.6px; -} - -.hns-logo { - background-image: url("../../../assets/hsn-logo.webp"); - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: contain; - height: 46.2px; - margin-left: 5px; - object-fit: cover; - width: 43.4px; -} - -.osi-logo { - background-image: url("../../../assets/osi-logo.webp"); - background-position: 50% 50%; - background-size: contain; - background-repeat: no-repeat; - height: 70px; - margin-left: 18px; - width: 58.1px; -} \ No newline at end of file diff --git a/src/components/Home/PoweredBy/PoweredBy.astro b/src/components/Home/PoweredBy/PoweredBy.astro new file mode 100644 index 0000000..9488e47 --- /dev/null +++ b/src/components/Home/PoweredBy/PoweredBy.astro @@ -0,0 +1,15 @@ +--- +import "./PoweredBy.scss"; +import siaLogo from "../../../assets/sia-logo.webp"; +import hnsLogo from "../../../assets/hsn-logo.webp"; +import osiLogo from "../../../assets/osi-logo.webp"; +--- + +
+

Powered By

+
+ + + +
+
diff --git a/src/components/Home/PoweredBy/PoweredBy.scss b/src/components/Home/PoweredBy/PoweredBy.scss new file mode 100644 index 0000000..9419081 --- /dev/null +++ b/src/components/Home/PoweredBy/PoweredBy.scss @@ -0,0 +1,45 @@ +@import "../../../styles/mixins.scss"; + +#home-powered-by { + display: flex; + align-items: center; + justify-content: center; + gap: 1.5em; + margin: 5em 0; + @include fluid-font-size(1.25rem); + + @media screen and (width < 48rem) { + flex-direction: column; + gap: 1em; + } + + div { + display: flex; + align-items: center; + gap: 1em; + } + + h2 { + @include fluid-font-size(1.5625rem); + font-weight: 700; + line-height: 100%; + text-transform: uppercase; + color: var(--aquamarine); + + @media screen and (width >= 48rem) { + margin-top: 0.75em; + } + } + + .sia-logo { + @include fluid-width-height(8rem, 4.625rem); + } + + .hns-logo { + @include fluid-width-height(3.875rem, 4.125rem); + } + + .osi-logo { + @include fluid-width-height(5.1875rem, 6.25rem); + } +} diff --git a/src/components/Home/Vision/Vision.astro b/src/components/Home/Vision/Vision.astro index ae96bf9..247bf38 100644 --- a/src/components/Home/Vision/Vision.astro +++ b/src/components/Home/Vision/Vision.astro @@ -1,27 +1,16 @@ --- -import "./VisionStyles.css"; +import "./Vision.scss"; --- -
+

Our Vision

-

- Make Web3 easy for
everyone -

-

- Web3 offers freedom of speech, data sovereignty, and privacy. We - simplify Web3 by bridging the gap between the two webs, enabling - easy usage without censorship or backdoors. -

+

Make Web3 easy for everyone

+

+ Web3 offers freedom of speech, data sovereignty, and privacy. We simplify Web3 by bridging the gap between the two webs, enabling easy usage without censorship or backdoors. +

-
+ diff --git a/src/components/Home/Vision/Vision.scss b/src/components/Home/Vision/Vision.scss new file mode 100644 index 0000000..fd93711 --- /dev/null +++ b/src/components/Home/Vision/Vision.scss @@ -0,0 +1,29 @@ +@import "../../../styles/colors.scss"; +@import "../../../styles/mixins.scss"; + +#home-vision { + display: flex; + flex-direction: column; + justify-content: center; + height: 27.05em; + margin-top: 5.32em; + @include fluid-margin-lr; + @include fluid-font-size(1.3125rem); + background-image: url("../../../src/assets/video-placeholder.webp"); + background-position: 98%; + background-repeat: no-repeat; + background-size: contain; + + > div { + max-width: 29em; + } + + @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; + } + } +} diff --git a/src/components/Home/Vision/VisionStyles.css b/src/components/Home/Vision/VisionStyles.css deleted file mode 100644 index 1e5a3b2..0000000 --- a/src/components/Home/Vision/VisionStyles.css +++ /dev/null @@ -1,11 +0,0 @@ -.vt { - background-color: rgba(0 0 0 0%); -} - -@media screen and (width <=1200px) { - .vt { - background-color: #031418a7; - border-radius: 15px; - transition: 0.5s; - } -} diff --git a/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro b/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro new file mode 100644 index 0000000..5f83d9b --- /dev/null +++ b/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro @@ -0,0 +1,21 @@ +--- +import "./WhatIsWeb3.scss"; +--- + +
+
+
+

+ What is the Web? +

+

+ Why Web3 matters +

+

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

+ +
+
diff --git a/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss b/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss new file mode 100644 index 0000000..8534eb8 --- /dev/null +++ b/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss @@ -0,0 +1,72 @@ +@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; + } + } +} + +#home-whatisweb3 { + display: flex; + flex-direction: column; + justify-content: center; + position: relative; + height: 32.42em; + margin-top: 2.48em; + @include fluid-font-size(1.3125rem); + background-image: url("../../../assets/tilted-rectangle.webp"); + background-size: 100% 100%; + + .background { + position: absolute; + left: 0; + top: 50%; + width: 100%; + height: 38.9em; + max-width: 30.34em; + margin: -19em 0 0; + background-image: url("../../../src/assets/img-left.webp"); + background-position: left; + background-repeat: no-repeat; + background-size: contain; + pointer-events: none; + } + + .feature-group { + @include fluid-margin; + max-width: 28em; + z-index: 1; + + h1 { + margin-top: 1em; + } + + @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; + } + } + } +} diff --git a/src/components/Home/Whatisweb3/Whatisweb3.astro b/src/components/Home/Whatisweb3/Whatisweb3.astro deleted file mode 100644 index 0f7a6b5..0000000 --- a/src/components/Home/Whatisweb3/Whatisweb3.astro +++ /dev/null @@ -1,46 +0,0 @@ ---- -import "./Whatisweb3Styles.css"; ---- - -
-
-
-
-
-
- -

- what is the web? -

-

- Why Web3 matters -

-

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

-
- Learn More -
-
-
-
-
diff --git a/src/components/Home/Whatisweb3/Whatisweb3Styles.css b/src/components/Home/Whatisweb3/Whatisweb3Styles.css deleted file mode 100644 index 606084a..0000000 --- a/src/components/Home/Whatisweb3/Whatisweb3Styles.css +++ /dev/null @@ -1,65 +0,0 @@ -.w3-container { - z-index: 999 !important; - width: 100%; - padding-left: 47.5vw; - transition: 0.5s; -} - -.whatisweb3-wrapper { - background-image: url("../../../assets/tilted-rectangle.webp"); - background-size: 100% 100%; - background-repeat: no-repeat; - left: 0%; - width: 100%; - padding-block: 11em; - justify-content: center; - align-items: center; - overflow: hidden; - display: flex; - padding-left: calc(8px + 1.5625vw); -} - -.w3-transluscent { - background-color: #020e1076; - border-radius: 15px; - transition: 0.5s; - max-width: 71.5%; -} - -@media screen and (width <=1050px) { - .w3-container { - width: 100%; - padding-inline: 9%; - z-index: 999 !important; - } - - .whatisweb3-wrapper { - width: 100%; - } - - .img-left { - left: 15%; - transition: 0.5s; - } - - .w3-transluscent { - max-width: 100%; - } -} - -@media screen and (width >=2200px) { - .w3-container { - padding-inline: 96vw; - width: 100%; - justify-content: center; - display: grid; - } - - .img-left { - left: 5.5%; - } - - .w3-transluscent { - max-width: 30%; - } -} \ No newline at end of file diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss index 53666e9..6eda59d 100644 --- a/src/components/Navbar/Navbar.scss +++ b/src/components/Navbar/Navbar.scss @@ -12,8 +12,7 @@ nav { flex-shrink: 0; img { - @include fluid-width(13.125rem); - @include fluid-height(4.375rem); + @include fluid-width-height(13.125rem, 4.375rem); } } } diff --git a/src/components/Vision/Grid/Grid.astro b/src/components/Vision/Grid/Grid.astro index c0040c5..628d1d8 100644 --- a/src/components/Vision/Grid/Grid.astro +++ b/src/components/Vision/Grid/Grid.astro @@ -2,9 +2,9 @@ import "./Grid.scss"; --- -
+
-

Freedom, Privacy, Ownership.

+

Freedom. Privacy. Ownership.

Web3 Universal Storage

diff --git a/src/components/Vision/Grid/Grid.scss b/src/components/Vision/Grid/Grid.scss index 32ae0bc..04530b7 100644 --- a/src/components/Vision/Grid/Grid.scss +++ b/src/components/Vision/Grid/Grid.scss @@ -1,55 +1,17 @@ @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; + padding-top: 2.05em; + padding-bottom: 4.5em; - @media screen and (width >= 48rem) { - grid-template-columns: repeat(2, 1fr); - } + div:first-child { + background: inherit; + border: none + } - @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; - } + h2 { + @include fluid-font-size(2.75rem); + font-weight: bold; + line-height: 129.55%; + } } diff --git a/src/pages/index.astro b/src/pages/index.astro index f863e2b..3b788ff 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -5,17 +5,17 @@ import Grids from "../components/Home/Grid/Grid.astro"; import Header from "../components/Home/Header/Header.astro"; import Meme from "../components/Home/Meme/Meme.astro"; import Message from "../components/Home/Message/Message.astro"; -import Powered from "../components/Home/Powered/Powered.astro"; +import 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 WhatIsWeb3 from "../components/Home/WhatIsWeb3/WhatIsWeb3.astro"; ---
- - + + diff --git a/src/styles/colors.scss b/src/styles/colors.scss new file mode 100644 index 0000000..a3df13d --- /dev/null +++ b/src/styles/colors.scss @@ -0,0 +1,11 @@ +$body-bg: #031418; + +$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); diff --git a/src/styles/global.scss b/src/styles/global.scss index 2e48246..c3e7638 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,3 +1,4 @@ +@import "colors.scss"; @import "mixins.scss"; @import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400"); @@ -7,10 +8,10 @@ @tailwind utilities; :root { - --primary-dark: rgba(0 0 0 100%); - --primary-light: rgba(255 255 255 100%); + --primary-dark: #000; + --primary-light: #fff; --black: rgba(0 0 0); - --blue-charcoal: rgba(1 14 16); + --blue-charcoal: #010e10; --blue-charcoal-2: rgba(3 21 24); --aquamarine: rgba(122 252 187); --cloud: rgba(199 199 199); @@ -41,8 +42,8 @@ body { display: flex; flex-direction: column; font-family: "JetBrains Mono", sans-serif; - background-color: rgb(3 20 24); - color: white; + background: $body-bg; + color: #fff; } main { @@ -124,7 +125,7 @@ h6 { display: inline-block; color: var(--black); background: var(--aquamarine); - border: 1px solid var(--aquamarine); + border: 0.05em solid var(--aquamarine); padding: 0.5em 0.8em; border-radius: 0.25em; transition: color 200ms, background 200ms; @@ -181,3 +182,77 @@ main.vision { background-size: contain; } } + +.feature-group { + h2 { + margin-bottom: 1em; + @include fluid-font-size(1.5625rem); + font-weight: 700; + line-height: 100%; + text-transform: uppercase; + color: var(--aquamarine); + } + + h3 { + margin-bottom: 0.65em; + @include fluid-font-size(2.8125rem); + font-weight: 700; + line-height: 109%; + } + + p { + font-family: var(--font-family-jaldi); + line-height: 167%; + color: var(--cloud); + transition: background 200ms; + } + + .btn-main { + margin-top: 1.57em; + } +} + +.feature-grid { + display: grid; + grid-template-columns: repeat(1, 1fr); + grid-auto-rows: 1fr; + gap: 0.9em; + @include fluid-padding-lr; + @include fluid-font-size(1.25rem); + + @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: 2.95em 1.95em; + color: var(--white); + background: #020e10; + border: 0.05em solid transparent; + border-radius: 0.5em; + font-family: var(--font-family-jaldi); + + &:hover { + border-color: var(--aquamarine); + } + } + + h3 { + @include fluid-font-size(1.875rem); + line-height: 103.33%; + } + + p { + @include fluid-font-size(1.3125rem); + margin-top: 0.67em; + line-height: 123.81%; + color: var(--cloud); + } +} \ No newline at end of file diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index 2693644..ab9e4b0 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -3,6 +3,12 @@ $min-vw: 80rem; $max-vw: 384rem; +$screen-min: 24rem; // 384px +$screen-sm: 48rem; // 768px +$screen-md: 64rem; // 1024px +$screen-lg: 80rem; // 1280px +$screen-default: 96rem; // 1536px + @function strip-unit($value) { @return math.div($value, ($value * 0 + 1)); } @@ -79,6 +85,36 @@ $max-vw: 384rem; } } +@mixin fluid-width-height($width, $height) { + $min-width: calc($width / 1.2); + $max-width: calc($width * 2); + + $min-height: calc($height / 1.2); + $max-height: calc($height * 2); + + $u1: unit($min-vw); + $u2: unit($max-vw); + $u3: unit($width); + $u4: unit($height); + + @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 { + & { + width: $min-width; + height: $min-height; + + @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)})); + 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) { + width: $max-width; + height: $max-height; + } + } + } +} + @mixin fluid-width($width) { $min-width: calc($width / 1.2); $max-width: calc($width * 2); @@ -147,3 +183,26 @@ $max-vw: 384rem; } } } + +@mixin fluid-margin-lr { + $min-vw: 48rem; + $max-vw: 96rem; + + $min-margin: 3.75%; + $max-margin: 7.5%; + + & { + margin-left: $min-margin; + margin-right: $min-margin; + + @media screen and (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) { + margin-left: $max-margin; + margin-right: $max-margin; + } + } +}