openneo-blog/assets/css/main.css

:root {
	/* Thanks to! https://modernfontstacks.com/ */
	--ui-font-family: system-ui, sans-serif;
	--heading-font-family: Delicious, system-ui, sans-serif;
	--body-font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
	--body-font-size-adjust: 0.5; /* Cambria is kinda small! */
}

body {
	font-family: var(--ui-font-family);
	color: #040;
	max-width: 800px;
	margin-inline: auto;
	padding-inline: 1em;
}

a {
	color: #226622;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--heading-font-family);

	a {
		color: inherit;
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}
}

body > header {
	display: grid;
	grid-template-areas:
		"logo title"
		"logo subtitle";
	grid-template-rows: auto 1fr;
	grid-template-columns: auto 1fr;
	row-gap: 0.5em;
	column-gap: 0.5em;

	padding-bottom: 0.75em;

	.logo {
		grid-area: logo;
		img {
			width: 4em;
			height: 4em;
		}
	}

	h1 {
		grid-area: title;
		font-size: 1.5em;
		margin: 0;
		a {
			color: inherit;
			text-decoration: none;
			&:hover {
				text-decoration: underline;
			}
		}
	}

	[role="doc-subtitle"] {
		grid-area: subtitle;
		font-size: 0.85em;
		margin: 0;
	}
}

main {
	border-block: 1px solid #060;
	padding-block: 0.75em;
}

body > footer {
	font-size: 0.85em;
	padding-block: 0.5em;

	nav {
		display: inline;
	}

	nav::before {
		content: "• ";
	}
}

article {
	> header {
		h2 {
			font-size: 2.5em;
			margin-bottom: 0.125em;
			margin-top: 0;
		}

		p {
			font-size: 0.85em;
			margin-top: 0;
		}
	}

	> img {
		display: block;
		max-width: 100%;
		height: auto;
		margin-inline: auto;
	}

	> :is(p, ul) {
		font-family: var(--body-font-family);
		font-size-adjust: var(--body-font-size-adjust);
		line-height: 1.4;
	}

	h3 {
		font-size: 1.5em;
	}
}

.posts {
	time {
		font-size: 0.85em;
		font-style: italic;
		margin-left: 0.25em;

		&:before {
			content: "(";
		}

		&:after {
			content: ")";
		}
	}

	p {
		margin-block: 0.5em;
	}
}

/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
@font-face {
	font-family: Delicious;
	src: local("Delicious"), url("/assets/fonts/Delicious-Roman.otf");
}

@font-face {
	font-family: Delicious;
	font-weight: bold;
	src: local("Delicious"), url("/assets/fonts/Delicious-Bold.otf");
}

@font-face {
	font-family: Delicious;
	font-style: italic;
	src: local("Delicious"), url("/assets/fonts/Delicious-Italic.otf");
}