style.css

/* TODO: reorder and comment */

body {
	margin: auto;
	max-width: 700px;

	font-family: sans-serif;
	font-size: 16px;
}

p {
	line-height: 1.5;
}

img, video {
	/* limit size */
	max-width: 100%;
	max-height: 500px;
	/* center */
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 10px;
}

div.grid {
	display: flex;
	flex-basis: 1 1 auto;
	gap: 10px;
}

/* photo gallery */
.gallery {
	list-style: none;
	display: grid;
	/* grid */
	gap: 5px;
}

.gallery > div {
	display: flex;
}

.gallery img {
	width: 100%;
	height: 100%;
}

/* hyperlinks */
a {
	text-decoration:none
}
a:hover {
	text-decoration:underline
}

h1 {
	font-size: 20px;
	font-weight: bold;
}
h2 {
	font-size: 16px;
	font-weight: bold;
}
h3, h4, h5, h6 {
	font-size: 16px;
	font-style: italic;
	font-weight: normal;
	margin-top: 16px;
	margin-bottom: 16px;
}


time {
	font-size: 0.8rem;
}

/* header style */
header > h1 {
	margin-top: 0;
}
header a, .posts a {
	color: black;
}
header ul, .posts {
	list-style: none;
	padding-left: 0;
	line-height: 1.5rem;
}

.posts > li {
	display: grid;
	grid-column-gap: 8px;
	grid-row-gap: 8px;
	grid-template-columns: 1fr min-content;
}
.posts time {
	font-weight: lighter;
	font-family: monospace;
}
.posts a {
	overflow: hidden;
}

@media screen and (min-width:1024px) {
	header {
		position: absolute;
		right: 50%;
		margin-right: 340px !important;

		padding-left: 2rem;
		padding-right: 2rem;
	}
	body {
		text-align: justify;
	}
	.gallery {
		grid-template-columns: repeat(3,1fr);
	}
}
@media screen and (max-width:1024px) and (min-width:450px) {
	header {
		border-bottom: thin dotted grey;
	}
	body {
		padding: 1rem;
	}
	.gallery {
		grid-template-columns: repeat(2,1fr);
	}
}
@media screen and (max-width:450px) {
	header {
		border-bottom: thin dotted grey;
	}
	body {
		padding: 1rem;
	}
	.gallery {
		grid-template-columns: repeat(1,1fr);
	}
	.posts > li {
		grid-template-columns: 1fr;
		grid-row-gap: 0px;
	}
}

/* give code blocks scroll bars (when necessary) */
pre {
	overflow: auto;
	padding: 1rem;
	font-size: 14px;
}

/* make footnote number and text appear on same line */
.footnote-definition > p {
	display: inline;
}

/* table styles */
table, th, td {
	border-collapse: collapse;
}

th, td {
	border-bottom: thin solid grey;
	padding: 3px;
	padding-right: 2rem;
}