Refactor modules with css grid and semantic definition lists

_layouts/module.html

-<section class="module">
+<div class="module">
   <h3 class="module-header">{{ page.title }}</h3>
   {% if page.days %}
-  <div class="module-deck">
+  <dl class="module-days">
     {% for day in page.days %}
-    <div class="module">
-      <div class="module-date">{{ day.date | date: '%b %e' }}</div>
-      <div class="module-header">
-        {{ day.topic | markdownify | remove: '<p>' | remove: '</p>' }}
-      </div>
-      {% if day.description != nil %}
-      <div class="module-body">
-        {{ day.description | markdownify }}
-      </div>
-      {% endif %}
-    </div>
+    <dt class="module-day main">{{ day.date | date: '%b %e' }}</dt>
+    {% for event in day.events %}
+    <dd class="module-event{% if forloop.first %} main{% endif %}">{{ event | first | markdownify }} {{ event | last | markdownify }}</dd>
     {% endfor %}
-  </div>
+    {% endfor %}
+  </dl>
   {% endif %}
   {% assign content_strip = content | strip %}
   {% if content_strip != "" %}
@@ -23,4 +16,4 @@
     {{ content }}
   </div>
   {% endif %}
-</section>
+</div>

_modules/week-1.md

 ---
 title: Introduction to Java
 days:
-  - topic: >-
-      [Java & Git](#)
-    date: 2019-04-01
-    description: >-
-      [1.1](#)
-  - topic: >-
-      [Variables & Objects](#)
-    date: 2019-04-03
-    description: >-
-      [1.2](#),
-      [2.1](#)
-  - topic: >-
-      [Tracing, IntLists, & Recursion](#)
-    date: 2019-04-05
-    description: >-
-      [2.1](#)
+  - date: 2019-04-01
+    events:
+      "[Java & Git](#)":
+        "[1.1](#)"
+      "Homework 1 out":
+        null
+  - date: 2019-04-02
+    events:
+      "**Section**{: .label } [Intro to Java](#)":
+        "Solution"
+  - date: 2019-04-03
+    events:
+      "[Variables & Objects](#)":
+        "[1.2](#), [2.1](#)"
+  - date: 2019-04-04
+    events:
+      "**Lab**{: .label } [Intro to Java](#)":
+        null
+  - date: 2019-04-05
+    events:
+      "[Tracing, IntLists, & Recursion](#)":
+        "[2.1](#)"
+      "Homework 1 due":
+        null
 ---
-
-- [Section 1: Intro to Java](#) ([Solutions](#))
-- [Lab 1: Intro to Java](#)
-- [Homework 1: Intro to Java](#)

_modules/week-2.md

 ---
 title: Basic Data Structures
 days:
-  - topic: >-
-      [Linked Lists & Encapsulation](#)
-    date: 2019-04-08
-    description: >-
-      [3.1](#),
-      [2.2](#),
-      [2.3](#)
-  - topic: >-
-      [Resizing Arrays](#)
-    date: 2019-04-10
-    description: >-
-      [2.4](#),
-      [2.5](#)
-  - topic: >-
-      [Runtime Analysis](#)
-    date: 2019-04-12
-    description: >-
-      [8.1](#),
-      [8.2](#),
-      [8.3](#),
-      [8.4](#)
+  - date: 2019-04-08
+    events:
+      "[Linked Lists & Encapsulation](#)":
+        "[3.1](#), [2.2](#), [2.3](#)"
+      "Homework 2 out":
+        null
+  - date: 2019-04-09
+    events:
+      "**Section**{: .label } [Linked Lists](#)":
+        "Solution"
+  - date: 2019-04-10
+    events:
+      "[Resizing Arrays](#)":
+        "[2.4](#), [2.5](#)"
+  - date: 2019-04-11
+    events:
+      "**Lab**{: .label } [Resizing Arrays](#)":
+        null
+  - date: 2019-04-12
+    events:
+      "[Runtime Analysis](#)":
+        "[8.1](#), [8.2](#), [8.3](#), [8.4](#)"
+      "Homework 2 due":
+        null
 ---
-
-- [Section 2: Linked Lists](#) ([Solutions](#))
-- [Lab 2: Resizing Arrays](#)
-- [Homework 2: Basic Data Structures](#)

_sass/custom/module.scss

 .module {
   @extend .card;
+
+  .module-days {
+    grid-template-columns: 1fr 7fr;
+  }
 }
 
 .module-date {
@@ -14,13 +18,9 @@
   @extend .card-body;
 }
 
-.module-deck {
-  @extend .card-deck;
+.module-days {
   border-bottom: $border $border-color;
   border-top: $border $border-color;
-  border-radius: 0;
-  box-shadow: none;
-  margin-bottom: 0;
 
   &:first-child {
     border-top: none;
@@ -30,31 +30,39 @@
     border-bottom: none;
   }
 
-  p {
-    @extend .fs-3;
-    display: inline;
-  }
+  .module-day,
+  .module-event {
+    margin: 0;
+    padding: $sp-2 $sp-4;
 
-  .module {
-    .module-header {
-      @extend .fw-500;
-    }
+    &.main {
+      border-top: $border $border-color;
 
-    &:last-child {
-      border-bottom: none;
+      &:first-of-type {
+        border-top: none;
+      }
     }
 
-    @include mq(sm) {
-      flex-direction: row;
+    p {
+      display: inline-block;
+      margin: 0;
+      width: 62.5%;
 
-      .module-date,
-      .module-body {
-        flex: 0 0 20%;
+      +p {
+        width: auto;
       }
+    }
+  }
 
-      .module-header {
-        flex: 1;
-      }
+  .module-day {
+    grid-column-start: 1;
+  }
+
+  .module-event {
+    grid-column-start: 2;
+
+    +.module-event {
+      padding-top: 0;
     }
   }
 }