Portal:Dresden/styles

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen

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

[Quelltext bearbeiten]
<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

[Quelltext bearbeiten]
.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

[Quelltext bearbeiten]
.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

[Quelltext bearbeiten]
#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

[Quelltext bearbeiten]
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.