source ⟩ hypertext ⟩ public ⟩ codex ⟩ codex.css

:root {
	--background: #F8F0E8;
	--text: #262016;
	--accent: #23296D;
	--accent-translucent: #23296DAA;
	--accent-seethrough: #23296D22;

	--accent-annotation: #AD2376;

	--garamond-main: var(--serif);
	--garamond-insert: var(--palatino);
	--garamond-header: UnifrakturCook, var(--serif);

	--alegreya-main: var(--sans-serif);
	--alegreya-insert: var(--sans-serif);
	--alegreya-header: var(--gill-sans);

	--verdana-main: var(--verdana);
	--verdana-insert: var(--verdana);
	--verdana-header: "Verdana Pro", var(--verdana);

	--main-type: var(--garamond-main);
	--insert-type: var(--garamond-insert);
	--header-type: var(--garamond-header);
}

:lang(el), :lang(grc) {
	--garamond-header: "GFS Theokritos", UnifrakturCook, var(--serif);
}

:lang(eo) {
	--garamond-header: Alegreya, var(--serif);
}

:lang(ru) {
	--garamond-header: Monomakh Unicode, var(--serif);
}

:lang(ar) {
	direction: rtl;
	--garamond-main: Amiri, var(--serif);
	--garamond-header: Rakkas, var(--garamond-main);
}

ol:lang(ar) li {
	list-style-type: arabic-indic;
}

:lang(hi) {
	--garamond-main: Sahitya, var(--serif);
	--garamond-header: var(--garamond-main);
}

ol:lang(hi) li {
	list-style-type: devanagari;
}

:lang(ja) {
	--garamond-main: "Source Han Serif", "Source Han Serif JP", "Noto Serif CJK JP", "Noto Serif CJK", "Source Serif 4 Variable", "Source Serif 4", "Source Serif Pro", "Source Serif", serif;
	--garamond-header: var(--garamond-main);
	--alegreya-main: "Source Han Sans", "Source Han Sans JP", "Noto Sans CJK JP", "Noto Sans CJK", "Source Sans 3", "Source Sans Pro", "Source Sans", var(--system);
	--alegreya-header: var(--alegreya-main);
}

:lang(zh) {
	--garamond-main: "Source Han Serif", "Source Han Serif JP", "Noto Serif CJK JP", "Noto Serif CJK", "Source Serif 4 Variable", "Source Serif 4", "Source Serif Pro", "Source Serif", serif;
	--garamond-header: var(--garamond-main);
	--alegreya-main: "Source Han Sans", "Source Han Sans JP", "Noto Sans CJK JP", "Noto Sans CJK", "Source Sans 3", "Source Sans Pro", "Source Sans", var(--system);
	--alegreya-header: var(--alegreya-main);
}

ol:lang(zh) li {
	list-style-type: simp-chinese-informal;
}

:lang(zh-Hant) {
	--garamond-main: "Source Han Serif", "Source Han Serif JP", "Noto Serif CJK JP", "Noto Serif CJK", "Source Serif 4 Variable", "Source Serif 4", "Source Serif Pro", "Source Serif", serif;
	--garamond-header: var(--garamond-main);
	--alegreya-main: "Source Han Sans", "Source Han Sans JP", "Noto Sans CJK JP", "Noto Sans CJK", "Source Sans 3", "Source Sans Pro", "Source Sans", var(--system);
	--alegreya-header: var(--alegreya-main);
}

ol:lang(zh-Hant) li {
	list-style-type: trad-chinese-informal;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;

	min-block-size: 100vb;
	margin: auto;

	font-family: var(--main-type);

	background-size: cover;
	background-position: center;
}

#body-container {
	display: block;

	max-inline-size: 100vi;
	margin: auto;

	text-shadow: 1px 1px #FFF6;

	background: var(--background);
}

html.has-chapters #body-container {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto auto;
	justify-items: center;

	inline-size: 100ch;
}

.chapter-select {
	z-index: 100;

	grid-column: 1 / -1;

	inline-size: 100%;
}

