Merge pull request #648 from oddbird/winging-it-live-oddcontrast

Winging It Live - OddContrast

content/blog/index.njk

@@ -29,6 +29,8 @@ eleventyComputed:
     and more with these articles, videos,
     podcasts, and case studies.
     {% endif %}
+eleventyImport:
+  collections: ["posts"]
 ---
 
 {% import 'post.macros.njk' as post %}

content/blog/wingingit/winging-it-07.md

@@ -0,0 +1,59 @@
+---
+title: CSS Container Queries in Practice
+episode: 7
+tags:
+  - Container Queries
+  - CSS
+author:
+  - miriam
+  - stacy
+date: 2024-05-16
+length: 45 mins
+image:
+  src: winging-it/winging-it-7.jpg
+media:
+  - youtube: Ci2DLDQYup0&t=1714s
+summary: |
+  Miriam Suzanne and Stacy Kvernmo
+  talk about CSS Container Queries and the
+  unexpected things that happen
+  when you add containment.
+  Some elements completely collapse!
+  What's going on there?
+  We had questions and thought you might too.
+  So we talk through the issue
+  in our monthly live stream.
+---
+
+{% import "embed.macros.njk" as embed %}
+{% import "utility.macros.njk" as utility %}
+
+{{ embed.figure(
+  data=media
+) }}
+
+{{ utility.main_action(
+  'Subscribe to Channel »',
+  subscribe_url
+) }}
+
+## What we cover:
+
+- What are container queries and why you should use them
+- How container queries differ from media queries
+- Why some layouts collapse when you add containment
+- Size containment with `contain-intrinsic-size`
+- Why should we avoid adding containment on root
+- Why a container can't query itself
+- An opt-out strategy to remove containment
+
+## Links:
+
+- [Can We Query the Root Container?](https://www.oddbird.net/2023/07/05/contain-root/)
+- [Ahmad Shadeed's Interactive Guide to CSS Container Queries](https://ishadeed.com/article/css-container-query-guide/)
+- [Cascading Layouts Workshop](https://www.oddbird.net/workshops/cascading-layouts/)
+
+## Demos:
+
+- [Container Queries and Birds](https://codepen.io/stacy/pen/abrvZNL?editors=1100)
+- [Reduced Test Case](https://codepen.io/miriamsuzanne/pen/YzbyeEx)

content/blog/wingingit/winging-it-08.md

@@ -0,0 +1,65 @@
+---
+title: CSS Anchor Positioning in Practice
+episode: 8
+sponsors: true
+tags:
+  - Anchor Positioning
+  - CSS
+  - Polyfill
+author:
+  - james
+  - miriam
+date: 2024-05-30
+length: 53 mins
+image:
+  src: winging-it/winging-it-8.jpg
+media:
+  - youtube: 76hIB2L_vs4&t=1s
+summary: |
+  What is Anchor Positioning?
+  Why is it exciting?
+  What can you use it for?
+  How does the polyfill work?
+  Join James Stuckey Weber and Miriam Suzanne
+  as they talk through these questions
+  and answer yours in our monthly live stream.
+---
+
+{% import "embed.macros.njk" as embed %}
+{% import "utility.macros.njk" as utility %}
+
+{{ embed.figure(
+  data=media
+) }}
+
+{{ utility.main_action(
+  'Subscribe to Channel »',
+  subscribe_url
+) }}
+
+## What we cover:
+
+- What is Anchor Positioning?
+- Sizing based on the anchor element
+- Anchoring Popovers to their trigger
+- Scoping an anchor
+- Setting up fallback positions when your element overflows
+- Fun demos of what is now possible
+
+## Links:
+
+- [Inset Area](https://anchor-tool.com/)
+- [Polyfill](https://github.com/oddbird/css-anchor-positioning)
+
+## Demos:
+
+- [Anchor Size CodePen 1](https://codepen.io/jamessw/pen/dyENqQz)
+- [Anchor Size CodePen 2](https://codepen.io/jamessw/pen/OJYWorB)
+- [Popover](https://codepen.io/jamessw/pen/MWdjjQj)
+- [Anchor Scope](https://codepen.io/jamessw/pen/dyEXKeP)
+- [Fallback options with `position-try`](https://codepen.io/jamessw/pen/abrZPQY)
+- [More fallbacks](https://codepen.io/jamessw/pen/OJYbjyE)
+- [Textarea box with direction](https://codepen.io/jamessw/pen/qBGNgdL)
+- [Side note](https://codepen.io/jamessw/pen/gOJMyjN)
+- [Anchor on slide thumb](https://codepen.io/jamessw/pen/KKLMJKm)
+- [Multiple anchors](https://codepen.io/jamessw/pen/ZENpWao)

content/blog/wingingit/winging-it-09.md

@@ -0,0 +1,68 @@
+---
+title: Using New Color Formats
+episode: 9
+sponsors: true
+tags:
+  - Accessibility
+  - Color
+  - Design
+  - Figma
+  - OddTools
+author:
+  - james
+  - miriam
+  - stacy
+date: 2024-06-27
+length: 53 mins
+image:
+  src: winging-it/winging-it-9.jpg
+media:
+  - youtube: Lq4saw4Rqe0
+summary: |
+  Miriam Suzanne, Stacy Kvernmo, and James Stuckey Weber
+  demo how to use new color formats with
+  [OddContrast](https://www.oddcontrast.com/),
+  a color tool for previewing, accessibility testing,
+  and selecting the format/space.
+---
+
+{% import "embed.macros.njk" as embed %}
+{% import "utility.macros.njk" as utility %}
+
+{{ embed.figure(
+  data=media
+) }}
+
+{{ utility.main_action(
+  'Subscribe to Channel »',
+  subscribe_url
+) }}
+
+## What we cover:
+
+- What is OddContrast?
+- Why we made OddContrast
+- What are the new color formats, and why use them?
+- What does "in gamut" mean?
+- Specifying fallbacks
+- Why care about contrast?
+- How does alpha impact contrast?
+
+## Links:
+
+- [OddContrast](https://www.oddcontrast.com/)
+- [OddContrast GitHub Issues](https://github.com/oddbird/oddcontrast/issues)
+- [Color.js](https://colorjs.io/)
+- [W3C CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/)
+- [Okay, Color Spaces](https://ericportis.com/posts/2024/okay-color-spaces/)
+- [Palette Juicer](https://keyboarddanni.github.io/palettejuicer/)
+- [Oklch.com](https://oklch.com)
+- [Gamut Mapping Gradients](https://apps.colorjs.io/gamut-mapping/gradients?from=oklch%2890%25+.4+250%29&to=oklch%2840%25+.1+20%29)
+
+## Demos:
+
+- [Color Clipping v Mapping CodePen](https://codepen.io/miriamsuzanne/pen/rNRoBXO?editors=1010)
+
+## Support OddContrast:
+
+- [OddBird Open Source on Open Collective](https://opencollective.com/oddbird-open-source)

content/tools/oddcontrast.md

@@ -7,6 +7,8 @@ logo: oddcontrast
 image:
   position: top
   src: projects/contrast-hero.jpg
+media:
+  - youtube: Lq4saw4Rqe0
 oss: owner
 author: oddbird
 action:
@@ -27,6 +29,10 @@ summary: |
 
 {% import 'embed.macros.njk' as embed %}
 
+{{ embed.figure(
+  data=media
+) }}
+
 ## Support for Newer Color Formats and Spaces
 
 In additional to Oklch, Oklab, and P3, OddContrast also includes hex, HSL, Lab,