source ⟩ hypertext ⟩ public ⟩ gallery ⟩ gallery.css

:root {
	--background: white;
	--accent-bg: white;
	--text: #223;
	--accent: var(--text);

	--red: #fff2f5;
	--yellow: #fff5c2;
	--green: #eaf4dd;
	--blue: #e1f3f8;

	--source-serif: "Source Serif 4 Variable", "Source Serif 4", "Source Serif Pro", Georgia, serif;

	font-size: 1rem;
}

#oudheden, [href*="oudheden"] {
	--accent-bg: var(--yellow);
	--display: var(--blackletter);
}

#oudheden main {
	background: url(/cosmetics/bgvignette.png), url(/gallery/oudheden/bg.png);
	background-size: 100% 100%, auto;
}

#nieuwetijd, [href*="nieuwetijd"] {
	--accent-bg: var(--red);
	--display: var(--cormorant);
}

#nieuwetijd h2 strong, [href*="nieuwetijd"] strong {
	text-transform: uppercase;
}

#nieuwetijd main {
	background: url(/cosmetics/bgvignette.png), url(/gallery/nieuwetijd/bg.png);
	background-size: 100% 100%, auto;
}

#modernisme, [href*="modernisme"] {
	--accent-bg: var(--green);
	--display: var(--gill-sans);
}

#modernisme h2 strong, [href*="modernisme"] strong {
	text-transform: uppercase;
}

#modernisme main {
	background: url(/cosmetics/bgvignette.png), url(/gallery/modernisme/bg.png);
	background-size: 100% 100%, auto;
}

#hedendaags, [href*="hedendaags"] {
	--accent-bg: var(--blue);
	--display: var(--source-serif);
}

#hedendaags h2 strong, [href*="hedendaags"] strong, #navbar [href*="hedendaags"] .icon {
	font-style: italic;
	font-weight: 600;
	text-transform: lowercase;
}

#hedendaags main {
	background: url(/cosmetics/bgvignette.png), linear-gradient(to bottom left, var(--accent-bg), #9DA3E8);
	background-size: 100% 100%, auto;
}

body {
	font-family: var(--gill-sans);
}

#body-container {
	display: grid;
	grid-template-columns: 15em 1fr;
}

#navbar {
	position: sticky;
	inset-block-start: 0;
	z-index: 10;

	display: grid;
	grid-template-rows: auto auto 1fr;

	block-size: 100vh;

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

#navbar ul {
	margin: 0;
	padding: 0;

	line-height: 1;
}

#navbar ul li {
	position: relative;

	display: block;

	margin: 0;

	box-shadow: 0 0 1em #0008;

	transition: transform 0.2s;
}

#navbar ul li:hover {
	transform: translateX(1em);
}

#navbar ul li a {
	display: grid;
	grid-template-columns: 2rem 1fr;
	align-items: center;
	gap: 1rem;

	block-size: 4rem;
	padding: 1rem;

	hyphens: none;
	letter-spacing: var(--caps-spacing);
	text-decoration: none;
	text-transform: uppercase;

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

#navbar ul li a .icon {
	font-family: var(--display, var(--gill-sans));
	font-size: 2rem;
	text-align: center;
}

#navbar ul li a:is([href*="toilets"], [href*="gifts"], [href="/gallery"], [href="/"]) .icon {
	font-family: var(--gill-sans);
	font-size: 1.5rem;
}

#navbar ul li a[hreflang] .icon {
	display: flex;
	align-items: center;
	justify-content: center;

	font-family: var(--gill-sans);
	font-size: 1.5rem;
}

.icon::after {
	content: "\FE0E";
}

h1 {
	z-index: 1000;

	margin: 0;
	padding-block: 1rem;

	font-family: var(--blackletter);
	font-size: 1.75rem;

	background-color: var(--background);
	box-shadow: 0 0 1rem #0008;
}

.fraktur {
	font-family: var(--blackletter);
}

#navbar footer {
	z-index: 50;

	display: grid;
	align-items: end;

	padding: 1rem;

	background-color: var(--background);
	box-shadow: 0 0 1rem #0008;
}

#navbar footer small {
	font-size: 1em;
	text-align: end;
}

main {
	block-size: 100%;
	inline-size: 100%;
	max-inline-size: none;
	padding: 0;
}

h2 {
	inline-size: fit-content;
	margin-block: 2rem 0;
	margin-inline: auto;
	padding-block: 1rem;
	padding-inline: 2rem;

	font-weight: normal;
	text-align: center;

	background-color: var(--accent-bg);
	box-shadow: 0 0.25rem 1rem #0008;
}

