☰

MDN: Content first (Header to Footer)

Moves main content to the top, so the header with dropdown menus lands above footer. Also compacts /play sandbox.

/* ==UserStyle==
@name           MDN: Content first (Header to Footer)
@description    Moves main content to the top, so the header with dropdown menus lands above footer. Also compacts /play sandbox.
@namespace      myfonj
@version        2.2.3
@license        CC0 - Public Domain
==/UserStyle== */

@-moz-document domain("developer.mozilla.org") {
/*
    https://userstyles.world/style/4280/mdn-content-first-header-to-footer
    https://greasyfork.org/en/scripts/409087/versions/new
    Changelog
    2025-05-23 (2.2.3) - fix: breadcrumbs are back at the top (right)
    2024-03-21 (2.2.2) - compacted play even more
    2024-03-21 (2.2.1) - fixed sidebar compacting a bit
    2024-03-21 (2.2.0) - compacting /play sandbox and pushing up
    2024-03-20 (2.1.1) - compact sidebar (preliminary)
    2022-12-14 (2.1.0) - breadcrumbs back to top, compact search
    2020-12-15 they switched to "signle column grid"
    With explicity set template-row, that matches matural source order.
    Makes no sense to me. Education? Showing off? Questions…
    You know what?
    Flexbox is fine. I think. Natural order, no need to keep track, no overlays.
    2021-03-11 switched to shallow grid with aside and main besides each other
    2022-03-23 new version - new structure hit production
    2022-04-21 new structure
  */
 /*
 § move header from top to bottom above footer
 */
 .page-wrapper {
  display: flex;
  flex-direction: column;
 }
 .page-wrapper > .play.container,
 .main-wrapper {
  order: -1;
 }
 /*
 § move breadcrumbs and actions back to top
 */
 .sticky-header-container {
  position: static;
 }
 .article-actions-container {
  position: absolute;
  top: 0 !important;
  right: 0 !important;
 }
 main#content {
  margin-top: 2em;
 }
 /*
 § wider content, no right sidebar
 this basically pulls declarations originally targeting (min-width: 769px)
 */
 .main-wrapper {
  grid-template-columns: minmax(0,1fr) minmax(0,3fr);
 }
 /*
 § TOC in the right pane (hide)
 */
 .main-wrapper .toc {
  display: none !important;
 }
 /*
 § Same TOC in the left pane, above "related" (show)
 */
 .in-nav-toc {
  display: block !important;
 }
 /*
 § More compact: smaller gaps
 */
  .main-wrapper .main-content,
  .main-wrapper .sidebar,
  .main-wrapper .toc {
   top: 0;
   padding-top: 1rem;
   padding-bottom: 0rem;
  }
 .main-page-content :is(h1, h2, h3) {
   margin: .3em 0 0 0;
 }
 /*
 § fix search suggestions position
 */
 .header-search .search-results {
  top: auto;
  bottom: 2em;
  left: auto;
  right: .5em;
 }
 /*
 § wider compact single line results suggestions
 (column-reverse here would put first result closer to search input
 but keyboars arrows would feel flipped then)
 */
 .search-results {
  min-width: 60ch !important;
  width: auto !important;
  display: flex;
  flex-direction: column;
 }
 .result-item {
  display: flex;
  gap: 2ch;
  align-content: space-between;
  flex-direction: row-reverse !important;
 }
 .result-item a {
  display: contents !important;
 }
 .result-item a {
  white-space: nowrap !important;
 }
 .result-item a small {
  margin-right: auto;
 }
 .nothing-found.result-item { flex-direction: row !important}
 .nothing-found.result-item br { display: none; }

 /* no things on right*/
 .toc-container {
  display: none !important;
 }
 .main-content {
      grid-column-start: main !important;
      grid-column-end: none !important;
  }
  
  /*
  § super-compact sidebar nav
  */
  .sidebar-container {
   top: 0; 
   max-height: 100vh;
   & > * {
     max-height: 100vh;
     & * {
      margin-block: 0 !important;
     }
   }
  }
  .document-toc-item,
  .document-toc-link.document-toc-link:not(.button) {
   madding-block: 0 !important;
  }
  .sidebar-actions {
   display: none;
  }
  .document-toc header { display: none;}
  
  .page-wrapper > .play.container {
   aside {
    padding: 0
   }
   &,
   &>.editors ,
   &>.preview {
    padding: 0;
    gap: 0;
    min-height: 100vh;
   }
   & summary {
    padding: 0 !important;
    height: 1.5rem !important;
    line-height: 1.5rem !important;
   }
   & .editor {
    height: calc(100% - 1.5rem) !important;
    overflow: auto !important;
    margin: 0 !important;
   }
   & .preview .place.side {
    /* for ads (?)*/
    min-height: 0 !important;
    margin: 0;
    & * {
     font-size: 12px;
     line-height: 1;
     max-height: 50px;
     width: auto;
    }
   }
  }
}