main {
	padding-inline: 4ch;
	flex-grow: 1;
	flex-shrink: 1;
}

blockquote {
	font-size: 1em;
	font-style: italic;
}

nav+main h1 {
	margin-block-start: 0.5rem;
}

h1 small, h1 .citation {
	display: block;

	font-feature-settings: "swsh"0;
	font-size: 1.25rem;
	font-weight: normal;
}

h1 .citation {
	margin-block-start: 1em;

	font-size: 0.9rem;
}

h1, h2, h3 {
	font-family: var(--header-type);
	font-weight: 900;
}

html[codex-type="alegreya"] :is(h1, h2, h3) {
	font-weight: normal;
}

html[codex-type="garamond"]:lang(eo) :is(h1, h2, h3) {
	font-style: italic;
}

html[codex-type="garamond"]:lang(eo) :is(h1, h2, h3) .citation {
	font-style: normal;
}

html[codex-type="alegreya"]:is(:lang(ja), :lang(zh), :lang(ko)) :is(h1, h2, h3) {
	font-weight: 900;
}

.r-rotunda {
	display: inline-block;

	margin-inline-start: -0.05em;
}

.citation {
	font-family: var(--main-type);
}

ins {
	color: var(--accent-annotation);
	font-family: var(--insert-type);
	font-size: 0.9em;
	font-style: italic;
	text-decoration: none;
}

ins::before {
	content: "[";

	font-style: normal;
}

ins::after {
	content: "]";

	font-style: normal;
}

p:not(.has-drop-cap, aside.note p:first-child) {
	text-indent: 2em;
}

p:not(.has-drop-cap, aside.note p:first-child):is(:lang(ja), :lang(zh), :lang(kr)) {
	text-indent: 1em;
}

p.has-drop-cap::first-letter {
	float: left !important;
	margin: 0.167em 0.083em 0 0 !important;

	font-family: var(--header-type);
	font-size: 3em !important;
	font-style: normal;
	font-variant-caps: normal;
	line-height: 0.67 !important;

}

p.has-drop-cap::first-line {
	font-variant-caps: all-small-caps;
	letter-spacing: var(--caps-spacing);
}

p.has-drop-cap:lang(ru)::first-line {
	font-variant-caps: normal;
	font-weight: bold;
	letter-spacing: initial;
}

p.has-drop-cap:lang(de)::first-line {
	font-feature-settings: "locl"0;
}

img {
	max-block-size: 55vh;
}

figcaption {
	color: var(--accent);
	text-align: center;
}

main>footer {
	padding-block-end: 1.333rem;
}

html[codex-type="alegreya"] {
	--main-type: var(--alegreya-main);
	--insert-type: var(--alegreya-insert);
	--header-type: var(--alegreya-header);
}

html[codex-type="alegreya"] main {
	max-inline-size: 62.5ch;
}

html[codex-type="alegreya"] ins {
	font-size: 1em;
}

html[codex-type="verdana"] {
	--main-type: var(--verdana-main);
	--insert-type: var(--verdana-insert);
	--header-type: var(--verdana-header);

	font-size: 1rem;
}

html[codex-type="verdana"] main {
	max-inline-size: 67.5ch;
}


/* Themes */

html:not([codex-theme]) body, html[codex-theme="bede"] body {
	background-image: url("/codex/rijksmuseum.jpg");
}

html:not([codex-theme]) #body-container, html[codex-theme="bede"] #body-container {
	box-shadow: 0 0 2em black;
}

html[codex-theme="vrelant"] {
	--background: #1C202C;
	--text: #FED;
	--accent: #FA0;
	--accent-translucent: #FA0A;
	--accent-seethrough: #FA02;
	--accent-annotation: #F6A;
}

html[codex-theme="vrelant"] body {
	background-image: url("/codex/rijksmuseum.jpg");
}

html[codex-theme="vrelant"] #body-container {
	text-shadow: none;

	box-shadow: 0 0 2em black;
}

