From f4e09bd8e665c66c679b561f087e9660a18d5718 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sat, 17 Sep 2022 19:57:22 +0200
Subject: [PATCH] style: typography and colors

---
 src/components/Card.astro   |   2 +
 src/components/Footer.astro |  23 ++---
 src/layouts/Layout.astro    |   2 +-
 src/pages/index.astro       | 186 ++++++++++++++++++++----------------
 src/pages/social.astro      |  43 ++++-----
 5 files changed, 133 insertions(+), 123 deletions(-)

diff --git a/src/components/Card.astro b/src/components/Card.astro
index a87ab72..3d46ad1 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -73,4 +73,6 @@ const { href, title, body } = Astro.props;
 		will-change: transform;
 		transform: translateX(2px);
 	}
+
+
 </style>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 0d0c1b7..a4ff6c6 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,15 +1,13 @@
 <footer>
     <ul role="list" style="list-style:none">
-    <li>This website is a shameless template of <a href="https://astro.build" target="_blank">Astro</a></li>
-    <li>2022 @ <a href="/">Ayo Ayco</a>. All Rights Reserved</li>
-    <li>Moved my old website to <a href="https://classic.ayco.io">a new address</a>.</li>
+    <li>2022 &#169; <a href="/">Ayo Ayco</a>. All Rights Reserved</li>
+    <li>Missing old content? I moved <a href="https://classic.ayco.io">my previous site</a></li>
     </ul>
 </footer>
 
 <style>
-
     :root {
-            --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
+        --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
     }
 
     footer {
@@ -18,13 +16,12 @@
     }
 
     footer a {
-		font-weight: 900;
-		background-image: var(--astro-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 100% 200%;
-		background-position-y: 100%;
-		border-radius: 0.4rem;
-		animation: pulse 4s ease-in-out infinite;
+        font-weight: 900;
+        background-image: var(--astro-gradient);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-size: 100% 200%;
+        background-position-y: 100%;
+        border-radius: 0.4rem;
     }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 095ee87..c4c7346 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -37,7 +37,7 @@ import Footer from '../components/Footer.astro';
 		font-size: var(--font-size-base);
 		color: var(--color-text);
 		background-color: var(--color-bg);
-	}
+        }
 
 	body {
 		margin: 0;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5df2496..490787f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,99 +1,117 @@
 ---
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
-import Footer from '../components/Footer.astro';
+import Layout from "../layouts/Layout.astro";
+import Card from "../components/Card.astro";
+import Footer from "../components/Footer.astro";
 ---
 
 <Layout title="Ayo Ayco | Software Engineer + Web Developer">
-	<main>
-		<h1>Hi, I am <span class="text-gradient">Ayo!</span></h1>
-		<ul role="list" class="highlighted-content" style="list-style:none">
-                    <li>👨🏻‍💻 Software Extraordinaire</li>
-                    <li>🕵🏻‍♂️ Frontend Detective Consultant</li>
-                    <li>📚 BS Computer Science</li>
-		</ul>
-		<ul role="list" class="link-card-grid">
-			<Card
-				href="https://blog.ayco.io/"
-				title="Blog"
-				body="Read my latest articles on technology, productivity, and life in general."
-			/>
-			<Card
-				href="https://drive.google.com/file/d/1MhN8qWRJnSHM_epU9GFQL9lEsMFtHWQK/view?usp=sharing"
-				title="CV / Resume"
-				body="Download and peruse my skills and experience."
-			/>
-			<Card
-				href="/social"
-				title="Social"
-				body="Explore a galaxy of my social accounts."
-			/>
-			<Card
-				href="https://github.com/ayoayco"
-				title="Github"
-				body="See my public projects over at Github. ❤️"
-			/>
-		</ul>
-                <Footer></Footer>
-	</main>
+  <main>
+    <h1>Hi, I'm <span class="text-gradient">Ayo!</span></h1>
+    <ul role="list" class="highlighted-content">
+      <li>👨🏻‍💻 Software Extraordinaire</li>
+      <li>🕵🏻‍♂️ Frontend Detective Consultant</li>
+      <li>📚 BS Computer Science</li>
+    </ul>
+    <ul role="list" class="link-card-grid">
+      <Card
+        href="https://blog.ayco.io/"
+        title="Blog"
+        body="Read my articles on technology, productivity, and life in general."
+      />
+      <Card
+        href="https://drive.google.com/file/d/1MhN8qWRJnSHM_epU9GFQL9lEsMFtHWQK/view?usp=sharing"
+        title="CV / Resume"
+        body="Download and peruse my skills and experience."
+      />
+      <Card
+        href="/social"
+        title="Social"
+        body="Explore a galaxy of my social accounts."
+      />
+      <Card
+        href="https://github.com/ayoayco"
+        title="Github"
+        body="See my public projects over at Github. ❤️"
+      />
+    </ul>
+    <Footer />
+  </main>
 </Layout>
 
 <style>
-	:root {
-		--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
-	}
+  :root {
+    --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
+  }
 
-	h1 {
-		margin: 2rem 0;
-	}
+  h1 {
+    margin: 2rem 0;
+  }
 
-	main {
-		margin: auto;
-		padding: 1em;
-		max-width: 60ch;
-	}
+  main {
+    margin: auto;
+    padding: 1em;
+    max-width: 60ch;
+  }
 
-	.text-gradient {
-		font-weight: 900;
-		background-image: var(--astro-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 100% 200%;
-		background-position-y: 100%;
-		border-radius: 0.4rem;
-		animation: pulse 4s ease-in-out infinite;
-	}
+  .text-gradient {
+    font-weight: 900;
+    background: var(--astro-gradient);
+    animation: pulse 4s ease-in-out infinite;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 100% 200%;
+    background-position-y: 100%;
+    border-radius: 0.4rem;
+  }
 
-	@keyframes pulse {
-		0%,
-		100% {
-			background-position-y: 0%;
-		}
-		50% {
-			background-position-y: 80%;
-		}
-	}
+  @keyframes pulse {
+    0%,
+    100% {
+      background-position-y: 0%;
+    }
+    50% {
+      background-position-y: 80%;
+    }
+  }
 
-	.highlighted-content {
-		line-height: 1.6;
-		margin: 1rem 0;
-		background: #4f39fa;
-		padding: 1rem;
-		border-radius: 0.4rem;
-		color: var(--color-bg);
-	}
+  .highlighted-content {
+    line-height: 1.6;
+    margin: 1rem 0;
+    background: var(--astro-gradient);
+    background-size: 400% 400%;
+    background-color: var(--);
+    animation: gradient 15s ease-in-out infinite;
+    padding: 2rem;
+    border-radius: 0.4rem;
+    color: var(--color-bg);
+    list-style-type: none;
+    font-size: x-large;
+    font-weight: bold;
+  }
 
-	.highlighted-content code {
-		font-size: 0.875em;
-		border: 0.1em solid var(--color-border);
-		border-radius: 4px;
-		padding: 0.15em 0.25em;
-	}
+  .highlighted-content code {
+    font-size: 0.875em;
+    border: 0.1em solid var(--color-border);
+    border-radius: 4px;
+    padding: 0.15em 0.25em;
+  }
 
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 1rem;
-		padding: 0;
-	}
+  @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));
+    gap: 1rem;
+    padding: 0;
+  }
 </style>
