chore: update hat

Author: tatianamac

src/_includes/css/main.css

@@ -6,34 +6,96 @@
   - nav
 navtitle: About
 templateClass: content
-navClass: bg-neon-yellow
-colorMode: dark
-bgColor: neon-yellow
+navClass: bg-mulberry
+colorMode: light
+bgColor: mulberry
 canonical: https://www.tatianamac.com/about
 ---
-<section id="about" class="container">
-      <div class="wrapper">
-        <div class="grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl">
-          <img src="../assets/img/hat.svg" alt="Portrait of me in a space helmet with starry sky backdrop" />
-    </div> 
-
-      <div class="grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl padding-thinn">
-          <h1 class="t-eyebrow">About</h1>
-          <p class="t-black t-serifweight t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl t-height-tight">Insatiably curious.</p>
 
-              <p class="t-black">Tatiana Mac (they/she) is an independent American engineer. They are an open source maintainer who created and are building <a class="t-link-accent-orange" href="https://www.selfdefined.app">Self-Defined</a>, a modern dictionary about us; and <a class="t-link-accent-orange" href="https://github.com/tatianamac/devsofcolour/">Devs of Colour</a>, a database that will prioritise finding undiscovered Black/brown talent through a thoughtful search algorithm.</p>
+<section id="about" class="container">
+  <div class="wrapper">
+    <div class="grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl">
+      <img
+        src="../assets/img/hat.svg"
+        alt="Portrait of me in a space helmet with starry sky backdrop"
+      />
+    </div>
 
-              <p class="t-black">As a consultant, they work directly with organisations to build clear and coherent products and design systems.</p>
+    <div
+      class="grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl padding-thinn"
+    >
+      <h1 class="t-eyebrow t-barbie-pink">About</h1>
+      <p
+        class="t-blush-pink t-serifweight t-chonkfont@xs t-chonkfont@s t-chonkfont@m t-chonkfont@l t-chonkfont@xl t-height-tight"
+      >
+        Insatiably curious.
+      </p>
 
-              <p class="t-black">An international keynote speaker, Tatiana speaks on the intersection of technology and ethics, examining how our products both fit and define our social and environmental settings. You can view their recorded talks on <a class="t-link-accent-orange" href="https://www.youtube.com/watch?v=Hzs_8e3Xhhc&list=PLPhd673abXl7PPmhS4FmuTgPmOyv_xvYy">YouTube</a>.</p>
+      <p
+        class="callout t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-white"
+      >
+        Tatiana Mac (they/she) is an independent Việt-American software engineer and
+        open source maintainer and creator of
+        <a class="t-link-accent-pink" href="https://www.selfdefined.app"
+          >Self-Defined</a
+        >. Tatiana writes, edits, and speaks on building for the web, design
+        systems, and engineering culture.
+      </p>
 
-              <p class="t-black">They believe the trifecta of accessibility, performance, and inclusion can work symbiotically to improve our social landscape digitally and physically. When ethically-minded, she thinks technologists can dismantle exclusionary systems in favour of community-focused, inclusive ones.</p>
+      <h2 class="t-white t-serifweight heading">People over profits ethos</h2>
+      <p class="t-blush-pink">
+        As tech workers, Tatiana believes we have a responsibility to protect
+        people over profits. The trifecta of accessibility, performance, and
+        security can work symbiotically to improve our social landscape
+        digitally and physically. When ethically-minded, Tatiana thinks
+        technologists can dismantle exclusionary systems in favour of
+        community-focused, inclusive ones.
+      </p>
 
-              <p class="t-black">Never totally pleased with design tools, they design in browser to bring performant, semantic, and accessible visual narratives into the web. Their current obsessions are optimising variable fonts, converting raster images into to SVGs, and recreating modernist paintings in CSS grid. When Tatiana can successfully :q vim, they find new countries to explore (36 and counting).</p>
+      <h2 class="t-white t-serifweight heading">Will speak for travel</h2>
+      <p class="t-blush-pink">
+        An international keynote speaker and TEDx alumnus, Tatiana speaks on the
+        intersection of technology and ethics, examining how our products both
+        fit into and define our social and environmental settings. Tatiana has given over 30 talks in over a dozen countries across 5 continents. View
+        a selected playlist of recorded talks on
+        <a
+          class="t-link-accent-pink"
+          href="https://www.youtube.com/watch?v=Hzs_8e3Xhhc&list=PLPhd673abXl7PPmhS4FmuTgPmOyv_xvYy"
+          >YouTube</a
+        >. Visit <a  class="t-link-accent-pink" href="/speaking">Tatiana's speaking page</a> for a comprehensive list of past events, Tatiana's speaker rider, or to inquire about speaking.
+      </p>
 
