feat: Add eva.town badge! (#473)

src/components/BadgeBanner.astro

@@ -0,0 +1,43 @@
+---
+import badge from "../content/badges/eva-town.png";
+---
+
+<div class="banner">
+  <div class="badge">
+    <img src={badge.src} width={88} alt="Eva Town badge" />
+  </div>
+  <div class="text">
+    Download my badge to link to this site, or check out the <a
+      href="/webrings#badges">badge collection</a
+    >. Let me know if you have a badge you want me to link to.
+  </div>
+</div>
+
+<style lang="scss">
+  .banner {
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+    margin-inline: auto;
+    border: 1px solid var(--gray-6);
+    border-radius: var(--radius-s);
+    margin-block-start: var(--space-xl);
+    font-size: var(--step--1);
+    color: var(--gray-11);
+    line-height: var(--line-height-snug);
+    overflow: hidden;
+
+    .badge {
+      flex-shrink: 0;
+      background: var(--gray-3);
+      padding: var(--space-s) var(--space-m);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .text {
+      padding: var(--space-s) var(--space-m);
+    }
+  }
+</style>

src/components/Subscribe/Dialogue/Emote.tsx

@@ -20,7 +20,7 @@ interface EmoteProps {
 }
 
 const color = {
-  outline: gray.gray1,
+  outline: gray.gray6,
   highlight: gray.gray9,
   dark: gray.gray12,
 };
@@ -212,6 +212,7 @@ export const Emote = ({ emote, onEmoteClick }: EmoteProps) => {
         viewBox="0 -0.5 48 48"
         shapeRendering="crispEdges"
         className="emote"
+        style={{ backgroundColor: color.outline }}
         width="48"
         height="48"
       >

src/components/Subscribe/Dialogue/dialogue.css

@@ -71,8 +71,6 @@
   aspect-ratio: 1;
   user-select: none;
   flex-shrink: 0;
-  box-shadow: 0 0 0 2px var(--gray-12);
-  background-color: var(--gray-12);
   border-radius: var(--radius-xs);
   transform: scale(-1, 1);
 }

src/content/badges/badges.yml

@@ -1,5 +1,5 @@
-- img: ./eva.gif
-  alt: EVA
+- img: ./eva-town.png
+  alt: Eva Town
 - img: ./queer-coded.gif
   alt: Queer Coded
   url: https://queercoded.dev/

src/content/pages/about/index.mdx

@@ -2,10 +2,12 @@
 title: About Eva
 description: Pushing pixels (non-derogatory).
 datePublished: 2023-10-03 01:03:55-04:00
-dateModified: 2024-06-14 19:05:49
+dateModified: 2024-06-26 02:08:14-04:00
 ogImage: ./img1200.webp
 ---
 
+import BadgeBanner from "../../../components/BadgeBanner.astro";
+
 I began coding in the late 2000s, typing into a textarea of vBulletin for a Nintendo fan forum. Without syntax highlighting, `border-radius`, or `flexbox`, I'd spend hours exporting assets from Photoshop and laying out content in CSS.
 
 Type a few characters, and suddenly every `button` changes colors on hover. (From blue to... a slightly different blue!) I thought this was the coolest thing in the world.
@@ -14,10 +16,12 @@ I still think coding is cool.
 
 Most of my job titles have included the word "designer", but code is my medium and the browser is my favorite design tool. I believe that designing for the web means working _in the medium_ of the web—namely, HTML and CSS. Interactive mediums deserve interactive iteration.
 
-I love the web, but when I need to think about gnarly problems, I take my sketchbook and my pen, I find a quiet place, and I write.
+I love working digitally, but when I need to think about gnarly problems, I take my sketchbook and my pen, I find a quiet place to sit, and I write.
+
+I currently work at [Scribe](https://scribehow.com) as a Senior Design Engineer. Previously, I spent time building things at [Cityblock](https://cityblock.com), [Dropbox](https://dropbox.com), and [Swiftype](https://swiftype.com). You can [download my resume here](/downloads/eva-decker-resume.pdf).
 
-For the past three years, I've worked as a freelance designer and developer, embedding on teams to strengthen design systems. I try to help designers learn more about code, and I try to convince engineers they have better design instincts than they think. Sometimes I succeed.
+In my free time I play piano and listen to city pop and noodle with synths. I like [reading](https://goodreads.com/evadecker) about urbanism, transit, and queer history. I'd like to have a non-digital garden one day—one with dirt.
 
-Occasionally I play piano and listen to city pop and noodle with synths. I like [reading](https://goodreads.com/evadecker) about urbanism, transit, and queer history. I'd like to have a garden one day. I'm still a Nintendo fan.
+Always open to chats and coffee in NYC. [Say hello!](mailto:hey@evadecker.com)
 
-I'm **not** currently available for new freelance or full-time work, but you can still [download my resume](/downloads/eva-decker-resume.pdf). I'm always open to chats and coffee in NYC. Say hello!
+<BadgeBanner />

src/pages/webrings.astro

@@ -39,7 +39,7 @@ const dateModified = new Date("2024-05-17 10:02:38-04:00");
       </div>
     </section>
   </Center>
-  <section class="badge-section">
+  <section id="badges" class="badge-section">
     <div class="badges">
       {
         badges.data.map((badge) => (