diff --git a/content/blog/index.njk b/content/blog/index.njk index fc6667de..ad4575ef 100644 --- a/content/blog/index.njk +++ b/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 %} diff --git a/content/blog/wingingit/winging-it-07.md b/content/blog/wingingit/winging-it-07.md new file mode 100644 index 00000000..4b721bbc --- /dev/null +++ b/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) diff --git a/content/blog/wingingit/winging-it-08.md b/content/blog/wingingit/winging-it-08.md new file mode 100644 index 00000000..d60b2d6d --- /dev/null +++ b/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) diff --git a/content/blog/wingingit/winging-it-09.md b/content/blog/wingingit/winging-it-09.md new file mode 100644 index 00000000..f997b5ea --- /dev/null +++ b/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) diff --git a/content/tools/oddcontrast.md b/content/tools/oddcontrast.md index e6494b5e..cacc857f 100644 --- a/content/tools/oddcontrast.md +++ b/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, diff --git a/src/images/winging-it/winging-it-7.jpg b/src/images/winging-it/winging-it-7.jpg new file mode 100644 index 00000000..2ea6dbeb Binary files /dev/null and b/src/images/winging-it/winging-it-7.jpg differ diff --git a/src/images/winging-it/winging-it-8.jpg b/src/images/winging-it/winging-it-8.jpg new file mode 100644 index 00000000..33aab1e7 Binary files /dev/null and b/src/images/winging-it/winging-it-8.jpg differ diff --git a/src/images/winging-it/winging-it-9.jpg b/src/images/winging-it/winging-it-9.jpg new file mode 100644 index 00000000..4f0455d4 Binary files /dev/null and b/src/images/winging-it/winging-it-9.jpg differ