Wikipedia:Redaktion Musik/styles

CSS

.redmus-titel {
	font-family: 'Gill Sans', 'Gill Sans MT', Futura, sans-serif; 
	font-size:120%; 
	border-bottom: solid 1px #547892;
}

.redmus-kasten {
	font-size: 95%; 
	margin-bottom:0.5em; 
	vertical-align:top; 
	overflow:auto;
}

.redmus-untereinander {
	display: flex;
}

.redmus-spalten {
	vertical-align:top;
}

.redmus-edit {
	float:right; 
	margin-top:6px; 
	font-size:smaller;
}

.redmus-mobileonly {
	display:none;
}

/* 
Mobilgeräte
*/
@media 
only screen and (max-width: 720px)  {
	
	.redmus-untereinander {
		display: block;
		clear: right;
	}
	.redmus-spalten {
		width: 100% !important;
		margin:0 !important;
	}
	.redmus-linkbox {
		float: none !important;
		margin: 0 !important;
		width: auto !important;
	}
	.redmus-portale {
		font-variant: normal;
		font-size: smaller;
		font-weight: normal;
	}
	.redmus-hidemobile {
		display:none !important;
	}
	.redmus-mobileonly {
		display: block !important;
	}
	.redmus-layouttabelle table, .redmus-layouttabelle th, .redmus-layouttabelle tbody, .redmus-layouttabelle tr {
		display:block;
		border:none;
	}
	.redmus-layouttabelle table {
		width:100% !important;
	}
	.redmus-layouttabelle td {
		display:block;
		border:none;
		width:unset !important;
	}
	.redmus-layouttabelle th {
		padding:0;
		width:unset !important;
	}
	.redmus-bildbreite img {
		max-width:100%;
		height:auto;
	}
	.redmus-tabs {
		display:grid;
	}
}

Kopiervorlage

<templatestyles src="Wikipedia:Redaktion Musik/styles.css" />

Zweck

Die Styles dienen in erster Linie dazu, Projekt- und Portalseiten aus dem Musikbereich für Mobilgeräte zugänglicher zu machen. Sie werden über {{Index-Musik}} sowie über {{Linkbox Redaktion Musik}} automatisch eingebunden.

Klassen

Responsives Layout

redmus-hidemobile: Element wird auf Mobilgeräten nicht angezeigt.
redmus-mobileonly: Element wird nur auf Mobilgeräten (als block) angezeigt.
redmus-layouttabelle: Eine Tabelle und sämtliche Bestandteile werden auf Mobilgeräten in block-Elemente umgewandelt und ohne Rahmen oder Innenabstände sowie mit 100 % Breite dargestellt.
redmus-bildbreite: Bilder innerhalb des Elements werden auf Mobilgeräten maximal mit 100 % Breite dargestellt und im Verhältnis skaliert.
redmus-tabs: Element wird auf Mobilgeräten als grid dargestellt.
redmus-untereinander: Element wird als Flexbox formatiert und auf Mobilgeräten in ein block-Element umgewandelt.
redmus-spalten: Element wird auf Mobilgeräten mit 100 % Breite dargestellt.
redmus-linkbox: Die Linkbox wird auf Mobilgeräten zentriert.
redmus-portale: Die Auflistung der Portale im Index-Musik wird auf Mobilgeräten kompakter dargestellt.

Weitere Klassen

redmus-titel: Text wird in Gill Sans, 120 % groß und mit einer grauen, unteren Rahmenlinie dargestellt.
redmus-kasten: Element wird mit weißem Hintergrund, 95 % Schriftgröße, 0.5em unterem Abstand, oberer Ausrichtung und automatischem overflow dargestellt.