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 -------------- */