finish mobile timeline styling

WISVCH · Dec 6, 2023 · b32454b · b32454b
1 parent 122bbdc
commit b32454b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/src/components/timeline/index.tsx b/src/components/timeline/index.tsx
@@ -12,22 +12,24 @@ import * as style from "./style.scss";
  */
 export const Timeline: FunctionalComponent = () => (
     <section class={style.timeline}>
-        <h2>Schedule</h2>
+        <h2>Timetable</h2>
         <p>
             This is an indication of the schedule of the event! It is an
             indication, and therefore subject to change.
         </p>
-        <div class={style.container}>
+        <div class={style.days}>
             <h3>Saturday</h3>
             <h3>Sunday</h3>
         </div>
 
         <div class={style.container}>
+            <h3 class={style.mobiledays}>Saturday</h3>
             <div class={style.saturday}>
                 {(saturday as TimelineEntry[]).map((entry) =>
                     renderEntry(entry)
                 )}
             </div>
+            <h3 class={style.mobiledays}>Sunday</h3>
             <div class={style.sunday}>
                 {(sunday as TimelineEntry[]).map((entry) => renderEntry(entry))}
             </div>

diff --git a/src/components/timeline/style.scss b/src/components/timeline/style.scss
@@ -19,6 +19,10 @@
         margin: 0;
         text-align: center;
     }
+
+    .days {
+        display: none;
+    }
 }
 
 .timeline .container {
@@ -38,6 +42,12 @@
         grid-column-end: 3;
     }
 
+    .mobiledays {
+        color: $primary-text;
+        font-family: "Krona-One";
+        margin: 16px 8px;
+    }
+
     .saturday {       
         .timelineEntry:nth-child(1) {
             grid-column-start: 1;
@@ -132,6 +142,10 @@
 @include breakpoint(xl) {
     .timeline .container {
         flex-direction: row;
+
+        .mobiledays {
+            display: none;
+        }
     }
 
     .saturday {
@@ -142,6 +156,25 @@
     .sunday {
         padding-left: 75px;
     }
+
+    .timeline .days {
+        display: flex;
+        flex-direction: row;
+
+        h3 {
+            width: 50%;
+            min-width: calc(50% - 16px);
+            max-width: 50%;
+            font-weight: 400;
+            font-size: 20px;
+            font-family: "Krona-One";
+            margin: 24px 8px;
+
+            &:nth-child(2) {
+                margin-left: 82px;
+            }
+        }
+    }
 }
 
 @include breakpoint(md) {