Carousel layout done

src/index.liquid

@@ -33,7 +33,19 @@
       <img src="/portfolio/punkfairie.net.png"
         alt="Screenshot of punkfairie.net" class="Carousel-img">
 
+      <div class="Carousel-title">
+        <a href="https://github.com/punkfairie/punkfairie-site"
+          target="_blank"><i class="fa-brands fa-github"
+            title="Github"></i></a> /
+        punkfairie.net /
+        <a href="https://punkfairie.net/" target="_blank"><i
+            class="fa-solid fa-link" title="Visit project"></i></a>
+      </div>
 
+      <p class="Carousel-text">A personal site; includes blinkie
+        collections and a diary (blog).</p>
+
+      <p class="Carousel-text">Made with Eleventy and SCSS.</p>
     </div>
   </main>
 

src/style/Carousel.css

@@ -2,10 +2,12 @@
   .Carousel {
     display: flex;
     flex-direction: column;
+    gap: var(--space-xs);
     align-items: center;
     margin: auto;
     block-size: 100%;
     inline-size: 60%;
+    text-align: center;
   }
 
   .Carousel-img {

src/style/base.css

@@ -0,0 +1,10 @@
+@layer base {
+  a {
+    color: var(--c-pink);
+  }
+
+  a:hover, a:focus {
+    color: var(--c-purple);
+    transition: color 300ms;
+  }
+}

src/style/style.css

@@ -1,5 +1,8 @@
+@layer reset, base, layout, components;
+
 @import url('@punkfairie/modern-css-reset');
 @import url('theme.css');
+@import url('base.css');
 @import url('layout/Body.css');
 @import url('layout/Site.css');
 @import url('layout/Header.css');