#95 SimpleTimeline

src/components/SimpleTimeline/SimpleTimeline.svelte

@@ -43,10 +43,13 @@
 </script>
 
 <Block width="normal" id="{id}" class="simple-timeline-container {cls}">
-  <div class="timeline" style="--symbol-colour:{symbolColour};">
+  <div
+    class="timeline mt-8 pl-2 pr-3.5"
+    style="--symbol-colour:{symbolColour};"
+  >
     {#each dates as date}
-      <div class="date">
+      <div class="date relative m-0 pl-5 pb-4">
-        <svg height="25" width="20">
+        <svg class="absolute bg" height="25" width="20">
           <circle
             cx="10"
             cy="12"
@@ -55,17 +58,29 @@
             stroke-width="2"
             fill="transparent"></circle>
         </svg>
-        <h5 style:color="{dateColour}">{date.date}</h5>
+        <div
+          class="timeline-date font-subhed font-bold mt-0 text-sm fmb-1"
+          style:color="{dateColour}"
+        >
+          {date.date}
+        </div>
         {#each date.events as event}
           <div class="event pb-2">
             {#if event.titleLink}
               <a href="{event.titleLink}" target="_blank">
-                <h6>
+                <div
-                  {event.title} <span><Fa fw icon="{faLink}" /></span>
+                  class="title font-subhed text-base font-bold text-primary leading-tighter fmb-1"
-                </h6>
+                >
+                  {event.title}
+                  <span class="text-sm"><Fa fw icon="{faLink}" /></span>
+                </div>
               </a>
             {:else}
-              <h6>{event.title}</h6>
+              <div
+                class="title font-subhed text-base font-bold text-primary leading-tighter fmb-1"
+              >
+                {event.title}
+              </div>
             {/if}
             {#if event.context}
               {@html marked(event.context)}
@@ -78,68 +93,40 @@
 </Block>
 
 <style lang="scss">
+  @use '../../scss/mixins' as *;
   .timeline {
-    margin-top: 2rem;
-    padding-left: 8px;
-    padding-right: 15px;
     .date {
       border-left: 1px solid var(--symbol-colour);
-      padding-left: 20px;
-      padding-bottom: 1rem;
-      position: relative;
-      margin: 0;
-      display: block;
-
       &:last-child {
-        border-left: 1px solid var(--theme-colour-background, #fff);
+        border-left: 1px solid $theme-colour-background;
-      }
-
-      h5 {
-        font-size: 0.95rem;
-        margin-top: 0px;
       }
     }
     svg {
-      background-color: var(--theme-colour-background, #fff);
-      position: absolute;
       top: -1px;
       left: -10px;
     }
     div.event {
-      h6 {
-        margin: 0;
-        font-size: 1.2rem;
-        color: var(--theme-colour-text-primary, #666);
-      }
       a {
-        color: var(--theme-colour-text-primary, #666);
         text-decoration: none;
         &:hover {
           text-decoration: underline;
         }
       }
-      a h6 {
+      a div.title {
         span {
           opacity: 0.5;
-          font-size: 1rem;
         }
         &:hover span {
           opacity: 0.8;
         }
       }
       :global(p) {
-        margin-top: 0;
+        @extend %fmb-2;
-        margin-bottom: 0.7rem;
+        @include leading-normal;
-        font-size: 1rem;
+        @include font-light;
-        font-weight: 300;
+        @include text-sm;
-        color: var(--theme-colour-text-primary, #666);
+        @include font-note;
-        font-family: var(--theme-font-family-sans-serif);
+        @include text-primary;
-        &:last-of-type {
-          margin-bottom: 0;
-        }
-      }
-      :global(a) {
-        color: var(--theme-colour-text-primary, #666);
       }
     }
   }