From 7cfd8673c3b58135c3b5f6cae674a6fa9a82f5cc Mon Sep 17 00:00:00 2001
From: SondraE <sondra@oddbird.net>
Date: Mon, 1 Jul 2024 14:18:07 -0600
Subject: [PATCH] add winging it 7 & 8

---
 content/blog/wingingit/winging-it-07.md | 53 ++++++++++++++++++++++
 content/blog/wingingit/winging-it-08.md | 59 +++++++++++++++++++++++++
 2 files changed, 112 insertions(+)
 create mode 100644 content/blog/wingingit/winging-it-07.md
 create mode 100644 content/blog/wingingit/winging-it-08.md

diff --git a/content/blog/wingingit/winging-it-07.md b/content/blog/wingingit/winging-it-07.md
new file mode 100644
index 00000000..eda08fed
--- /dev/null
+++ b/content/blog/wingingit/winging-it-07.md
@@ -0,0 +1,53 @@
+---
+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-9.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:
+
+- W
+
+## 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/)
+- [A Cascading Layouts Workshop June 24-26, 2024](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..415f4f11
--- /dev/null
+++ b/content/blog/wingingit/winging-it-08.md
@@ -0,0 +1,59 @@
+---
+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-9.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 us as we 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
+
+## 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)