h2 strong {
	font-family: var(--display);
	font-size: 3rem;
	font-weight: normal;
}

h2 small {
	display: block;

	font-size: 1.5rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	gap: 4rem;

	padding-inline: 2em;
}

.gallery>li {
	display: flex;
	align-items: flex-start;
	gap: 1em;

	margin-block: 3rem;
}

.gallery>li.landscape {
	flex-direction: column;
}

.gallery>li>img, .gallery>li>video {
	margin: 0;

	filter: drop-shadow(0 0.25rem 1rem #0008);
}

video {
	max-inline-size: 100%;
}

.framed img, .framed video {
	max-inline-size: 100%;

	border: 20px solid;
	border-image: url(/cosmetics/goldtrim.gif) 20 round;
}

.photo img, .photo video {
	max-inline-size: 100%;

	border: 20px solid white;
	border-block-end: 40px solid white;
	transform: rotate(1deg);
}

.gallery figcaption {
	margin: 0;
	padding: 1em;

	font-size: 0.9rem;

	background-color: var(--background);
	box-shadow: 0 0.25rem 1rem #0008;
}

.gallery .portrait figcaption {
	max-inline-size: 35ch;
}

.gallery .landscape figcaption {
	max-inline-size: 62.5ch;
}

figcaption p {
	margin-block: 0.5rem;

	text-align: start;
}

figcaption p:first-child {
	margin-block-start: 0;
}

figcaption p:last-child {
	margin-block-end: 0;
	text-align: end;
}

.artist, .title {
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 1.1;
}

.details, .acquired {
	font-size: 0.8rem;
}

.artist time, .title time {
	font-weight: normal;
}

main>footer {
	position: relative;
	z-index: 5;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 1rem;

	margin: 1rem;

	--display: var(--gill-sans);
	font-size: 1rem;

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

main>footer>a {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	padding-block: 1em;
	padding-inline: 2em;

	text-decoration: none;

	background-color: var(--accent-bg);
	box-shadow: 0 0 1em #0008;
}

main>footer>a .icon {
	margin-inline-end: 1rem;

	font-size: 2.5em;
	text-align: center;
}

main>footer>a strong {
	font-family: var(--display);
	font-size: 2em;
	font-weight: normal;
	line-height: 1.1;
	text-align: start;
}

main>footer>a small {
	display: block;

	font-size: 1em;
	font-style: normal;
	letter-spacing: var(--caps-spacing);
	text-align: start;
	text-transform: uppercase;
}

@media screen and (max-width: 900px) {
	#body-container {
		grid-template-columns: none;
		grid-template-rows: auto auto;
	}

	#navbar {
		position: sticky;
		inset-block-start: 0;

		display: flex;
		align-content: center;
		align-items: stretch;

		block-size: fit-content;
		inline-size: 100%;
		overflow-x: auto;
	}

	#navbar ul {
		display: flex;
		flex-grow: 1;
		flex-shrink: 0;
		align-content: center;
		align-items: stretch;
	}

	h1 {
		display: flex;
		flex-shrink: 0;
		align-items: center;

		padding-block: 0;
		padding-inline: 1rem;
	}

	#navbar footer small {
		flex-shrink: 0;
	}

	#navbar footer {
		flex-shrink: 0;
		align-items: center;

		padding-inline: 1rem;
	}

	#navbar ul li {
		display: flex;
		flex-shrink: 0;
	}

	#navbar ul li a {
		block-size: auto;
	}

	#navbar ul li {
		display: flex;
	}

}

@media screen and (max-width: 750px) {

	.gallery {
		padding-inline: 0;
	}

	.gallery>li {
		flex-direction: column;
		align-items: center;
	}

	.gallery .portrait figcaption {
		max-inline-size: 60ch;
	}
}

@media screen and (max-width: 600px) {

	h2 strong {
		font-size: 2rem;
	}

	h2 small {
		font-size: 1rem;
	}
}

@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: 'Source Serif 4 Variable';
	src: url('/fonts/SourceSerif4Variable-Roman.otf.woff2') format('woff2-variations');
	font-style: normal;
	font-weight: 200 900;
	font-variation-settings: "opsz"8 60;
}


@font-face {
	font-family: 'Source Serif 4 Variable';
	src: url('/fonts/SourceSerif4Variable-Italic.otf.woff2') format('woff2-variations');
	font-style: italic;
	font-weight: 200 900;
	font-variation-settings: "opsz"8 60;
}



@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;
}