MediaWiki:Vorlage Portalseite.css
Aus ZUM-Unterrichten
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Internet Explorer/Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
- Opera: Strg+F5
/* ZUM Portalseite Highlight Element
*
* Relevant Markup Sketch
* <>.zum-portalseite-highlight
* a
*. <>.zum-portalseite-highlight--icon
* a
*. p
*/
.zum-portalseite-highlight {
display:grid;
--icon-size: 2rem;
grid-gap:0.2rem;
grid-template-columns: var(--icon-size);
}
.zum-portalseite-highlight > a {
grid-column: 2;
}
.zum-portalseite-highlight > a:first-child {
grid-column: 1;
grid-row: 1 / 3;
margin-right:0.2rem;
margin-right:calc(var(--icon-size) / 10);
}
.zum-portalseite-highlight > p {
grid-column: 1 / 3;
}
.zum-portalseite-highlight > p:first-of-type {
margin-top:0;
}
.zum-portalseite-highlight .zum-portalseite-highlight--icon {
max-width:var(--icon-size);
max-height:var(--icon-size);
font-size: var(--icon-size);
}
@media (min-width: 851px) {
.zum-portalseite-highlight {
--icon-size:5rem;
}
.zum-portalseite-highlight > p {
grid-column: 2;
}
}
/* ZUM Portalseite Spotlight Element
*
* Relevant Markup Sketch
* <>.zum-portalseite-spotlight
* <>.zum-portalseite-spotlight--icon__container
* a
*. <>.zum-portalseite-highlight--icon
*. a
* p
*/
.zum-portalseite-spotlight {
display:grid;
--icon-size: 2rem;
grid-template-columns:min-content;
}
.zum-portalseite-spotlight > p {
grid-row: 2;
grid-column: 1 / 3;
}
.zum-portalseite-spotlight > p:first-of-type {
margin-top:0;
}
.zum-portalseite-spotlight .zum-portalseite-spotlight--icon {
max-width:var(--icon-size) !important; /* use !important to break MW styles */
max-height:var(--icon-size);
font-size: var(--icon-size);
margin:0.2rem;
}
@media (min-width: 851px) {
.zum-portalseite-spotlight {
--icon-size:5rem;
justify-items: center;
grid-template-columns:unset;
}
.zum-portalseite-spotlight--icon_container {
grid-row:unset;
grid-column:unset;
}
.zum-portalseite-spotlight > p {
grid-row: 3;
grid-column: 1;
}
}
