From 0bba290f286b9f54a6b3e14c4c5e1d516f44dcf9 Mon Sep 17 00:00:00 2001 From: Juan Di Toro Date: Sat, 12 Aug 2023 22:35:59 +0200 Subject: [PATCH] fix: small improvement on 4k screens --- src/components/Home/CTO/CTO.astro | 7 +- src/components/Home/CTO/CTO.scss | 66 ----------------- src/components/Home/Grid/Grid.astro | 30 -------- src/components/Home/Grid/Grid.scss | 3 - src/components/Home/Meme/Meme.scss | 94 ------------------------- src/components/Home/Vision/Vision.astro | 2 +- src/components/Home/Web3/Web3.astro | 2 +- src/layouts/Layout.astro | 2 +- 8 files changed, 6 insertions(+), 200 deletions(-) delete mode 100644 src/components/Home/CTO/CTO.scss delete mode 100644 src/components/Home/Grid/Grid.astro delete mode 100644 src/components/Home/Grid/Grid.scss delete mode 100644 src/components/Home/Meme/Meme.scss diff --git a/src/components/Home/CTO/CTO.astro b/src/components/Home/CTO/CTO.astro index 091c9d3..aa83f40 100644 --- a/src/components/Home/CTO/CTO.astro +++ b/src/components/Home/CTO/CTO.astro @@ -26,8 +26,7 @@ import abstractBg from "/src/assets/single-brand-bg-1.png"; - +
+ +
diff --git a/src/components/Home/CTO/CTO.scss b/src/components/Home/CTO/CTO.scss deleted file mode 100644 index 7d7c6a3..0000000 --- a/src/components/Home/CTO/CTO.scss +++ /dev/null @@ -1,66 +0,0 @@ -@import "/src/styles/mixins.scss"; -@import "/src/styles/vars.scss"; - -#cto { - position: relative; - 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; - bottom: 0; - left: min(0em, calc((100% - 95em) / 2)); - width: calc(100% - 64em - 7.5%); - min-width: 95em; - background-image: url("/src/assets/single-brand-bg-1.png"); - background-position: 50% 100%; - background-repeat: no-repeat; - background-size: contain; - z-index: -1; - } - - .feature-group { - box-sizing: content-box; - margin: 6em 7.5%; - max-width: 64em; - } - - .bio { - display: inline-flex; - align-items: center; - margin-top: 1.5em; - gap: 1.2em; - font-family: $font-family-jaldi; - @include fluid-font-size(1.5rem); - color: $color-cloud; - - img { - @include fluid-width-height(5.875rem, 5.875rem); - } - - strong { - @include fluid-font-size(1.625rem); - line-height: 133%; - color: $color-white; - } - } - - @media screen and (max-width: 80rem) { - p, .bio div { - background: rgba($color-blue-charcoal-2, 0.75); - border-radius: 0 0.5em 0.5em 0; - padding: 0.3em 0.5em; - margin: -0.3em -0.5em; - } - - .bio { - margin-top: 1.27em; - } - } -} diff --git a/src/components/Home/Grid/Grid.astro b/src/components/Home/Grid/Grid.astro deleted file mode 100644 index 53ccbfa..0000000 --- a/src/components/Home/Grid/Grid.astro +++ /dev/null @@ -1,30 +0,0 @@ ---- -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.

-
-
diff --git a/src/components/Home/Grid/Grid.scss b/src/components/Home/Grid/Grid.scss deleted file mode 100644 index 0abf404..0000000 --- a/src/components/Home/Grid/Grid.scss +++ /dev/null @@ -1,3 +0,0 @@ -#grid { - padding-top: 5.5em; -} diff --git a/src/components/Home/Meme/Meme.scss b/src/components/Home/Meme/Meme.scss deleted file mode 100644 index aa65e1a..0000000 --- a/src/components/Home/Meme/Meme.scss +++ /dev/null @@ -1,94 +0,0 @@ -@import "/src/styles/mixins.scss"; -@import "/src/styles/vars.scss"; - -#meme { - display: flex; - align-items: center; - padding: 12em 7.5%; - gap: 10em; - - .feature-group { - max-width: 64em; - } - - .meme-items { - display: flex; - flex-direction: column; - align-items: center; - gap: 1.5em; - } - - .meme-item { - display: flex; - align-items: center; - gap: 2em; - - div { - flex-shrink: 0; - display: flex; - align-items: center; - gap: 2em; - } - - img { - @include fluid-width(13.125rem); - } - - h2 { - width: 8.6em; - @include fluid-font-size(1.5625rem); - font-weight: 700; - text-align: center; - color: $color-aquamarine; - text-transform: uppercase; - } - - p { - font-family: $font-family-jaldi; - @include fluid-font-size(1.3125rem); - line-height: 123.81%; - color: $color-cloud; - } - } - - @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 { - 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: 4.5em; - } - } - } -} diff --git a/src/components/Home/Vision/Vision.astro b/src/components/Home/Vision/Vision.astro index b7a848b..492731f 100644 --- a/src/components/Home/Vision/Vision.astro +++ b/src/components/Home/Vision/Vision.astro @@ -16,7 +16,7 @@
Download Extension
diff --git a/src/components/Home/Web3/Web3.astro b/src/components/Home/Web3/Web3.astro index 4df9c53..3bd4234 100644 --- a/src/components/Home/Web3/Web3.astro +++ b/src/components/Home/Web3/Web3.astro @@ -22,7 +22,7 @@
Learn More
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 9e372b5..562c51b 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -27,7 +27,7 @@ const { view, title } = Astro.props; /> - +