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; }