Wikipedia:WikiProjekt Bremen/styles

[Verwendung]   [CSS bearbeiten]

Diese Seite dokumentiert TemplateStyles betreffend Wikipedia:WikiProjekt Bremen.

CSS

.wphb-grid {
	display: grid;
	grid-template-columns: 60% 40%;
	grid-auto-flow: dense;
	gap: 0.2em;
	margin: 0.2em 0;
	background-color: #FFFFFF;
}

.wphb-item {
	border:1px solid #68A;
	padding:1em;
}

.wphb-intro {
	border-width: 2.5px;
}

.wphb-intro div:nth-of-type(1) {
	float:left;
}

.wphb-intro div:nth-of-type(2) {
	float:right;
}

.wphb-intro div:nth-of-type(3) {
	text-align:center; font-size:140%;
}

.wphb-intro div:nth-of-type(4) {
	text-align:center !important;
}

.wphb-col_1 {
	grid-column: 1 / 2;
}

.wphb-col_2 {
	grid-column: 2 / 3;
}

.wphb-col_all {
	grid-column: 1 / -1;
}

.wphb-gridr_2 {
    grid-row: span 2;
}

.wphb-fix_h {
    height: 40em;
    overflow: auto;
    text-align: left;
}

.wphb-bgc_gr1 {
	background-color: #F9F9F9;
}

.wphb-bgc_gr2 {
	background-color: #e7e7f7;
    font-size:92%
}

.wphb-bgc_ye {
	background-color: #FFFFEE;
    font-size:92%
}


.wphb-flex_head {
	display:flex;
	flex-direction: column;
	justify-content: space-around;
	text-align:center;
}

@media all and (min-width: 60em) {
	.wphb-flex_head {
		flex-direction: row;
	}
}

.wphb-flex_menu{
	display: flex;
	flex-wrap: wrap;
	white-space: nowrap;
}

.wphb-flex_menu p{
	border: 1.5px silver solid;
	background: #DCDCDC;
	padding: 3px .7em;
	margin: 3px 3px 0 0;
	text-align: center;
}

.wphb-flex_sub{
	border-top:1px solid silver;
}

.wphb-flex_sub p{
	background: #f4f7f5;
}

Kopiervorlage

<templatestyles src="Wikipedia:WikiProjekt Bremen/styles.css" />

---

Erläuterung

grid

Zweck: Inhalte der Projektseite ohne Tabellen positionieren, plus Formate.

.wphb-grid Grid-Container

.wphb-item Grid-Item

.wphb-intro Zusatzformate des Items Intro

.wphb-col_... Zuweisung des Items in Spalte 1, 2, beide

.wphb-gridr_2 nimmt in der Spalte zwei Reihen ein

.wphb-fix_h feste Höhe mit Scrollbalken

.wp-hb-bgc_... abweichende Hintergrundfarbe Hellgrau, Blaugrau, Gelb (teilw. kleinere Schrift)

flex

Zweck: Header der BremenpediA-Seiten mobilgerätetauglich machen.

.wphb-flex_head Elemente des Schmuckheaders für Viewport < 60em "gestapelt" zeigen

.wphb-flex_menu Menüblock formatieren

.wphb-flex_menu p "Tabs" formatieren

.wphb-flex_sub abweichendes Format für Untermenü

.wphb-flex_sub p dto. für die "Tabs"