source ⟩ hypertext ⟩ public ⟩ words ⟩ words.css

:root {
	--background: #f8f0e0;
	--text: #221e17;
	--accent: #221e17;
	--accent-translucent: #221e1788;
	--accent-seethrough: #221e1722;
}

body {
	font-size: 1.15rem;
	text-shadow: -0.5px -0.5px #221e1711, 1px 1px #fff8;

	background: linear-gradient(to left, #000c 0, transparent 10px),
		url("/words/boeken.jpg"), var(--background);
}

main {
	max-inline-size: 90ch;
	padding: 1em;

	background: var(--background);
	box-shadow: 0 0 1em black, 0 0 2em black;
}

/* Header */

h1 {
	margin-block-start: 0;

	font-family: var(--cormorant);
	font-variant-caps: small-caps;
	font-weight: normal;
	word-spacing: 0.06em;
}

h1 small {
	font-size: 0.75em;
}

h1 strong {
	display: block;
	margin-block-end: -0.5rem;

	font-size: 1.5em;
	font-weight: normal;
}


h2.letter-header {
	margin: 0;
	padding-block: 0.5rem 0.3rem;
	padding-inline: 1.5rem;

	font-family: var(--cormorant);
	font-size: 2rem;
	font-weight: normal;
	letter-spacing: -0.125ch;
	text-align: center;

	border-block-end: 1px solid var(--accent-translucent);
}

h2.letter-header:first-of-type {
	border-block-start: 1px solid var(--accent-translucent);
}

/* Words */

section {
	display: flex;
	flex-direction: row;
	gap: 1em;

	padding-block: 1em;
	padding-inline: 1.5em;
	overflow: auto;

	border-block-end: 1px solid var(--accent-translucent);
}

/* Pictures */

figure {
	float: right;

	max-inline-size: 15ch;
	margin-inline-start: 1em;
}

figure img {
	max-block-size: 20ch;
	margin-block: 0 1ch;
	margin-inline: 0;
	border: 1px solid var(--text);
}

figcaption {
	font-style: italic;
	font-size: 0.8em;
	line-height: 1.1;
}

figcaption i {
	font-style: normal;
}

/* The word itself */

.grid-word {
	flex: 0 0 25%;
	text-align: end;
}

small.aside {
	display: block;

	font-variant-caps: all-small-caps;
	letter-spacing: var(--caps-spacing);
}

.word {
	font-weight: bold;
}

a.word {
	text-decoration: none;
}

.plural {
	font-size: 0.8em;

	& abbr {
		font-style: italic;
	}
}

.pronunciation {
	font-size: 0.8em;
}

.pronunciation em {
	font-style: normal;
	font-variant-caps: all-small-caps;
	letter-spacing: var(--caps-spacing);
}

.etymon {
	font-size: 0.8em;
	hyphens: auto;
	
	& span, & i {
		hyphens: none;
	}
}

/* Definitions */

.grid-definition {
	flex-grow: 1;
}

.grid-definition > p:first-child {
	margin-block-start: 0;
}

abbr.grammar {
	font-style: italic;
}

table {
	font-size: 0.8em;
}

thead {
	border-block-end: 1px solid var(--accent-translucent);
}

table tr * {
	vertical-align: top;
	text-align: start;
}

table tr :first-child {
	hyphens: initial;
}

table tr :not(:last-child) {
	padding-inline-end: 1ch;
}

.citation blockquote {
	font-size: 0.8em;
}

.citation blockquote p:first-child {
	margin-block-start: 0;
}

.citation blockquote p:last-of-type {
	margin-block-end: 0;
}

.footnotes {
	font-size: 0.8em;
}

/* Inline stuff */

hr {
	border-block-end: 0;
	border-block-start: 1px solid var(--accent-translucent);
}

mark {
	padding: 0;
	margin: 0;

	font-weight: bold;

	background: transparent;
}

.monospace {
	font-size: 0.9em;
	font-variant-ligatures: none;
}

@media screen and (max-width: 680px) {
	body {
		font-size: 1rem;
	}
	section {
		flex-direction: column;

		padding-inline: 0;
	}
}


@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400;
	src: local("Cormorant Garamond Regular"), local("CormorantGaramond-Regular"),
		url("/fonts/cormorant-regular.woff2") format("woff2");
	font-display: fallback;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 400;
	src: local("Cormorant Garamond Italic"), local("CormorantGaramond-Italic"),
		url("/fonts/cormorant-italic.woff2") format("woff2");
	font-display: fallback;
}