From ec815f34b6820c7886ca06ecd57778b1be53493b Mon Sep 17 00:00:00 2001 From: Marit Radder Date: Fri, 15 Dec 2023 12:40:01 +0100 Subject: [PATCH 1/5] make gradient --- src/components/about/index.tsx | 4 ++-- src/components/header/style.scss | 2 +- src/components/numbers/style.scss | 4 ++-- src/global.scss | 4 ++++ src/index.tsx | 7 +++++-- 5 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx index 09b4ba8..15347e2 100644 --- a/src/components/about/index.tsx +++ b/src/components/about/index.tsx @@ -39,14 +39,14 @@ export const About: FunctionalComponent = () => ( Sign up for the waiting list! */} - Join Our Discord! - + */} ); diff --git a/src/components/header/style.scss b/src/components/header/style.scss index 73a25d6..05967fd 100644 --- a/src/components/header/style.scss +++ b/src/components/header/style.scss @@ -7,7 +7,7 @@ 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-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, $background-color 100%,), url('../../../static/banner.gif'); background-repeat: no-repeat; background-size: cover; diff --git a/src/components/numbers/style.scss b/src/components/numbers/style.scss index 5188ee9..189e0e5 100644 --- a/src/components/numbers/style.scss +++ b/src/components/numbers/style.scss @@ -2,8 +2,8 @@ @import "./src/variables"; .numbers { - margin-bottom: 64px; - + margin-bottom: 64px; + // background: linear-gradient(180deg, $background-color 0%, rgba(37, 0, 67, 0.00)); h2 { color: $secondary-color; diff --git a/src/global.scss b/src/global.scss index 1ac01c8..6632a0c 100644 --- a/src/global.scss +++ b/src/global.scss @@ -22,6 +22,10 @@ body { position: relative; } +.gradient { + background: linear-gradient(180deg, $background-color 25%, rgba(0, 0, 0, 0.00) 100%); +} + section { margin: 0 8px; } diff --git a/src/index.tsx b/src/index.tsx index 4975a65..ac9e732 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,5 @@ import { Fragment, h, render } from "preact"; +import * as style from "./global.scss"; import { About, @@ -22,8 +23,10 @@ const start = (): void => { render(
- - +
+ + +
From af29d99d98188ee597da0ef5c6525934262a4d77 Mon Sep 17 00:00:00 2001 From: Marit Radder Date: Wed, 10 Jan 2024 09:57:00 +0100 Subject: [PATCH 2/5] 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