Merge pull request #435 from oddbird/speaking

Update workshop description, and add featured workshop

content/_includes/talks.macros.njk

@@ -136,16 +136,12 @@ params:
             ) }}
           {% endh %}
 
-          {% if not compact %}
-            {% if not event.is_future %}
-              {{ links(event) }}
-            {% elif event.data.discount %}
-              <p class="event-discount">
-                Use discount code
-                <code>{{ event.data.discount.code }}</code>
-                to get <strong>{{ event.data.discount.amount }} off</strong>
-              </p>
-            {% endif %}
+          {% if not event.is_future %}
+            {{ '' if compact else links(event) }}
+          {% elif event.data.note %}
+            <p class="event-note">
+              {{ event.data.note | mdInline | safe }}
+            </p>
           {% endif %}
         </li>
       {%- endfor -%}

content/talks.njk

@@ -1,25 +1,22 @@
 ---
 title: Talks & Workshops
-sub: Bring us to your conference or browse past talks
-image:
-  src: talks/miriam.jpg
-  alt: Miriam Suzanne speaking at a conference
-  position: left center
+sub: Bring us to your event or browse past talks
 action:
-  text: Hire us for conference talks »
+  text: Hire us to give a talk or workshop »
   url: /contact/
 summary: |
-  **We provide award-winning conference talks & workshops**
+  **We provide award-winning talks & workshops**
+  for companies or conferences,
   to help you create resilient web applications
   and design systems --
   improving team process, communication,
   site performance, and accessibility.
-  Missed a conference?
   Dive into the posts below
   for the latest videos & slides,
-  and upcoming conference dates.
+  and upcoming conference or workshop dates.
 ---
 
+{% import 'utility.macros.njk' as utility %}
 {% import 'quotes.macros.njk' as quotes %}
 {% import 'layout.macros.njk' as layout %}
 {% import 'talks.macros.njk' as talks %}
@@ -30,14 +27,38 @@ summary: |
   slugs=['spot-on', 'popular-tutorial']
 ) }}
 
+{% set fw = collections._talk | findPage('data.feature', 'workshop') %}
+{% if fw %}
+  {{ layout.title('Featured Workshop') }}
+  <article {{ post.aria_label(item) }} class="feature-workshop">
+    {{ post.hero(fw.data.image, 'post') }}
+    <header class="training-header">
+      {{ post.banner(fw) }}
+      {{ post.subtitle(fw.data.sub) }}
+      {{ post.byline(fw, collections) }}
+    </header>
+
+    <div class="training-detail">
+      {{ fw.data.summary | md | safe }}
+
+      {% if fw.data.action %}
+        {{ utility.main_action(
+          fw.data.action.text,
+          url=fw.data.action.url
+        ) }}
+      {% endif %}
+    </div>
+  </article>
+{% endif %}
+
 {{ talks.section(
   title='Upcoming Events',
   events=collections.all | getPublic | getEvents | getFuture,
   all=false,
   by_bird=collections
 ) }}
 
-{{ layout.title('Talks & Workshops') }}
+{{ layout.title('All Talks & Workshops') }}
 {% call layout.grid('training') %}
   {% for item in collections._talk | getPublic | eventSort | reverse %}
     <article {{ post.aria_label(item) }} class="training-item">

content/workshops/advanced-css.md

@@ -1,7 +1,7 @@
 ---
 title: Advanced CSS Workshop
 banner: Advanced CSS for Modern Applications
-sub: with practical use-cases, tooling, and pitfalls
+sub: A workshop with practical use-cases, tooling, and pitfalls
 author: miriam
 date: 2019-04-18
 image:

content/workshops/cascading-styles-deep.md

@@ -1,10 +1,15 @@
 ---
-title: Cascading Styles
-sub: A CSS Deep Dive
+title: Cascading Style Systems
+sub: A workshop on resilient & maintainable CSS
+feature: workshop
 author: miriam
 date: 2023-01-09
+action:
+  text: Hire us to give a workshop »
+  url: /contact/
 image:
-  src: talks/mia-back.jpg
+  src: talks/mia-smashing-de.jpg
+  position: top
   alt: |
     Mia from behind,
     standing at a laptop -
