blog.html

---
layout: default
title: "Blog"
---

<style>
	.blog-posts {
		display: grid;
		grid-template-columns: 210px auto;
		gap: 10px;
		text-align: left;
	}
	
	.post-text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		-webkit-background-clip: text;
		background-clip: text;
		background-image: linear-gradient(#000, transparent);
		color: transparent;
		max-height: 6em;
	}
	
	.post-image {
		height: 200px;
		width: 200px;
		display: inline-block;
		image-rendering: pixelated;
		border: 2px solid black;
	}
	
	.post-description {
		position: relative;
		display: inline-block;
		vertical-align: top;
	}
	
	.post-description h3 {
		display: inline;
		white-space: wrap;
	}
	
	.post-link {
		position: absolute;
		bottom: 0;
	}
	
	@media screen and (max-width: 900px){
		.post-text {
			-webkit-line-clamp: 2;
		}
	}
	
	@media screen and (max-width: 760px){
		.post-text {
			-webkit-line-clamp: 1;
		}
		
		.minecraft-button {
			width: 240px;
			font-size: 10px;
			background-image: url('assets/btn-minecraft-small.png');
		}
	
		.minecraft-button:hover {
			background-image: url('assets/btn-minecraft-small-hover.png');
		}
	}
</style>

<div class="guibox center">
	<h1>Blog</h1>
	<div class="blog-posts">
		{%- for post in site.posts -%}
			{% if post.type == 'blog' %}
			<img src="{% if post.image %}{{ post.image }}{% else %}{{ site.baseurl }}/assets/post-image-placeholder.png{% endif %}" class="post-image">
			<div class="post-description">
				<h3 style="display: inline;">{{ post.title }}</h3> <span style="color: #777777">{{ post.date | date: "%B" }} {{ post.date | date: "%d" | plus:'0' }}, {{ post.date | date: "%Y" }}</span><br>
				<span class="post-text">{%- if post.markdown != false -%}{{ post.preview-text | markdownify }}{%- else -%}{{ post.preview-text }}{%- endif -%}</span>
				<a href="{{ post.permalink }}" class="minecraft-button post-link">Read Post</a>
			</div>
			{% endif %}
		{%- endfor -%}
	</div>
	<p><a href="{{ site.baseurl }}/" class="minecraft-button center">Return</a></p>
</div>