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,59 +13,61 @@
 {{ 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">
-      <h3 id="{{date}}_{{loop.index}}">
-        {{ "🔴 " if event.livestream -}}
-        {{ getLocalized(event.title) }}
-      </h3>
+      <div class="timeslot-container">
+        <h3 id="{{date}}_{{loop.index}}">
+          {{ "🔴 " if event.livestream -}}
+          {{ getLocalized(event.title) }}
+        </h3>
 
-      <div class="timeslot-time">
-        <span class="start">{{ event.start }}</span>
-        {% if event.end %}
-        <span class="end">– {{ event.end }}</span>
+        <div class="timeslot-time">
+          <span class="start">{{ event.start }}</span>
+          {% 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>
+
+        {% if event.annotation %}
+        <p class="annotation">
+          {{ getLocalized(event.annotation) }}
+        </p>
+        {% endif %}
+
+        {% if event.location %}
+        <p class="location">
+          {{ getLocalized(event.location) }}
+        </p>
+        {% endif %}
+
+        {% if event.checkin_link %}
+        <a class="btn"
+          {% if event.checkin_link.startsWith("http") %}
+          href="{{ event.checkin_link }}"
+          target="_blank"
+          rel="noreferrer"
+          {% else %}
+          href="{{ event.checkin_link | locale_url }}"
+          {% endif %}
+        >
+          Check-in
+        </a>
         {% endif %}
       </div>
-
-      <p>{{ getLocalized(event.description) }}</p>
-
-      {% if event.annotation %}
-      <p class="annotation">
-        {{ getLocalized(event.annotation) }}
-      </p>
-      {% endif %}
-
-      {% if event.location %}
-      <p class="location">
-        {{ getLocalized(event.location) }}
-      </p>
-      {% endif %}
-
-      {% if event.checkin_link %}
-      <a class="btn"
-        {% if event.checkin_link.startsWith("http") %}
-        href="{{ event.checkin_link }}"
-        target="_blank"
-        rel="noreferrer"
-        {% else %}
-        href="{{ event.checkin_link | locale_url }}"
-        {% endif %}
-      >
-        Check-in
-      </a>
-      {% endif %}
     </li>
     {% endfor %}
   </ul>
+</section>
 {% endfor %}
 
 {% css %}
-.timeslot {
-  display: block;
-}
+  {% include "program.css" %}
 {% endcss %}