index.html

---
layout: base
title: anderegg.ca
---

<div id="frontPost">
				{% for post in site.posts limit:8 %}
					<article>
						<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
						<h3 class="date">{{ post.date | date: "%B %e, %Y" }}</h3>
						{{ post.excerpt }}
						<p class="readmore"><a href="{{ post.url }}">Read more »</a></p>
						<hr>
					</article>
				{% endfor %}
				</div>

				<div class="readMore">
					<a href="/archives/">More articles &raquo;</a>
				</div>

				<style>
					@media screen and (max-width: 680px) {
						#content article > h2 {
							padding-top: 0;
						}
					}

					#frontPost {
						@media screen and (max-width: 680px) {
							padding-top: 32px;
						}

						h2 a {
							color: #DDD;
							text-decoration: none;
						}

						article {
							&:last-of-type {
								padding-bottom: 0;

								hr {
									display: none;
								}
							}

							.readmore {
								margin: 0;
							}

							hr {
								box-sizing: border-box;
								width: 80%;
								height: 16px;
								background: url(/img/pixels.png);
								image-rendering: pixelated;
								border-top: 8px solid rgba(0, 0, 0, 0.4);
								border-left: 8px solid rgba(0, 0, 0, 0.4);
								margin: 3.2em auto;

								@media screen and (max-width: 680px) {
									height: 8px;
									border-top: 4px solid rgba(0, 0, 0, 0.4);
									border-left: 4px solid rgba(0, 0, 0, 0.4);
									margin: 2.8em auto;
								}
							}
						}
					}
				</style>