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://greasyforks.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;
}
}
}
}