godot-website/pages/events.html

---
permalink: /events/index.html
layout: default
title: "Events - Godot Engine"
description: "This page lists the upcoming and previous Godot community events."
---

{% include header.html %}

<style>
	#past {
		margin-top: 30px;
	}

	.events {
		display: grid;
		grid-template-columns: 360px 1fr;
		row-gap: 3em;
	}

	.events .events-shortlist {
		padding-right: 16px;
		width: 320px;
	}

	.events .events-shortlist>div {
		position: sticky;
		top: 24px;
	}

	.events .events-shortlist>div>ul {
		margin-top: 0;
	}

	.events .events-shortlist>div>ul li {
		display: flex;
		flex-direction: column;
	}

	.events .events-shortlist>div>ul li>a {
		font-size: 110%;
	}

	.events .events-shortlist>div>ul li span:first-child {
		position: relative;
	}

	.events .events-shortlist>div>ul li span:first-child:before {
		content: "•";
		position: absolute;
		font-size: 120%;
		left: -18px;
		top: -4px;
	}

	.events .events-shortlist>div>ul li span:last-child {
		opacity: 0.64;
	}

	.events .events-fulllist .card {
		margin-bottom: 16px;
	}

	.events .events-fulllist .card:last-child {
		margin-bottom: 0;
	}

	.events .events-fulllist .card h4 {
		margin-top: 36px;
		margin-bottom: 0;
	}

	.events .events-fulllist .card img {
		border-radius: 4px;
		margin-bottom: 8px;
		width: 100%;
		max-width: 640px;
	}

	.events .events-fulllist .events-empty {
		background-color: var(--background-color);
		border: none;
	}

	.events .events-fulllist .events-empty:hover {
		box-shadow: none;
	}

	.event-details > li p {
		display: inline;
	}

	@media screen and (max-width: 900px) {
		.events {
			display: grid;
			grid-template-columns: 1fr;
			row-gap: 2em;
		}

		.events .events-shortlist>div {
			position: static;
		}

		.events .events-shortlist>div>ul {
			padding-left: 2rem;
		}
	}
</style>

<div class="head">
	<div class="container flex eqsize responsive">
		<div class="main">
			<h1 class="intro-title">Events</h1>
			<p class="small">
				You can meet Godot developers at various professional and casual events.<br />
				Sometimes our team also organizes meetups and conferences.
			</p>
		</div>
	</div>
</div>

<div class="container">

	<h2 id="upcoming">Upcoming events</h2>

	{% assign upcoming_events = site.event | where: "date_passed", "false" | sort: 'date' %}

	{% if upcoming_events == empty %}
		<p>There are currently no future events planned.</p>
	{% else %}
		{% include events-list.html events=upcoming_events %}
	{% endif %}

	<h2 id="past">Past events</h2>

	{% assign past_events = site.event | where: "date_passed", "true" | sort: 'date' | reverse %}

	{% if past_events == empty %}
		<p>There are currently no past events.</p>
	{% else %}
		{% include events-list.html events=past_events %}
	{% endif %}

</div>

{% include footer.html %}