Template:Main Page/Header new/styles.css: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
m Protected "Template:Main Page/Header new/styles.css": High traffic page ([Edit=Allow only autoconfirmed users] (indefinite) [Move=Allow only autoconfirmed users] (indefinite)) |
grid-based main page header; avoids positioning errors on small displays |
||
| Line 1: | Line 1: | ||
.wd-mp-header { |
.wd-mp-header { |
||
display: grid; |
|||
place-items: center; |
|||
position: relative; |
|||
isolation: isolate; |
|||
text-align: center; |
text-align: center; |
||
margin-bottom: 10px; |
margin-bottom: 10px; |
||
color: #484848; |
color: #484848; |
||
| ⚫ | |||
| ⚫ | |||
grid-column: 1 / -1; |
|||
grid-row: 1 / -1; |
|||
} |
} |
||
@supports (object-fit:cover) { |
@supports (object-fit:cover) { |
||
| Line 13: | Line 18: | ||
} |
} |
||
} |
} |
||
| ⚫ | |||
height: 0; |
|||
left: 50%; |
|||
margin: 0 0 0 -50%; |
|||
position: absolute; |
|||
top: 65px; |
|||
width: 100%; |
|||
| ⚫ | |||
.wd-mp-headerbox { |
.wd-mp-headerbox { |
||
background: #ddd; |
background: #ddd; |
||
| Line 30: | Line 26: | ||
line-height: 2em; |
line-height: 2em; |
||
} |
} |
||
.wd-mp-subheader { |
.wd-mp-subheader { |
||
margin-top:10px; |
margin-top:10px; |
||
} |
} |
||
.wd-mp-subheader > div { |
.wd-mp-subheader > div { |
||
overflow: hidden; |
|||
position: relative; |
|||
background-color:white; |
background-color:white; |
||
display: inline-block; |
display: inline-block; |
||
Revision as of 21:54, 11 October 2022
.wd-mp-header {
display: grid;
place-items: center;
isolation: isolate;
text-align: center;
margin-bottom: 10px;
color: #484848;
}
.wd-mp-header > * {
grid-column: 1 / -1;
grid-row: 1 / -1;
}
@supports (object-fit:cover) {
.wd-mp-headerimage {
width: 100%;
object-fit: cover;
object-position: top left;
}
}
.wd-mp-headerbox {
background: #ddd;
background: rgba(221, 221, 221, 0.9);
display: inline-block;
padding: 2em;
font-size: 1.2em;
line-height: 2em;
}
.wd-mp-subheader {
margin-top:10px;
}
.wd-mp-subheader > div {
background-color:white;
display: inline-block;
width: auto;
margin: 0 auto;
padding-left: 1em;
padding-right: 1em;
text-align: center;
box-sizing: border-box;
}