Replace stack with flow

eventua11y · Oct 20, 2023 · 31c8e1a · 31c8e1a
1 parent 05f3999
commit 31c8e1a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 26 deletions.
diff --git a/src/_includes/today.liquid b/src/_includes/today.liquid
@@ -1,6 +1,6 @@
 <section id="today">
 
-  <div class="container readable stack">
+  <div class="container readable flow">
 
     <hgroup role="group" aria-roledescription="Heading group">
       <h2>Today</h2>
@@ -22,7 +22,7 @@
       {% endif %}
 
       {% if todaysThemes.length > 0 %}
-        <div class="events events--list stack">
+        <div class="events events--list flow">
           {% for event in todaysThemes %}
             <article
               class="event event--theme"
@@ -78,7 +78,7 @@
       {% endif %}
 
       {% if todaysEvents.length > 0 %}
-        <div class="events events--list stack">
+        <div class="events events--list flow">
           {% for event in todaysEvents %}
             <article
               class="event event--{{ event.type }}"

diff --git a/src/index.liquid b/src/index.liquid
@@ -20,7 +20,7 @@ layout: layouts/base.liquid
         <p>There are no upcoming events. Check back later.</p>
       {% endif %}
 
-      <div class="events events--list stack">
+      <div class="events events--list flow">
         {% for event in upcomingEvents %}
           {%- if event.type == "theme" %}
             <article
@@ -144,25 +144,27 @@ layout: layouts/base.liquid
                 </details>
                 </div>
                 {% if event.children %}
-                <div class="event__children">
+                <div class="event__children flow">
                   <!-- Display the count of children with appropriate pluralization -->
                   {% assign childCount = event.children | size %}
                   {% if childCount == 1 %}
                     <p>{{ childCount }} accessibility highlight:</p>
                   {% else %}
                     <p>{{ childCount }} accessibility highlights:</p>
                   {% endif %}
-                  <!-- List of child events -->
-                  <ul role="list" class="event__children-list">
-                    {% for child in event.children %}
-                      <li class="event__child" itemprop="event" itemscope itemtype="https://schema.org/Event">
-                        <a href="{{ child.website }}" itemprop="name">{{ child.title }}</a>
-                        <div class="event__dates text-muted">
-                          <time datetime="{{ child.dateStart | isoDate }}" itemprop="startDate">{{ child.dateStart | localizeDate: "LLL z" }}</time>
-                        </div>
-                      </li>
-                    {% endfor %}
-                  </ul>
+                  <div>
+                    <!-- List of child events -->
+                    <ul role="list" class="event__children-list flow">
+                      {% for child in event.children %}
+                        <li class="event__child" itemprop="event" itemscope itemtype="https://schema.org/Event">
+                          <a href="{{ child.website }}" itemprop="name">{{ child.title }}</a>
+                          <div class="event__dates text-muted">
+                            <time datetime="{{ child.dateStart | isoDate }}" itemprop="startDate">{{ child.dateStart | localizeDate: "LLL z" }}</time>
+                          </div>
+                        </li>
+                      {% endfor %}
+                    </ul>
+                  </div>
                 </div>
                 {% endif %}
                 <!-- End .event__children -->

diff --git a/src/styles/_events.scss b/src/styles/_events.scss
@@ -39,6 +39,7 @@
         border-top: 1px solid #ddd;
         order: 5;
         padding: var(--space-s-m);
+        --flow-space: var(--space-3xs-2xs);
     }
     &__type {
         background-color: var(--color-primary);

diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
@@ -10,18 +10,12 @@
   border-width: 0;
 }
 
-.stack {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
+.flow > * + * {
+  margin-block-start: var(--flow-space, 1em);
 }
 
-.stack > * {
-  margin-block: 0;
-}
-
-.stack > * + * {
-  margin-block-start: var(--space, var(--space-s-m));
+.flow-tight {
+  --flow-space: var(--space-3xs-2xs);
 }
 
 .bg-primary {