implement bare bones of the banner and timeline

WISVCH · Dec 1, 2023 · 4e4043e · 4e4043e
1 parent ce71dae
commit 4e4043e
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 84 deletions.
diff --git a/data/timeline.json b/data/timeline.json
@@ -1,51 +1,60 @@
 {
     "saturday": [
         {
-            "time": "12:00",
+            "id": "sa1",
+            "time": "12:00 - 13:00",
             "name": "Walk-in",
-            "description": "We will welcome you in hall X1 of TU Delft X! You then have a bit of time to get settled in before the hacking starts."
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
         },
         {
-            "time": "13:00",
-            "name": "Opening Presentation",
-            "description": "Here you will finally be introduced to the challenges, and get other important information about the event. If you don't have a team yet, you can form it here."
+            "id": "sa2",
+            "time": "13:00 - 14:00",
+            "name": "Opening",
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
         },
         {
-            "time": "14:00",
-            "name": "Start Hacking!",
-            "description": "After the challenges have been divided you can now get started on your project. We are excited to see what you will come up with!"
+            "id": "sa3",
+            "time": "14:00 - 00:00",
+            "name": "Hacking!",
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
         },
         {
+            "id": "sa4",
             "time": "18:30 - 20:00",
             "name": "Dinner",
             "description": ""
         }
     ],
     "sunday": [
         {
+            "id": "su1",
+            "time": "00:00 - 14:00",
+            "name": "Hacking!",
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+        },
+        {
+            "id": "su2",
             "time": "8:00 - 10:00",
             "name": "Breakfast",
             "description": ""
         },
         {
+            "id": "su3",
             "time": "12:30 - 14:30",
             "name": "Lunch",
             "description": ""
         },
         {
-            "time": "14:00",
-            "name": "Hacking Ends",
-            "description": "It has been 24 hours since we started! Now it's time to pitch your project to the jury."
-        },
-        {
-            "time": "14:30",
+            "id": "su4",
+            "time": "14:30 - 16:00",
             "name": "Networking Drinks",
-            "description": "Talk to your fellow hackers at the drinks after the hacking has ended."
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
         },
         {
-            "time": "± 16:00",
+            "id": "su5",
+            "time": "16:00 - 17:00",
             "name": "Award Ceremony",
-            "description": "We have a lot of prizes to award here, maybe to you?"
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
         }
     ]
 }
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -9,10 +9,17 @@ import icon from "url:/static/HogeResolutieLogo.png?as=webp&width=500";
  */
 export const Header: FunctionalComponent = () => (
     <header class={style.header}>
-        <img src={icon} alt="HackDelft" />
-        <span>
-            <h2>Date: May 25th &amp; May 26th</h2>
-            <h3>Location: TU Delft X</h3>
-        </span>
+        <div class={style.container}>
+            <img src={icon} alt="HackDelft" />
+            <div class={style.text}>
+                <p>25 and 26 may 2024</p>
+                <p>X TU Delft</p>
+            </div>
+            <div class={style.buttons}>
+                <button>Tickets</button>
+                <button class={style.secondary}>Join Discord</button>
+            </div>
+        </div>
+
     </header>
 );
