MediaWiki:Common.css: Difference between revisions

From Librarian Chick
Jump to navigation Jump to search
Add logo CSS
 
Logo: always left-aligned at sidebar boundary
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Logo: top right, responsive */
/* Logo: left edge always aligned with sidebar/content boundary */
#p-logo {
#p-logo {
     position: fixed;
     position: fixed;
     right: 10px;
     left: 160px;
     top: 5px;
     top: 5px;
    left: auto;
     z-index: 1000;
     z-index: 1000;
    width: auto;
}
}
.mw-wiki-logo {
.mw-wiki-logo {
    width: 180px !important;
    height: 70px !important;
     background-size: contain !important;
     background-size: contain !important;
     background-repeat: no-repeat !important;
     background-repeat: no-repeat !important;
     background-position: center !important;
     background-position: left center !important;
    /* Never wider than the viewport minus the sidebar */
    width: min(416px, calc(100vw - 170px)) !important;
    height: 100px !important;
    aspect-ratio: 416 / 100;
     display: block;
     display: block;
}
}
@media screen and (max-width: 720px) {
#mw-head      { top: 110px; }
     .mw-wiki-logo {
#mw-head-base { height: 110px; }
        width: 110px !important;
#mw-page-base { padding-top: 110px; }
        height: 43px !important;
#mw-panel    { padding-top: 110px; }
     }
 
/* Scale the reserved band down on narrow screens */
@media (max-width: 700px) {
     .mw-wiki-logo { height: 72px !important; }
    #mw-head      { top: 82px; }
    #mw-head-base { height: 82px; }
    #mw-page-base { padding-top: 82px; }
    #mw-panel    { padding-top: 82px; }
}
@media (max-width: 480px) {
    .mw-wiki-logo { height: 48px !important; }
    #mw-head      { top: 58px; }
    #mw-head-base { height: 58px; }
    #mw-page-base { padding-top: 58px; }
     #mw-panel    { padding-top: 58px; }
}
}

Latest revision as of 00:00, 24 March 2026

/* Logo: left edge always aligned with sidebar/content boundary */
#p-logo {
    position: fixed;
    left: 160px;
    top: 5px;
    z-index: 1000;
}
.mw-wiki-logo {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    /* Never wider than the viewport minus the sidebar */
    width: min(416px, calc(100vw - 170px)) !important;
    height: 100px !important;
    aspect-ratio: 416 / 100;
    display: block;
}
#mw-head      { top: 110px; }
#mw-head-base { height: 110px; }
#mw-page-base { padding-top: 110px; }
#mw-panel     { padding-top: 110px; }

/* Scale the reserved band down on narrow screens */
@media (max-width: 700px) {
    .mw-wiki-logo { height: 72px !important; }
    #mw-head      { top: 82px; }
    #mw-head-base { height: 82px; }
    #mw-page-base { padding-top: 82px; }
    #mw-panel     { padding-top: 82px; }
}
@media (max-width: 480px) {
    .mw-wiki-logo { height: 48px !important; }
    #mw-head      { top: 58px; }
    #mw-head-base { height: 58px; }
    #mw-page-base { padding-top: 58px; }
    #mw-panel     { padding-top: 58px; }
}