Main Page/styles.css: Difference between revisions
From AlternateWiki
Content added Content deleted
(Created page with "→{{pp|small=yes}}: .mp-box { border: 1px solid #aaa; →all border colors overriden on specific elements: padding: 0 0.5em 0.5em; margin-top: 4px; } .mp-h2, body.skin-timeless .mp-h2 { →Timeless needs a higher specificity: border: 1px solid #aaa; →all border colors overriden on specific elements: margin: 0.5em 0; padding: 0.2em 0.4em; font-size: 120%; font-weight: bold; font-family: inherit; } .mp-later { font-size: 85%; font-weight: normal; }...") |
No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
.mainpage-body { |
|||
/* {{pp|small=yes}} */ |
|||
margin:auto; |
|||
.mp-box { |
|||
border: 1px solid #aaa; /* all border colors overriden on specific elements */ |
|||
padding: 0 0.5em 0.5em; |
|||
margin-top: 4px; |
|||
} |
} |
||
#mainpage-banner span |
|||
.mp-h2, |
|||
{ |
|||
body.skin-timeless .mp-h2 { /* Timeless needs a higher specificity */ |
|||
display: inline-block; |
|||
border: 1px solid #aaa; /* all border colors overriden on specific elements */ |
|||
width: 100%; |
|||
border-radius:12px; |
|||
padding: 0.2em 0.4em; |
|||
font-size: 120%; |
|||
font-weight: bold; |
|||
font-family: inherit; |
|||
} |
} |
||
.mainpage-banner-overlay { |
|||
position: absolute; |
|||
.mp-later { |
|||
top: 65px; |
|||
width: 100%; |
|||
font-weight: normal; |
|||
} |
} |
||
.mainpage-header { |
|||
#mp-topbanner { |
|||
display: flex; |
|||
background: #f9f9f9; |
|||
margin: 2em 5em; |
|||
border-color: #ddd; |
|||
align-items:baseline; |
|||
} |
} |
||
.header-intro { |
|||
#mp-welcomecount { |
|||
flex: 2; |
|||
text-align: center; |
|||
margin: 0.4em; |
|||
} |
} |
||
.header-intro h1 { |
|||
#mp-welcome { |
|||
font-size: 2.5em; |
|||
border: none; |
|||
padding: 0.1em; |
|||
margin: 0 0 .15em; |
|||
} |
} |
||
.header-intro p { |
|||
#mp-welcome h1 { |
|||
font-size: 1.1em; |
|||
line-height: 1.7em; |
|||
font-family: inherit; |
|||
display: inline; |
|||
border: none; |
|||
} |
} |
||
.header-stats { |
|||
#mp-free { |
|||
display: flex; |
|||
font-size: 95%; |
|||
align-items: center; |
|||
margin:auto; |
|||
} |
} |
||
.header-stats ul { |
|||
list-style: none; |
|||
#articlecount { |
|||
font-size: 85%; |
|||
} |
} |
||
@media screen and (max-width: 800px) { |
|||
/* clear fix */ |
|||
.mainpage-header { |
|||
.mp-contains-float::after { |
|||
flex-direction: column; |
|||
content: ""; |
|||
margin:2em; |
|||
display: block; |
|||
} |
|||
clear: both; |
|||
} |
} |
||
.mainpage-frame { |
|||
#mp-banner { |
|||
box-shadow: 0 0 .3em #999; |
|||
background: #fffaf5; |
|||
border- |
border-radius: 1em; |
||
width:100%; |
|||
} |
} |
||
.mainpage-frame:after { |
|||
display: block; |
|||
#mp-left { |
|||
content: ""; |
|||
background: #f5fffa; |
|||
clear: both; |
|||
border-color: #cef2e0; |
|||
} |
} |
||
.separator { |
|||
width:5%; |
|||
#mp-left .mp-h2 { |
|||
margin:1em auto; |
|||
background: #cef2e0; |
|||
border-color: #a3bfb1; |
|||
} |
} |
||
.frame-header { |
|||
background-color:#b50014; |
|||
#mp-right { |
|||
border-radius: 1em 1em 0.25em 0.25em; |
|||
background: #f5faff; |
|||
color: #fff; |
|||
padding: .4em .8em .5em; |
|||
font-weight: bold; |
|||
} |
} |
||
.frame-header:before { |
|||
display: inline-block; |
|||
#mp-right .mp-h2 { |
|||
/* Add some content in order to get normal line height, then make it transparent */ |
|||
background: #cedff2; |
|||
content: "x"; |
|||
border-color: #a3b0bf; |
|||
color: transparent; |
|||
width: 40px; |
|||
opacity: .7; |
|||
background-size: contain; |
|||
background-repeat: no-repeat; |
|||
background-position: left center; |
|||
} |
} |
||
.frame-body { |
|||
padding: 1em; |
|||
#mp-middle { |
|||
background: #fff5fa; |
|||
border-color: #f2cedd; |
|||
} |
|||
#mp-middle .mp-h2 { |
|||
background: #f2cedd; |
|||
border-color: #bfa3af; |
|||
} |
|||
#mp-lower { |
|||
background: #faf5ff; |
|||
border-color: #ddcef2; |
|||
} |
|||
#mp-lower .mp-h2 { |
|||
background: #ddcef2; |
|||
border-color: #afa3bf; |
|||
} |
|||
#mp-bottom { |
|||
/* no background */ |
|||
border-color: #e2e2e2; |
|||
} |
|||
#mp-bottom .mp-h2 { |
|||
background: #eee; |
|||
border-color: #ddd; |
|||
} |
|||
@media (max-width: 875px) { |
|||
/* We need to improve Template:POTD as used on the main page so that these |
|||
* hacks aren't necessary */ |
|||
#mp-tfp table, |
|||
#mp-tfp tr, |
|||
#mp-tfp td, |
|||
#mp-tfp tbody { |
|||
display: block !important; |
|||
width: 100% !important; |
|||
box-sizing: border-box; |
|||
} |
|||
#mp-tfp tr:first-child td:first-child a { |
|||
text-align: center; |
|||
display: table; |
|||
margin: 0 auto; |
|||
} |
|||
} |
|||
@media (min-width: 875px) { |
|||
#mp-upper { |
|||
display: flex; |
|||
} |
|||
#mp-left { |
|||
flex: 1 1 55%; |
|||
margin-right: 2px; |
|||
} |
|||
#mp-right { |
|||
flex: 1 1 45%; |
|||
margin-left: 2px; |
|||
} |
|||
} |
} |
||
Revision as of 21:08, 19 June 2023
.mainpage-body {
margin:auto;
}
#mainpage-banner span
{
display: inline-block;
width: 100%;
border-radius:12px;
}
.mainpage-banner-overlay {
position: absolute;
top: 65px;
width: 100%;
}
.mainpage-header {
display: flex;
margin: 2em 5em;
align-items:baseline;
}
.header-intro {
flex: 2;
}
.header-intro h1 {
font-size: 2.5em;
border: none;
margin: 0 0 .15em;
}
.header-intro p {
font-size: 1.1em;
line-height: 1.7em;
}
.header-stats {
display: flex;
align-items: center;
margin:auto;
}
.header-stats ul {
list-style: none;
}
@media screen and (max-width: 800px) {
.mainpage-header {
flex-direction: column;
margin:2em;
}
}
.mainpage-frame {
box-shadow: 0 0 .3em #999;
border-radius: 1em;
width:100%;
}
.mainpage-frame:after {
display: block;
content: "";
clear: both;
}
.separator {
width:5%;
margin:1em auto;
}
.frame-header {
background-color:#b50014;
border-radius: 1em 1em 0.25em 0.25em;
color: #fff;
padding: .4em .8em .5em;
font-weight: bold;
}
.frame-header:before {
display: inline-block;
/* Add some content in order to get normal line height, then make it transparent */
content: "x";
color: transparent;
width: 40px;
opacity: .7;
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
}
.frame-body {
padding: 1em;
}
