/* The blog, on top of the home page's /css/style.css: same type, colours and
   grid, plus what a page of text needs. */

/* One centred column at any width, as the home page has it below 1360px:
   wider, a page of text would sit off to the left. (Below 860px the home
   page's own width rule applies.) */
@media only screen and (min-width : 861px) {
	.main {
		width: 798px;
	}

	h1 {
		font-size: 44px;
	}
}

.blog-header {
	justify-content: space-between;
	align-items: baseline;
}

.blog-header a {
	text-decoration: none;
}

.blog-name strong {
	text-transform: uppercase;
}

.blog-link {
	font-weight: 500;
}

.blog-headline {
	padding-top: calc(4 * var(--grid-padding));
	padding-bottom: calc(2 * var(--grid-padding));
}

.dimmed-text {
	opacity: 0.55;
}

.dimmed-text a {
	text-decoration: none;
}

/* Lists of posts */

.post-list + h2 {
	margin-top: 72px;
}

.post-list {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.post-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--grid-padding);
	padding: 10px 0px;
	border-bottom: 1px solid #efefef;
}

.post-list li:last-child {
	border-bottom: none;
}

.post-list a {
	text-decoration: none;
}

.post-list a:hover {
	text-decoration: underline;
	text-decoration-color: rgb(0, 171, 255);
}

.post-date {
	flex: none;
	font-size: 15px;
	opacity: 0.45;
	white-space: nowrap;
}

/* A post */

.post-head {
	padding-top: calc(4 * var(--grid-padding));
	padding-bottom: calc(2 * var(--grid-padding));
}

.post-head h1 {
	font-size: 44px;
	line-height: 125%;
}

.post-meta {
	margin-top: 16px;
	opacity: 0.55;
}

.post-meta a {
	text-decoration: none;
}

.post-content {
	line-height: 160%;
	overflow-wrap: break-word;
}

.post-content h2,
.post-content h3 {
	font-size: 22px;
	font-weight: 550;
	text-transform: none;
	margin-top: 48px;
	margin-bottom: 16px;
	text-align: left;
}

.post-content h2:before {
	display: none;
}

.post-content img {
	max-width: 100%;
	height: auto;
}

.post-content figure {
	margin: 32px 0px;
}

.post-content figcaption {
	font-size: 15px;
	opacity: 0.6;
	margin-top: 8px;
}

.post-content blockquote {
	margin: 24px 0px;
	padding-left: 24px;
	border-left: 2px solid rgb(0, 171, 255);
	color: #444;
}

.post-content pre {
	background-color: #f1f1f8;
	padding: 16px;
	overflow-x: auto;
	font-size: 15px;
	line-height: 140%;
}

.post-content code {
	font-size: 0.9em;
}

.post-content ul,
.post-content ol {
	padding-left: 24px;
	margin-bottom: 24px;
}

.post-content li {
	margin-bottom: 8px;
}

/* Newer and older posts */

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: var(--grid-padding);
	margin-top: 72px;
	padding-top: 24px;
	border-top: 1px solid #efefef;
}

.post-nav a {
	display: block;
	max-width: 48%;
	text-decoration: none;
}

.post-nav span {
	display: block;
	font-size: 15px;
}

.post-nav-newer {
	margin-left: auto;
	text-align: right;
}

.blog-footer {
	margin-top: 96px;
	margin-bottom: 96px;
	padding-top: 24px;
	border-top: 1px solid #efefef;
	font-size: 15px;
}

.blog-footer a {
	text-decoration: none;
	margin-right: 24px;
	opacity: 0.55;
}

@media only screen and (max-width : 860px) {
	.post-head h1 {
		font-size: 32px;
	}

	.blog-headline h1,
	h2 {
		text-align: left;
	}

	.post-list li {
		flex-direction: column;
		gap: 2px;
	}

	.post-nav {
		flex-direction: column;
	}

	.post-nav a {
		max-width: 100%;
	}

	.post-nav-newer {
		text-align: left;
		margin-left: 0px;
	}
}