tweaks: bylines, figure width, center captions, disclaimer size

assets/common/styles/pages/blog.scss

@@ -25,6 +25,12 @@
   @include u-font('sans', 'xs');
   @include u-line-height('sans', 5);
   margin-top: units(1);
+  text-align: center;
+}
+
+.post-article figure {
+  margin-inline-start: 10%;
+  margin-inline-end: 10%;
 }
 
 .post-article blockquote,

content/posts/2024-10-21-18f-folks.md

@@ -2,7 +2,8 @@
 title: "18F Folks: Adopting a new illustration library"
 date: 2024-10-21
 authors:
-- 18F
+- michelle-partogi
+- austin-hernandez
 excerpt: "we've adopted a new illustration style to capture a broad spectrum
 of human experiences"
 image: /assets/blog/18f-folks/blog_banner.jpg
@@ -17,7 +18,13 @@ Previously, we used Pablo Stanley’s <a
 href="https://blush.design/collections/rChdrB8vX8xQJunpDPp8/avatars">Avataaars</a>
 library to represent people.
 
+<figure>
+
 {% image "assets/blog/18f-folks/avataaar_sample.png" "Cartoon representations of three people in a simple, vector style that shows their faces and bust." %}
+<figcaption>Previous 18F representations of people relied on
+Avataaars
+</figcaption>
+</figure>
 
 While able to depict a range of skin tones and ages, the bust portraits
 ultimately proved limiting when trying to represent the vast collective of
@@ -29,9 +36,11 @@ reflects the brand’s signature blue tones and flat forms, <em>18F Folks</em>.
 
 Now our graphics look like:
 
+<figure>
 {% image "assets/blog/18f-folks/slide0.png" "A presentation slide showcasing a cartoon of a woman in a wheelchair holding a microphone. The text next to her says Hear, hear! We're transitioning to 18F Folks for our illustration style." %}
 
 {% image "assets/blog/18f-folks/slide1.png" "A presentation slide with 3 vignettes of the same male in 18F Folks cartoon style. He progresses in expressions from happy, to confused, to frustrated.  Underneath each of his portrait is text as to questions or blockers he has through a generic user journey." %}
+</figure>
 
 With <em>18F Folks</em>, we’re able to construct vignettes of people interacting with
 each other and their environments. This helps us narrate stories about the
@@ -55,7 +64,11 @@ style impacts how our audience perceives us.
 
 Consider this simple presentation slide.
 
-{% image "assets/blog/18f-folks/slide-confused.png" "A presentation slide showing a list on the left of common timekeep mistakes. Next to the list is a shrugging woman in the style of 18F Folks cartoon." %}
+<figure>
+
+{% image_with_class "assets/blog/18f-folks/slide-confused.png" "border border-ink" "A presentation slide showing a list on the left of common timekeep mistakes. Next to the list is a shrugging woman in the style of 18F Folks cartoon." %}
+
+</figure>
 
 While the content presents a matter-of-fact list, the shrugging Peep conveys
 the body language equivalent of “I’m with you. This is confusing.” We opted
@@ -74,7 +87,7 @@ several illustration libraries. Open Peeps was selected as the basis of the
 <em>18F Folks</em> style because it balances professional with approachable.
 
 <figure>
-{% image "assets/blog/18f-folks/scorecard.png" "A spreadsheet grid. The left column has criteria such as open source, matches 18F's voice, etc. The following columns determine if different visual libraries meet the criteria.  Green, yellow, and red cells suggest if criteria are met or not." %}
+{% image_with_class "assets/blog/18f-folks/scorecard.png" "border border-ink" "A spreadsheet grid. The left column has criteria such as open source, matches 18F's voice, etc. The following columns determine if different visual libraries meet the criteria.  Green, yellow, and red cells suggest if criteria are met or not." %}
 
 <figcaption>We created a scorecard to narrow down our options for an
 illustration library</figcaption>
@@ -111,25 +124,25 @@ branding is the public celebration of a group's shared values.
 </figcaption>
 </figure>
 
-## Disclaimer of endorsement
+## Disclaimer of endorsement{.font-heading-md}
 
 The GSA.gov website includes hypertext links, or pointers, to information
 created and maintained by other public and/or private organizations. We
 provide these links and pointers only for your information and convenience.
 When you select a link to an outside website, you are leaving the GSA.gov site
 and are subject to the privacy and security policies of the owners/sponsors of
-the outside website.
+the outside website.{.font-body-2xs}
 
 - We do not control nor guarantee the accuracy, relevance, timeliness, or
-  completeness of information contained on a linked website.
+  completeness of information contained on a linked website.{.font-body-2xs}
 - We do not endorse the organizations sponsoring linked websites and we do not
-  endorse the views they express or the products/services they offer.
+  endorse the views they express or the products/services they offer.{.font-body-2xs}
 - The content of external, non-Federal websites is not subject to Federal
-  information quality, privacy, security, and related guidelines.
+  information quality, privacy, security, and related guidelines.{.font-body-2xs}
 - We cannot authorize the use of copyrighted materials contained in linked
   websites. Users must request such authorization from the sponsor of the linked
-  website.
-- We are not responsible for transmissions users receive from linked websites.
+  website.{.font-body-2xs}
+- We are not responsible for transmissions users receive from linked websites.{.font-body-2xs}
 - We do not guarantee that outside websites comply with Section 508
-  (accessibility requirements) of the Rehabilitation Act.
+  (accessibility requirements) of the Rehabilitation Act.{.font-body-2xs}
 

data/team_members.csv

@@ -251,6 +251,7 @@ michael-torres,Michael,Torres,,/team/michael-torres/
 michael-walker,Greg,Walker,,/team/michael-walker/
 michelle-chronister,Michelle,Chronister,,
 michelle-mcnellis,Michelle,McNellis,,
+michelle-partogi,Michelle,Partogi,,
 michelle-rago,Michelle,Rago,,
 mike-gintz,Mike,Gintz,,
 mike-hsu,Mike,Hsu,,/team/mike-hsu/