diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 92c4c77..bc814d3 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -373,10 +373,48 @@

- +
- +
@@ -385,29 +423,184 @@

In the past year, we have organized [PLACEHOLDER]

- Campfire Flagship - -

A 3 day flagship game jam in Los Angeles with YouTubers like Michael Reeves, William Osman, and many more!

+ Campfire Flagship + +

+ A 3 day flagship game jam in Los Angeles with YouTubers like Michael Reeves, William Osman, + and many more! +

- Midnight + Midnight -

A murder-mystery hackathon held in Austria, Vienna with 60+ teenagers from all across the world!

+

+ A murder-mystery hackathon held in Austria, Vienna with 60+ teenagers from all across the + world! +

- Blueprint - -

From October 2025 to March 2026, Blueprint gave $140,000 to fund 1,500 hardware and electronics projects built by 1000 teenagers from 77 countries

+ Blueprint + +

+ From October 2025 to March 2026, Blueprint gave $140,000 to fund 1,500 hardware and + electronics projects built by 1000 teenagers from 77 countries +

- Siege - -

A 14 week event where 250 teens created a project each week to work towards a laptop with over 100 framework laptops given out.

+ Siege + +

+ A 14 week event where 250 teens created a project each week to work towards a laptop with + over 100 framework laptops given out. +

+ +
+

... and so much more...

+
+ + + + + + + + + + + + + + + Overglade + + + + + + + + + +
+ + + + + + + + + + +

... and so much more...

@@ -453,8 +646,43 @@
-

Title for blog section [PLACEHOLDER]

-
+

Blogs from [PLACEHOLDER]

+ + Tongyu +
+

this is why you should do a hack club gap year. →

+

Written by Tongyu, 2025-26 Gap Year

+
+ + + + Deven +
+

+ The plan for hack club world dominance (brief rundown on hack club!) → +

+

Written by Deven, YSWS Lead @ Hack Club

+
+
@@ -508,7 +736,7 @@
Apply Now ({daysUntilDue} days remaining)Apply Now ({daysUntilDue} days remaining)
diff --git a/src/routes/page.css b/src/routes/page.css index e9600b3..44cc352 100644 --- a/src/routes/page.css +++ b/src/routes/page.css @@ -517,7 +517,8 @@ u:hover { margin-bottom: clamp(2rem, 5vh, 4rem); } -.past-events, .blogs{ +.past-events, +.blogs { margin: auto auto 10vh auto; width: 80vw; display: flex; @@ -525,7 +526,7 @@ u:hover { gap: 8rem; } -.past-events .stitle{ +.past-events .stitle { text-align: left; color: var(--color-text-dim); font-size: clamp(1.4rem, 2.7vw, 2.75rem); @@ -575,7 +576,9 @@ u:hover { height: 300px; object-fit: cover; display: block; - transition: transform 0.3s ease, filter 0.3s ease; + transition: + transform 0.3s ease, + filter 0.3s ease; } .program-card-logo { @@ -593,18 +596,18 @@ u:hover { width: 100%; } -.blogs .stitle{ +.blogs .stitle { text-align: left; color: var(--color-text-dim); font-size: clamp(1.4rem, 2.7vw, 2.75rem); /*margin-bottom: -3rem;*/ } -#andsomuchmore{ +#andsomuchmore { font-family: 'Glyseric', 'serif'; font-size: clamp(1.3rem, 2.3vw, 2.5rem); color: var(--color-text-dim); - font-weight:bold; + font-weight: bold; margin-bottom: -3rem; } @@ -679,9 +682,74 @@ u:hover { object-fit: contain; } - .mini-card-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); -} \ No newline at end of file +} + +.blogs { + background: #1c1c1a; + display: flex; + flex-direction: column; + gap: 36px; + padding: 0 137px 100px; +} + +.notes-title { + font-family: 'Young Serif', serif; + font-size: 30px; + color: #eee; + font-weight: normal; + line-height: normal; + margin: 0; +} + +.notes-card { + display: flex; + flex-direction: row; + align-items: center; + gap: 48px; + background: rgba(255, 255, 255, 0.1); + overflow: hidden; + text-decoration: none; + color: inherit; + transition: background 0.2s; +} + +.notes-card:hover { + background: rgba(255, 255, 255, 0.16); +} + +.notes-card-photo { + width: 240px; + height: 240px; + object-fit: cover; + flex-shrink: 0; +} + +.notes-card-text { + display: flex; + flex-direction: column; + gap: 4px; + color: #fff; +} + +.notes-card-title { + font-family: 'Young Serif', serif; + font-size: 32px; + font-weight: normal; + line-height: normal; + margin: 0; +} + +.notes-card-subtitle { + font-size: 20px; +} + +.notes-card-author { + font-family: 'Glyseric', 'Newsreader', sans-serif; + font-size: 16px; + margin: 0; + color: #ddd; +}