From 4e4043e35e04af0533ce8569e8be649218d665c8 Mon Sep 17 00:00:00 2001 From: Marit Date: Fri, 1 Dec 2023 07:40:28 +0100 Subject: [PATCH 1/5] implement bare bones of the banner and timeline --- data/timeline.json | 43 ++++++++------ src/components/header/index.tsx | 17 ++++-- src/components/header/style.scss | 87 ++++++++++++++++++---------- src/components/timeline/index.tsx | 10 ++-- src/components/timeline/style.scss | 89 +++++++++++++++++++++++++---- src/global.scss | 39 +++++++------ static/banner.gif | Bin 0 -> 6493278 bytes 7 files changed, 201 insertions(+), 84 deletions(-) create mode 100644 static/banner.gif diff --git a/data/timeline.json b/data/timeline.json index 8953fe5..da96225 100644 --- a/data/timeline.json +++ b/data/timeline.json @@ -1,21 +1,25 @@ { "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": "" @@ -23,29 +27,34 @@ ], "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 index b2cdc8b..0467b52 100644 --- 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 = () => (
- HackDelft - -

Date: May 25th & May 26th

-

Location: TU Delft X

- +
+ HackDelft +
+

25 and 26 may 2024

+

X TU Delft

+
+
+ + +
+
+
); diff --git a/src/components/header/style.scss b/src/components/header/style.scss index 5e2dfb6..616ed49 100644 --- 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 index b787623..28e9b9b 100644 --- a/src/components/timeline/index.tsx +++ b/src/components/timeline/index.tsx @@ -18,14 +18,13 @@ export const Timeline: FunctionalComponent = () => ( indication, and therefore subject to change.

-
-

Saturday

+

Saturday

+
{(saturday as TimelineEntry[]).map((entry) => renderEntry(entry) )}
-
-

Sunday

+
{(sunday as TimelineEntry[]).map((entry) => renderEntry(entry))}
@@ -33,7 +32,7 @@ export const Timeline: FunctionalComponent = () => ( ); const renderEntry = (entry: TimelineEntry) => ( -
+