html[codex-theme="kroller"] {
	--background: #0A0D0BAA;
	--text: #E0FFDADD;
	--accent: #F0FFCC;
	--accent-translucent: #F0FFCCAA;
	--accent-seethrough: #F0FFCC22;
	--accent-annotation: #FE9;
}

html[codex-theme="kroller"] body {
	background-image: url("/index/shiskin.webp");
}


html[codex-theme="kroller"] #body-container {
	text-shadow: none;

	backdrop-filter: blur(0.5rem);
	box-shadow: 0 0 2em black;
}

html[codex-theme="muir"] {
	--background: #CCFFDD;
	--text: #410;
	--accent: #032;
	--accent-translucent: #032A;
	--accent-seethrough: #0322;
	--accent-annotation: #164;
}

html[codex-theme="muir"] body {
	background-image: url("/index/shiskin.webp");
}

html[codex-theme="muir"] #body-container {
	box-shadow: 0 0 2em black;
	text-shadow: none;
}

html[codex-theme="eisinga"] {
	--background: black;
	--text: #CCC;
	--accent: #FFF;
	--accent-translucent: #FFFA;
	--accent-seethrough: #FFF2;
	--accent-annotation: #999;

}

html[codex-theme="eisinga"]::after {
	content: " ";

	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 1000;

	display: block;
	height: 100vh;
	width: 100vw;

	background-color: red;
	mix-blend-mode: multiply;
	pointer-events: none;
}

html[codex-theme="eisinga"] body {
	background-image: linear-gradient(black, black);
}

html[codex-theme="eisinga"] #body-container {
	text-shadow: none;
}

html[codex-theme="turing"] {
	--background: white;
	--text: #333;
	--accent: #111;
	--accent-translucent: #222A;
	--accent-seethrough: #2222;
	--accent-annotation: red;
}

html[codex-theme="turing"] #body-container {
	text-shadow: none;
}

html[codex-theme="turing"] a {
	color: blue;
}

/* Backgrounds */

html[codex-background]:not([codex-background="niks"]) #body-container {
	box-shadow: 0 0 2em black;
}

html[codex-background="niks"] body {
	background: var(--background);
}

html[codex-background="niks"] #body-container {
	box-shadow: none;
}

html[codex-background="niks"][codex-theme="kroller"] body {
	background: #0A0D0B;
}

html[codex-background="rijksmuseum"] body {
	background-image: url("/codex/rijksmuseum.jpg");
}

html[codex-background="forest"] body {
	background-image: url("/index/shiskin.webp");
}

/* Comments */

html[codex-comments="hide"] .comment-section {
	display: none;
}

#selector-buttons {
	display: grid;
	margin-block: 1em;

	border-block-start: 1px solid var(--accent);
	border-inline-start: 1px solid var(--accent);
}

#selector-buttons .selector {
	display: flex;
	flex-wrap: wrap;
}

#selector-buttons h2,
#selector-buttons button {
	margin: 0;
	padding: 0.125em 0.5em;

	font-family: inherit;
	font-size: 1em;
	text-shadow: none;
	white-space: nowrap;

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

#selector-buttons button {
	flex-grow: 100;
}

button[selector-status="enabled"],
button:hover,
button:focus {
	color: var(--accent);

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

#selector-buttons h2 {
	flex-grow: 1;

	color: var(--background);
	font-weight: bold;

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

#selector-buttons h2 i {
	font-weight: normal;
}

.chapter-select ul {
	inline-size: 100%;
	margin: 0;
	padding: 0;
}

.chapter-select ul li {
	display: block;
	align-self: center;

	margin: 0;

	text-align: center;
}

.simple-back-forward {
	display: grid;
	grid-template-columns: 1fr auto 1fr;

	line-height: 1.2;

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

.all-chapters {
	display: flex;
	flex-wrap: wrap;
}

.all-chapters li {
	flex-grow: 1;
}

.chapter-select ul li>* {
	display: block;

	padding: 0.25em;
}

ul.simple-back-forward li {
	align-self: stretch;

	min-block-size: 48px;
	padding: 0.25em;
}

ul.simple-back-forward li>* {
	padding: 0;
}

ul.simple-back-forward li>a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1ch;

	block-size: 100%;

	font-style: italic;
	text-decoration: none;
}

