Portal:Dresden/styles

[Verwendung]   [CSS bearbeiten]

Diese Seite dokumentiert TemplateStyles betreffend Portal:Dresden.

CSS

.p-dd-tabs {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-end;
	align-content: flex-end;
	font-weight: bold;
	font-variant: small-caps;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.p-dd-tab {
	text-align: center;
	border: .2em solid #d3d3d3;
	border-bottom: none;
	display: block;
	max-width: 11em;
	margin: 0;
	margin-right: .3em;
	padding: .3em;
	flex: 1 1 auto;
}

.p-dd-header {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	padding: 0;
	background-color: #D3D3D3;
	border: .2em solid #D3D3D3;
}

.p-dd-header-text {
	flex: 1 1 auto;
	text-align: center;
}

.p-dd-header-text span {
	color: #ffe000;
	font-weight: bold;
	font-size: 300%;
	text-shadow: black .09em .06em .12em;
}

.p-dd-frame {
	display: flex;
	flex-flow: column wrap;
	align-items: stretch;
	border: .2em solid #D3D3D3;
	background-color: #FFFFFF;
}

.p-dd-inner {
	display: flex;
	flex: 1 1 auto;
	flex-flow: row wrap;
}

.p-dd-nav {
	flex: 1 1 auto;
	margin: 0;
	margin-top: .3em;
	padding: 0em 1em .5em 1em;
	border-bottom: .2em solid #D3D3D3;
	background-color: #FFF;
}

.p-dd-main .p-dd-left {
	display: flex;
	flex: 1 1 65%;
	order: 1;
	flex-flow: column;
}

.p-dd-main .p-dd-right {
	display: flex;
	flex: 1 1 35%;
	order: 2;
	flex-flow: column;
}

.p-dd-sub .p-dd-left {
	display: flex;
	flex: 1 1 70%;
	order: 1;
	flex-flow: column;
}

.p-dd-sub .p-dd-right {
	display: flex;
	flex: 1 1 30%;
	order: 2;
	flex-flow: column;
	background-color: #FCF5C8;
	border-left: .2em solid #D3D3D3;
	box-sizing: border-box;
}

.p-dd-box {
  position: relative;
}

.p-dd-sub .p-dd-right .p-dd-box:not(:last-child) {
	border-bottom: .1em solid #D3D3D3;
}

.p-dd-box h2 {
	border: 0;
	background-color: #EDEDED;
	padding: .3em;
	margin: .2em;
}

.p-dd-sub .p-dd-right .p-dd-box h2 {
	background-color: inherit;
	margin: 0;
}

.p-dd-box-content {
	padding: .7em;
}

.p-dd-box-edit {
	position: absolute;
	top: .5em;
	right: 1em;
	font-size: smaller;
}

.p-dd-blacklinks a {
	color: #000;
}

/* für Wikipedia:Dresden */
.p-dd-tab-special {
	max-width: none;
	text-align: left;
	background-color: #ffe000;
}
	
#wp-dd-header-mob {
	display: none;
}

#wp-dd-header .p-dd-tab {
	border: .2em solid #d3d3d3;
	margin-bottom: .3em;
}

@media screen and (max-width: 720px) {
	.p-dd-tabs {
		flex-flow: column nowrap;
		align-items: stretch;
		justify-content: flex-start;
	}
	
	.p-dd-tab {
		max-width: none;
		margin-right: 0;
		border-bottom: .2em solid #d3d3d3;
	}
	
	.p-dd-box {
		position: static;
	}
	
	.p-dd-box-edit {
		position: static;
		text-align: right;
		margin: .2em .4em .2em 0;
	}
	
	/* für Wikipedia:Dresden */
	#wp-dd-header-mob {
		display: block;
		height: 1.7em;
		overflow: hidden;
		transition: 1s;
	}
	
	#wp-dd-header-mob:hover {
		height: 15em;
		overflow: auto;
	}
	
	#wp-dd-header-desk {
		display: none;
	}
	
	#wp-dd-header .p-dd-tab {
		margin-bottom: 0;
	}
}

