Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Basic style #21

Merged
merged 31 commits into from
Jan 12, 2024
Merged
Changes from 7 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
af59359
Changed the about us and the committee function names and order to ma…
sajochems Nov 23, 2023
52a6d8a
Align columns properly in About us
sajochems Nov 23, 2023
c956085
Fixed the font issue
sajochems Nov 27, 2023
c78354c
Added numbers component
sajochems Nov 27, 2023
d131aec
Changed What, Who and When text
sajochems Nov 27, 2023
b602606
changed a link from the old repo to the new repo
sajochems Nov 27, 2023
4e4043e
implement bare bones of the banner and timeline
Dec 1, 2023
9b1f1da
fix colors, add icons, remove button
Dec 1, 2023
122bbdc
implement mobile view for timeline
Dec 1, 2023
b635220
Text changes
sajochems Dec 1, 2023
e23e0f2
Changed sponsors style
sajochems Dec 2, 2023
1168cc0
Added black fading block to the left of pictures
sajochems Dec 4, 2023
c24fbdf
Added a block on the right side, does not work with resizing yet
sajochems Dec 4, 2023
1d1db7a
fixed position problems
sajochems Dec 4, 2023
e18a879
fixed text alignment photos
sajochems Dec 4, 2023
b32454b
finish mobile timeline styling
Dec 6, 2023
08c9ad9
add navigation and faq
Dec 15, 2023
4481224
Merge branch 'implement-banner-and-timeline' into basic-style
MaritRadder Dec 15, 2023
28bcf96
Merge pull request #20 from WISVCH/basic-style
MaritRadder Dec 15, 2023
ec815f3
make gradient
Dec 15, 2023
f1efaf1
Fixed photo functionality and appearance, removed duplicate discord b…
sajochems Dec 28, 2023
af29d99
footer, meet the committee, timetable and many more
Jan 10, 2024
c104961
mobile fixes for footer, comittee and faq
Jan 11, 2024
4b03ecb
add images
Jan 11, 2024
56ed08f
fix timer
Jan 11, 2024
83d93f1
Merge remote-tracking branch 'origin/implement-banner-and-timeline' i…
sajochems Jan 11, 2024
584428f
Added Robert
sajochems Jan 11, 2024
6c71d19
Added Marijn and Merle also bug fixes
sajochems Jan 11, 2024
8caee6e
bug fixes
sajochems Jan 11, 2024
ec1a4cf
Added Simon
sajochems Jan 11, 2024
3be8e9a
fix discord button, remove empty sponsors, fix links
Jan 12, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions data/timeline.json
Original file line number Diff line number Diff line change
@@ -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",
@@ -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",
@@ -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
Original file line number Diff line number Diff line change
@@ -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">
122 changes: 88 additions & 34 deletions src/components/committee/index.tsx
Original file line number Diff line number Diff line change
@@ -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
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
Original file line number Diff line number Diff line change
@@ -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) => (
Loading