style: top section; footer typography, layout

src/components/Footer.astro

@@ -1,6 +1,8 @@
+
 <footer>
     <ul role="list" style="list-style:none">
     <li>2022 &#169; <a href="/">Ayo Ayco</a>. All Rights Reserved</li>
+    <li>Ayo Ayco | Software Engineer + Web Developer</li>
     <li>Missing old content? I moved <a href="https://classic.ayco.io">my previous site</a></li>
     </ul>
 </footer>
@@ -12,7 +14,9 @@
 
     footer {
         color: #888;
-        margin-left: -40px;
+        font-size: small;
+        margin: 40px 0 0 -40px;
+        text-align: right;
     }
 
     footer a {

src/pages/index.astro

@@ -5,13 +5,19 @@ import Footer from "../components/Footer.astro";
 ---
 
 <Layout title="Ayo Ayco | Software Engineer + Web Developer">
-  <main>
-    <h1>Hi, I'm <span class="text-gradient">Ayo!</span></h1>
-    <ul role="list" class="highlighted-content">
+<main>
+    <div class="highlighted-section">
+        <div class="top-content">
+            <h1>Ayo Ayco</h1>
+            <ul role="list">
               <li>👨🏻‍💻 Software Extraordinaire</li>
               <li>🕵🏻‍♂️ Frontend Detective Consultant</li>
               <li>📚 BS Computer Science</li>
             </ul>
+        </div>
+    </div>
+
+    <div class="main-content">
         <ul role="list" class="link-card-grid">
           <Card
             href="https://blog.ayco.io/"
@@ -35,62 +41,50 @@ import Footer from "../components/Footer.astro";
           />
         </ul>
         <Footer />
-  </main>
+    </div>
+</main>
 </Layout>
 
 <style>
     :root {
         --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
+        --content-width: 800px;
     }
 
     h1 {
-    margin: 2rem 0;
+        margin: 0 0 2rem 0;
     }
 
-  main {
+    .top-content {
         margin: auto;
         padding: 1em;
-    max-width: 60ch;
-  }
-
-  .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%;
-    }
-  }
-
-  .highlighted-content {
+        max-width: var(--content-width);
+        font-weight: bold;
+        font-size: x-large;
+        color: var(--color-bg);
         line-height: 1.6;
-    margin: 1rem 0 1.75rem;
+    }
+
+    .top-content ul {
+        list-style-type: none;
+    }
+
+    .main-content {
+        margin: auto;
+        padding: 1em;
+        max-width: var(--content-width);
+    }
+
+    .highlighted-section {
         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;
         box-shadow: 0 8px 8px -4px lightblue;
     }
 
-  .highlighted-content code {
+    .highlighted-section code {
         font-size: 0.875em;
         border: 0.1em solid var(--color-border);
         border-radius: 4px;
@@ -119,10 +113,9 @@ import Footer from "../components/Footer.astro";
     @media only screen 
     and (min-device-width: 360px) 
     and (max-device-width: 812px) {
-
-        .highlighted-content {
+        .section-content {
             font-size: 16px;
             font-weight: bold;
         }
-    }
+}
 </style>

src/pages/social.astro

@@ -25,7 +25,7 @@ import Footer from '../components/Footer.astro';
                         body="Some music I made as a hobby"
                 />
             </ul>
-            <Footer></Footer>
+            <Footer />
         </main>
 </Layout>