fix: minor fixes

package.json

@@ -17,6 +17,7 @@
     "imagemin": "^7.0.1",
     "imagemin-webp": "^6.0.0",
     "polka": "next",
+    "remarkable": "^2.0.1",
     "sirv": "^1.0.6",
     "smoothscroll-polyfill": "^0.4.4"
   },

src/components/nav.svelte

@@ -199,17 +199,14 @@
       }
 
       @media only screen and (max-width: 800px) {
-        button.menu-btn {
+        button.menu-btn,
+        ul.hidden-list {
           display: flex;
         }
 
         ul.main-list {
           display: none;
         }
-
-        ul.hidden-list {
-          display: flex;
-        }
       }
     }
   }

src/components/sections/contact.svelte

@@ -11,13 +11,13 @@
 
   <div class="gallery">
     {#each contacts as contact}
-      <div class="contact">
+      <div class="contact hover-highlight">
         <Image src={contact.image} alt="{contact.name} photo" />
         <h3>{contact.name}</h3>
         <h4>{contact.post}</h4>
-        <p><span>Phone:</span> <a href="tel:{contact.phone}">{contact.phone}</a></p>
-        <p><span>Email:</span> <a href="mailto:{contact.email}">{contact.email}</a></p>
-        <p><span>Instagram:</span> <a href="https://instagram.com/{contact.instagram}" target='_blank' rel='noopener'>{contact.instagram}</a></p>
+        <p><strong>Phone:</strong> <a href="tel:{contact.phone}">{contact.phone}</a></p>
+        <p><strong>Email:</strong> <a href="mailto:{contact.email}">{contact.email}</a></p>
+        <p><strong>Instagram:</strong> <a href="https://instagram.com/{contact.instagram}" target='_blank' rel='noopener'>{contact.instagram}</a></p>
       </div>
     {/each}
   </div>
@@ -79,8 +79,7 @@
       p {
         margin-top: 5px;
 
-        span {
-          font-weight: 600;
+        strong {
           color: #6b717d;
         }
       }

src/components/sections/sponsors.svelte

@@ -29,7 +29,7 @@
     margin: 2vh -2.5vh;
 
     a {
-      margin: 5vh 5vh;
+      margin: 4vh;
       flex: 1;
       display: flex;
       flex-direction: column;
@@ -56,6 +56,7 @@
       span {
         display: flex;
         align-items: center;
+        white-space: nowrap;
       }
     }
 

src/components/sections/timeline.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { Remarkable } from 'remarkable'
   import { slide } from 'svelte/transition'
   import { wait } from '../../utils'
   import rawTimeline from '../../../data/timeline.yml'
@@ -18,6 +19,8 @@
   let collapse = false
   let buttonText = 'Show more'
 
+  const md = new Remarkable()
+
   $: nodeList = timeline.slice(0, nodesToDisplay)
   $: collapse = nodesToDisplay >= timeline.length
   $: buttonText = collapse ? 'Collapse' : 'Show more'
@@ -56,7 +59,10 @@
           </button>
 
           {#if node.expand}
-            <p transition:slide={{ duration: 300 }} class="details safari-overflow-fix">{node.details}</p>
+            <div class="details safari-overflow-fix" transition:slide={{ duration: 300 }}>
+              <p><strong>Time: </strong>{node.time}</p>
+              {@html md.render(node.details)}
+            </div>
           {/if}
         </div>
 
@@ -114,7 +120,7 @@
       }
 
       h3 {
-        margin: 10px 0 5px;
+        margin-top: 10px;
         font-size: 1.2rem;
         color: #8ba6d6;
         font-weight: 600;
@@ -128,7 +134,7 @@
 
         &.club {
           color: #8ba6d080;
-          margin: 5px 0;
+          margin-top: 5px;
 
           span {
             font-style: italic;
@@ -139,12 +145,22 @@
           color: #a9acb2;
           margin-top: 10px;
         }
+      }
 
-        &.details {
+      div.details {
+        :global(*) {
+          font-size: 0.9rem;
+          line-height: 1.7;
+          letter-spacing: 0;
           color: #a9acb2;
           margin-top: 10px;
           font-size: 14px;
         }
+
+        :global(li) {
+          list-style: circle outside;
+          margin-left: 20px;
+        }
       }
 
       button.details {
@@ -226,7 +242,7 @@
         text-align: left !important;
         align-items: start !important;
         transform: none !important;
-        padding: 0 20px;
+        padding: 0 0 0 20px;
         flex: 1;
       }
 

src/styles/common.scss

@@ -6,7 +6,7 @@
 .focus-highlight,
 .hover-highlight--low,
 .focus-highlight--low {
-  transition: 0.3s filter ease-in-out;
+  transition: 0.1s filter ease-in-out;
 }
 
 .hover-highlight:hover,