source ⟩ hypertext ⟩ public ⟩ hymns ⟩ hymnal.css

:root {
	--background: #fff9e7;
	--text: black;
	--accent: #b00;
}

body {
	font-family: "Alegreya", var(--serif);

	background-color: #011;
	background-image: url("/hymns/styx.webp");
	background-position: center;
	background-size: cover;
}

body.theme-dark {
	--background: #1c202c;
	--text: #fed;
	--accent: #fa0;
}

#body-container {
	display: grid;
	grid-template-rows: 5em auto auto auto;
	grid-template-columns: 6fr 25ch 6fr;
	grid-template-areas: "header header header" "navbar-top navbar-top navbar-top" "greek sidenotes english" "navbar-bottom navbar-bottom navbar-bottom";

	inline-size: 145ch;
	margin-inline: auto;
}

header#subsite-header {
	display: grid;
	grid-template-columns: 5em 1fr 5em;
	grid-area: header;
	align-items: stretch;

	& img {
		margin-block: 0;
	}

	& h1, & a {
		display: block;
		align-content: center;
		margin-block: 0;

		color: white;
		font-size: clamp(1.5rem, 4.4vi, 2rem);
		font-weight: bold;
		line-height: 1.1;
		text-align: center;
		text-decoration: none;

		background-color: black;

		& strong {
			color: inherit;
			font-variant-caps: small-caps;
			letter-spacing: var(--caps-spacing);
		}

		& small {
			display: block;

			font-size: 0.75em;
			font-variant-caps: small-caps;
			letter-spacing: var(--caps-spacing);
			font-weight: normal;
		}
	}
}

nav.navbar {
	color: white;
	background-color: black;
	letter-spacing: var(--caps-spacing);
	text-transform: uppercase;

	&#navbar-top {
		grid-area: navbar-top;
	}

	&#navbar-bottom {
		grid-area: navbar-bottom;
	}

	& ul {
		display: flex;
		justify-content: space-between;

		margin: 0;
		padding: 0;

		& li {
			display: block;

			& .dingbat {
				display: inline-block;
				translate: 0 -0.333ch;
			}

			& a {
				padding-inline: 1ch;
			}

			& a,
			& b {
				color: inherit;
				text-decoration: none;
			}
		}
	}
}

div#greek-side {
	grid-area: greek;
	position: relative;

	padding-inline: 1rem;

	font-size: clamp(1rem, 1.7vi, 1.2rem);

	background-color: var(--background);

	& h1 {
		margin-block-end: 0;

		font-family: "GFS Theokritos", var(--serif);
		font-weight: normal;
	}

	& p {
		text-align: start;
	}

	& .greek-line-transliteration {
		display: block;

		margin-block-start: -0.5ch;

		color: var(--accent);
		font-size: 0.8333em;
		font-style: italic;
	}
}

#settings {
	position: absolute;
	inset-block-start: 1ch;

	font-size: 1rem;

	& button {
		display: grid;
		grid-template-columns: auto auto;
		grid-template-rows: auto auto;

		padding: 0;

		color: var(--text);
		line-height: 1;
		text-align: start;

		border: none;
		opacity: 0.3;

		&:focus,
		&:hover {
			opacity: 0.8;
		}

		&#toggle-theme {
			margin-block-start: 0.5ch;
		}

		& div.icon {
			grid-row: 1 / 3;
			align-content: center;
			padding-inline-end: 5px;
		}

		& .button-greek {
			font-weight: bold;
		}

		& .button-english {
			font-size: 0.9em;
		}
	}
}

aside#sidenotes {
	grid-area: sidenotes;

	background-color: var(--background);

	padding-block-start: 1ch;
}

aside.note {
	margin-inline-start: 0;

	color: var(--accent);
	font-family: var(--sans-serif);

	& .note-number {
		font-weight: bold;
	}

	& a.cite {
		font-style: italic;
	}

	& abbr.cite {
		font-style: italic;
	}

	& blockquote + p {
		margin-block-start: 1em;
	}
}

sup.note,
.note-number {
	padding-block: 0;
	padding-inline: 0;

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

div#english-side {
	grid-area: english;

	padding-inline: 1rem;

	font-size: clamp(1rem, 1.7vi, 1.2rem);

	background-color: var(--background);

	& h1 {
		margin-block-end: 0;

		font-family: var(--serif);
		font-style: italic;
	}

	& p.hymn-english {
		text-align: start;
		line-height: 1.55;
	}
}

.offering {
	color: var(--accent);
	font-size: 1rem;
	font-style: italic;
	text-align: center;
}

.greek-name {
	font-style: italic;
}

@media screen and (max-width: 1299px) {
	#body-container {
		grid-template-columns: 2fr 0.9fr 2fr;
	}
}

@media screen and (max-width: 1099px) {
	#body-container {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "header header" "navbar-top navbar-top" "greek english" "navbar-bottom navbar-bottom";
	}

	aside#sidenotes {
		display: none;
	}
}

@media screen and (max-width: 799px) {
	#body-container {
		grid-template-columns: 1fr;
		grid-template-rows: 5em auto auto auto auto;
		grid-template-areas: "header" "navbar-top" "greek" "english" "navbar-bottom";
	}
}

@media screen and (max-width: 649px) {
	nav.navbar > ul > li > a > i {
		display: none;
	}
}

@media screen and (max-width: 499px) {
	#body-container {
		grid-template-rows: 4em auto auto auto auto;
	}

	header#subsite-header {
		grid-template-columns: 4em 1fr;

		& a {
			font-size: 1.2rem;
			text-align: start;
			padding-inline-start: 0.5em;

			text-wrap: balance;
		}

		& img:last-child {
			display: none;
		}
	}
}

@font-face {
	font-family: "Alegreya";
	font-weight: normal;
	font-style: normal;
	src: url("/fonts/Alegreya-Regular.woff2");
}

@font-face {
	font-family: "Alegreya";
	font-weight: normal;
	font-style: italic;
	src: url("/fonts/Alegreya-Italic.woff2");
}

@font-face {
	font-family: "Alegreya";
	font-weight: bold;
	font-style: normal;
	src: url("/fonts/Alegreya-Bold.woff2");
}

@font-face {
	font-family: "GFS Theokritos";
	src: url("/fonts/GFSTheokritos.woff2");
}