From af29d99d98188ee597da0ef5c6525934262a4d77 Mon Sep 17 00:00:00 2001 From: Marit Radder Date: Wed, 10 Jan 2024 09:57:00 +0100 Subject: [PATCH] footer, meet the committee, timetable and many more --- src/components/committee/index.tsx | 106 ++++++++++++++++-------- src/components/committee/style.scss | 117 +++++++++++++++------------ src/components/faq/index.tsx | 2 +- src/components/footer/index.tsx | 48 ++++++----- src/components/footer/style.scss | 27 +++++-- src/components/header/index.tsx | 2 +- src/components/navigation/index.tsx | 36 +++++---- src/components/navigation/style.scss | 7 ++ src/components/photos/index.tsx | 2 +- src/components/timer/index.tsx | 25 ++++++ 10 files changed, 247 insertions(+), 125 deletions(-) create mode 100644 src/components/timer/index.tsx diff --git a/src/components/committee/index.tsx b/src/components/committee/index.tsx index 0d64fb2..d352ef5 100644 --- a/src/components/committee/index.tsx +++ b/src/components/committee/index.tsx @@ -11,43 +11,85 @@ const picture = new URL( * Renders the committee section. */ export const Committee: FunctionalComponent = () => ( -
+
{/*
HackDelft Committee
*/}

Meet The Committee

- {/*

From left to right

*/} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
The ChairMarit Radder
The SecretaryMarjolein van den Berghe
The TreasurerMerle de Jong
The Commissioner of PromotionSimon Deuten
The Commissioner of AcquisitionScott Jochems
The Commissioner of LogisticsMarijn van der Tuin
The Qualitate QuaRobert van Dijk
+
+
+
+
+ HackDelft Committee +
+
+

Chair

+

Marit Radder

+
+
+
+
+ HackDelft Committee +
+
+

Secretary

+

Marjolein van der Berghe

+
+
+
+
+ HackDelft Committee +
+
+

Treasure

+

Merle de Jong

+
+
+
+
+
+
+

Logistics

+

Marijn van der Tuin

+
+
+ HackDelft Committee +
+
+ +
+
+

Promotion

+

Simon Deuten

+
+
+ HackDelft Committee +
+
+ +
+
+

Acquisition

+

Scott Jochems

+
+
+ HackDelft Committee +
+
+
+
+
+
+ HackDelft Committee +
+
+

Qualitate Qua

+

Robert van Dijk

+
+
+
+
); diff --git a/src/components/committee/style.scss b/src/components/committee/style.scss index 7d9a03f..f4c5ef8 100644 --- a/src/components/committee/style.scss +++ b/src/components/committee/style.scss @@ -1,77 +1,94 @@ @import "./src/variables"; @import "./src/mixins"; -.container { - width: calc(100% - 16px); - display: flex; - flex-direction: column; - margin: 0 8px; -} - -.image { - flex: 2; - align-self: center; +.committee { + margin-bottom: 100px; - img { + h2 { + color: $primary-color; + margin-bottom: 0; + font-size: 48px; + font-family: "Krona-One"; + margin-bottom: 50px; width: 100%; - border: 4px solid $secondary-color; - border-radius: 12px; - box-sizing: border-box; - object-fit: cover; + text-align: center; + } -} -.committee { - flex: 3; + p { + margin: 0; + font-family: "Krona-One"; + font-size: 28px; + } - h2 { + .function { color: $primary-color; - margin-bottom: 0; } - h3 { - color: $secondary-color; - margin-top: 0; - padding: 0; + .container { + display: flex; + flex-wrap: wrap; + justify-content: center; + width: 80%; + margin-left: auto; + margin-right: auto; } - table { - border-collapse: collapse; - width: 100%; - line-height: 1.4; + .left { + width: 50%; + gap: 24px; + display: flex; + flex-direction: column; } - tr { - border-bottom: 1px dotted $secondary-color; + .right { + width: 50%; + text-align: right; + gap: 24px; + display: flex; + flex-direction: column; - &:last-child { - border-bottom: none; + .person { + justify-content: flex-end; } } - th { - float: left; - display: contents; - color: mix($primary-color, $primary-text, 80%); - } + .middle { + width: 100%; + text-align: center; + margin-top: 24px; - td { - white-space: nowrap; + .person { + justify-content: center; + flex-direction: column; + align-items: center; + gap: 20px; + } } -} -@include breakpoint(lg) { - .container { - flex-direction: row; - width: 100%; - margin: 0; + img { + clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); + height: 160px; + width: 150px; + min-width: 150px; + object-fit: cover; + position: relative; } - .committee { - margin-left: 16px; + .polygon { + height: 170px; + width: 160px; + min-width: 160px; + clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); + background-color: $primary-color; + display: flex; + justify-content: center; + align-items: center; + } - tr { - border-bottom: none; - } + .person { + display: flex; + align-items: center; + gap: 40px; } } diff --git a/src/components/faq/index.tsx b/src/components/faq/index.tsx index 605a0bb..a1769f4 100644 --- a/src/components/faq/index.tsx +++ b/src/components/faq/index.tsx @@ -11,7 +11,7 @@ import * as style from "./style.scss"; * @returns The FAQ section of the page. */ export const FAQ: FunctionalComponent = () => ( -
+

FAQ

    {faqData.map((q: Question, i: number) => ( diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx index 2ad0d57..c299326 100644 --- a/src/components/footer/index.tsx +++ b/src/components/footer/index.tsx @@ -9,22 +9,34 @@ import * as style from "./style.scss"; /** * Renders the footer of the site. */ -export const Footer: FunctionalComponent = () => ( -