Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/implement-banner-and-timeline' i…
Browse files Browse the repository at this point in the history 
…nto basic-style

# Conflicts:
#	src/components/about/index.tsx
  • Loading branch information
@sajochems
sajochems committed Jan 11, 2024
2 parents f1efaf1 + 56ed08f commit 83d93f1
Show file tree
Hide file tree
Showing 22 changed files with 401 additions and 141 deletions.
12 changes: 6 additions & 6 deletions data/timeline.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@
"id": "sa1",
"time": "12:00 - 13:00",
"name": "Walk-in",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
"description": "More information will follow soon..."
},
{
"id": "sa2",
"time": "13:00 - 14:00",
"name": "Opening",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
"description": "More information will follow soon..."
},
{
"id": "sa3",
"time": "14:00 - 00:00",
"name": "Hacking!",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
"description": "More information will follow soon..."
},
{
"id": "sa4",
Expand All @@ -30,7 +30,7 @@
"id": "su1",
"time": "00:00 - 14:00",
"name": "Hacking!",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
"description": "More information will follow soon..."
},
{
"id": "su2",
Expand All @@ -48,13 +48,13 @@
"id": "su4",
"time": "14:30 - 16:00",
"name": "Networking Drinks",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
"description": "More information will follow soon..."
},
{
"id": "su5",
"time": "16:00 - 17:00",
"name": "Award Ceremony",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
"description": "More information will follow soon..."
}
]
}
2 changes: 1 addition & 1 deletion src/components/about/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Icon } from "/src/components";
import * as style from "./style.scss";

/**
* Renders the about section.
* Renders the about section.
*/
export const About: FunctionalComponent = () => (
<section class={style.about} id="aboutus">
Expand Down
122 changes: 88 additions & 34 deletions src/components/committee/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,52 +2,106 @@ import { h, FunctionalComponent } from "preact";

import * as style from "./style.scss";

const picture = new URL(
"/static/committee.png?as=webp&width=1200",
const Marjolein = new URL(
"/static/members/Marjolein.jpg?as=webp",
import.meta.url
);

const Scott = new URL(
"/static/members/Scott.jpg?as=webp",
import.meta.url
);

const Marit = new URL(
"/static/members/Marit.jpg?as=webp",
import.meta.url
);



/**
* Renders the committee section.
*/
export const Committee: FunctionalComponent = () => (
<section class={style.container}>
<section>
{/* <div class={style.image}>
<img src={picture as any} alt="HackDelft Committee" />
</div> */}
<div class={style.committee}>
<h2>Meet The Committee</h2>
{/* <h3>From left to right</h3> */}
<table>
<tr>
<th>The Chair</th>
<td>Marit Radder</td>
</tr>
<tr>
<th>The Secretary</th>
<td>Marjolein van den Berghe</td>
</tr>
<tr>
<th>The Treasurer</th>
<td>Merle de Jong</td>
</tr>
<tr>
<th>The Commissioner of Promotion</th>
<td>Simon Deuten</td>
</tr>
<tr>
<th>The Commissioner of Acquisition</th>
<td>Scott Jochems</td>
</tr>
<tr>
<th>The Commissioner of Logistics</th>
<td>Marijn van der Tuin</td>
</tr>
<tr>
<th>The Qualitate Qua</th>
<td>Robert van Dijk</td>
</tr>
</table>
<div class={style.container}>
<div class={style.left}>
<div class={style.person}>
<div class={style.polygon}>
<img src={Marit as any} alt="HackDelft Committee" />
</div>
<div>
<p class={style.function}>Chair</p>
<p class={style.name}>Marit Radder</p>
</div>
</div>
<div class={style.person}>
<div class={style.polygon}>
<img src={Marjolein as any} alt="HackDelft Committee" />
</div>
<div>
<p class={style.function}>Secretary</p>
<p class={style.name}>Marjolein van der Berghe</p>
</div>
</div>
<div class={style.person}>
<div class={style.polygon}>
<img src={Marit as any} alt="HackDelft Committee" />
</div>
<div>
<p class={style.function}>Treasure</p>
<p class={style.name}>Merle de Jong</p>
</div>
</div>
</div>
<div class={style.right}>
<div class={style.person}>
<div>
<p class={style.function}>Logistics</p>
<p class={style.name}>Marijn van der Tuin</p>
</div>
<div class={style.polygon}>
<img src={Marit as any} alt="HackDelft Committee" />
</div>
</div>

<div class={style.person}>
<div>
<p class={style.function}>Promotion</p>
<p class={style.name}>Simon Deuten</p>
</div>
<div class={style.polygon}>
<img src={Marit as any} alt="HackDelft Committee" />
</div>
</div>

<div class={style.person}>
<div>
<p class={style.function}>Acquisition</p>
<p class={style.name}>Scott Jochems</p>
</div>
<div class={style.polygon}>
<img src={Scott as any} alt="HackDelft Committee" />
</div>
</div>
</div>
<div class={style.middle}>
<div class={style.person}>
<div class={style.polygon}>
<img src={Marit as any} alt="HackDelft Committee" />
</div>
<div>
<p class={style.function}>Qualitate Qua</p>
<p class={style.name}>Robert van Dijk</p>
</div>
</div>
</div>
</div>
</div>
</section>
);
149 changes: 103 additions & 46 deletions src/components/committee/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,134 @@
@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: 38px;
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: 16px;
}

h2 {
.function {
color: $primary-color;
margin-bottom: 0;
}

h3 {
color: $secondary-color;
margin-top: 0;
padding: 0;
.container {
flex-direction: column;
flex-wrap: nowrap;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}

table {
border-collapse: collapse;
.left, .right {
gap: 24px;
display: flex;
flex-direction: column;
width: 100%;
line-height: 1.4;
text-align: left;
}

.right {
margin-top: 24px;
}

tr {
border-bottom: 1px dotted $secondary-color;
.right .person{
flex-direction: row-reverse;
justify-content: flex-end;
}

&:last-child {
border-bottom: none;

.middle {
width: 100%;
margin-top: 24px;

.person {
flex-direction: row;
gap: 20px;
}
}

th {
float: left;
display: contents;
color: mix($primary-color, $primary-text, 80%);
img {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
height: 100px;
width: 90px;
min-width: 90px;
object-fit: cover;
position: relative;
}

td {
white-space: nowrap;
.polygon {
height: 110px;
width: 100px;
min-width: 100px;
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;
}
}

@include breakpoint(lg) {
.container {
flex-direction: row;
width: 100%;
margin: 0;
.person {
display: flex;
align-items: center;
gap: 20px;
}
}

@include breakpoint(md) {
.committee {
margin-left: 16px;
h2 {
font-size: 48px;
}

.container {
flex-direction: row;
flex-wrap: wrap;
}

tr {
border-bottom: none;
.left {
width: 50%;
}

.right {
width: 50%;
text-align: right;
margin-top: 0;

.person {
justify-content: flex-end;
flex-direction: row;
}
}

.middle {
width: 100%;
text-align: center;
margin-top: 24px;

.person {
justify-content: center;
flex-direction: column;
align-items: center;
gap: 20px;
}
}
}
}

2 changes: 1 addition & 1 deletion src/components/faq/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import * as style from "./style.scss";
* @returns The FAQ section of the page.
*/
export const FAQ: FunctionalComponent = () => (
<section class={style.faq}>
<section class={style.faq} id='faq'>
<h2>FAQ</h2>
<ul>
{faqData.map((q: Question, i: number) => (
Expand Down
Loading

0 comments on commit 83d93f1

Please sign in to comment.