program: main css

_includes/header.css

@@ -1,4 +1,5 @@
 header {
+  z-index: 1000;
   display: flex;
   position: sticky;
   top: 0;

_includes/program.css

@@ -0,0 +1,72 @@
+.program-date ul {
+  padding: 0;
+}
+
+.timeslot {
+  display: block;
+  border-bottom: 1px solid rgba(0,0,0,.05);
+}
+
+.timeslot h3 {
+  margin: 0;
+  font-size: 1.3em;
+  font-weight: 400;
+}
+
+.timeslot-container {
+  position: relative;
+  padding-top: 40px;
+}
+
+.timeslot-time {
+  position: absolute;
+  top: 0;
+  height: 40px;
+}
+
+.timeslot-time :is(.start, .end) {
+  display: none;
+}
+
+.timeslot-time .full {
+  font-size: 26px;
+}
+
+@media (width < 640px) {
+  .timeslot {
+    margin-bottom: 2.5rem;
+  }
+}
+
+@media (width >= 640px) {
+  .timeslot:last-child {
+    border-bottom: none;
+  }
+
+  .timeslot-container {
+    padding: 2rem 3rem;
+    margin-left: 14rem;
+  }
+
+  .timeslot-time {
+    height: auto;
+    width: 14rem;
+    left: -14rem;
+    text-align: right;
+    padding: 2rem 3rem;
+  }
+
+  .timeslot-time .start {
+    display: block;
+    font-size: 38px;
+  }
+
+  .timeslot-time .end {
+    display: block;
+    font-size: 21px;
+  }
+
+  .timeslot-time .full {
+    display: none;
+  }
+}

_includes/program.njk

@@ -13,13 +13,14 @@
 {{ content | safe }}
 
 {% for date, events in program %}
-<section>
+<section class="program-date">
   <h2 id="{{ date }}">
     {{ toDate(date).toLocaleDateString(lang, { weekday: 'long', month: 'short', day: 'numeric' }) }}
   </h2>
   <ul>
     {% for event in events %}
     <li class="timeslot">
+      <div class="timeslot-container">
         <h3 id="{{date}}_{{loop.index}}">
           {{ "🔴 " if event.livestream -}}
           {{ getLocalized(event.title) }}
@@ -30,6 +31,7 @@
           {% if event.end %}
           <span class="end">– {{ event.end }}</span>
           {% endif %}
+          <span class="full">{{ event.start }}{{ " – " + event.end if event.end }}</span>
         </div>
 
         <p>{{ getLocalized(event.description) }}</p>
@@ -59,13 +61,13 @@
           Check-in
         </a>
         {% endif %}
+      </div>
     </li>
     {% endfor %}
   </ul>
+</section>
 {% endfor %}
 
 {% css %}
-.timeslot {
+  {% include "program.css" %}
-  display: block;
-}
 {% endcss %}