source ⟩ hypertext ⟩ public ⟩ cosmetics ⟩ style.css

:root {
	--background: #1c0f27;
	--text: #fffe;
	--accent: #ce619d;
	--accent-translucent: color-mix(in srgb, var(--accent) 50%, transparent);
	--accent-seethrough: color-mix(in srgb, var(--accent) 12.5%, transparent);

	/* Basics */
	--system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu,
		Roboto, sans-serif;
	--sans-serif: "Alegreya Sans TSF", "Alegreya Sans", "Source Sans 3",
		"Source Sans Pro", "Source Sans", var(--system), sans-serif;
	--serif: "EB Garamond TSF", "EB Garamond", Garamond, "Adobe Garamond",
		"URW Palladio L", "Times New Roman", "Times", "Baskerville",
		"Cormorant Garamond", "Cormorant", serif;
	--typewriter: "Drafting Mono", monospace;

	/* Alternate styles */
	--cormorant: "Cormorant Garamond", var(--serif);
	--blackletter: UnifrakturCook, UnifrakturMagnutia, Franktur, Textura,
		Old English MT, fantasy;

	/* Specific typefaces and substitutes */
	--gill-sans: "Gill Sans", "Gill Sans MT", "Gill Sans Nova", Lato,
		var(--sans-serif);
	--helvetica: "Helvetica Neue", "Helvetica Now", "Arial Nova", "Arial",
		Helvetica, Liberation Sans, Arimo, sans-serif;
	--palatino: "Palatino Linotype", "Palatino", "URW Palladio L",
		"Book Antiqua", var(--serif);
	--times: "Times New Roman", "Times", serif;
	--verdana: Verdana, Bitstream Vera, Bitstream Vera Sans, Vera, var(--system);

	--caps-spacing: 0.05em;

	font-size: 1.225rem;

	scrollbar-color: var(--accent) var(--background);
}

* {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion) {
	* {
		scroll-behavior: auto;
	}
}

:lang(ar, ur, he) {
	direction: rtl;
}

body {
	margin: 0;

	color: var(--text);
	font-family: var(--serif);
	font-variant-alternates: styleset(tailed-q);
	font-variant-numeric: oldstyle-nums proportional-nums;
	hyphens: auto;
	line-height: 1.45;

	background-attachment: fixed;
	background-color: var(--background);
	background-repeat: repeating;
	/* Meant for pages with a vignette, like /heraldry */
	background-size: 100% 100%, auto;
}

main {
	max-inline-size: 70ch;
	margin: auto;
	padding: 2ch;
}

p {
	hyphens: auto;
	text-align: justify;
	text-wrap: pretty;
}

figure {
	margin: 0;
	padding: 0;
}

img {
	display: block;

	max-inline-size: 100%;
	margin-block: 1ch;
	margin-inline: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--accent);
	hyphens: initial;
	line-height: 1.1;
	text-wrap: balance;
}

:is(h2, h3, h4, h5, h6) a[href^="#"] {
	color: inherit;
	text-decoration: none;
}

h1 {
	font-feature-settings: "swsh", "dlig", "clig", "hlig";
	text-align: center;
}

a {
	color: var(--accent);
	text-decoration: underline 1px;
	text-decoration-style: dotted;

	cursor: pointer;
}

a[href^="http"], a[href^="//"], a[href^="mailto:"]
{
	text-decoration-style: solid;
}

mark {
	padding-block: 0.1em;
	padding-inline: 0.25em;

	color: var(--text);

	background-color: var(--accent-translucent);
}

.table-container {
	max-inline-size: 100%;
	overflow-x: auto;
}

table {
	border-collapse: collapse;
}

b,
strong,
th,
dt {
	color: var(--accent);
	font-weight: bold;
}

.allcaps,
.all-caps {
	letter-spacing: var(--caps-spacing);
	text-transform: uppercase;
}

.uppercase {
	letter-spacing: var(--caps-spacing);
}

.centre {
	display: block;
	margin-inline: auto;

	text-align: center;
}

td.centre,
th.centre {
	display: table-cell;
}

.align-start {
	align-self: start;
	text-align: start;
}

:is(figure, img, video, audio).align-start {
	float: left;
	text-align: inherit;
}

.align-end {
	align-self: end;
	text-align: end;
}

:is(figure, img, video, audio).align-end {
	float: right;
	text-align: inherit;
}

code,
pre,
.monospace {
	font-family: var(--typewriter);
}

pre,
code:not(pre code) {
	font-size: 0.9em;
}

pre {
	max-inline-size: 100%;
	overflow-x: auto;
	tab-size: 4;
}

/* Syntax highlighting */
/* Adapted from Pygments’ “algol-nu” theme */

.hljs-comment,
.hljs-pug-selector {
	opacity: 0.5;
}

.hljs-keyword {
	font-weight: bold;
}

.hljs-tag,
.hljs-string {
	font-style: italic;
}

.hljs-built_in,
.hljs-title,
.hljs-variable {
	font-style: italic;
	font-weight: bold;
}

.serif {
	font-family: var(--serif);
}

.smallcaps,
.small-caps {
	font-variant: small-caps;
	letter-spacing: var(--caps-spacing);
}

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

.c2sc {
	font-feature-settings: "c2sc";
	letter-spacing: var(--caps-spacing);
}

blockquote {
	margin-block: 0.5em;

	font-size: 0.85em;
}

blockquote footer {
	font-style: normal;
}

blockquote footer::before {
	content: "—";
}

q {
	font-style: italic;
}

ul.no-list,
ol.no-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.no-list > li,
ol.no-list > li {
	margin: 0;

	text-align: inherit;
	text-wrap: inherit;
}

li {
	margin: 0.1em;
}

