pretty blockquotes

.eleventy.js

@@ -26,7 +26,7 @@ const markdownClassMapping = {
   h4: ['text-xl', 'mt-2', 'text-text'],
   h5: ['text-lg', 'mt-2', 'text-text'],
   h6: ['mt-2', 'text-text'],
-  blockquote: ['font-mono', 'italic', 'border-l-2', 'border-lavender', 'px-4', 'pt-4', 'pb-px', 'my-8', 'bg-mantle'],
+  blockquote: ['font-mono', 'fancy-blockquote'],
   a: ['link'],
   s: ['text-red'],
   p: ['mb-4', 'text-text', 'leading-7'],

blog/multimedia_for_invisible.md

@@ -1,15 +1,17 @@
 ---
-title: Crafting Better Multimedia for the Invisible People All Around Us
-description: For a more universally accessible web, educators are adjusting how they teach software engineering, user experience design, content writing, and multimedia production.
-coverImage: /img/content/multimedia_for_invisible.webp
-date: 2023-03-11
+id: multimedia_for_invisible
+aliases: []
 tags:
   - College
   - Writing
   - A11y
+coverImage: /img/content/multimedia_for_invisible.webp
+date: "2023-03-11"
+description: For a more universally accessible web, educators are adjusting how they teach software engineering, user experience design, content writing, and multimedia production.
+title: Crafting Better Multimedia for the Invisible People All Around Us
 ---
 Posted originally on [Medium: Crafting Better Multimedia for the Invisible People All Around Us](https://medium.com/@hergaiety/crafting-better-multimedia-for-the-invisible-people-all-around-us-952f22070e6b)
 
-> All of us deserve a more equitable web: professionals, creating better multimedia on a more technologically advanced web; educators, with the passion to teach accessibility early, broadly, and with support; students, with the knowledge and tools that will continue to develop from generation to generation.
+> _All of us deserve a more equitable web:_ professionals, creating better multimedia on a more technologically advanced web; educators, with the passion to teach accessibility early, broadly, and with support; students, with the knowledge and tools that will continue to develop from generation to generation.
 
 I've done more [writing on Social Media for Public Good on my school blog here](https://gaiety.college/category/icm-500). You may also follow the rest of my journey back to university as I pursue my masters at Quinnipiac @ [gaiety.college](https://gaiety.college/).

index.md

@@ -1,13 +1,17 @@
 ---
-layout: pinned.njk
-title: Ava **Gaiety** W.
+id: index
+aliases: []
+tags: []
 description: Portfolio containing work experience, code, volunteering and more!
 eleventyExcludeFromCollections: true
+layout: pinned.njk
+title: Ava **Gaiety** W.
 ---
 
-> 🐕 Someone taught a dog to code and now it's everyone's ~~problem~~ fortune 💻
+
+> Someone taught a dog to code and now it's everyone's ~~problem~~ fortune
 >
-> ([Fae/Femme/Faer](https://pronoun.monster/fae/faer/faer/femme/femmeself) or [She/Her](https://pronoun.monster/she/her/her/hers/herself))
+> [Fae/Femme/Faer](https://pronoun.monster/fae/faer/faer/femme/femmeself) or [She/Her](https://pronoun.monster/she/her/her/hers/herself)
 
 Peek at my [open source engineering _(OSS)_ samples](/repos) (or my [Git on Forgejo](https://git.basking.monster/)), or [work projects](/work), or [conference talks, and volunteer work](/community).
 

styles.css

@@ -98,3 +98,47 @@ pre {
 .hljs-comment {
   font-style: italic;
 }
+
+.fancy-blockquote {
+  max-width: 30rem;
+  font-size: 1.4rem;
+  background: linear-gradient(
+    rgb(var(--ctp-green)),
+    rgb(var(--ctp-yellow))
+  );
+  background-clip: text;
+  color: transparent;
+  margin: 0 auto 1rem;
+  padding: .75rem;
+  display: flex;
+  flex-direction: column;
+  gap: .75rem;
+  position: relative;
+
+  &:before,
+  &:after {
+    content: '';
+    width: 5rem;
+    height: 2px;
+    position: absolute;
+    left: calc(50% - 5rem);
+  }
+
+  &:before {
+    background-color: rgba(var(--ctp-green));
+    top: 0;
+  }
+
+  &:after {
+    background-color: rgba(var(--ctp-yellow));
+    bottom: 0;
+  }
+
+  .text-text {
+    color: transparent !important;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+}