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.

  1. /* ==UserStyle==
  2. @name MDN: Content first (Header to Footer)
  3. @description Moves main content to the top, so the header with dropdown menus lands above footer. Also compacts /play sandbox.
  4. @namespace myfonj
  5. @version 2.2.3
  6. @license CC0 - Public Domain
  7. ==/UserStyle== */
  8.  
  9. @-moz-document domain("developer.mozilla.org") {
  10. /*
  11. https://userstyles.world/style/4280/mdn-content-first-header-to-footer
  12. https://gf.qytechs.cn/en/scripts/409087/versions/new
  13. Changelog
  14. 2025-05-23 (2.2.3) - fix: breadcrumbs are back at the top (right)
  15. 2024-03-21 (2.2.2) - compacted play even more
  16. 2024-03-21 (2.2.1) - fixed sidebar compacting a bit
  17. 2024-03-21 (2.2.0) - compacting /play sandbox and pushing up
  18. 2024-03-20 (2.1.1) - compact sidebar (preliminary)
  19. 2022-12-14 (2.1.0) - breadcrumbs back to top, compact search
  20. 2020-12-15 they switched to "signle column grid"
  21. With explicity set template-row, that matches matural source order.
  22. Makes no sense to me. Education? Showing off? Questions…
  23. You know what?
  24. Flexbox is fine. I think. Natural order, no need to keep track, no overlays.
  25. 2021-03-11 switched to shallow grid with aside and main besides each other
  26. 2022-03-23 new version - new structure hit production
  27. 2022-04-21 new structure
  28. */
  29. /*
  30. § move header from top to bottom above footer
  31. */
  32. .page-wrapper {
  33. display: flex;
  34. flex-direction: column;
  35. }
  36. .page-wrapper > .play.container,
  37. .main-wrapper {
  38. order: -1;
  39. }
  40. /*
  41. § move breadcrumbs and actions back to top
  42. */
  43. .sticky-header-container {
  44. position: static;
  45. }
  46. .article-actions-container {
  47. position: absolute;
  48. top: 0 !important;
  49. right: 0 !important;
  50. }
  51. main#content {
  52. margin-top: 2em;
  53. }
  54. /*
  55. § wider content, no right sidebar
  56. this basically pulls declarations originally targeting (min-width: 769px)
  57. */
  58. .main-wrapper {
  59. grid-template-columns: minmax(0,1fr) minmax(0,3fr);
  60. }
  61. /*
  62. § TOC in the right pane (hide)
  63. */
  64. .main-wrapper .toc {
  65. display: none !important;
  66. }
  67. /*
  68. § Same TOC in the left pane, above "related" (show)
  69. */
  70. .in-nav-toc {
  71. display: block !important;
  72. }
  73. /*
  74. § More compact: smaller gaps
  75. */
  76. .main-wrapper .main-content,
  77. .main-wrapper .sidebar,
  78. .main-wrapper .toc {
  79. top: 0;
  80. padding-top: 1rem;
  81. padding-bottom: 0rem;
  82. }
  83. .main-page-content :is(h1, h2, h3) {
  84. margin: .3em 0 0 0;
  85. }
  86. /*
  87. § fix search suggestions position
  88. */
  89. .header-search .search-results {
  90. top: auto;
  91. bottom: 2em;
  92. left: auto;
  93. right: .5em;
  94. }
  95. /*
  96. § wider compact single line results suggestions
  97. (column-reverse here would put first result closer to search input
  98. but keyboars arrows would feel flipped then)
  99. */
  100. .search-results {
  101. min-width: 60ch !important;
  102. width: auto !important;
  103. display: flex;
  104. flex-direction: column;
  105. }
  106. .result-item {
  107. display: flex;
  108. gap: 2ch;
  109. align-content: space-between;
  110. flex-direction: row-reverse !important;
  111. }
  112. .result-item a {
  113. display: contents !important;
  114. }
  115. .result-item a {
  116. white-space: nowrap !important;
  117. }
  118. .result-item a small {
  119. margin-right: auto;
  120. }
  121. .nothing-found.result-item { flex-direction: row !important}
  122. .nothing-found.result-item br { display: none; }
  123.  
  124. /* no things on right*/
  125. .toc-container {
  126. display: none !important;
  127. }
  128. .main-content {
  129. grid-column-start: main !important;
  130. grid-column-end: none !important;
  131. }
  132. /*
  133. § super-compact sidebar nav
  134. */
  135. .sidebar-container {
  136. top: 0;
  137. max-height: 100vh;
  138. & > * {
  139. max-height: 100vh;
  140. & * {
  141. margin-block: 0 !important;
  142. }
  143. }
  144. }
  145. .document-toc-item,
  146. .document-toc-link.document-toc-link:not(.button) {
  147. madding-block: 0 !important;
  148. }
  149. .sidebar-actions {
  150. display: none;
  151. }
  152. .document-toc header { display: none;}
  153. .page-wrapper > .play.container {
  154. aside {
  155. padding: 0
  156. }
  157. &,
  158. &>.editors ,
  159. &>.preview {
  160. padding: 0;
  161. gap: 0;
  162. min-height: 100vh;
  163. }
  164. & summary {
  165. padding: 0 !important;
  166. height: 1.5rem !important;
  167. line-height: 1.5rem !important;
  168. }
  169. & .editor {
  170. height: calc(100% - 1.5rem) !important;
  171. overflow: auto !important;
  172. margin: 0 !important;
  173. }
  174. & .preview .place.side {
  175. /* for ads (?)*/
  176. min-height: 0 !important;
  177. margin: 0;
  178. & * {
  179. font-size: 12px;
  180. line-height: 1;
  181. max-height: 50px;
  182. width: auto;
  183. }
  184. }
  185. }
  186. }

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址