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

<script lang="ts">
	//import type { PageData } from './$types';
	//import { ChevronRight } from 'lucide-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>
	</div>

	<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>
	<p>Public Spaces ist Trägerin zweier Volksinitiativen:</p>

	<div class="sub-logo-split">
		<a href="https://berlin-werbefrei.de" title="Berlin Werbefrei">
			<img src={BWFLogo} alt="Berlin Werbefrei Logo" />
		</a>
		<a href="https://www.hamburg-werbefrei.de" title="Hamburg Werbefrei">
			<img src={HWFLogo} alt="Hamburg Werbefrei Logo" />
		</a>
	</div>

	<!--<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>-->
</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;
		min-height: 100px;
		height: 30vmax;
		max-height: 500px;
		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: 200px;
		margin: 0;
		display: flex;
		gap: var(--gap);
		justify-content: space-around;

		> a {
			display: contents;
		}

		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>