Skip to content

layout changes for hb2025 #100

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.

Sign up for GitHub

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

Merged
ngl16647 merged 6 commits into from
Apr 9, 2025
Merged

layout changes for hb2025 #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c799fbe
remove links to older Hackaburg pages
ngl16647 Apr 9, 2025
d1fa799
add new assets
ngl16647 Apr 9, 2025
09606d7
add new colors and adjust components
ngl16647 Apr 9, 2025
9372ce1
use Button component
ngl16647 Apr 9, 2025
ff1013b
add updated bus plan
ngl16647 Apr 9, 2025
6499f00
add Timeline component to the page
ngl16647 Apr 9, 2025
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
30 changes: 24 additions & 6 deletions src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,25 +30,43 @@ html {
@layer base {
body {
font-family: "Mulish", sans-serif;
background-color: white;
color: aliceblue;
background-color: rgb(26,17,54);
background-color: linear-gradient(180deg, rgba(26,17,54,1) 0%, rgba(29,20,62,1) 30%, rgba(38,31,84,1) 60%, rgba(41,39,100,1) 80%, rgba(56,51,118,1) 100%);

background-image: url('$lib/images/cloud.webp');
background-size: 100%;
background-repeat: no-repeat;
background-position: bottom;
}
}

.stars {
background-image: url('$lib/images/star_pattern.png');
background-size: 80%;
background-repeat: repeat;
background-blend-mode: overlay;
}

.hackaburg {
color: #82bd53;
color: #ca70a2;
}

.bg-hackaburg {
background-color: #82bd53;
background-color: #ca70a2;
}

.glow {
box-shadow: 0 0 50px -10px rgba(130, 189, 83, 1);
box-shadow: 0 0 20px -5px hsl(203, 92%, 75%, 1);
}
.glow-soft {
box-shadow: 0 0 50px -10px rgba(130, 189, 83, .3);
box-shadow: 0 0 10px -5px hsl(203, 92%, 75%, .3);
}

.glow:hover {
box-shadow: 0 0 50px 15px rrgba(130, 189, 83, 1);
box-shadow: 0 0 30px 10px hsla(340, 57%, 64%, .5);
}

.glow-soft:hover {
box-shadow: 0 0 20px 10px hsla(340, 57%, 64%, .3);
}
Binary file modified src/lib/busplan.pdf
View file
Open in desktop
Binary file not shown.
Binary file added src/lib/images/cloud.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
829 changes: 482 additions & 347 deletions src/lib/images/hackaburg.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/lib/images/star_pattern.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 2 additions & 3 deletions src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,18 @@

import Footer from './components/Footer.svelte';
import Timeline from './landing/Timeline.svelte';
import Team from './landing/Team.svelte';

Check warning on line 14 in src/routes/+page.svelte

View workflow job for this annotation

GitHub Actions / style 

'Team' is defined but never used
import Schedule from './landing/Schedule.svelte';

Check warning on line 15 in src/routes/+page.svelte

View workflow job for this annotation

GitHub Actions / style 

'Schedule' is defined but never used
import Workshops from './landing/Workshops.svelte';

Check warning on line 16 in src/routes/+page.svelte

View workflow job for this annotation

GitHub Actions / style 

'Workshops' is defined but never used
import Hardware from './landing/Hardware.svelte';

Check warning on line 17 in src/routes/+page.svelte

View workflow job for this annotation

GitHub Actions / style 

'Hardware' is defined but never used
import Challenges from './landing/Challenges.svelte';

Check warning on line 18 in src/routes/+page.svelte

View workflow job for this annotation

GitHub Actions / style 

'Challenges' is defined but never used
</script>

<Nav />
<div class="container mx-auto">
<Hero />
<!--
<Timeline />
<Schedule />
<Timeline />
<!-- <Schedule />
<Workshops />
<Challenges />
<Hardware />
Expand Down
4 changes: 2 additions & 2 deletions src/routes/components/BaseComponent.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
export let subHeadline: string;
</script>

<section class="container mx-auto px-6 p-3 pt-10 mt-16" {id}>
<section class="stars container mx-auto px-6 mt-10" {id}>
<h2
class="text-3xl font-bold text-center text-black-800 mb-4 uppercase hackaburg dark:dark:text-white"
>
{headline}
</h2>
<hr class="w-20 h-1 bg-primary mb-4 mx-auto text-black" />
<hr class="w-20 h-1 mb-4 mx-auto text-black" />
<h2 class="text-xl font-bold text-center text-black-800 mb-8 dark:dark:text-white">
{@html subHeadline}
</h2>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/components/Button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<div class="relative group">
<button
class="glow relative bg-white m-auto w-full mt-8 border-2 border-white rounded-3xl px-3 py-2 dark:text-black hover:cursor-pointer hover:bg-primary hover:text-white"
class="glow relative bg-tungsten m-auto w-full mt-8 border-2 border-white rounded-3xl px-3 py-2 dark:text-black hover:cursor-pointer hover:bg-deadlydepth"
>
{label}
</button>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/components/Footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import logo from '$lib/images/rb_logo.svg';
</script>

<footer class="p-4 bg-white border-t border-grey-200 sm:p-6 sm:mt-16">
<footer class=" p-4 sm:p-6 sm:mt-16">
<div class="md:flex md:justify-between mt-8">
<div class="mb-12 md:mb-0 sm:ml-20 md:w-1/2 sm:gap-6 sm:grid-cols-1 lg:grid-cols-1">
<a href="/" class="flex items-center">
Expand Down
28 changes: 14 additions & 14 deletions src/routes/components/Nav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,44 +35,44 @@
</div>
<div class={menuOpen ? ' menu hidden' : 'menu'}>
<ul
class="flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-white md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 dark:text-white md:bg-black dark:bg-black md:dark:bg-gray-900 dark:border-gray-700"
class="flex flex-col p-4 mt-4 bg-white text-deadlydepth md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium"
>
<li class="mt-2 hover:text-navHighlight-900">
<li class="mt-2 hover:text-palevioletred">
<a href="/" class="nav-element-base" aria-current="page">Home</a>
</li>
<!--
<li class="mt-2 hover:text-hackaburg-900">
<li class="mt-2 hover:text-palevioletred">
<a href="/#timeline" class="nav-element-base">Timeline</a>
</li>
<li class="mt-2 hover:text-hackaburg-900">
<!--
<li class="mt-2 hover:text-palevioletred">
<a href="/#schedule" class="nav-element-base">Schedule</a>
</li>
<li class="mt-2 hover:text-hackaburg-900">
<li class="mt-2 hover:text-palevioletred">
<a href="/#workshops" class="nav-element-base">Workshops</a>
</li>
<li class="mt-2 hover:text-hackaburg-900">
<li class="mt-2 hover:text-palevioletred">
<a href="/#challenges" class="nav-element-base">Challenges</a>
</li>
<li class="mt-2 hover:text-hackaburg-900">
<li class="mt-2 hover:text-palevioletred">
<a href="/#hardware" class="nav-element-base">Hardware</a>
</li>
<li class="mt-2 hover:text-hackaburg-900">
<li class="mt-2 hover:text-palevioletred">
<a href="/#supporters" class="nav-element-base">Supporters</a>
</li>
<li class="mt-2 hover:text-hackaburg-900">
<li class="mt-2 hover:text-palevioletred">
<a href="/#team" class="nav-element-base">Team</a>
</li>
-->
<li class="mt-2 hover:text-hackaburg-900">
<li class="mt-2 hover:text-palevioletred">
<a href="/#behind" class="nav-element-base">Behind Hackaburg</a>
</li>
<li class="mt-2 hover:text-hackaburg-900">
<li class="mt-2 hover:text-palevioletred">
<a href="/#about" class="nav-element-base">Looking Back</a>
</li>
<li class="mt-2 hover:text-hackaburg-900">
<li class="mt-2 hover:text-palevioletred">
<a href="/#venue" class="nav-element-base">Venue</a>
</li>
<li class="mt-2 hover:text-hackaburg-900">
<li class="mt-2 hover:text-palevioletred">
<a href="/#faq" class="nav-element-base">FAQ</a>
</li>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/components/NavLogo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<a href="/" class="text-xl font-extrabold tracking-tight dark:text-white">
<a href="/" class="text-xl font-extrabold tracking-tight text-darkknight">
HACKA
<span class="-ml-1 hackaburg">BURG</span>
</a>
12 changes: 6 additions & 6 deletions src/routes/landing/About.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,12 @@
>
<div class="grid grid-cols-1 md:grid-cols-3 gap-x-4 gap-y-6 md:mt-8 mt-4 sm:p-8">
{#each events as event, i}
<div class="glow-soft bg-white rounded-2xl dark:bg-gray-800 ml-4 relative">
<div class="glow-soft bg-white text-midnightblue rounded-2xl dark:bg-gray-800 ml-4 relative">
<div class="relative">
<img class="rounded-ss-xl rounded-se-xl w-full" alt="event" src={event.img} />
<img class="rounded-ss-xl rounded-t-xl w-full" alt="event" src={event.img} />
</div>
<div class="p-5">
<h5 class="mb-2 text-2xl font-bold tracking-tight dark:text-white dark:dark:text-white">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-palevioletred">
{event.title}
</h5>
<p class="mb-3 text-base dark:text-white h-16">
Expand All @@ -76,7 +76,7 @@
{#if event.aftermovie != null}
<a href={event.aftermovie}>
<button
class="glow-soft flex items-center w-32 mt-2 border-2 border-white dark:text-white rounded-3xl px-3 py-2 hover:cursor-pointer hover:bg-primary hover:text-white"
class="flex items-center w-32 mt-2 border-2 rounded-3xl px-3 py-2 hover:cursor-pointer hover:text-palevioletred hover:border-palevioletred"
>
Aftermovie <svg
class="rtl:rotate-180 w-3.5 h-3.5 ms-2 ml-2"
Expand All @@ -96,10 +96,10 @@
</button>
</a>
{/if}
{#if event.link != null}
{#if null != null}
<a href={event.link}>
<button
class="glow-soft flex items-center border-2 border-white mt-2 rounded-3xl px-4 py-2 hover:cursor-pointer hover:bg-primary hover:text-white"
class="flex items-center border-2 border-midnightblue mt-2 rounded-3xl px-4 py-2 hover:cursor-pointer hover:text-palevioletred hover:border-palevioletred"
>
Website <svg
class="rtl:rotate-180 w-3.5 h-3.5 ms-2 ml-2"
Expand Down
16 changes: 2 additions & 14 deletions src/routes/landing/Behind.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script>
import BaseComponent from '../components/BaseComponent.svelte';
import ratisbonacoding from '$lib/images/ratisbonacoding.jpg';
import Button from '../components/Button.svelte';
let glowVisible = false;
</script>

Expand All @@ -25,20 +26,7 @@
/>
{/if}

<button
on:focus={() => {
return;
}}
on:mouseover={() => {
glowVisible = true;
}}
on:mouseleave={() => {
glowVisible = false;
}}
class="relative bg-white m-auto w-52 mt-8 border-2 rounded-3xl px-3 py-2 dark:text-white hover:cursor-pointer hover:bg-primary hover:text-white"
>
More about us
</button>
<Button label="More about us" />
</div>
</a>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/routes/landing/FAQ.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,12 +77,12 @@
<div class="-my-6 sm:p-10">
{#each faq as { question, answer }, i}
<div class="group my-2 mt-7">
<div class="font-caveat font-medium text-2xl text-primary mb-1 sm:mb-0">
<div class="font-caveat font-medium text-palevioletred text-2xl mb-1 sm:mb-0">
{question}
</div>

<!-- Content -->
<div class="text-gray-700">
<div>
{@html answer}
</div>
</div>
Expand Down
20 changes: 10 additions & 10 deletions src/routes/landing/Hero.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,23 @@
import Button from '../components/Button.svelte';
</script>

<section class="dark:bg-gray-900 mt-8">
<div class="grid lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12">
<div class="place-self-center md:col-span-5 p-6">
<section class="stars dark:bg-gray-900 mt-32 px-10 mx-auto">
<div class="grid lg:grid-cols-12">
<div class="place-self-center lg:col-span-6 ml-mr-auto">
<img src={hero} class="transition w-96" alt="mockup" />
</div>

<div class="lg:col-span-4 sm:place-self-center">
<h1
class="flex dark:text-white mb-4 md:text-5xl text-3xl font-extrabold dark:dark:text-white mt-8"
>
HACKABURG <p class="ml-4 text-primary">2025</p>
HACKABURG <p class="ml-4 text-palevioletred">2025</p>
<br />
</h1>
<p class="mb-6 font-bold dark:text-white lg:mb-8 text-xl">
<b class="text-primary">22.5. - 24.5.2025</b> | Techbase Regensburg
<b class="text-palevioletred">22.05. - 24.05.2025</b> | Techbase Regensburg
</p>
<div class="mb-6 font-bold dark:text-white lg:mb-8 text-md">
<div class="mb-6 font-bold lg:mb-8 text-md">
<a href="https://apply.hackaburg.de" target="_blank" rel="noreferrer">
<Button label="Apply now!" />
</a>
Expand All @@ -37,9 +41,5 @@
</div>
</div>
</div>

<div class="mt:mt-0 md:col-span-7 lg:flex mx-auto sm:p-8 relative">
<img src={hero} class="transition w-96 px-20 md:px-0" alt="mockup" />
</div>
</div>
</section>
30 changes: 12 additions & 18 deletions src/routes/landing/Timeline.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,27 @@

const timeline = [
{
date: 'March 17, 2024',
date: 'April 2nd, 2025',
title: 'Registration opens',
content:
'At this day, you can fill your <b class="text-primary">profile form</b> (only takes 5min) and register for Hackaburg 2024. A <b class="text-primary">button</b> to our registration tool will appear on the website on that day, so you can not miss it.</b>'
'At this day, you can fill your <b class="text-mediumpurple">profile form</b> (only takes 5min) and register for Hackaburg 2025. A <b class="text-mediumpurple">button</b> to our registration tool will appear on the website on that day, so you can not miss it.</b>'
},
{
date: 'April 30, 2024',
title: 'Registrations closes',
content:
'One month before the event, the registration for Hackaburg 2024 closes. Make sure to have your <b class="text-primary">profile form</b> ready.'
},
{
date: 'May 1, 2024',
date: 'May 1st, 2025',
title: 'We invite you!',
content:
'We will send out the first invitations to Hackaburg 2024. You have one week to confirm! <b class="text-primary">So, keep an eye on your inbox!</b>'
'We will send out the first invitations to Hackaburg 2025. You have one week to confirm! <b class="text-mediumpurple">So, keep an eye on your inbox!</b>'
},
{
date: 'May 07, 2024',
date: 'May 7th, 2025',
title: 'Confirm your spot!',
content:
'If you are invited, you will receive an email with a <b class="text-primary">confirmation link</b>. Please confirm your spot as soon as possible - <b class="text-primary">1 week</b>. If you are not invited, you will be put on the <b class="text-primary">waiting list</b>, but also about that you will be informed. Normally quite some people jump off and you will probably get a place. <b class="text-primary">So, keep an eye on your inbox!</b>'
'If you are invited, you will receive an email with a <b class="text-mediumpurple">confirmation link</b>. Please confirm your spot as soon as possible - <b class="text-mediumpurple">1 week</b>. If you are not invited, you will be put on the <b class="text-mediumpurple">waiting list</b>, but also about that you will be informed. Normally quite some people jump off and you will probably get a place. <b class="text-mediumpurple">So, keep an eye on your inbox!</b>'
},
{
date: 'May 23, 2024',
title: 'Hackaburg 2024',
content: 'Everything went well and you are now part of Hackaburg 2024. '
date: 'May 22, 2025',
title: 'Hackaburg 2025',
content: 'Everything went well and you are now part of Hackaburg 2025. '
}
];
</script>
Expand All @@ -39,14 +33,14 @@
<div class="-my-6 sm:p-10">
{#each timeline as event, i}
<div class="relative pl-8 sm:pl-32 py-6 group">
<div class="font-caveat font-medium text-2xl text-primary mb-1 sm:mb-0 sm:ml-24">
<div class="font-caveat font-medium text-2xl text-palevioletred mb-1 sm:mb-0 sm:ml-24">
{event.title}
</div>
<div
class="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-slate-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-primary after:border-4 after:box-content after:border-slate-50 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5"
class="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-slate-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-mediumpurple after:border-4 after:box-content after:border-slate-50 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5"
>
<time
class="sm:absolute sm:-ml-20 w-32 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-30 pl-3 pr-3 h-6 mb-3 sm:mb-0 text-emerald-600 bg-emerald-100 rounded-full"
class="sm:absolute sm:-ml-20 w-32 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-30 pl-3 pr-3 h-6 mb-3 sm:mb-0 text-text-gray-300 bg-palevioletred rounded-full"
>{event.date}</time
>
</div>
Expand Down
21 changes: 8 additions & 13 deletions src/routes/landing/Venue.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,22 @@
<script>
import BaseComponent from '../components/BaseComponent.svelte';
import busplan from '$lib/busplan.pdf';
import Button from '../components/Button.svelte';
</script>

<BaseComponent headline={'Venue'} subHeadline={'How to get there?'} id={'venue'}>
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="p-4">
<div class="address lg:pl-24 flex flex-col dark:text-white">
<p class="text-lg mb-2 text-left">Techbase Regensburg</p>
<p class="text-lg mb-2 text-left">TechBase Regensburg</p>
<p class="text-lg mb-2 text-left">Franz-Mayer-Straße 1</p>
<p class="text-lg mb-8 text-left">93053 Regensburg</p>
<div class="grid md:grid-cols-1 gap-4">
<a
href="https://www.google.de/maps/dir//TechBase+Regensburg"
class="w-full max-w-xs text-md w-1/2 text-hackaburg border-2 border-hackaburg-900 text-hackaburg-900 rounded-3xl px-3 py-2 cursor-pointer hover:bg-hackaburg-900 hover:dark:text-white flex flex-col items-center"
>Directions</a
>
<a
href={busplan}
target="_blank"
rel="noreferrer"
class="w-full max-w-xs text-md text-hackaburg border-2 border-hackaburg-900 text-hackaburg-900 rounded-3xl px-3 py-2 cursor-pointer hover:bg-hackaburg-900 hover:dark:text-white w-1/2 flex flex-col items-center"
>Bus Stop: TechCampus/OTH
<div class="grid md:grid-cols-1 w-72">
<a href="https://www.google.de/maps/dir//TechBase+Regensburg">
<Button label="Directions" />
</a>
<a href={busplan} target="_blank" rel="noreferrer">
<Button label="Bus Stop: TechCampus/OTH" />
</a>
</div>
</div>
Expand Down
Binary file modified static/favicon.ico
View file
Open in desktop
Binary file not shown.
Loading
Loading