Tighten-up no-activity blocks, adjust layout between day blocks

app/assets/stylesheets/events.css

@@ -26,7 +26,9 @@
 }
 
 .events--none {
-  padding: calc(3 * var(--block-space));
+  .events + & {
+    padding-block-start: calc(4 * var(--block-space));
+  }
 }
 
 .event-grid-item {
@@ -64,3 +66,7 @@
     transform: translate(-50%, 0);
   }
 }
+
+.events__index {
+  --row-gap: calc(4 * var(--block-space));
+}

app/views/events/_day.html.erb

@@ -1,4 +1,4 @@
-<div class="events--day margin-block-end-double pad-block-end">
+<div class="events--day">
   <% if events.any? %>
     <h2 class="txt-x-large margin-block-end"><%= event_day_title(activity_day) %></h2>
 

app/views/events/_empty_days.html.erb

@@ -1,15 +1,15 @@
 <% if earliest.present? %>
   <% if earliest == latest %>
-    <div class="events--none txt-align-center">
-      <h2><%= event_day_title(earliest) %></h2>
-      <p>No activity</p>
+    <div class="events--none txt-align-center translucent">
+      <h2 class="txt-medium margin-none"><%= event_day_title(earliest) %></h2>
+      <p class="margin-none">No activity</p>
     </div>
   <% elsif earliest < latest %>
-    <div class="events--none txt-align-center">
-      <h2><%= event_day_title(earliest) %> - <%= event_day_title(latest) %></h2>
-      <p>No activity for <%= (latest - earliest).seconds.in_days.round + 1 %> days</p>
+    <div class="events--none txt-align-center translucent">
+      <h2 class="txt-medium margin-none"><%= event_day_title(earliest) %> – <%= event_day_title(latest) %></h2>
+      <p class="margin-none">No activity for <%= (latest - earliest).seconds.in_days.round + 1 %> days</p>
     </div>
   <% end %>
 <% else %>
-  <p class="events--none txt-align-center">No more activity.</p>
+  <p class="events--none txt-align-center translucent">No more activity.</p>
 <% end %>

app/views/events/index.html.erb

@@ -17,8 +17,8 @@
   </nav>
 <% end %>
 
-<div id="activity">
-  <div class="center flex-inline align-center gap margin-block-end">
+<div id="activity" class="events__index flex flex-column gap">
+  <div class="center flex-inline align-center gap">
       <button class="btn">
         <span>All Projects</span>
         <input type="checkbox" checked>