Start work on carousel

.eleventy.js

@@ -36,5 +36,8 @@ module.exports = function (eleventyConfig) {
     noreferrer: true,
   })
 
+  eleventyConfig.addPassthroughCopy('./src/portfolio/')
+  eleventyConfig.addPassthroughCopy('./src/fontawesome/')
+
   return {dir: {input: 'src', output: 'dist'}}
 }

.stylelintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "@punkfairie/stylelint-config"
+  "extends": "@punkfairie/stylelint-config",
+  "rules": {
+    "scale-unlimited/declaration-strict-value": false
+  }
 }

src/index.liquid

@@ -24,7 +24,12 @@
     </header>
 
     <main class="Main">
+        <div class="Carousel">
+            <img src="/portfolio/punkfairie.net.png"
+                 alt="Screenshot of punkfairie.net" class="Carousel-img">
 
+            
+        </div>
     </main>
 
     <footer class="Footer" id="footer">

src/style/Carousel.css

@@ -0,0 +1,21 @@
+@layer components {
+  .Carousel {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: auto;
+    block-size: 100%;
+    inline-size: 60%;
+  }
+
+  .Carousel-img {
+    padding: var(--space-3xs);
+    border: var(--space-3xs) solid var(--c-pink);
+  }
+
+  /* stylelint-disable-next-line a11y/media-prefers-reduced-motion */
+  .Carousel-img:hover, .Carousel-img:focus {
+    border-color: var(--c-purple);
+    transition: border-color 500ms;
+  }
+}

src/style/style.css

@@ -5,3 +5,4 @@
 @import url('layout/Header.css');
 @import url('layout/Main.css');
 @import url('layout/Footer.css');
+@import url('Carousel.css');