refactor: ♻️ migrate timeline component to css grid

src/components/timeline.webc

@@ -1,73 +1,84 @@
-<dl class="timeline">
+<div class="timeline">
   <div class="job" webc:for="job of jobs">
     <icon class="icon" :icon="job.icon"></icon>
-    <div class="content">
-      <dt @text="job.title"></dt>
-      <dd @text="job.desc"></dd>
-    </div>
+    <p class="title" @text="job.title"></p>
+    <p class="text" @text="job.desc"></p>
   </div>
-</dl>
+</div>
 
 <style>
   .timeline {
-    --timeline-circle-size: 4em;
-    --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
+    --timeline-circle-size: 3rem;
+    --timeline-circle-background: var(--clr-box-background);
     --timeline-stroke-color: var(--clr-timeline-stroke);
+    --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
 
-    position: relative;
-    margin: 0;
-    padding: 0;
+    @media (min-width: 32em) {
+      --timeline-circle-size: 4rem;
+    }
 
     & .job {
-      display: flex;
-      flex-flow: row nowrap;
-      gap: 1em;
+      display: grid;
+      grid-template-areas:
+        'icon title'
+        'line text';
+      column-gap: 1em;
 
-      margin: 1.5rem 0;
-
-      position: relative;
-
-      &:not(:last-child):before {
+      &::before {
         content: '';
-        position: absolute;
-        inset: var(--timeline-circle-size) auto auto
-          calc(var(--timeline-circle-size) / 2 - var(--timeline-stroke-thickness) / 2);
-        height: calc(100% - var(--timeline-circle-size) + 1.5rem);
-        border-left: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
+
+        grid-row: icon / line;
+        grid-column: line;
+        justify-self: center;
+
+        width: var(--timeline-stroke-thickness);
+        height: 100%;
+
+        background-color: var(--timeline-stroke-color);
+      }
+
+      &:first-child::before {
+        align-self: end;
+        height: calc(100% - var(--timeline-circle-size));
+      }
+
+      &:last-child::before {
+        grid-row: icon;
+        align-self: start;
+        height: 50%;
       }
     }
 
     & .icon {
-      flex: 0 0 var(--timeline-circle-size);
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      grid-area: icon;
+      align-self: center;
 
       width: var(--timeline-circle-size);
       height: var(--timeline-circle-size);
 
       background-color: var(--timeline-circle-background);
 
-      margin: 0;
       border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
       border-radius: 100%;
       padding: calc(var(--timeline-circle-size) * 0.2);
     }
 
-    & .content {
-      flex: 1 0 0;
-      margin: 0;
-    }
+    & .title {
+      grid-area: title;
+      align-self: center;
 
-    & dt {
       font-family: var(--font-family-headings);
       font-size: calc(var(--timeline-circle-size) / 2);
       font-weight: bold;
-      line-height: calc(var(--timeline-circle-size) / 2);
+      text-align: start;
+      margin-block: calc(var(--timeline-circle-size) / 4);
     }
 
-    & dd {
+    & .text {
+      grid-area: text;
+
       margin-inline: 0;
+      margin-block: 0;
       line-height: 1.5;
       text-align: justify;
     }