MediaWiki:Common.css: Unterschied zwischen den Versionen
Aus kvwmap
Zeile 37: | Zeile 37: | ||
.start-wrapper { | .start-wrapper { | ||
− | + | position: relative; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
width: 100%; | width: 100%; | ||
height: 75vh; | height: 75vh; | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
− | |||
} | } | ||
− | + | #start-block1, #start-block2, #start-huebschesbild, #start-logo { | |
− | + | position: relative; | |
− | + | ||
} | } | ||
− | . | + | /* Max. Breite 1000 px */ |
− | + | @media only screen and (max-width: 1000px) { | |
− | + | ||
− | + | ||
− | + | ||
− | .start- | + | .start-wrapper { |
+ | height: 100%; | ||
display: flex; | display: flex; | ||
− | flex- | + | flex-direction: column; |
− | + | flex-wrap: nowrap; | |
− | + | ||
justify-content: center; | justify-content: center; | ||
− | + | align-items: center; | |
− | + | gap: 1em; | |
} | } | ||
− | + | #start-block1, #start-block2, #start-huebschesbild, #start-logo { | |
+ | position: relative; | ||
display: flex; | display: flex; | ||
− | flex- | + | flex-direction: row; |
− | justify-content | + | justify-content: center; |
− | + | ||
} | } | ||
− | + | #start-block1, #start-block2 { | |
− | + | box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; | |
} | } | ||
− | + | #start-logo { | |
+ | order: 1; | ||
width: 100%; | width: 100%; | ||
− | |||
− | |||
} | } | ||
− | # | + | #start-block1 { |
− | + | order: 2; | |
− | + | width: 50%; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | #start-block2 { | ||
+ | order: 3; | ||
+ | width: 50%; | ||
+ | } | ||
+ | #start-huebschesbild { | ||
+ | order: 4; | ||
+ | width: 50%; | ||
+ | } | ||
+ | } | ||
+ | /* Min. Breite 1000 px */ | ||
+ | @media only screen and (min-width: 1000px) { | ||
+ | |||
+ | #start-block1, #start-block2, #start-huebschesbild, #start-logo { | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | #start-block1 { | ||
+ | left: 34%; | ||
+ | top: 10%; | ||
+ | transform: translate(-50%,0%); | ||
+ | } | ||
+ | |||
+ | #start-block2 { | ||
+ | left: 75%; | ||
+ | top: 80%; | ||
+ | transform: translate(-50%,0%); | ||
+ | } | ||
+ | |||
+ | #start-huebschesbild { | ||
+ | left: 60%; | ||
+ | top: 20%; | ||
+ | transform: translate(-50%,0%); | ||
+ | } | ||
+ | |||
+ | #start-logo { | ||
+ | left: 30%; | ||
+ | top: 80%; | ||
+ | transform: translate(-50%,0%); | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | /* Min. Breite 1400 px */ | ||
+ | @media only screen and (min-width: 1400px) { | ||
+ | |||
+ | #start-block1 { | ||
+ | left: 32%; | ||
+ | } | ||
+ | |||
+ | #start-block2 { | ||
+ | left: 78%; | ||
+ | top: 75%; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | .start-block1, .start-block2, .start-logo { | ||
+ | width: 250px; | ||
+ | height: fit-content; | ||
+ | } | ||
+ | |||
+ | .start-block1, .start-block2 { | ||
+ | |||
+ | } | ||
+ | |||
+ | .start-block1, .start-block2 { | ||
+ | padding: 0.5em 1em; | ||
+ | } | ||
+ | |||
+ | #start-huebschesbild img { | ||
+ | width: 60%; | ||
+ | height: auto; | ||
+ | border: 10px solid #3976aa; | ||
+ | border-radius: 100%; | ||
+ | background: #eef7fb; | ||
+ | } | ||
/* -------------- Startseite Ende -------------- */ | /* -------------- Startseite Ende -------------- */ |
Version vom 27. Oktober 2023, 13:55 Uhr
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ .noautonum .tocnumber { display: none; } .portlet h3 { font-size: 106%; } .portlet ul { line-height: 1.5em; font-size: 106%; } img.halfwidth { width: 100%; height: auto; } div#mw-panel.collapsible-nav { position: fixed; } body.page-kvwmap_-_Open_Source_WebGIS #firstHeading { display: none; } body.page-kvwmap_-_Open_Source_WebGIS .mw-content-ltr > p { display: none; } div#p-namespaces.vectorTabs { display: none; } /* -------------- Startseite -------------- */ .start-wrapper { position: relative; width: 100%; height: 75vh; margin: 0; padding: 0; } #start-block1, #start-block2, #start-huebschesbild, #start-logo { position: relative; } /* Max. Breite 1000 px */ @media only screen and (max-width: 1000px) { .start-wrapper { height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 1em; } #start-block1, #start-block2, #start-huebschesbild, #start-logo { position: relative; display: flex; flex-direction: row; justify-content: center; } #start-block1, #start-block2 { box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; } #start-logo { order: 1; width: 100%; } #start-block1 { order: 2; width: 50%; } #start-block2 { order: 3; width: 50%; } #start-huebschesbild { order: 4; width: 50%; } } /* Min. Breite 1000 px */ @media only screen and (min-width: 1000px) { #start-block1, #start-block2, #start-huebschesbild, #start-logo { position: absolute; } #start-block1 { left: 34%; top: 10%; transform: translate(-50%,0%); } #start-block2 { left: 75%; top: 80%; transform: translate(-50%,0%); } #start-huebschesbild { left: 60%; top: 20%; transform: translate(-50%,0%); } #start-logo { left: 30%; top: 80%; transform: translate(-50%,0%); } } /* Min. Breite 1400 px */ @media only screen and (min-width: 1400px) { #start-block1 { left: 32%; } #start-block2 { left: 78%; top: 75%; } } .start-block1, .start-block2, .start-logo { width: 250px; height: fit-content; } .start-block1, .start-block2 { } .start-block1, .start-block2 { padding: 0.5em 1em; } #start-huebschesbild img { width: 60%; height: auto; border: 10px solid #3976aa; border-radius: 100%; background: #eef7fb; } /* -------------- Startseite Ende -------------- */