update schedule styling

markgoho · Mar 7, 2024 · 4b95dd2 · 4b95dd2
1 parent edc77b8
commit 4b95dd2
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 9 deletions.
diff --git a/hugo/assets/scss/schedule.scss b/hugo/assets/scss/schedule.scss
@@ -1,7 +1,52 @@
 ol {
   list-style: none;
+  font-family: PressStart2P, sans-serif;
+  margin: 0;
+  padding: 0;
 }
 
-p {
-  color: red;
+.weekend-itinerary {
+  margin: 4rem 0;
+  li + li {
+    margin-top: 3rem;
+  }
+}
+
+.weekday-name {
+  font-size: 1.5rem;
+  display: flex;
+  align-items: baseline;
+  gap: 2rem;
+}
+
+.month-day {
+  text-transform: uppercase;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.event-list {
+  margin-top: 2rem;
+
+  li + li {
+    margin-top: 2rem;
+  }
+
+  > li {
+    display: flex;
+    flex-direction: column;
+    row-gap: 0.25rem;
+    line-height: 1.5;
+  }
+
+  li > time {
+    display: block;
+    width: 10ch;
+  }
+}
+
+@media screen and (min-width: 40rem) {
+  .event-list > li {
+    flex-direction: row;
+  }
 }
diff --git a/hugo/layouts/schedule/single.html b/hugo/layouts/schedule/single.html
@@ -8,10 +8,12 @@
 {{ define "main" }}
   <h1>{{ .Title }}</h1>
 
-  <ol>
+  <ol class="weekend-itinerary">
     <li>
-      <time datetime="2024-04-19">Friday <span>April 19</span></time>
-      <ol>
+      <time class="weekday-name" datetime="2024-04-19"
+        >Friday <span class="month-day">April 19</span></time
+      >
+      <ol class="event-list">
         <li>
           <time datetime="2024-04-19T18:00:00">6:00pm</time
           ><span>Check-in at Maxion Lodge</span>
@@ -23,8 +25,10 @@ <h1>{{ .Title }}</h1>
       </ol>
     </li>
     <li>
-      <time datetime="2024-04-20">Saturday <span>April 20</span></time>
-      <ol>
+      <time class="weekday-name" datetime="2024-04-20"
+        >Saturday <span class="month-day">April 20</span></time
+      >
+      <ol class="event-list">
         <li>
           <time datetime="2024-04-20T08:45:00">8:45am</time
           ><span>Opening at Dining Hall</span>
@@ -66,8 +70,10 @@ <h1>{{ .Title }}</h1>
       </ol>
     </li>
     <li>
-      <time datetime="2024-04-21">Sunday <span>April 21</span></time>
-      <ol>
+      <time class="weekday-name" datetime="2024-04-21"
+        >Sunday <span class="month-day">April 21</span></time
+      >
+      <ol class="event-list">
         <li>
           <time datetime="2024-04-21T08:45:00">8:45am</time>
           <span>Closing Ceremony and Awards</span>