@media screen and (max-width: 900px) {
	.p-dd-header-img {
		display: none;
	}
	
	.p-dd-sub .p-dd-right {
		border-top: .2em solid #D3D3D3;
		border-left: 0;
	}
}

Die Programmierung ist gegen Bearbeitung geschützt ((Sichter) Dreiviertelschutz).

Kopiervorlage

<templatestyles src="Portal:Dresden/styles.css" />

---

Stylesheet zur Unterstützung der Seiten des Portals Dresden bzgl. einer konsistenten und responsiven Darstellung.

Klassen für Elemente

.p-dd-tabs

Tableiste zu Beginn jeder Seite. Sollte einem ul-Element zugeordnet sein.

.p-dd-tab

Einzelner Tab innerhalb der Tableiste. Im Normalfall Teil eines li-Elements, aber auch für div möglich.

.p-dd-header

Kopfbereich der Portalseiten.

.p-dd-header-text

„Überschrift“ der aktuellen Portalseite, deutlich hervorgehoben.

.p-dd-frame

Äußerer Rahmen des Portals (nach der Tableiste), umschließt Header und Inhaltsbereich.

.p-dd-inner

Innerer Rahmen (nach Header), enthält die zweispaltige Anordnung bei größeren Anzeigebreiten.

.p-dd-nav

Naviagtionsbereich (nach Header) auf voller Seitenbreite.

.p-dd-left

Linke Spalte der zweispaltigen Anordnung.

.p-dd-right

Rechte Spalte der zweispaltigen Anordnung.

.p-dd-box

Einzelner Inhaltsbereich mit Überschrift (h2).

.p-dd-box-content

Inhalt eines Inhaltsbereichs.

.p-dd-box-edit

Bearbeiten-Link für einen Inhaltsbereich. Standardmäßig absolute Positionierung auf Höhe der Überschrift.

Klassen zur Anpassung der Darstellung

.p-dd-main

spezielles Aussehen der Portalhauptseite, sollte dem gleichen Container wie p-dd-frame zugewiesen sein.

.p-dd-sub

spezielles Aussehen der Portalunterseiten, sollte dem gleichen Container wie p-dd-frame zugewiesen sein.

.p-dd-blacklinks

Linktext schwarz färben, für Tableiste.

.p-dd-tab-special

Spezielle Tabdarstellung ohne Reaktion auf aktuelle Seite (Hintergrund). Sollte nur zusammen mit p-dd-tab verwendet werden.

Identifikatoren

#wp-dd-header

Tableiste für Wikipedia:Dresden und zugeordnete Seiten, vgl. Wikipedia:Dresden/Header.

#wp-dd-header-desk

Tab „Aktionen/Veranstaltungen“ für Wikipedia:Dresden/Header: konventionelle Darstellung per mw-collapsible bei größeren Anzeigebreiten.

#wp-dd-header-mob

Tab „Aktionen/Veranstaltungen“ für Wikipedia:Dresden/Header: mobiltaugliche Darstellung (Workaround, da mw-collapsible mobil nicht verfügbar ist). wp-dd-header-desk und wp-dd-header-mob sollten redundant innerhalb der Tableiste vorhanden sein.

Responsivität

ab 900px

Bilder links und rechts im Header werden zur Platzersparnis ausgeblendet.

Korrekturen am Rahmen der eigentlich rechten Spalte für einspaltige Darstellung.

ab 720px

Tabs werden untereinander auf voller Anzeigebreite anstatt nebeneinander dargestellt.

Bearbeiten-Link wird zur Kollisionsvermeidung mit der Überschrift ans Ende seines Inhaltsbereichs verschoben.

Umschalten zwischen konventioneller und mobiltauglicher Darstellung im Wikipedia:Dresden/Header.