godot-website/_layouts/article.html

---
layout: default
---

{% include header.html %}

<style>
	body {
		background-color: var(--background-color);
	}

	h1 {
		margin-bottom: 8px;
		margin-top: 32px;
	}

	:not(pre)>code {
		background: var(--code-background-color);
		padding: 1px 4px;
		font-size: 0.95em;
		border-radius: 3px;
	}

	pre {
		background: var(--codeblock-background-color);
		color: var(--codeblock-color);
	}

	pre code {
		display: block;
		overflow-x: auto;
		padding: .5em;
	}

	.date-big {
		line-height: 2;
		margin-left: 32px;
	}

	article {
		background-color: var(--base-color);
		box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.15);
	}

	figure {
		margin: 0;
	}

	figure img {
		margin: 0;
	}

	article img,
	article video {
		max-width: 100%;
		height: auto;
		display: block;
		margin: auto;
		margin-top: 16px;
		margin-bottom: 16px;
	}

	article h1 {
		margin-top: 64px;
	}

	article h2,
	article h3,
	article h4 {
		margin-top: 42px;
	}

	.article-info {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.article-metadata {
		display: flex;
		gap: 24px;
		align-items: center;
		font-family: var(--header-font-family);
		margin-bottom: 12px;
	}

	@media (max-width: 900px) {
		.article-metadata {
			flex-direction: column;
			align-items: flex-start;
			gap: 16px;
		}
	}

	.article-author {
		color: var(--base-color-text-subtitle-date);
		font-weight: 700;
		font-size: 18px;
		flex-grow: 1;
		display: flex;
		gap: 12px;
		align-items: center;
	}

	.article-author .avatar {
		border-radius: 100%;
		margin: 0;
	}

	.article-author .by {
		color: var(--base-color-text-subtitle);
	}

	.article-metadata .date {
		color: var(--base-color-text-subtitle-date);
	}

	.article-metadata .date.post-recent-highlight {
		color: var(--post-recent-highlight-color);
		opacity: 0.8;
	}

	.article-metadata .date.post-recent-highlight::after {
		font-size: 80%;
		content: "NEW";
		border: 2px solid var(--post-recent-highlight-color);
		padding: 2px 3px;
		margin-left: 8px;
	}

	.tag.active {
		filter: saturate(0.75);
	}

	@media screen and (min-width: 900px) {
		article .content {
			width: 70%;
			margin: auto;
		}
	}

	@media (max-width: 900px) {
		body {
			background-color: var(--base-color);
		}

		article {
			background-color: transparent;
			box-shadow: none;
		}

		article img:first-child,
		article video:first-child {
			max-width: 100%;
		}
	}
</style>

<link rel="stylesheet" href="/assets/css/highlight.obsidian.min.css">

<div class="container">
	<article class="padded">
		<div class="content article-container">
			<figure class="article-cover">
				{% if page.image_caption_title or page.image_caption_description %}
				<figcaption>
					<strong>{{ page.image_caption_title }}</strong>
					<span style="margin-left: 0.75rem; font-size: 90%">{{ page.image_caption_description }}</span>
				</figcaption>
				{% endif %}

				<img src="{{ page.image }}" title="{{ page.image_caption_title }}"
					alt="{{ page.image_caption_title }} {{ page.image_caption_description }}" class="rounded-lg"
					style="width: 100%; height: auto; background-color: transparent;" />
			</figure>

			<div class="article-info">
				<h1>
					{{ page.title }}
				</h1>
				<div class="article-metadata">
					<div class="article-author">
						<span>By: </span>
						{% assign post_author = site.data.authors | find: "name", page.author %}
						{% if post_author %}
							<img class="avatar" width="25" height="25" src="{{ post_author.image }}" alt="{{ page.author }}" loading="lazy">
						{% else %}
							<img class="avatar" width="25" height="25" src="/assets/images/authors/default_avatar.svg" alt="{{ page.author }}" loading="lazy">
						{% endif %}
						<span class="by">{{ page.author }}</span>
					</div>
					<span class="date" data-post-date="{{ page.date }}"> {{ page.date | date: "%e %B %Y" }}</span>
				</div>

				<div class="tags">
					{% for category in page.categories %}
					<a href="/blog/{{ category }}">
						<div class="tag active">{{ site.data.categories[category][0].name }}</div>
					</a>
					{% endfor %}
				</div>
			</div>

			{% include articles/outdated_notice.html %}

			<div class="article-body">
				{{ content }}
			</div>
		</div>
	</article>
</div>

<link rel="stylesheet" href="/assets/css/anchor-link.css?1">
<link rel="stylesheet" href="/assets/css/article-cards.css?2">
<script src="/assets/js/anchor-link.js"></script>
<script>
	document.addEventListener('DOMContentLoaded', () => {
		// Add icons to easily copy section links.
		window.applyAnchorLinks('.article-body');

		// Add lightbox elements in blog articles for Tobii.
		document.querySelectorAll('.article-cover img, .article-body img').forEach((articleImg) => {
			if (articleImg.classList.contains('lightbox-ignore')) {
				return;
			}

			const lightbox = document.createElement('a');
			lightbox.href = articleImg.src;
			lightbox.classList.add('lightbox');
			lightbox.dataset.group = 'article';
			articleImg.parentNode.appendChild(lightbox);
			lightbox.appendChild(articleImg);
		});
	});
</script>

{% include footer.html %}