First tailwind attempts

app/assets/stylesheets/application.tailwind.css

@@ -11,3 +11,7 @@
 }
 
 */
+
+h1, h2, h3, h4, h5, h6 {
+  @apply font-bold;
+}

app/views/conferences/index.html.erb

+<div>
 <h1>Conferences</h1>
 <ul>
 <% @conferences.each do |conference| %>
 <li><%= link_to conference.name, conference_path(conference.slug) %></li>
 <% end %>
 </ul>
+</div>
\ No newline at end of file

app/views/conferences/show.html.erb

@@ -2,18 +2,19 @@
 pixels_per_hour = 300.0
 timeline_granularity = 15
 # current_time = Time.zone.now
-current_time = @sessions_by_date[@conference.days.first].first.starts_at.advance(minutes: 27)
+current_time = @sessions_by_date[@conference.days.first].first.starts_at.advance(minutes: 5)
 %>
-<h1><%= @conference.name %></h1>
+<div>
+  <h1><%= @conference.name %></h1>
 
-<nav id="conference-days">
-  <% @conference.days.each do |date| %>
-    <li><%= link_to date.strftime("%Y-%m-%d"), "\##{date.strftime('day-%Y-%m-%d')}" %></li>
-  <% end %>
-</nav>
+  <nav id="conference-days">
+    <% @conference.days.each do |date| %>
+      <li><%= link_to date.strftime("%Y-%m-%d"), "\##{date.strftime('day-%Y-%m-%d')}" %></li>
+    <% end %>
+  </nav>
 
-<% @conference.days.each do |date| %>
   <%
+  @conference.days.each do |date|
     day_starts_at = @sessions_by_date[date].first.starts_at
     day_ends_at = @sessions_by_date[date].last.ends_at
     # round to previous interval
@@ -21,43 +22,47 @@ current_time = @sessions_by_date[@conference.days.first].first.starts_at.advance
     # ... , except rounding up to later interval
     timeline_ends_at = day_ends_at.beginning_of_hour.advance(minutes: (day_ends_at.min / timeline_granularity.to_f).ceil * timeline_granularity)
   %>
-  <div class="conference-day" id="<%= date.strftime('day-%Y-%m-%d') %>">
+  <div class="conference-day" id="<%= date.strftime('day-%Y-%m-%d') %>" style="position: relative">
     <h3><%= date.strftime('%B %d, %Y') %></h3>
-    <div class="day-wrapper" style="display: flex;">
+    <div class="day-wrapper flex" style="display: flex;">
 
       <div class="times" style="">
-        <h4>&nbsp;</h4>
-      <% if current_time.strftime('%Y%m%d') == date.strftime('%Y%m%d') %>
+        <h4>Time</h4>
+        <%
+        if current_time.strftime('%Y%m%d') == date.strftime('%Y%m%d')
+        %>
         <div class="current-time" style="top: <%= (current_time - timeline_starts_at) / 3600.0 * pixels_per_hour %>px"></div>
-      <% end %>
-      <%
+        <%
+        end
+        %>
+        <%
         time_slot = timeline_starts_at
         while time_slot <= timeline_ends_at
-      %>
+        %>
         <div class="time<%= time_slot.min == 0 ? " hour-start" : "" %>" style="height: <%= timeline_granularity / 60.0 * pixels_per_hour %>px"><%= time_slot.strftime('%H:%M') %></div>
-      <%
+        <%
           time_slot = time_slot.advance(minutes: timeline_granularity)
         end
-      %>
+        %>
       </div>
       <div class="stages">
-        <% @sessions_by_date[date].group_by(&:stage).each do |stage, sessions| %>
-          <% next unless ["Stage 1", "Stage 2"].include? stage.name %>
-          <div class="stage">
-            <h4><%= stage.name %></h4>
-            <div class="stage-sessions">
-              <% sessions.each do |session| %>
-                <div class="session" style="position: absolute; top: <%= (session.starts_at - timeline_starts_at) / 3600.0 * pixels_per_hour %>px; height: <%= (session.ends_at - session.starts_at) / 3600.0 * pixels_per_hour%>px;">
-                  <h4><%= session.title %></h4>
-                  <p class="session-time"><%= session.starts_at.strftime('%H:%M') %> - <%= session.ends_at.strftime('%H:%M') %></p>
-                  <div class="session-desc"><%= session.description.html_safe %></div>
-                </div>
-              <% end %>
+      <% @sessions_by_date[date].group_by(&:stage).each do |stage, sessions| %>
+        <% next unless ["Stage 1", "Stage 2"].include? stage.name %>
+        <div class="stage">
+          <h4><%= stage.name %></h4>
+          <div class="stage-sessions">
+          <% sessions.each do |session| %>
+            <div class="session" style="position: absolute; top: <%= (session.starts_at - timeline_starts_at) / 3600.0 * pixels_per_hour %>px; height: <%= (session.ends_at - session.starts_at) / 3600.0 * pixels_per_hour%>px;">
+              <h4><%= session.title %></h4>
+              <p class="session-time"><%= session.starts_at.strftime('%H:%M') %> - <%= session.ends_at.strftime('%H:%M') %></p>
+              <div class="session-desc"><%= session.description.html_safe %></div>
             </div>
+          <% end %>
           </div>
-        <% end %>
         </div>
+      <% end %>
       </div>
     </div>
   </div>
-<% end %>
+  <% end %>
+</div>