MediaWiki:Common.css: Difference between revisions

From Librarian Chick
Jump to navigation Jump to search
Push sidebar down to match logo
Logo: natural size, responsive scaling
Line 1: Line 1:
/* Logo: top center, responsive */
/* Logo: top center, natural size (416x100), responsive */
#p-logo {
#p-logo {
     position: fixed;
     position: fixed;
Line 6: Line 6:
     top: 5px;
     top: 5px;
     z-index: 1000;
     z-index: 1000;
    width: auto;
}
}
.mw-wiki-logo {
.mw-wiki-logo {
Line 12: Line 11:
     background-repeat: no-repeat !important;
     background-repeat: no-repeat !important;
     background-position: center !important;
     background-position: center !important;
     width: 200px !important;
     width: 416px !important;
     height: 75px !important;
     height: 100px !important;
     display: block;
     display: block;
}
}
/* Align everything to the bottom of the logo (5px + 75px = 80px) */
#mw-head      { top: 110px; }
#mw-head {
#mw-head-base { height: 110px; }
     top: 80px;
#mw-page-base { padding-top: 110px; }
#mw-panel    { padding-top: 110px; }
 
@media (max-width: 900px) {
    .mw-wiki-logo { width: 300px !important; height: 72px !important; }
    #mw-head, #mw-head-base { top: 82px; height: 82px; }
    #mw-page-base { padding-top: 82px; }
     #mw-panel    { padding-top: 82px; }
}
}
#mw-head-base {
@media (max-width: 600px) {
    height: 80px;
     .mw-wiki-logo { width: 200px !important; height: 48px !important; }
}
     #mw-head, #mw-head-base { top: 58px; height: 58px; }
#mw-page-base {
     #mw-page-base { padding-top: 58px; }
    padding-top: 80px;
     #mw-panel     { padding-top: 58px; }
}
/* Push left sidebar down to match */
#mw-panel {
    padding-top: 80px;
}
@media screen and (max-width: 720px) {
     .mw-wiki-logo { width: 130px !important; height: 50px !important; }
     #mw-head { top: 55px; }
    #mw-head-base { height: 55px; }
     #mw-page-base { padding-top: 55px; }
     #mw-panel { padding-top: 55px; }
}
}

Revision as of 23:44, 23 March 2026

/* Logo: top center, natural size (416x100), responsive */
#p-logo {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 5px;
    z-index: 1000;
}
.mw-wiki-logo {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 416px !important;
    height: 100px !important;
    display: block;
}
#mw-head      { top: 110px; }
#mw-head-base { height: 110px; }
#mw-page-base { padding-top: 110px; }
#mw-panel     { padding-top: 110px; }

@media (max-width: 900px) {
    .mw-wiki-logo { width: 300px !important; height: 72px !important; }
    #mw-head, #mw-head-base { top: 82px; height: 82px; }
    #mw-page-base { padding-top: 82px; }
    #mw-panel     { padding-top: 82px; }
}
@media (max-width: 600px) {
    .mw-wiki-logo { width: 200px !important; height: 48px !important; }
    #mw-head, #mw-head-base { top: 58px; height: 58px; }
    #mw-page-base { padding-top: 58px; }
    #mw-panel     { padding-top: 58px; }
}