Vorlage:Quellentext/styles.css

/* Vorlage:Quellentext/styles.css
   Stilblatt für Quellentext-Artikel im Wiki des
   Historischen Vereins Herne / Wanne-Eickel e. V.
   Mobile first: Grundstil gilt fuer schmale Displays,
   Desktop-Anpassungen stehen in der Media Query unten. */

/* ---------- 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;
}

/* ---------- 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;
}

/* ---------- Definitionsliste "Erlaeuterungen" ---------- */

.mw-parser-output dl dt {
	color: #6b4f33;
}
/* ============================================================
   ERGÄNZUNG für Vorlage:Quellentext/styles.css

   Diesen Block ans Ende des bestehenden Stilblatts anhängen,
   VOR die Media Query "@media screen and (min-width: 720px)".

   Zweck: Zitat im Zitat – z. B. die Abschiedsrede des
   Oberbürgermeisters Schaefer innerhalb des Zeitungstextes.
   ============================================================ */

.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;
}
/* ---------- Desktop ---------- */

@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;
	}
}
/* ============================================================
   ERGÄNZUNG für Vorlage:Quellentext/styles.css

   Diesen Block ans Ende des bestehenden Stilblatts anhängen,
   VOR die Media Query "@media screen and (min-width: 720px)".

   Zweck: Das PDF-Widget hat eine feste Breite von 700 px und
   sprengt damit auf dem Smartphone das Layout. Unterhalb von
   720 px wird die Einbettung ausgeblendet und stattdessen ein
   Link angeboten; auf breiten Displays bleibt alles wie bisher.
   ============================================================ */

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

/* Schmale Displays: Einbettung aus, Link an */

@media screen and (max-width: 719px) {
	.hv-pdf {
		display: none;
	}
}
/* ============================================================
   ERGÄNZUNG für Vorlage:Quellentext/styles.css

   Diesen Block ans Ende des bestehenden Stilblatts anhängen,
   VOR die Media Query "@media screen and (min-width: 720px)".

   Zweck: Lange Namenslisten (Stifter, Mitglieder, Gefallene
   usw.). Auf dem Smartphone einspaltig, auf breiten Displays
   zwei- oder dreispaltig, damit keine endlose Kolonne entsteht.
   ============================================================ */

.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;
	}
}
/* Breite Displays: Einbettung an, Link als dezenter Zusatz */

@media screen and (min-width: 720px) {
	.hv-pdf-link {
		border: 0;
		padding: 0;
		background-color: transparent;
		font-weight: normal;
		text-align: left;
		font-size: 0.92em;
	}
}