Vorlage:Quellentext/styles.css

/* ============================================================
   Vorlage:Quellentext/styles.css

   Stilblatt für Quellentext-Artikel im Wiki des
   Historischen Vereins Herne / Wanne-Eickel e. V.

   Einbindung im Artikel als erste Zeile:
   

   Aufbau: Mobile first. Der Grundstil gilt für schmale
   Displays, die Anpassungen für breite Bildschirme stehen
   gesammelt am Ende der Datei.

   Verwendete Klassen
   ------------------
   hv-infobox        Kasten mit den Eckdaten der Quelle
   hv-infobox-kopf   Kopfzeile der Infobox
   hv-infobox-zeile  Eine Zeile Label + Wert
   hv-label          Bezeichnung links
   hv-wert           Angabe rechts
   hv-quelle         Der Quellentext selbst
   hv-signatur       Verfasserkürzel oder Bildunterschrift am Ende
   hv-rede           Zitat im Zitat, z. B. eine wiedergegebene Rede
   hv-namensliste    Lange Namenslisten, mehrspaltig ab 560 px
   hv-pdf            Umschlag für das PDF-Widget
   hv-pdf-link       Ersatzlink, auf schmalen Displays hervorgehoben
   ============================================================ */


/* ---------- 1. Infobox ---------- */

.hv-infobox {
	float: none;
	width: auto;
	max-width: 100%;
	margin: 0 0 1.2em 0;
	border: 1px solid #8b6b4a;
	border-radius: 3px;
	background-color: #f7efdf;
	color: #2e2418;
	font-size: 0.9em;
	line-height: 1.5;
	overflow: hidden;
}

.hv-infobox-kopf {
	padding: 0.45em 0.8em;
	background-color: #6b4f33;
	color: #f7efdf;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.9em;
}

.hv-infobox-zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 0.1em 0.8em;
	padding: 0.45em 0.8em;
	border-top: 1px solid #ddccae;
}

.hv-infobox-zeile:first-of-type {
	border-top: 0;
}

.hv-label {
	flex: 0 0 8.5em;
	font-weight: bold;
	color: #6b4f33;
}

.hv-wert {
	flex: 1 1 12em;
	min-width: 0;
	overflow-wrap: break-word;
}


/* ---------- 2. Quellentext ---------- */

.hv-quelle {
	margin: 0.8em 0 1.2em 0;
	padding: 0.8em 0.9em;
	border-left: 4px solid #a9793f;
	background-color: #faf5ea;
	color: #2e2418;
	font-size: 0.97em;
	line-height: 1.7;
	hyphens: auto;
	overflow-wrap: break-word;
}

.hv-quelle p {
	margin: 0 0 0.9em 0;
}

.hv-quelle p:last-child {
	margin-bottom: 0;
}

.hv-signatur {
	margin-top: 0.6em;
	text-align: right;
	font-style: italic;
	color: #6b4f33;
}


/* ---------- 3. Zitat im Zitat (Reden) ---------- */

.hv-rede {
	margin: 0.9em 0;
	padding: 0.7em 0.9em;
	border-left: 3px solid #c9a26a;
	background-color: #fffdf7;
	font-style: italic;
	font-size: 0.96em;
	line-height: 1.65;
}

.hv-rede p {
	margin: 0 0 0.8em 0;
}

.hv-rede p:last-child {
	margin-bottom: 0;
}


/* ---------- 4. Namenslisten ---------- */

.hv-namensliste ul {
	margin: 0.4em 0 0 1.2em;
	padding: 0;
	columns: 1;
	column-gap: 2em;
}

.hv-namensliste li {
	margin: 0 0 0.25em 0;
	break-inside: avoid;
	page-break-inside: avoid;
}

@media screen and (min-width: 560px) {
	.hv-namensliste ul {
		columns: 2;
	}
}

@media screen and (min-width: 900px) {
	.hv-namensliste ul {
		columns: 3;
	}
}


/* ---------- 5. PDF-Einbindung ---------- */

.hv-pdf {
	max-width: 100%;
	overflow-x: auto;
	margin: 0 0 1em 0;
}

.hv-pdf-link {
	margin: 0 0 1.2em 0;
	padding: 0.7em 0.9em;
	border: 1px solid #8b6b4a;
	border-radius: 3px;
	background-color: #f7efdf;
	font-weight: bold;
	text-align: center;
}

/* Das PDF-Widget hat eine feste Breite und sprengt auf dem
   Smartphone das Layout. Dort wird die Einbettung ausgeblendet
   und stattdessen der Link angeboten. */

@media screen and (max-width: 719px) {
	.hv-pdf {
		display: none;
	}
}


/* ---------- 6. Definitionslisten (Erläuterungen) ---------- */

/* Hinweis: TemplateStyles stellt jedem Selektor automatisch
   ".mw-parser-output " voran. Der Selektor darf deshalb NICHT
   selbst mit .mw-parser-output beginnen, sonst greift die Regel
   nicht. */

dl dt {
	color: #6b4f33;
}


/* ---------- 7. Breite Bildschirme ---------- */

@media screen and (min-width: 720px) {

	.hv-infobox {
		float: right;
		width: 22em;
		margin: 0 0 1em 1.4em;
	}

	.hv-quelle {
		padding: 1em 1.2em;
		font-size: 1em;
	}

	/* Hier ist die Einbettung sichtbar, der Link wird zum
	   dezenten Zusatz darunter. */

	.hv-pdf-link {
		border: 0;
		padding: 0;
		background-color: transparent;
		font-weight: normal;
		text-align: left;
		font-size: 0.92em;
	}
}