public-spaces.de/src/routes/+page.svelte

<script lang="ts">
	import type { PageData } from './$types';
	import { ChevronRight } from 'lucide-svelte';
	import { DateTime } from 'luxon';
	import { onDestroy, setContext, onMount, tick } from 'svelte';
	import Logo from '../assets/logo/LOGO-public-spaces.svg';
	import HWFLogo from '../assets/logo/LOGO-hamburg-werbefrei.svg';
	import BWFLogo from '../assets/logo/LOGO-berlin-werbefrei.svg';

	export let data: PageData;
</script>

<svelte:head>
	<title>Public Spaces e.V.</title>
	<meta name="title" content={'Public Spaces e.V.'} />
	<meta
		name="description"
		content={'Public Spaces ist ein gemeinnütziger Verein, der sich für schöne, ökologische, sichere und menschenfreundliche Städte einsetzt.'}
	/>
</svelte:head>

<div class="home-runner">
	<div class="hero">
		<div class="hero-runner">
			<img src={Logo} alt="Public Spaces Logo" />
			<div class="sub-logo-split">
				<img src={BWFLogo} alt="Berlin Werbefrei Logo" />
				<img src={HWFLogo} alt="Hamburg Werbefrei Logo" />
			</div>
		</div>
	</div>

	<h2>Über Public Spaces e.V.</h2>
	<p>Public Spaces ist ein gemeinnütziger Verein, der sich für schöne, ökologische, sichere und menschenfreundliche Städte einsetzt. Wir finden, dass öffentliche Räume nach den Bedürfnissen von Menschen gestaltet werden sollten. Der häufig vorherrschenden einseitigen und lieblosen Planung nach maximaler kommerzieller Verwertbarkeit möchten wir durch unsere Vereinsarbeit entgegentreten.</p>
	<p>Mit künstlerischen Projekten, Erprobung partizipativer Formate, Öffentlichkeitsarbeit und direkter Demokratie setzen wir uns für Ortsverschönerung, Unfallverhütung und Mitsprache von uns Menschen bei der Gestaltung unserer Städte ein. Öffentlicher Raum ist unser Habitat - wir sind nicht nur Konsument:innen!</p>

	<a href="/about" class="more-cta">Mehr über uns <ChevronRight /></a>

	<hr />

	<h2>Neuste Beiträge</h2>

	<div class="posts">
		{#each data.posts as post}
			<a href={`/posts/${post.slug}`}>
				{#if !post.feature_image}
					<div class="image-placeholder">?</div>
				{/if}
				{#if post.feature_image}
					<img
						src={post.feature_image}
						alt={post.feature_image_alt || post.feature_image_caption || 'Article'}
					/>
				{/if}

				<span class="title">{post.title}</span>
				<p>{post.excerpt}</p>
			</a>
		{/each}
	</div>

	<a href="/posts" class="kg-btn">Alle Beiträge sehen</a>
	<!--<a href="/about" class="more-cta">Alle Beiträge <ChevronRight/></a>-->
</div>

<style lang="scss">
	.home-runner {
		@include contentGrid;
		margin-top: calc(0px - var(--nav-space));
	}

	.kg-btn {
		margin: 20px auto;
	}

	.more-cta {
		margin: var(--gap) var(--gap) var(--gap) auto;

		display: flex;
		justify-content: center;
		align-items: center;

		gap: var(--padding);
		font-size: 1.2em;
		text-decoration: none;
	}

	.posts {
		grid-column: wide-start/wide-end;
		display: flex;
		gap: var(--gap);
		margin-top: 1em;

		> * {
			flex-basis: 0;
			flex-grow: 1;
			width: 100px;
		}

		@media (max-width: 800px) {
			flex-direction: column;

			> * {
				width: 100%;
			}
		}

		> a {
			text-decoration: none;
			display: flex;
			flex-direction: column;

			img,
			.image-placeholder {
				width: 100%;
				height: 230px;
				background-color: var(--color-dark-surface);
				border-radius: var(--border-radius);
			}

			.image-placeholder {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 3em;
				font-weight: 600;
				color: grey;
			}

			.title {
				font-size: 1.75em;
				margin-top: 0.8em;
				font-weight: 700;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				height: 40px;
			}

			p {
				display: -webkit-box;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
				overflow: hidden;
				color: black;
			}
		}
	}

	.hero {
		grid-column: full-start/full-end;
		max-height: max(70vmin, 500px);
		min-height: 100px;
		height: 40vmax;
		position: relative;

		.hero-runner {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			padding-top: 50px;

			z-index: 2;

			display: flex;
			flex-direction: column;
			font-weight: 800;
			text-transform: uppercase;
			color: white;
			align-items: center;
			overflow: hidden;

			> img {
				flex-grow: 1;
				flex-basis: 0;
				object-fit: contain;
				object-position: center;
				max-height: 100%;
				max-width: 100%;
				height: 90%;

				opacity: 1;
				transform: translate(0, 0);

				animation-name: homeLogoIn;
				animation-duration: 0.25s;
			}

			.sub-logo-split {
				margin-top: 20px;
				height: 30%;
				width: 100%;
				margin: 0 auto;
				max-width: var(--layout-width);
				display: flex;
				gap: var(--gap);
				justify-content: space-around;

				> img {
					height: 100%;
					object-fit: contain;
					border-radius: 0;
				}

				@media (max-width: 350px) {
					flex-direction: column;
					height: 50%;
				}
			}
		}
	}

	@keyframes homeLogoIn {
		0% {
			transform: translate(-10%, -25%);
			opacity: 0;
		}
		100% {
			transform: translate(0, 0);
			opacity: 1;
		}
	}
</style>