accessibility playbook launch post

src/_includes/layouts/blog-post.liquid

@@ -5,12 +5,8 @@ layoutType: post
 <div class="blog-post">
     <section class="blog-post__heading">
         <h1 class="blog-post__title">{{title}}</h1>
-        {% if thoughtStatus %}
-            <p class="blog-post__thought-status">{{ thoughtStatus }}</p>
-        {% endif %}
         <p class="blog-post__date">Posted on {{ date | postDate }}</p>
         <p class="blog-post__read-time">{{content | emojiReadTime}}</p>
-
     </section>
     {% if headerImage %}
         {% assign headerImageAltText = "" %}

src/_includes/layouts/home.liquid

@@ -27,11 +27,11 @@ layoutType: home
                 <li class="post-preview">
                     <a class="post-preview__link" href="{{ post.url }}">
                         <h2 class="post-preview__title">{{ post.data.title }}</h2>
+                    </a>
                         {% if post.data.subtitle %}
                             <p class="post-preview__subtitle">{{ post.data.subtitle }}</p>
                         {% endif %}
                         <p class="post-preview__meta">Posted on {{ post.data.date | postDate }}</p>
-                    </a>
                 </li> 
             {% endfor %}
         </ul>
@@ -48,14 +48,25 @@ layoutType: home
             {% assign new_posts =  collections.work | reverse %}
             {% for post in new_posts limit:4 %}
                 <li class="work-preview">
-                    <a class="work-preview__link" href="{{ post.url }}">
-                        <div class="work-preview__thumbnail">
-                            {% if post.data.image %}
-                                {% image post.data.image, "" %}
-                            {% endif %}
+                    {% if post.data.exampleLink %}
+                        <a class="work-preview__link" href="{{ post.data.exampleLink }}" target="_blank">
+                            <div class="work-preview__thumbnail">
+                                {% if post.data.image %}
+                                    {% image post.data.image, "" %}
+                                {% endif %}
+                            </div>
+                            <p class="work-preview__title">{{ post.data.title }}</p>
+                        </a>
+                    {% else %}
+                        <div class="work-preview__inner">
+                            <div class="work-preview__thumbnail">
+                                {% if post.data.image %}
+                                    {% image post.data.image, "" %}
+                                {% endif %}
+                            </div>
+                            <p class="work-preview__title">{{ post.data.title }}</p>
                         </div>
-                        <p class="work-preview__title">{{ post.data.title }}</p>
-                    </a>
+                    {% endif %}
                 </li> 
             {% endfor %}
         </ul>

src/_includes/layouts/writing.njk

@@ -18,11 +18,11 @@ layoutType: writing
                         <li class="post-preview">
                             <a class="post-preview__link" href="{{ post.url }}">
                                 <h3 class="post-preview__title">{{ post.data.title }}</h3>
+                            </a>
                                 {% if post.data.subtitle %}
                                     <p class="post-preview__subtitle">{{ post.data.subtitle }}</p>
                                 {% endif %}
                                 <p class="post-preview__meta">Posted on {{ post.data.date | postDate }}</p>
-                            </a>
                         </li> 
                     {% endfor %}
                 </ul>

src/sass/partials/_base.scss

@@ -57,7 +57,11 @@ p {
     margin-top: .75rem;
 
     a {
+        color: var(--link-color);
         text-decoration: underline;
+        text-decoration-skip-ink: auto;
+        text-decoration-thickness: 2px;
+        text-underline-offset: .2ex;
     }
 }
 

src/sass/partials/_blog.scss

@@ -27,7 +27,7 @@
 }
 
 .blog-year {
-    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
+    font-size: 2rem;
     margin: 0;
 }
 
@@ -43,27 +43,27 @@
 
 .post-preview__link {
     align-items: flex-start;
+    color: var(--link-color);
     display: flex;
     flex-direction: column;
     gap: var(--space-3x);
     justify-content: center;
     text-decoration: none;
-    padding-block: var(--space-4x);
+
+    &:hover,
+    &:focus-visible {
+        text-decoration: underline;
+        text-decoration-skip-ink: auto;
+        text-decoration-thickness: 2px;
+        text-underline-offset: .2ex;
+    }
 }
 
 .post-preview__title {
     font-size: 1.25rem;
     font-weight: bold;
     line-height: 1.2;
     margin: 0;
-
-    .post-preview__link:hover &,
-    .post-preview__link:focus-visible & {
-        text-decoration: underline;
-        text-decoration-skip-ink: auto;
-        text-decoration-thickness: 2px;
-        text-underline-offset: .2ex;
-    }
 }
 
 .post-preview__subtitle {
@@ -188,4 +188,11 @@
             margin-block-start: 0.5rem; 
         }
     }
+}
+
+.blog-post__tag-list {
+    display: flex;
+    gap: var(--space-1x);
+    max-width: 80ch;
+    width: 100%;
 }

src/sass/partials/_themes.scss

@@ -2,6 +2,7 @@
     --background: var(--canvas);
     --accent: var(--tangerine);
     --text-color: var(--slate);
+    --link-color: var(--umber);
     --hairline-color: var(--slate);
 
     --intro-block-background: var(--slate);
