godot-website/_layouts/blog.html

---
title: "Blog - Godot Engine"
description: "Keep up-to-date with the latest Godot Engine development news."
layout: default
pagination:
enabled: true
collection: article
---

{% include header.html %}

<style>
	.posts {
		display: grid;
		grid-template-columns: 1fr;
		gap: 30px;
	}

	@media (min-width: 768px) {
		.posts {
			grid-template-columns: 1fr 1fr;
		}
	}

	@media (min-width: 1024px) {
		.posts {
			grid-template-columns: 1fr 1fr 1fr;
		}
	}

	.head .main {
		display: grid;
		gap: 30px;
		padding: 20px 0 39px;
	}
	.head .main > :last-child,
	.head .main > :first-child {
		margin: 0;
	}
	@media (min-width: 902px) {
		.head .main {
			height: 120px;
			grid-template-columns: 1fr 1fr;
			align-content: center;
			padding: 0;
		}
		.head .main .search-bar {
			margin-top: 6px;
			justify-self: end;
		}
	}

	.tags {
		display: flex;
		align-items: baseline;
		gap: 10px;
		flex-wrap: wrap;
	}

	.tags h3 {
		margin-top: 1rem;
		display: inline-block;
		margin: 0;
		font-size: 19px;
	}
</style>

<div class="head">
	<div class="container flex eqsize responsive">
		<div class="main">
			<h1 class="intro-title">Blog</h1>
			<form class="search-bar" method="get" action="https://duckduckgo.com/">
				<input type="hidden" name="sites" value="godotengine.org/article" />
				<input type="text" name="q" maxlength="300" placeholder="Search articles" />
				<button class="btn search-bar-btn" type="submit">
					<img width="24" height="24" src="/assets/icons/search.svg" alt="search" title="search" />
				</button>
			</form>
		</div>
	</div>
</div>

<div class="container">
	<!-- Search -->


	<!-- Categories -->

	<div class="tags">
		<h3>Categories </h3>
		<a href="/blog/" title="Show all categories">
			<div class="tag tag--default {% if page.category == 'all' %}active{% endif %}">All</div>
		</a>

		{% for category in site.data.categories %}
		{% for tag in category[1] %}
		<a href="/blog/{{ tag.slug }}" title="{{ tag.description }}">
			<div class="tag tag--{{ category.slug }} {% if tag.slug == page.category %} active {% endif %}">
				{{ tag.name }}</div>
		</a>
		{% endfor%}
		{% endfor %}
	</div>
	{% if page.category != 'all' %}
	<h3 style="margin-top: 1rem;">Filtered by: {{ site.data.categories[page.category][0].name }}</h3>
	{% endif %}

	<!-- Posts -->
	<div class="flex pagination">
		{% if paginator.previous_page %}
		<a class="pagination-previous"
			href="{{ paginator.previous_page_path | prepend: site.url | replace: 'index.html', '' }}">← Previous</a>
		{% endif %}

		{% if paginator.page_trail %}
		{% for trail in paginator.page_trail %}
		<a {% if page.url==trail.path %}class="active" {% endif %} title="{{trail.title}}"
			href="{{ trail.path | prepend: site.url | replace: 'index.html', '' }}">{{ trail.num }}</a>
		{% endfor %}
		{% endif %}

		{% if paginator.next_page %}
		<a class="pagination-next"
			href="{{ paginator.next_page_path | prepend: site.url | replace: 'index.html', '' }}">Next →</a>
		{% endif %}
	</div>
	<div class="posts">
		{% for post in paginator.posts %}
		<a href="{{ post.url }}" style="text-decoration: none">
			<article class="article-card">
				<div class="thumbnail" style="background-image: url('{{ post.image }}');" href="{{ post.url }}"></div>
				<div class="content">
					<div class="info">
						{% assign post_author = site.data.authors | find: "name", post.author %}
						{% if post_author %}
							<img class="avatar" width="25" height="25" src="{{ post_author.image }}" alt="{{ post.author }}" loading="lazy">
						{% else %}
							<img class="avatar" width="25" height="25" src="/assets/images/authors/default_avatar.svg" alt="{{ post.author }}" loading="lazy">
						{% endif %}
						<span class="by">{{ post.author }} </span>
						<span class="date">&nbsp;-&nbsp;{{ post.date | date: "%e %B %Y" }}</span>
					</div>
					<h3>{{ post.title }}</h3>
					<p class="excerpt">{{ post.excerpt }}</p>
				</div>
			</article>
		</a>
		{% endfor %}
	</div>
	<div class="flex pagination">
		{% if paginator.previous_page %}
		<a class="pagination-previous"
			href="{{ paginator.previous_page_path | prepend: site.url | replace: 'index.html', '' }}">← Previous</a>
		{% endif %}

		{% if paginator.page_trail %}
		{% for trail in paginator.page_trail %}
		<a {% if page.url==trail.path %}class="active" {% endif %} title="{{trail.title}}"
			href="{{ trail.path | prepend: site.url | replace: 'index.html', '' }}">{{ trail.num }}</a>
		{% endfor %}
		{% endif %}

		{% if paginator.next_page %}
		<a class="pagination-next"
			href="{{ paginator.next_page_path | prepend: site.url | replace: 'index.html', '' }}">Next →</a>
		{% endif %}
	</div>
</div>


{% include footer.html %}