diff --git a/src/components/header/style.scss b/src/components/header/style.scss
@@ -3,42 +3,71 @@
 
 .header {
     display: flex;
-    flex-direction: column;
-    margin-top: 32px;
+    flex-direction: column; 
+    height: 100vh;
+    min-height: 100vh;
+    width: 100vw;
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #05238E 100%,), url('../../../static/banner.gif');
+    background-repeat: no-repeat;
+    background-size: cover;
 
-    img {
-        height: 4em;
-        margin: 0 auto;
+    .container {
+        margin: auto;
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+        justify-content: center;
+        width: 100%;
+        max-width: 700px;
     }
 
-    span {
-        margin: 16px 2vw;
-
-        h2 {
-            margin: 0;
-            white-space: nowrap;
-            color: $primary-color;
-        }
+    .text {
+        display: flex;
+        justify-content: space-between;
+        margin: 0 30px;
+    }
 
-        h3 {
-            margin: 0;
-            white-space: nowrap;
-            color: $secondary-color;
-        }
+    .buttons {
+        display: flex;
+        justify-content: center;
+        gap: 30px;
+        margin-top: 60px;
     }
-}
 
-@include breakpoint(sm) {
-    .header {
-        flex-direction: row;
-        margin-bottom: 24px;
+    button {
+        border-radius: 10px;
+        border: 1px solid $background-color;
+        background-color: $primary-color;
+        color: $background-color;
+        font-size: 18px;
+        padding: 10px 15px;
+        width: 200px;
+    }
 
-        img {
-            margin: 0;
-        }
+    button.secondary {
+        border: 1px solid $primary-color;
+        color: $primary-color;
+        background-color: $background-color;
+    }
 
-        span {
-            margin: 0 2vw;
-        }
+    p {
+        color: $primary-color;
+        font-size: 24px;
+        font-family: "Krona-One";
     }
 }
+
+// @include breakpoint(sm) {
+//     .header {
+//         flex-direction: row;
+//         margin-bottom: 24px;
+
+//         img {
+//             margin: 0;
+//         }
+
+//         span {
+//             margin: 0 2vw;
+//         }
+//     }
+// }
diff --git a/src/components/timeline/index.tsx b/src/components/timeline/index.tsx
@@ -18,22 +18,21 @@ export const Timeline: FunctionalComponent = () => (
             indication, and therefore subject to change.
         </p>
         <div class={style.container}>
-            <div>
-                <h3>Saturday</h3>
+        <h3>Saturday</h3>
+            <div class={style.saturday}>
                 {(saturday as TimelineEntry[]).map((entry) =>
                     renderEntry(entry)
                 )}
             </div>
-            <div>
-                <h3>Sunday</h3>
+            <div class={style.sunday}>
                 {(sunday as TimelineEntry[]).map((entry) => renderEntry(entry))}
             </div>
         </div>
     </section>
 );
 
 const renderEntry = (entry: TimelineEntry) => (
-    <div class={style.timelineEntry}>
+    <div class={style.timelineEntry} id={"box-"+ entry.id}>
         <time>
             <Icon icon={faClock} height="12px" />
             {entry.time}
@@ -53,4 +52,5 @@ interface TimelineEntry {
     time: string;
     name: string;
     description: string;
+    id: string;
 }
diff --git a/src/components/timeline/style.scss b/src/components/timeline/style.scss
@@ -5,35 +5,99 @@
     margin-bottom: 32px;
 
     h2 {
-        color: $primary-color;
+        color: $secondary-color;
         font-family: "Krona-One";
         font-size: 48px;
         font-style: normal;
         font-weight: 400;
         line-height: normal;
         text-align: center;
         margin: 0;
-        padding-left: 2px;
     }
 
     p {
         margin: 0;
+        text-align: center;
     }
 }
 
 .container {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+
+    > div {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(10, 150px);
+    }
 
     h3 {
         color: $secondary-color;
         margin: 4px 16px;
+        grid-column-start: 1;
+        grid-column-end: 3;
     }
 
-    div {
-        display: flex;
-        flex-direction: column;
+    .saturday {
+        border-right: 2px solid $primary-color;
+        padding-right: 100px;
+        div:nth-child(2) {
+            grid-column-start: 1;
+        }
+        div:nth-child(3) {
+            grid-column-start: 1;
+        }
+        div:nth-child(4) {
+            grid-column-start: 2;
+            grid-row-start: 4;
+            grid-row-end: 10;
+            height: 100%;
+
+            div {
+                height: 100%;
+            }
+        }
+        div:nth-child(5) {
+            grid-column-start: 1;
+            grid-row-start: 8;
+        }
+    }
+
+    .sunday {
+        padding-left: 100px;
+
+        div:nth-child(2) {
+            grid-column-start: 2;
+            grid-row-start: 2;
+            grid-row-end: 5;
+            height: 85%;
+        }
+        div:nth-child(3) {
+            grid-column-start: 1;
+            grid-row-start: 3;
+            margin-bottom: auto;
+        }
+        div:nth-child(4) {
+            grid-column-start: 1;
+            grid-row-start: 4;
+            height: 100%;
+        }
+
+        div:nth-child(5) {
+            grid-column-start: 2;
+            grid-row-start: 5;
+            grid-row-end: 7;
+            height: 100%;
+        }
+
+        div:nth-child(6) {
+            grid-column-start: 1;
+            grid-row-start: 7 ;
+        }
     }
+
+
+
 }
 
 .timelineEntry {
@@ -48,15 +112,18 @@
     }
 
     div {
-        margin-bottom: 8px;
-        padding: 8px 16px;
-        border: 2px solid $secondary-color;
-        border-radius: 4px;
+        padding: 10px;
+        border: 2px solid $primary-color;
+        font-family: "Krona-One";
+        font-size: 14px;
+
     }
 
     h4 {
         margin: 0;
+        margin-bottom: 8px;
         color: $primary-color;
+        font-size: 16px;
 
         svg {
             padding-right: 4px;