feat: new meme, apply styles

memes/index.html

@@ -8,36 +8,6 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Griffy&family=Kalam:wght@300;400;700&family=Creepster&display=swap" rel="stylesheet">
 <style>
-  :root {
-    --witch-purple: #2B1B3D;
-    --witch-plum: #44275A;
-    --witch-rose: #A8577E;
-    --witch-mauve: #D4A5C7;
-    --witch-lavender: #E8D5E8;
-    --witch-black: #0A0009;
-    --witch-silver: #C0C0C0;
-    --witch-moon: #F5F5F5;
-    --witch-shadow: rgba(10, 0, 9, 0.7);
-
-    --foreground: var(--witch-purple);
-    --background: var(--witch-moon);
-    --accent: var(--witch-rose);
-    --border: var(--witch-plum);
-    --highlight: var(--witch-mauve);
-    --card-bg: #ffffff;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --foreground: var(--witch-lavender);
-      --background: var(--witch-black);
-      --accent: var(--witch-mauve);
-      --border: var(--witch-rose);
-      --highlight: var(--witch-plum);
-      --card-bg: #1a0f24;
-    }
-  }
-
   * {
     box-sizing: border-box;
     margin: 0;
@@ -299,6 +269,18 @@
         </div>
       </article>
 
+      <article class="meme-card">
+        <div class="meme-image-wrapper">
+          <img src="https://cdn.nhcarrigan.com/bite.jpg" alt="Anime girl lounging on a red sofa with a playful expression" loading="lazy">
+        </div>
+        <div class="meme-body">
+          <h2 class="meme-title">I Don't Bite... Usually</h2>
+          <p class="meme-caption">&ldquo;Don't be shy. I don't bite... usually.&rdquo;</p>
+          <p class="meme-description">Lounging on a red sofa with a suggestive smirk and a fang peeking through. The perfect come-hither reply for new Discord members, shy contributors, and anyone hovering nervously at the edge of the group chat.</p>
+          <button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/bite.jpg" aria-label="Copy URL for I Don't Bite Usually meme">Copy URL</button>
+        </div>
+      </article>
+
       <article class="meme-card">
         <div class="meme-image-wrapper">
           <img src="https://cdn.nhcarrigan.com/hire.jpeg" alt="Tearful anime girl in ornate dress and tiara" loading="lazy">
@@ -468,10 +450,6 @@
       </article>
 
     </section>
-
-    <footer>
-      <p>Styled with the <a href="https://style.nhcarrigan.com">NHCarrigan style guide</a>. ✨ Built with help from Hikari~ 🌸</p>
-    </footer>
   </main>
 
   <script>
@@ -505,5 +483,6 @@
       }, 2000);
     });
   </script>
+  <script src="https://cdn.nhcarrigan.com/headers/index.js" async defer></script>
 </body>
 </html>