MediaWiki:Vorlage Portalseite.css: Unterschied zwischen den Versionen
Aus ZUM-Unterrichten
(Die Seite wurde neu angelegt: „ →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; ma…“) |
(kein Unterschied)
|
Aktuelle Version vom 18. Februar 2024, 20:09 Uhr
/* 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;
}
}