From 26d0256f3627ca04ab0911d465451cace7863e57 Mon Sep 17 00:00:00 2001
From: Aadil Ayub <aadilayub@protonmail.com>
Date: Fri, 12 Jul 2024 15:47:10 +0500
Subject: [PATCH] add footer gradients

---
 assets/css/custom.css | 33 +++++++++++++++++++++++++++------
 theme.json            |  7 ++++++-
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index b4cb815..6e5c255 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -41,21 +41,42 @@ ul.wp-block-navigation.mobile-header-nav li {
   .main-header-nav .wp-block-navigation-item__content {
     width: -webkit-fill-available;
     text-align: center;
-  } 
+  }
 }
 
 /* style footer on mobile */
+.wp-block-column.footer-gradient-column { position: relative; }
+
+.wp-block-column.footer-gradient-column::before {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 @media (min-width: 1080px) {
   .wp-block-column.footer-gradient-column {
     padding-left: 2rem !important;
-    border-left: 8px solid var(--wp--preset--color--turquoise-green);
+  }
+
+  .wp-block-column.footer-gradient-column::before {
+    background: var(--wp--preset--gradient--violet-to-green-vertical);
+    width: 8px;
+    height: 100%;
+    left: 0;
   }
 }
 
 @media (max-width: 786px) {
   .wp-block-column.footer-gradient-column {
-    padding-top: 1.5rem !important;
-    border-top: 8px solid var(--wp--preset--color--turquoise-green);
+    padding-top: 2.5rem !important;
+  }
+
+  .wp-block-column.footer-gradient-column::before {
+    background: var(--wp--preset--gradient--violet-to-green);
+    width: 100%;
+    height: 8px;
   }
 }
 
@@ -251,7 +272,7 @@ a.wp-block-tiptip-hyperlink-group-block {
   .blog-post-content blockquote.wp-block-quote {
     margin-inline-start: -1.5rem;
   }
-  
+
   .blog-post-content h2.wp-block-heading {
     margin-inline: auto;
     padding-inline-start: .5em;
@@ -269,4 +290,4 @@ a.wp-block-tiptip-hyperlink-group-block {
     --wp--preset--font-size--huge : 45px;
     --wp--preset--font-size--xx-large: 38px;
   }
-}
\ No newline at end of file
+}
diff --git a/theme.json b/theme.json
index 436eebf..1546497 100644
--- a/theme.json
+++ b/theme.json
@@ -25,6 +25,11 @@
 					"gradient": "linear-gradient(270deg, var(--wp--preset--color--bright-light-green) 0%, var(--wp--preset--color--turquoise-green) 20%, var(--wp--preset--color--turquoise-blue) 40%, var(--wp--preset--color--azure) 60%, var(--wp--preset--color--vibrant-blue) 80%, var(--wp--preset--color--violet) 100%);",
 					"name": "Violet to Bright Green",
 					"slug": "violet-to-green"
+				},
+				{
+					"gradient": "linear-gradient(0deg, var(--wp--preset--color--bright-light-green) 0%, var(--wp--preset--color--turquoise-green) 20%, var(--wp--preset--color--turquoise-blue) 40%, var(--wp--preset--color--azure) 60%, var(--wp--preset--color--vibrant-blue) 80%, var(--wp--preset--color--violet) 100%);",
+					"name": "Violet to Bright Green (Vertical)",
+					"slug": "violet-to-green-vertical"
 				}
 			],
 			"palette": [
@@ -684,4 +689,4 @@
 	],
 	"version": 3,
 	"$schema": "https://schemas.wp.org/trunk/theme.json"
-}
\ No newline at end of file
+}