style: branding color variables

src/components/Card.astro

@@ -21,7 +21,7 @@ const { href, title, body } = Astro.props;
 </li>
 <style>
 	:root {
-		--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%);
+		--link-gradient: linear-gradient(45deg, var(--color-brand-blue-1), var(--color-brand-blue-3) 30%, var(--color-border) 60%);
 	}
 
 	.link-card {
@@ -52,6 +52,7 @@ const { href, title, body } = Astro.props;
 	}
 
 	p {
+                font-weight: normal;
 		margin-top: 0.75rem;
 		margin-bottom: 0;
 	}
@@ -66,7 +67,10 @@ const { href, title, body } = Astro.props;
 	}
 
 	.link-card:is(:hover, :focus-within) h2 {
+/*
 		color: #4f39fa;
+*/
+		color: var(--color-brand-blue-2);
 	}
 
 	.link-card:is(:hover, :focus-within) h2 span {

src/components/Footer.astro

@@ -1,4 +1,3 @@
-
 <footer>
     <ul role="list" style="list-style:none">
         <li>2022 &#169; <a href="/">Ayo Ayco</a>. All Rights Reserved</li>
@@ -16,13 +15,4 @@
         text-align: right;
     }
 
-    footer a {
-        font-weight: 900;
-        background-image: var(--ayo-gradient);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-size: 100% 200%;
-        background-position-y: 100%;
-        border-radius: 0.4rem;
-    }
 </style>

src/layouts/Layout.astro

@@ -23,7 +23,6 @@ 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);
@@ -32,6 +31,14 @@ import Footer from '../components/Footer.astro';
 		--color-text: hsl(12, 5%, 4%);
 		--color-bg: hsl(10, 21%, 95%);
 		--color-border: hsl(17, 24%, 90%);
+
+                --color-brand-blue-1: #3054bf;
+                --color-brand-blue-2: #203880;
+                --color-brand-blue-3: #416fff;
+                --color-brand-blue-4: #101c40;
+                --color-brand-blue-5: #3964e6;
+
+                --ayo-gradient: linear-gradient(45deg, #3054bf, #203880);
 	}
 
 	html {
@@ -71,4 +78,10 @@ import Footer from '../components/Footer.astro';
 			Bitstream Vera Sans Mono, Courier New, monospace;
 	}
 
+        a {
+            font-weight: 900;
+            color: var(--color-brand-blue-2);
+            border-radius: 0.4rem;
+        }
+
 </style>

src/pages/social.astro

@@ -72,4 +72,8 @@ import Footer from '../components/Footer.astro';
 		gap: 1rem;
 		padding: 0;
 	}
+
+        nav {
+            margin-bottom: -1rem;
+        }
 </style>