From 05eb1099386f3cdf1f300a82d6bb2eee4c60f861 Mon Sep 17 00:00:00 2001
From: cymon <cymon@mailbox.org>
Date: Sat, 27 May 2023 11:31:19 +0000
Subject: [PATCH] feat: pure css tilted background

---
 src/assets/tilted-rectangle.webp              | Bin 3824 -> 0 bytes
 src/components/Home/Meme/Meme.astro           |   2 +-
 src/components/Home/Meme/Meme.scss            |   2 --
 .../Home/WhatIsWeb3/WhatIsWeb3.astro          |   2 +-
 .../Home/WhatIsWeb3/WhatIsWeb3.scss           |   3 ---
 src/styles/colors.scss                        |   1 +
 src/styles/global.scss                        |  22 ++++++++++++++++--
 7 files changed, 23 insertions(+), 9 deletions(-)
 delete mode 100644 src/assets/tilted-rectangle.webp

diff --git a/src/assets/tilted-rectangle.webp b/src/assets/tilted-rectangle.webp
deleted file mode 100644
index 8fb7a452be62572de727a75221924d4494a7cd1f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3824
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
Ak^lez

diff --git a/src/components/Home/Meme/Meme.astro b/src/components/Home/Meme/Meme.astro
index e7b747c..23d1a2e 100644
--- a/src/components/Home/Meme/Meme.astro
+++ b/src/components/Home/Meme/Meme.astro
@@ -7,7 +7,7 @@ import meme3 from '../../../assets/meme-3.png';
 import meme4 from '../../../assets/meme-4.png';
 ---
 
-<div id="home-meme">
+<div id="home-meme" class="tilted-bg">
   <div class="meme-text feature-group">
     <h2>TITLE</h2>
     <h3>Building a new world for your data</h3>
diff --git a/src/components/Home/Meme/Meme.scss b/src/components/Home/Meme/Meme.scss
index 0a6fc3a..ec60bfb 100644
--- a/src/components/Home/Meme/Meme.scss
+++ b/src/components/Home/Meme/Meme.scss
@@ -6,8 +6,6 @@
   align-items: center;
   padding: 8% 12%;
   @include fluid-font-size(1.3125rem);
-  background-image: url("../../../assets/tilted-rectangle.webp");
-  background-size: 100% 100%;
 }
 
 .meme-text {
diff --git a/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro b/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro
index 5f83d9b..338a759 100644
--- a/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro
+++ b/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro
@@ -2,7 +2,7 @@
 import "./WhatIsWeb3.scss";
 ---
 
-<section id="home-whatisweb3">
+<section id="home-whatisweb3" class="tilted-bg">
     <div class="background"></div>
     <div class="feature-group">
         <h2>
diff --git a/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss b/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss
index 8534eb8..c800189 100644
--- a/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss
+++ b/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss
@@ -29,12 +29,9 @@
   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;
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index a3df13d..b1af6b1 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -1,4 +1,5 @@
 $body-bg: #031418;
+$body-bg-darker: #020d11;
 
 $primary-dark: #000;
 $primary-light: #fff;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index c3e7638..ec2bd88 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -234,10 +234,11 @@ main.vision {
     justify-content: center;
     padding: 2.95em 1.95em;
     color: var(--white);
-    background: #020e10;
+    background: $body-bg-darker;
     border: 0.05em solid transparent;
     border-radius: 0.5em;
     font-family: var(--font-family-jaldi);
+    transition: border-color 200ms;
 
     &:hover {
       border-color: var(--aquamarine);
@@ -255,4 +256,21 @@ main.vision {
     line-height: 123.81%;
     color: var(--cloud);
   }
-}
\ No newline at end of file
+}
+
+.tilted-bg {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: -5%;
+    bottom: 0;
+    left: -5%;
+    margin: 2% 0;
+    background: $body-bg-darker;
+    transform: matrix(1, -0.04, 0.04, 1, 0, 0);
+    z-index: -1;
+  }
+}