@@ -17,71 +22,166 @@ tags:
   - Cascade Layers
   - Container Queries
   - CSS Scope
-  - Color
+  - CSS Nesting
 events:
+  - venue: Smashing Workshops
+    date: 2024-02-26
+    adr: Online
+    url: https://smashingconf.com/online-workshops/workshops/modern-css-miriam-suzanne/
+    note: >
+      Tickets [on sale now](https://smashingconf.com/online-workshops/workshops/modern-css-miriam-suzanne/)!
   - venue: Smashing Workshops
     date: 2023-09-06
     adr: Freiburg, Germany
     url: https://smashingconf.com/freiburg-2023/workshops/miriam-suzanne/
 summary: |
-  It’s a great time to revisit
-  everything you thought you knew about CSS.
-  Join Miriam for a deep dive
-  into what makes the language work,
-  and how we can harness its power
-  to develop resilient and delightful experiences
-  that hold up across browsers, languages, and device interfaces.
+  New CSS features are shipping at an unprecedented rate --
+  cascade layers, container queries, the `:has()` selector,
+  subgrid, nesting, and so much more.
+  **It’s a good time to step back and understand
+  how these tools fit together in a declarative system --
+  a resilient cascade of styles**.
+
+  This workshop is available
+  to companies as well as conferences.
 ---
 
-A lot has changed in the nearly 30 years since CSS was first proposed,
-and new features are shipping at an unprecedented rate --
-cascade layers, container queries,
-the ':has()' selector, wide-gamut colors,
-subgrid, and so much more.
-
-Meanwhile, we're still getting used to
-custom properties and basic grids!
-Taken one at a time, the list can feel overwhelming,
-but these features all fit together to form a highly systemic language
-based on a radical foundation: _the cascade of styles_.
-Together, we’ll explore:
-
-## Selectors & the Cascade
-
-We’ll look at selectors,
-their specificity,
-nesting, and of course custom properties.
-
-- cascade origins and importance
-- cascade layers
-- specificity and source-order
-- :is(), :where(), and :has()
-- nesting & scope
-- preference & support queries
-- custom properties
-- naming & organizing conventions
-- progressive enhancement
-
-## Layout & Typography
-
-From modern CSS layout to functions,
-from aspect ratios to media & container queries.
-
-- display, flow, and context
-- writing modes
-- logical properties
-- flexbox, grid, and subgrid
-- comparison functions
-- aspect-ratios
-- scroll-snapping
-- media & container queries
-
-## CSS Colors
-
-Lastly, new color spaces & formats, accent-color and much more!
-
-- accent-color
-- color-scheme
-- new color spaces & formats
-- gradient color spaces
-- color-mix()
+It’s an exciting time, but the list can also feel overwhelming.
+Do I really need grids if I already know flexbox?
+What problem do layers actually solve?
+Should I rewrite my styles with each feature release,
+or stick with the tools that I know?
+
+If you ever feel lost in the CSS weeds,
+wrestling with the cascade,
+or you just want to improve your workflow
+with modern, efficient, and maintainable stylesheets,
+then this workshop is for you!
+We'll approach the language as a cohesive system,
+learn new features along the way,
+and then put it all in practice
+with a resilient approach to CSS architecture.
+
+Join Miriam for a deep dive
+into what makes the language work,
+and how we can harness its power
+to **develop resilient and delightful experiences**
+that hold up across browsers, languages, and device interfaces.
+
+## What Will Attendees Learn In This Workshop?
+
+- Building maintainable CSS systems with progressive enhancement
+- The entire cascade, why it exists,
+  and what all is involved (much more than specificity!)
+- Managing style conflicts with cascade layers, scope, and nesting
+- Modern selectors like `:is()`, `:where()`, and `:has()`
+- Value resolution and validation, beyond cascading and inheritance
+- Using custom properties to build adaptive systems
+- The advantages of logical vs physical dimensions
+- The layout flow with intrinsic and extrinsic sizing
+- Size comparison functions like min(), max(), and clamp()
+- When to use flexbox vs grid for layout and alignment
+- Fast and dynamic layouts using subgrid and container queries
+
+## Who Is This For?
+
+This workshop is intended for designers & developers
+with at least a basic understanding in HTML and CSS.
+You don’t need to be an expert to keep up,
+but even the experts are likely to learn something new.
+
+## Schedule
+
+The workshop is taught in five sessions, each with two parts:
+
+### 1. Resilient Styles: a Declarative Cascade
+
+#### First, Do No Harm
+
+CSS is fundamentally different
+from other languages or design tools,
+built around a radical vision
+for contextual style and user-control.
+We’ll dig into the practical implications of that vision,
+and how the ‘grain’ of the language
+can guide us to more performant and resilient styles.
+
+#### Cascading & Inheritance
+
+A deep-dive into the algorithms
+that take us from simple property/value declarations
+to a fully-styled web application.
+Along the way, we’ll explore new features like nesting,
+cascade layers, scope, and the `:has()` selector.
+
+### 2. Dynamic Systems: Custom Properties & Value Resolution
+
+#### Custom Properties Reveal the Matrix
+
+CSS custom properties (aka “variables”)
+expose the internals of CSS value resolution and error recovery.
+What does it even mean for properties
+to become ‘invalid at computed value time’?
+And how can we use these CSS internals to our advantage,
+developing more robust and dynamic style systems?
+
+#### CSS Variables in Practice
+
+Practical use-cases,
+and interactive exercises related to CSS variables and functions.
+
+### 3. Intrinsic Layouts: Distributing Space
+
+#### Flowing & Flexing
+
+Unlike the printed page,
+web content and context can be unpredictable.
+CSS provides tools to manage that uncertainty,
+aligning & distributing objects on the page.
+We’ll talk about normal flow,
+intrinsic and extrinsic sizing,
+logical properties,
+box sizing & alignment,
+and the flexible box model.
+
+#### Flex & Alignment in Practice
+
+Practical use-cases,
+and interactive exercises related to distributing space.
+
+### 4. Intrinsic Layouts: Defining Structure
+
+#### Defining Structure
+
+Sometimes we also need to impose external structure
+to create consistent and reliable layouts,
+even with unpredictable content.
+This is a full session dedicated to grid & subgrid,
+the multiple ‘stages of squishiness’,
+and container queries.
+
+#### Grids & Containers in Practice
+
+Practical use-cases,
+and interactive exercises related to defining layouts.
+
+### 5. Resilient Styles: Organizing Conventions
+
+#### Cascade Aligned Programming
+
+There are many conventions for organizing CSS,
+but the best systems all share underlying principles
+based on CSS itself.
+What would it mean to use _the cascade_ itself
+as our guide for writing maintainable CSS?
+
+#### Modern and Resilient
+
+CSS is designed to adapt to context --
+failing silently, and enhancing progressively.
+We have tools to manage that context and support everyone,
+without giving up on the latest features.
+The details may vary from project to project,
+but we’ll look at practical strategies
+for building an expressive and robust CSS system
+that works for you.

content/workshops/django-end-to-end-testing.md

@@ -1,5 +1,6 @@
 ---
 title: Effective End-to-End Testing for Django
+sub: A hands-on workshop using pytest and Playwright
 date: 2022-10-16
 author: ed
 image:

content/workshops/resilient-systems.md

@@ -1,6 +1,6 @@
 ---
 title: Resilient Web Systems
-sub: Inspiration & practical steps to take full advantage of the web
+sub: A workshop with practical steps to take full advantage of the web
 author: miriam
 card: feature
 date: 2020-01-01

src/scss/components/_events.scss

@@ -55,14 +55,12 @@
   }
 }
 
-.event-discount,
+.event-note,
 .event-links {
   font-size: var(--small);
 }
 
-.event-discount {
-  @include config.wrap-content('[' ']');
-
+.event-note {
   font-style: italic;
 }
 

src/scss/layout/_title.scss

@@ -40,7 +40,8 @@
     line-height: 1.1;
 
     span {
-      &:first-of-type {
+      // spans not generated by the typogrify plugin
+      &:not([class]) {
         display: block;
         font-size: var(--h3);
         font-weight: normal;