li::marker {
	font-variant-numeric: oldstyle-nums proportional-nums;
}

hr {
	border-color: var(--accent);
}

.accent {
	color: var(--accent);
}

input[type="text"],
input[type="password"] {
	padding: 10px;
	margin: 5px;

	color: var(--accent);
	font-size: 14pt;
	font-family: inherit;

	background-color: transparent;
	border: none;
	border-block-end: 1px solid var(--accent);
}

button {
	padding-inline: 0.5rem;

	color: var(--accent);
	font-family: inherit;
	font-size: 1em;
	font-variant-numeric: inherit;

	background-color: transparent;
	border: 1px solid var(--accent);

	transition-duration: 0.5s;
}

button:hover,
button:focus {
	cursor: pointer;
}

details {
	border: 1px solid var(--accent);
}

details > :not(summary) {
	padding: 0 1em;
}

summary {
	padding: 0.5em;

	color: var(--accent);
	font-weight: bold;
	text-align: center;

	cursor: pointer;
}

sup,
sub {
	position: relative;
	vertical-align: baseline;
}

sup {
	inset-block-start: -0.4em;
}

sub {
	inset-block-start: 0.4em;
}

math {
	font-family: "Garamond Maths TSF", "Garamond Math", "Garamond-Math",
		"EB Garamond TSF", "EB Garamond", math, serif;
	font-variant-numeric: normal;
}

p.equation {
	margin-inline-start: 2rem;
}

.shortinput {
	inline-size: 30px;
}

.page-footer {
	margin-block-start: 0.5rem;

	text-align: center;

	& #home-link {
		margin-block-end: 0.3rem;
	}

	& #licence {
		display: block;
		font-size: 0.85em;
		font-style: italic;
	}

	& > ul {
		display: block;
		margin: 0;
		padding: 0;

		color: var(--accent);
		font-size: 0.85em;
		font-style: italic;
		text-align: center;

		& li {
			display: block;
			margin: 0;
			padding: 0;
		}
	}
}

/* Breadcrumb navigation, as seen on /words/loanwords */
.breadcrumbs {
	margin-block: 1em;
	margin-inline: 0;

	text-align: center;
}

.flag {
	display: inline-block;
	block-size: 0.7em;
	max-inline-size: none;
	margin: 0;

	border: 1px solid var(--text);
}

.flag.irregular {
	border: none;
	filter: drop-shadow(0 1px var(--text)) drop-shadow(0 -1px var(--text))
		drop-shadow(1px 0 var(--text)) drop-shadow(-1px 0 var(--text));
}

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

u.overline,
.overline,
.gnum {
	text-decoration: overline;
}

nav.languages {
	margin-block-end: 1rem;
	margin-inline: auto;
}

nav.languages ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;

	margin: auto;
	margin-block-start: 0.5em;
	padding: 0;

	text-align: center;
}

nav.languages li {
	display: inline-block;
	margin-block: 0;
	margin-inline: 0.5em;
}

/* UNDER CONSTRUCTION sign for pages that are, well, under construction */

.under-construction {
	margin-block: 1rem;
	margin-inline: 0;
	padding: 0.5rem 1rem;

	background-color: #fdd835;

	color: #000e;
	font-style: italic;
}

.under-construction > strong {
	color: inherit;
	font-size: 1.4rem;
}

.visually-hidden,
.sr-only,
.sr-until-focus:not(:focus, :focus-within) {
	position: absolute;

	block-size: 1px;
	inline-size: 1px;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;

	white-space: nowrap;
}

/* Fonts */

@font-face {
	font-family: "EB Garamond TSF";
	src: url("/fonts/EB_Garamond_MF_Unicode_BoldItalic.woff2") format("woff2");
	font-weight: bold;
	font-style: italic;
	font-display: fallback;
}

@font-face {
	font-family: "EB Garamond TSF";
	src: url("/fonts/EB_Garamond_MF_Unicode_Italic.woff2") format("woff2");
	font-weight: normal;
	font-style: italic;
	font-display: fallback;
}

@font-face {
	font-family: "EB Garamond TSF";
	src: url("/fonts/EB_Garamond_MF_Unicode.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "EB Garamond TSF";
	src: url("/fonts/EB_Garamond_MF_Unicode_Bold.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "Alegreya Sans TSF";
	src: url("/fonts/alegreyasans-bolditalic.woff2") format("woff2");
	font-weight: bold;
	font-style: italic;
	font-display: fallback;
}

@font-face {
	font-family: "Alegreya Sans TSF";
	src: url("/fonts/alegreyasans-italic.woff2") format("woff2");
	font-weight: normal;
	font-style: italic;
	font-display: fallback;
}

@font-face {
	font-family: "Alegreya Sans TSF";
	src: url("/fonts/alegreyasans-regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "Alegreya Sans TSF";
	src: url("/fonts/alegreyasans-bold.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
	font-display: fallback;
}
@font-face {
	font-family: "Drafting Mono";
	font-style: normal;
	font-weight: 400;
	src: local(""), url("/fonts/DraftingMono-Regular.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
	font-family: "Drafting Mono";
	font-style: normal;
	font-weight: 700;
	src: local(""), url("/fonts/DraftingMono-Bold.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
	font-family: "Drafting Mono";
	font-style: italic;
	font-weight: 400;
	src: local(""), url("/fonts/DraftingMono-Italic.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
	font-family: "Drafting Mono";
	font-style: italic;
	font-weight: 700;
	src: local(""), url("/fonts/DraftingMono-BoldItalic.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
	font-family: "Garamond Maths TSF";
	src: local(""), url("/fonts/garamond-maths.woff2") format("woff2");
	font-display: fallback;
}

@font-feature-values "EB Garamond TSF" {
	@styleset {
		tailed-q: 6;
	}
}