MediaWiki:Common.css: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| Zeile 1: | Zeile 1: | ||
/* Grid "Zentrale Hinhalte" */ | /* Grid "Zentrale Hinhalte" */ | ||
.HS-grid-item { | .HS-grid-item { | ||
text-align: justify; | text-align: justify; | ||
border: 1px solid #aaa; | border: 1px solid #aaa; | ||
| Zeile 12: | Zeile 14: | ||
} | } | ||
.SFB { | .SFB { | ||
| Zeile 37: | Zeile 40: | ||
.hs-grid { | .hs-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(1, 1fr); | grid-template-columns: repeat(1, 1fr); | ||
| Zeile 42: | Zeile 46: | ||
} | } | ||
@media only screen and (min-width : 680px) { | @media only screen and (min-width : 680px) { | ||
.hs-grid { | .hs-grid { | ||
grid-template-columns: repeat(2, 1fr); | grid-template-columns: repeat(2, 1fr); | ||
| Zeile 48: | Zeile 53: | ||
} | } | ||
@media only screen and (min-width : 980px) { | @media only screen and (min-width : 980px) { | ||
.hs-grid { | .hs-grid { | ||
grid-template-columns: repeat(4, 1fr); | grid-template-columns: repeat(4, 1fr); | ||
| Zeile 54: | Zeile 60: | ||
} | } | ||
@media only screen and (min-width : 1980px) { | @media only screen and (min-width : 1980px) { | ||
.hs-grid { | .hs-grid { | ||
grid-template-columns: repeat(8, 1fr); | grid-template-columns: repeat(8, 1fr); | ||
} | } | ||
} | } | ||
.item { | .item { | ||
border: 1px solid #aaa; | border: 1px solid #aaa; | ||
margin-top: 20px; | margin-top: 20px; | ||
} | } | ||
.item-header { | .item-header { | ||
text-align: left; | text-align: left; | ||
border-bottom: 1px solid #aaa; | border-bottom: 1px solid #aaa; | ||
| Zeile 74: | Zeile 85: | ||
padding-left: 20px; | padding-left: 20px; | ||
height: 150px; | height: 150px; | ||
} | } | ||
.item-body{ | .item-body{ | ||
padding: 0.2em 0.4em; | padding: 0.2em 0.4em; | ||
} | |||
#fd-1 { | |||
grid-column-start: 1; | |||
grid-column-end: 3; | |||
grid-row-start: 1; | |||
grid-row-end: 2; | |||
} | |||
#fd-2 { | |||
grid-column-start: 3; | |||
grid-column-end: 5; | |||
grid-row-start: 1; | |||
grid-row-end: 2; | |||
} | |||
#fd-3 { | |||
grid-column-start: 1; | |||
grid-column-end: 3; | |||
grid-row-start: 2; | |||
grid-row-end: 3; | |||
} | |||
#fd-4 { | |||
grid-column-start: 3; | |||
grid-column-end: 5; | |||
grid-row-start: 2; | |||
grid-row-end: 3; | |||
} | |||
#sf-1 { | |||
grid-column-start: 1; | |||
grid-column-end: 5; | |||
grid-row-start: 1; | |||
grid-row-end: 2; | |||
} | |||
#sf-2 { | |||
grid-column-start: 1; | |||
grid-column-end: 5; | |||
grid-row-start: 2; | |||
grid-row-end: 3; | |||
} | |||
#sf-3 { | |||
grid-column-start: 1; | |||
grid-column-end: 5; | |||
grid-row-start: 3; | |||
grid-row-end: 4; | |||
} | |||
#sf-4 { | |||
grid-column-start: 1; | |||
grid-column-end: 5; | |||
grid-row-start: 4; | |||
grid-row-end: 5; | |||
} | } | ||
Version vom 27. Mai 2021, 11:47 Uhr
/* Grid "Zentrale Hinhalte" */
.HS-grid-item {
text-align: justify;
border: 1px solid #aaa;
line-height: 1.5;
font-family: inherit;
padding-left: 20px;
padding-right: 20px;
margin: 10px;
padding-bottom: 20px;
}
.SFB {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.HS-SF {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
}
.HS-FD {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
.hs-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1em;
}
@media only screen and (min-width : 680px) {
.hs-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width : 980px) {
.hs-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media only screen and (min-width : 1980px) {
.hs-grid {
grid-template-columns: repeat(8, 1fr);
}
}
.item {
border: 1px solid #aaa;
margin-top: 20px;
}
.item-header {
text-align: left;
border-bottom: 1px solid #aaa;
font-weight: bold;
line-height: 1.5;
font-family: inherit;
padding: 0.4em;
padding-left: 20px;
height: 150px;
}
.item-body{
padding: 0.2em 0.4em;
}
#fd-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
#fd-2 {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 2;
}
#fd-3 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
#fd-4 {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3;
}
#sf-1 {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 2;
}
#sf-2 {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3;
}
#sf-3 {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 3;
grid-row-end: 4;
}
#sf-4 {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 4;
grid-row-end: 5;
}