From ce9348cf5a5625352aab2fc3c50160dd6db0912d Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sun, 18 Sep 2022 15:42:48 +0200
Subject: [PATCH] common color gradient

---
 src/components/Footer.astro |  6 +-----
 src/layouts/Layout.astro    | 11 +++++++++++
 src/pages/index.astro       | 20 ++------------------
 src/pages/social.astro      | 16 +---------------
 4 files changed, 15 insertions(+), 38 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index d34a441..e8bbdf8 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -9,10 +9,6 @@
 </footer>
 
 <style>
-    :root {
-        --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
-    }
-
     footer {
         color: #888;
         font-size: small;
@@ -22,7 +18,7 @@
 
     footer a {
         font-weight: 900;
-        background-image: var(--astro-gradient);
+        background-image: var(--ayo-gradient);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-size: 100% 200%;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 3e9868e..8ab980d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -23,6 +23,7 @@ import Footer from '../components/Footer.astro';
 </html>
 <style>
 	:root {
+                --ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
                 --content-width: 700px;
 		--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
 		--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
@@ -44,6 +45,15 @@ import Footer from '../components/Footer.astro';
 		margin: 0;
 	}
 
+	@keyframes pulse {
+		0%,
+		100% {
+			background-position-y: 0%;
+		}
+		50% {
+			background-position-y: 80%;
+		}
+	}
 
 </style>
 
@@ -60,4 +70,5 @@ import Footer from '../components/Footer.astro';
 		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 			Bitstream Vera Sans Mono, Courier New, monospace;
 	}
+
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3617282..c7d14f1 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -47,10 +47,6 @@ import Footer from "../components/Footer.astro";
 </Layout>
 
 <style>
-    :root {
-        --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
-    }
-
     h1 {
         margin: 0;
         color: rgba(255, 255, 255, 0.75);
@@ -83,10 +79,10 @@ import Footer from "../components/Footer.astro";
     }
 
     .highlighted-section {
-        background: var(--astro-gradient);
+        background: var(--ayo-gradient);
         background-size: 400% 400%;
         background-color: var(--);
-        animation: gradient 15s ease-in-out infinite;
+        animation: pulse 15s ease-in-out infinite;
         box-shadow: 0 8px 8px -4px lightblue;
     }
 
@@ -97,18 +93,6 @@ import Footer from "../components/Footer.astro";
         padding: 0.15em 0.25em;
     }
 
-    @keyframes gradient {
-        0% {
-            background-position: 0% 50%;
-        }
-        50% {
-            background-position: 100% 50%;
-        }
-        100% {
-            background-position: 0% 50%;
-        }
-    }
-
     .link-card-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
diff --git a/src/pages/social.astro b/src/pages/social.astro
index d39086d..fd0c9aa 100644
--- a/src/pages/social.astro
+++ b/src/pages/social.astro
@@ -30,10 +30,6 @@ import Footer from '../components/Footer.astro';
 </Layout>
 
 <style>
-	:root {
-		--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
-	}
-
 	h1 {
 		margin: 2rem 0;
 	}
@@ -46,7 +42,7 @@ import Footer from '../components/Footer.astro';
 
 	.text-gradient {
 		font-weight: 900;
-		background-image: var(--astro-gradient);
+		background-image: var(--ayo-gradient);
 		animation: pulse 4s ease-in-out infinite;
 		-webkit-background-clip: text;
 		-webkit-text-fill-color: transparent;
@@ -55,16 +51,6 @@ import Footer from '../components/Footer.astro';
 		border-radius: 0.4rem;
 	}
 
-	@keyframes pulse {
-		0%,
-		100% {
-			background-position-y: 0%;
-		}
-		50% {
-			background-position-y: 80%;
-		}
-	}
-
 	.highlighted-content {
 		line-height: 1.6;
 		margin: 1rem 0;