@@ -23,8 +24,9 @@
 
 [data-theme='dark'] {
     --background: var(--dark-blue);
-    --accent: var(--light-blue);
+    --accent: var(--med-blue);
     --text-color: var(--off-white);
+    --link-color: var(--light-blue);
     --hairline-color: var(--off-white);
 
     --intro-block-background: var(--off-white);

src/sass/partials/_variable.scss

@@ -1,9 +1,12 @@
 :root {
     --canvas: #fffaf5;
     --tangerine: #ffba68;
+    --umber: #AD5E00;
+    --magenta: #c81593;
     --slate: #434345;
-    --dark-blue: #28393e;
-    --light-blue: #425f71;
+    --dark-blue: #1f272b;
+    --med-blue: #0271b6;
+    --light-blue: #0692e6;
     --off-white: #f0f0f0;
     --white: #ffffff;
 
@@ -27,6 +30,7 @@
     --background: var(--canvas);
     --accent: var(--tangerine);
     --text-color: var(--slate);
+    --link-color: var(--umber);
     --hairline-color: var(--slate);
 
     --intro-block-background: var(--slate);
@@ -49,8 +53,9 @@
 @media (prefers-color-scheme: dark) {
     :root {
         --background: var(--dark-blue);
-        --accent: var(--light-blue);
+        --accent: var(--med-blue);
         --text-color: var(--off-white);
+        --link-color: var(--light-blue);
         --hairline-color: var(--off-white);
 
         --intro-block-background: var(--off-white);

src/work/accessibility-playbook.md

@@ -0,0 +1,8 @@
+---
+date: 2023-09-15T20:00:00Z
+exampleLink: https://accessibility.blind3y3design.com/
+title: Accessibility Playbook
+image: ./src/images/accessibility-playbook/accessibility-playbook-home.png
+subtitle: A resource manual to create more accessible digital products
+---
+

src/work/nebula-design-system.md

@@ -0,0 +1,8 @@
+---
+date: 2023-02-15T20:00:00Z
+# exampleLink: https://accessibility.blind3y3design.com/
+title: Nebula Design System
+image: ./src/images/discoveryed/nebula-home.png
+subtitle: Reworking Discovery Education's Design System from the Ground Up
+---
+

src/writing/accessibility-playbook.md

@@ -0,0 +1,16 @@
+---
+date: 2023-09-28T18:50:00
+title: "A Playbook for Accessibility"
+tags: 
+    - accessibility
+    - ux
+    - ui
+    - development
+    - product
+---
+
+In my work with Design Systems, accessibility often comes up as a topic. Questions can range from the incredibly basic, "What is accessibility?" to the more complex and nuanced, "Is the language of this modal clear enough?" Part of my job is to help guide the designers, developers, content producers, and product owners on their individual journeys understanding accessibility and how it impacts their work.
+
+In an effort to not only help the teams I work with, but the larger digital product community I created what I’m calling the [Accessibility Playbook](https://accessibility.blind3y3design.com/), a manual for teams and individuals to reference in order to ensure the products and experiences they create can be used by the largest number of people.
+
+Accessibility is an incredibly dense topic to begin learning, and while there are [many](https://web.dev/learn/accessibility/) [resources](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility) [available](https://www.w3.org/WAI/WCAG21/Understanding/) already it never hurts to have more. I hope to grow this playbook beyond the basics of what accessibility is, to contain answers to common questions and bring clarity to potential pitfalls. Additionally, I would like to provide helpful insight and useful examples of how to create accessible products for all practices that contribute to the overall accessibility of a product.

src/writing/cassidoo-9-18-interview-question.md

@@ -1,8 +1,9 @@
 ---
 date: 2023-09-23T18:50:00
 title: "Rendezvous with Cassidoo Newsletter 9/18 Interview Question"
-thoughtStatus: Seedling
-tags: public learning, quick thoughts, cassidoo
+tags: 
+  - public learning
+  - cassidoo
 ---
 
 Here's my answer to the [Sept. 18th Rendezvous with Cassidoo](https://buttondown.email/cassidoo/archive/let-us-remember-that-our-voice-is-a-precious-gift/) newsletter interview question. It was a fun little coding challenge.

src/writing/css-reset.md

@@ -1,8 +1,8 @@
 ---
 date: 2023-09-18T16:00:00
 title: "CSS Reset, Normalize, and Base Styles"
-thoughtStatus: Evergreen
-tags: css, quick thoughts
+tags: 
+    - css
 ---
 
 Inspired by a conversation between Dave and Chris on the recent shoptalk show [episode 582](https://shoptalkshow.com/582/), I wanted to take a look at the history of CSS resets and see what I could put into a “reset” or “normalize” file that was tailored to my specific sensibilities. 

src/writing/design-a11y.md

@@ -4,8 +4,8 @@ title: "Be a Design A11y: An Introduction to Accessibility"
 headerImage: ./src/images/design-a11y/design-a11y-header.svg
 headerImageAlt: "A graphic displaying multiple individuals who may present with some form of disability"
 headerImageContained: true
-thoughtStatus: Evergreen
-tags: accessibility, essay
+tags: 
+    - accessibility
 ---
 
 This is an introductory overview of Accessibility and how it relates to designing and building digital products and experiences. The goal of this post is to provide a general reference for high-level accessibility topics that anyone can use. It is assumed that readers have basic computer literacy and an understanding of how digital products are built.

src/writing/starting-a-digital-garden.md

@@ -1,8 +1,9 @@
 ---
 date: 2023-09-23T18:44:00
 title: "Starting a Digital Garden"
-thoughtStatus: Seedling
-tags: digital gardening, quick thoughts, personal development
+tags: 
+    - digital gardening
+    - personal development
 ---
 
 This idea was inspired by a conversation at the end of the ShopTalk show [Episode 583](https://shoptalkshow.com/583/#t=53:42) with [Maggie Appleton](https://maggieappleton.com/).