ul.simple-back-forward li:first-child {
	text-align: start;
}

ul.simple-back-forward li:last-child {
	text-align: end;
}

li.current>* {
	color: var(--accent);
	font-weight: bold;

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


li.title>* {
	line-height: 1.2;
	text-align: center;
}
li.title small {
	font-weight: normal;
	color: var(--accent);
}

.chapter-select>a {
	display: block;
	padding: 0.25em;

	color: var(--background) !important;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: none;
	letter-spacing: 0.15em;

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

@media only screen and (max-width: 60ch) {
	.simple-back-forward .content {
		display: none;
	}
}

aside.sidenotes aside.note {
	margin-inline: 0 1em;
}

aside.sidenotes {
	background-color: var(--background);
}

sup.note, .note-number {
	margin: 0;
	padding: 0;

	background: transparent;
	border-block-end: none;
}

.note-number {
	margin-inline-end: 1ch;

	font-size: 1.5em;

	translate: 0 -0.4em;
}

.note.insert, .note.insert .note-number {
	color: var(--accent-annotation);
	font-family: var(--insert-type);
}

.note.insert>div {
	font-style: italic;
}

@media (orientation: landscape) {

	:root:lang(ja),
	:root:lang(zh-Hant) {
		writing-mode: vertical-rl;
	}

	:root:lang(ja) .num {
		text-combine-upright: all;
	}

	:root:lang(ja) li::marker {
		text-combine-upright: all;
	}

	html:is(:lang(ja), :lang(zh-Hant)) :is(h1, h2, h3) {
		text-align: start;
	}

	html:is(:lang(ja), :lang(zh-Hant)) nav.languages ul {
		justify-content: start;
	}

}

@font-face {
	font-family: 'UnifrakturCook';
	font-style: normal;
	font-weight: 700;
	src: local('UnifrakturCook'), local('UnifrakturCook-Bold'),
		url('/fonts/unifrakturcook.woff2') format('woff2'),
		/* Chrome 26+, Opera 23+, Firefox 39+ */
		url('/fonts/unifrakturcook.woff') format('woff');
	/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
	font-family: 'GFS Theokritos';
	font-style: normal;
	font-weight: 700;
	src: local('GFS Theokritos'),
		url('/fonts/GFSTheokritos.woff2') format('woff2')
}

@font-face {
	font-family: 'Alegreya';
	font-style: normal;
	font-weight: 900;
	src: local('Alegreya Black'),
		url('/fonts/Alegreya-Black.woff2') format('woff2'),
		/* Chrome 26+, Opera 23+, Firefox 39+ */
		url('/fonts/Alegreya-Black.woff') format('woff');
	/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
	font-family: 'Alegreya';
	font-style: italic;
	font-weight: 900;
	src: local('Alegreya Black Italic'),
		url('/fonts/Alegreya-BlackItalic.woff2') format('woff2'),
		/* Chrome 26+, Opera 23+, Firefox 39+ */
		url('/fonts/Alegreya-BlackItalic.woff') format('woff');
	/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
	font-family: 'Amiri';
	font-style: normal;
	font-weight: normal;
	src: local('Amiri'), local('UnifrakturCook-Bold'),
		url('/fonts/amiri-v16-latin_arabic-regular.woff2') format('woff2'),
		/* Chrome 26+, Opera 23+, Firefox 39+ */
		url('/fonts/amiri-v16-latin_arabic-regular.woff') format('woff');
	/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* rakkas-regular - arabic_latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Rakkas';
	font-style: normal;
	font-weight: 700;
	src: url('/fonts/rakkas-v17-arabic_latin-regular.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* sahitya-regular - devanagari_latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Sahitya';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/sahitya-v17-devanagari_latin-regular.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* sahitya-700 - devanagari_latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Sahitya';
	font-style: normal;
	font-weight: 700;
	src: url('/fonts/sahitya-v17-devanagari_latin-700.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}