-              <p class="t-typeweight t-black">Open to remote frontend engineering contracts/roles.</p> 
+      <h2 class="t-white t-serifweight heading">Past careers: Editor; art, creative director</h2>
+      <p class="t-blush-pink">
+        A once-aspiring foreign correspondent and trained journalist, Tatiana is
+        a former editor at
+        <a class="t-link-accent-pink" href="https://www.alistapart.com/"
+          >A List Apart</a
+        >, volunteered for the <em>The Atlantic's</em>
+        <a class="t-link-accent-pink" href="https://covidtracking.com/"
+          >Covid Tracking Project</a
+        >, and has edited numerous technical journals and books, most recently
+        <a
+          class="t-link-accent-pink"
+          href="https://www.oreilly.com/library/view/head-first-c/9781491976692/"
+          >O'Reilly's Head First C#</a
+        >. Before engineering, Tatiana built an extensive career as an art and creative director for clients like Nike and Taco Bell.
+      </p>
 
-          </div>
+    <h2 class="t-white t-serifweight heading">Beyond drone life</h2>
+      <p class="t-blush-pink">
+        A systems thinker, Tatiana's love extends beyond computer language to human languages. Specifically, Tatiana is fascinated by language structures and discovering unexpected patterns, like when seemingly disconnected languages share the same word because of antiquated trade routes. A full-stack linguist, Tatiana can say a few words in many languages, express much in far fewer, and otherwise is not embarassed to try. Tatiana would rather look like a fool if it means being in connection with someone.
+      </p>
+      <p class="t-blush-pink">
+        With a
+        (land) body-count of 36, Tatiana frequents National, Dulles, and Baltimore airports to return home to Washington,
+        DC.
+      </p>
 
-      </div>
+      <p class="t-mono t-barbie-pink t-babyfont@s t-babyfont@m t-babyfont@l">
+        Open to remote software engineering, technical editing, and in-person
+        speaking.
+      </p>
+    </div>
+  </div>
 </section>

src/_includes/css/main.css.map

@@ -103,6 +103,9 @@
   padding-bottom: 0;
 }
 
+@mixin mb-noney() {
+  margin-bottom: 0;
+}
 @mixin mb-teeny() {
   margin-bottom: $teeny;
 }

src/about/index.html

@@ -27,6 +27,7 @@ $dark-grey: #4f4f4f;
 $mid-grey: #767676; // the lightest shade of grey you can get away with, #a11y
 $light-grey: #eeeeee; // for backgrounds only
 
+$mulberry: hsla(311, 100, 13, 1);
 $fuchsia: #b2098b;
 $pink: #ff0dd1;
 $barbie-pink: #ffcff2;

src/assets/img/hat.svg

@@ -201,6 +201,7 @@ img {
 
 $bg-color: (
   "black": #{$black},
+  "mulberry": #{$mulberry},
   "teal-green": #{$teal-green},
   "yellow": #{$yellow},
   "blush-pink": #{$blush-pink},

src/scss/abstracts/_mixins.scss

@@ -456,6 +456,7 @@ $t-color: (
   "teal-green": #{$teal-green},
   "yellow": #{$yellow},
   "blush-pink": #{$blush-pink},
+  "barbie-pink": #{$barbie-pink},
   "baby-blue": #{$baby-blue},
   "royal-blue": #{$royal-blue},
   "true-blue": #{$true-blue},

src/scss/abstracts/_variables.scss

@@ -146,6 +146,15 @@
   background-size: 5em 5em, 5em 5em;
 }
 
+.zigzag-mulberry-green {
+  height: 5em;
+  background: linear-gradient(45deg, transparent 50%, $mulberry 50%),
+    linear-gradient(90deg, transparent 50%, $green 50%),
+    linear-gradient(135deg, $mulberry 50.25%, $leaf-green 50%), 0 50%;
+  background-repeat: repeat-x;
+  background-size: 5em 5em, 5em 5em;
+}
+
 .zigzag-black-green {
   height: 5em;
   background: linear-gradient(45deg, transparent 50%, $black 50%),

src/scss/base/_base.scss

@@ -32,6 +32,7 @@
 
 // 6. Page-specific styles
 @import
+  'pages/about',
   'pages/home',
   'pages/writing',
   'pages/speaking';

src/scss/base/_typography.scss

@@ -0,0 +1,5 @@
+.heading {
+  margin-bottom: 0;
+  margin-top: $thicc;
+  line-height: 1;
+}

src/scss/components/_zigzag.scss

@@ -23,8 +23,8 @@
 }
 
 .callout {
-  font-family: $sans-serif-bold;
-  line-height: 1em;
+  font-family: $sans-serif-accent;
+  line-height: 1.25em;
 }
 
 .river {