Jump to content

MediaWiki:Minerva.css: Difference between revisions

From The Untenables
No edit summary
No edit summary
Line 1: Line 1:
/* All CSS here will be loaded for users of the MinervaNeue skin */
/* All CSS here will be loaded for users of the MinervaNeue skin */


/* Center the logo and push the menu below on narrow screens (Minerva version) */
/* === Minerva Mobile Header Fix === */
@media (max-width: 768px) {


   /* The header container itself */
/* Center the logo and push the menu below it */
@media screen and (max-width: 768px) {
   /* Center the site header container */
   .minerva-header {
   .minerva-header {
     display: block !important;
     display: flex;
     text-align: center !important;
     flex-direction: column;
     padding: 0.5em 0;
    align-items: center;
     justify-content: center;
   }
   }


   /* The logo */
   /* Logo adjustments */
   .minerva-header .mw-logo,
   .minerva-header .mw-logo {
  .minerva-header .mw-wiki-logo {
     display: block !important;
     display: block !important;
     margin: 0 auto !important;
     margin: 0 auto 0.5em auto !important;
    text-align: center !important;
    max-width: 160px !important;
     height: auto !important;
     height: auto !important;
    max-height: 90px !important;
   }
   }


   /* Menu and icons below logo */
   /* Ensure menu and search stack below */
   .minerva-header .menu,
   .minerva-header .menu,
   .minerva-header .minerva-user-navigation,
   .minerva-header .minerva-user-menu,
   .minerva-header .toggle-list,
   .minerva-header .minerva-search-box {
  .minerva-header .minerva-icon {
     display: block !important;
     display: block !important;
     margin: 0.4em auto !important;
     margin: 0 auto !important;
     text-align: center !important;
     text-align: center !important;
  }
  /* Optional: slightly shrink logo on smaller devices */
  .minerva-header .mw-logo img {
    max-width: 160px !important;
   }
   }
}
}

Revision as of 19:12, 19 October 2025

/* All CSS here will be loaded for users of the MinervaNeue skin */

/* === Minerva Mobile Header Fix === */

/* Center the logo and push the menu below it */
@media screen and (max-width: 768px) {
  /* Center the site header container */
  .minerva-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Logo adjustments */
  .minerva-header .mw-logo {
    display: block !important;
    margin: 0 auto 0.5em auto !important;
    text-align: center !important;
    max-width: 160px !important;
    height: auto !important;
  }

  /* Ensure menu and search stack below */
  .minerva-header .menu,
  .minerva-header .minerva-user-menu,
  .minerva-header .minerva-search-box {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}