diff --git a/src/pages/social.astro b/src/pages/social.astro
index c2a7d84..de54b62 100644
--- a/src/pages/social.astro
+++ b/src/pages/social.astro
@@ -8,25 +8,23 @@ import Footer from '../components/Footer.astro';
 	<main>
             <nav><a href="/">Back</a></nav>
             <h1>Social <span class="text-gradient">Links</span></h1>
-            <div class="content">
-                <ul role="list" style="list-style:none">
-                    <Card
-                            href="https://twitter.com/ayoayco/"
-                            title="Twitter"
-                            body="Tweets about my takes on technology and current events"
-                    />
-                    <Card
-                            href="https://www.linkedin.com/in/ayoayco/"
-                            title="LinkedIn"
-                            body="Connect with me and my professional network"
-                    />
-                    <Card
-                            href="https://soundcloud.com/ayoayco/"
-                            title="SoundCloud"
-                            body="Yes, I make music... until I moved to a new contry this year"
-                    />
-                </ul>
-            </div>
+            <ul role="list" class="link-card-grid">
+                <Card
+                        href="https://twitter.com/ayoayco/"
+                        title="Twitter"
+                        body="Tweets about my takes on technology and current events"
+                />
+                <Card
+                        href="https://www.linkedin.com/in/ayoayco/"
+                        title="LinkedIn"
+                        body="Connect with me and my professional network"
+                />
+                <Card
+                        href="https://soundcloud.com/ayoayco/"
+                        title="SoundCloud"
+                        body="Some music I made as a hobby"
+                />
+            </ul>
             <Footer></Footer>
         </main>
 </Layout>
@@ -36,10 +34,6 @@ import Footer from '../components/Footer.astro';
 		--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
 	}
 
-        div.content {
-            margin-left: -40px;
-        }
-
 	h1 {
 		margin: 2rem 0;
 	}
@@ -53,12 +47,12 @@ import Footer from '../components/Footer.astro';
 	.text-gradient {
 		font-weight: 900;
 		background-image: var(--astro-gradient);
+		animation: pulse 4s ease-in-out infinite;
 		-webkit-background-clip: text;
 		-webkit-text-fill-color: transparent;
 		background-size: 100% 200%;
 		background-position-y: 100%;
 		border-radius: 0.4rem;
-		animation: pulse 4s ease-in-out infinite;
 	}
 
 	@keyframes pulse {
@@ -89,7 +83,6 @@ import Footer from '../components/Footer.astro';
 
 	.link-card-grid {
 		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
 		gap: 1rem;
 		padding: 0;
 	}