events.html

---
layout: default
title: Events
permalink: /events.html
---

<div class="container">
	<div class="logo-container fade-in-auto">
		<a href="{{ site.baseurl }}/">
			<img src="{{ site.baseurl }}/images/marc-logo-new-darkgreen.svg" alt="MARC Logo" class="home-logo">
			<div class="back-icon">
				<i class="fa-solid fa-arrow-left"></i> Back to Home
			</div>
		</a>
	</div>
	
	<h1 class="fade-in-auto">Events</h1>
	
	<!-- Next Upcoming Event Section -->
	<section id="next-event" class="event-section fade-in">
		<h2><i class="fa-solid fa-calendar-week"></i> Next Event</h2>
		<div class="next-event-info">
			{% include next_event.html %}
		</div>
	</section>
	
	<!-- Upcoming Events with Google Calendar -->
	<section id="upcoming-events" class="event-section fade-in">
		<h2><i class="fa-solid fa-calendar-days"></i> Upcoming Events</h2>
		<p>Check out all our upcoming events in our calendar:</p>
		<div class="calendar-container">
			<iframe class="desktop-calendar" src="https://calendar.google.com/calendar/embed?height=600&wkst=2&ctz=Europe%2FBerlin&showPrint=0&title=MARC%20Events&src=ZGlkdHNjZ3ZnbHV1MHNnODl2b2U2Ym1idmYwaXJkZWtAaW1wb3J0LmNhbGVuZGFyLmdvb2dsZS5jb20&color=%2309603F" style="border:solid 1px #777" width="800" height="600" frameborder="0" scrolling="no"></iframe>
			<iframe class="mobile-calendar" src="https://calendar.google.com/calendar/embed?height=600&wkst=2&ctz=Europe%2FBerlin&showPrint=0&title=MARC%20Events&src=ZGlkdHNjZ3ZnbHV1MHNnODl2b2U2Ym1idmYwaXJkZWtAaW1wb3J0LmNhbGVuZGFyLmdvb2dsZS5jb20&color=%2309603F" style="border:solid 1px #777" width="800" height="600" frameborder="0" scrolling="no"></iframe>
		</div>
	</section>
	
	<!-- Special Events -->
	<section id="special-events" class="event-section fade-in">
		<h2><i class="fa-solid fa-star"></i> Special Events</h2>
		<div class="special-events-container">
			<div class="special-event">
				<h3>Cooking Workshop</h3>
				<p>If you are interested in becoming vegan, join our cooking workshop to learn how! You can register via this <a href="https://forms.gle/frscDVEG19mBBi8B9" style="color: blue;" target="_blank" rel="noopener noreferrer">link</a>. </p>
				<p><span>When:</span> December 16, 2025 at 7 pm</p>
				<p><span>Where:</span> Kirchenstr. 6, 81675 Munich</p>
			</div>
		</div>
	</section>
	
	<!-- Past Events -->
	<section id="past-events" class="event-section fade-in">
		<h2><i class="fa-solid fa-clock-rotate-left"></i> Highlights</h2>
		<div class="posts grid-layout">
			{% for post in site.posts %}
			<a href="{{ post.url }}" class="post-card">
				<div class="image" style="background-image: url('{{ post.featured_image }}')"></div>
				<div class="post-content">
					<p class="date">{{ post.date | date: '%B %d, %Y' }}</p>
					<h3>{{ post.title }}</h3>
					<p class="post-teaser">{{ post.teaser }}</p>
				</div>
			</a>
			{% endfor %}
		</div>
	</section>
</div>

<style>
/* Fade-in animations */
.fade-in, .fade-in-auto {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.appear, .fade-in-auto.appear {
    opacity: 1;
    transform: translateY(0);
}

.logo-container {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    text-align: center;
}

.logo-container a {
    text-decoration: none;
    color: #333;
}

.home-logo {
    height: 100px;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease;
}

.home-logo:hover {
    transform: scale(1.05);
}

.back-icon {
    margin-top: 0.5rem;
    font-size: 14px;
    color: #666;
    transition: color 0.3s ease;
}

.back-icon:hover {
    color: #20ca5a;
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.button {
    background-color: #09603F;
    border-radius: 4px;
    padding: 10px 20px;
    display: inline-block;
}

.button a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.event-section {
	margin-bottom: 3rem;
}

.next-event-info {
	background-color: #f5f5f5;
	padding: 20px;
	border-radius: 8px;
	margin-top: 1rem;
}

.next-event-info h3 {
	color: #09603F;
	margin-top: 0;
}

.next-event-info span {
	font-weight: bold;
}

.calendar-container {
	margin-top: 1rem;
	position: relative;
	overflow: hidden;
	padding-top: 75%; /* 4:3 aspect ratio for desktop */
	width: 100%;
}

.calendar-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.mobile-calendar {
	display: none;
}

@media screen and (max-width: 768px) {
	.calendar-container {
		padding-top: 120%; /* Taller aspect ratio for mobile */
	}
	
	.desktop-calendar {
		display: none;
	}
	
	.mobile-calendar {
		display: block;
	}
}

.special-events-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 1rem;
}

.special-event {
	background-color: #f5f5f5;
	padding: 20px;
	border-radius: 8px;
	flex: 1 1 300px;
}

.special-event h3 {
	color: #09603F;
	margin-top: 0;
}

.special-event span {
	font-weight: bold;
}

.post-card {
	background-color: #f5f5f5;
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.3s ease;
	text-decoration: none;
	color: inherit;
	display: block;
}

.post-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	text-decoration: none;
	color: inherit;
}

.grid-layout {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.post-card .image {
	width: 100%;
	height: 150px;
	background-size: cover;
	background-position: center;
}

.post-card .post-content {
	padding: 15px;
}

.post-card .date {
	color: #777;
	margin-bottom: 5px;
}

.post-card h3 {
	margin: 0 0 10px 0;
}

.post-card .post-teaser {
	margin: 0;
}
</style>

<script>
// Auto fade-in for elements marked with fade-in-auto
const autoFadeElements = document.querySelectorAll('.fade-in-auto');
autoFadeElements.forEach(element => {
    setTimeout(() => {
        element.classList.add('appear');
    }, 500);
});

// Scroll-based fade-in for elements marked with fade-in
function handleScroll() {
    const fadeElements = document.querySelectorAll('.fade-in');
    fadeElements.forEach(element => {
        const rect = element.getBoundingClientRect();
        if (rect.top <= window.innerHeight * 0.8) { // Element is 80% within viewport
            element.classList.add('appear');
        }
    });
}

window.addEventListener('scroll', handleScroll);
// Initial check for elements in viewport
handleScroll();
</script>