GitHub - single-column repository page with important info on the top by myfonj

/* ==UserStyle==
@name           GitHub - single-column repository page with important info on the top
@namespace      myfonj
@version        1.17.6
@description    Pulls Readme above files list and moves sidebar content as foremost horizontal row before content.
@author         myf
@license        CC0
==/UserStyle== */
@-moz-document domain("github.com") {
 /*
  https://userstyles.world/style/5069/github-repository-page-in-single-column-with-important-info-on-the-top
  https://greasyfork.org/en/scripts/406729/versions/new
 Changelog
  1.17.6 (2024-11-27) - Issues new structure.
  1.17.5 (2024-08-29) - Commits counts first before last commint details.
  1.17.4 (2024-08-20) - Fix untrucated naked link in sponsor box.
  1.17.3 (2024-08-13) - Fix narrow "sidebar" width in "new issue" (and presumably elsewhere).
  1.17.2 (2024-07-03) - Fix broken header width (my fault, sorry folks).
  1.17.1 (2024-06-21) - Fix "last commit" content order: count and "last" to the start.
  1.17.0 (2024-05-30) - Also for pull request conversations
  1.16.3 (2024-04-05) - Issue Notification button box fixed width, so it will not cause shift after init.
  1.16.2 (2024-04-04) - Flex-shrink for the issues header; allows wrapping content inside items, but will not overflow.
  1.16.1 (2024-04-03) - Max-width for labels in issues
  1.16.0 (2024-03-26) - Preliminary support for single-column discussions.
  1.15.3 (2024-03-23) - Issue comment header content narrower, to match max line length better
  1.15.2 (2024-03-21) - Better align with issues header
  1.15.1 (2024-03-21) - Issues Subscription reason prose into hover/focus popup to reduce height
  1.15.0 (2024-03-20) - Preliminary single-columning of Issue pages
  1.14.1 (2024-03-12) - "Last commit" back left.
  1.14.0 (2024-02-28) - shrink "contributors" and "used by" lists' height, unless hovered
  1.13.0 (2024-02-14) - adapt to a new structure, yet again
  1.12.4 (2023-12-13) - fix last commit "…" more info dropdown position
  1.12.3 (2023-12-13) - total commit count and last commit time pulled to the left edge
  1.12.2 (2023-12-12) - also rushed pulling of "last commit" info, for now above readme - license - (...) - edit - menu line
  1.12.0 (2023-12-12) - rushed hotfix for new main content structure, readme is back up. Ton of dead code remains.
  1.11.1 (2023-11-15) - restore compacting stuff under tags (license, CoC, ... icons) after structure change (new wrapper)
  1.11.0 (2023-09-25) - Hide redundant ☆ / 👁 / 🜉 + counts under tags.
  1.10.0 (2023-09-25) - Hide "No releases published" / "No packages published" boxes
  1.9.4 (2023-09-20) - prevent links under tags wrapping between words
  1.9.3 (2023-09-07) - wider "About" box, narrower rest, icons-(+ counts)-only footer
  1.9.2 (2023-08-15) - max-width for header
  1.9.1 (2023-07-13) - fix superfluous line break in resources (`include-fragment`)
  1.9.0 (2023-06-22) - readme pulled to top even on subpages; requires modern Chromium or Firefox with `layout.css.has-selector.enabled` pref
  1.8.4 (2023-03-03) - hopefuly applied even for "turbopages"
  1.8.3 (2022-08-11) - just name and info changes
 */
 /* just for categorization */
 /* … and this little photo zoom */
 .Popover .avatar-user {
  min-width: 240px;
  min-height: 240px;
  /* image-rendering: crisp-edges */
 }
 /* make transparent avatars more contrasting */
 .avatar-user {
  filter:drop-shadow(0 0 1px canvastext)
 }
 /* … and pulling the readme at code pages deeper */
 main div:has(> #readme) {
  /* wohohoo, new era of usestyling just arrived. */
  order: -1;
 }
}

@-moz-document regexp("^https?://github.com/[^?#]*?/(discussions|pull)/.*") {
 /*
 § Discussions: pull sidebar up as well
 gosh, why every page has completely different layout structure??
 */
 #discussion_bucket {
  :has(#partial-discussion-header) {
   order: -2;
  }
  #partial-discussion-sidebar {
   order: -1;
   display: flex;
   width: 100%;
   gap: 2ch;
   .discussion-sidebar-item {
    margin: 0;
    padding: 0;
    border: none;
   }
   & create-branch {
    /*
    shrinking long "Successfully merging this pull request may close these issues."
    */
    max-width: 25ch
   }
  }
 }
}
@-moz-document regexp("^https?://github.com/[^?#]*?/(issues|pull)/.*") {
 /*
 § Issue: pull sidebar up as well
 */
 [data-testid="issue-viewer-metadata-container"] {
  width: auto;
 }
 *:has(> [data-testid="issue-viewer-metadata-container"]) {
  flex-direction: column-reverse;
  & [data-testid="issue-viewer-metadata-pane"] {
   display: flex !important;
   flex-direction: row
  }
 }
 /*
 § Old issues structure, not used as of 2024-11-27 (deleteme)
 */
 .Layout {
  display: flex;
  flex-direction: column-reverse;
  --Layout-sidebar-width: none;
  & > .Layout-sidebar {
  --Layout-sidebar-width: none;
   & > * {
    display: flex;
    flex-direction: row;
    gap: 3ch;
    & > *.discussion-sidebar-item {
     margin-top: -34px;
     flex-grow: 1;
     flex-shrink: 1;
     &:has(>.participation),
     &:has(>.js-issue-labels) {
      /* * /flex-shrink: 1 !important; /* */
     }
     &.sidebar-notifications {
      order: 1;
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 12em;
      min-width: 12em;
      position: relative;
      & #notification-subscribe-button-reason {
       position: absolute;
       top: calc(100% + 2ch); 
       background-color: var(--bgColor-default, var(--color-canvas-default));
       z-index: -1;
       opacity: 0;
       padding: 2ch;
       margin: -2ch;
      }
      &:is(:hover,:focus-within) #notification-subscribe-button-reason {
       z-index: 0;
       opacity: 1;
      }
     }
    }
   }
  }
 }
 /*
 § limit comment line length (crude preliminary)
 */
 .comment-body {
  &  p,
  & > :is(ul,ol) > li {
   max-width: 80ch
  }
 }
 /*
 § limit comment header content length, so it does not dangle
 */
 .timeline-comment-header {
  justify-content: left;
  h3 { max-width: 80ch !important}
 }
 /*
 § REVIEW sweep reactions aside so they do not add vertical space?
 it seems it is not possible to make them vertical
 since they watch width and collapse them to button when narrow (?)
 */
 :has(>.pr-review-reactions) {
  > .pr-review-reactions {
   > .comment-reactions{
   }
   .js-comment-reactions-options{
   }
  }
 }
 /*
 § swipe reactions to the, if available
 */
}


@-moz-document regexp("^https?://github.com/(?!password_reset|settings)([^#?/]+)/([^#?/]+)/?([#?].*)?$") {
 /*
 examples
 https://github.com/mmulet/code-relay
  few contributors, many columns
 https://github.com/mozilla/readability
  used by ..
 https://github.com/GoogleChromeLabs/dark-mode-toggle
  many tags, much everything
 https://github.com/WebReflection/sqlite-worker
  five columns
 https://github.com/rilwis/bamboo
  fork, just two columns
 https://github.com/mozilla/standards-positions
  no about, no tags
 https://github.com/mcmilk/7-Zip-zstd/
  sponsor
 https://github.com/clauseggers/Playfair
  super long sponsor naked URL
 https://github.com/mdn/mdn-minimalist
  no readme TOC
 
 `.repository-content` class is actually unreliable, since it is not present for ajaxified turbonavigations
 using `#repository-container-header + *` instead
 that `*` seems like
<turbo-frame id="repo-content-turbo-frame" target="_top" data-turbo-action="advance" class="">
      <div id="repo-content-pjax-container" class="repository-content ">
 */
 /* header block nentred
 */
 .AppHeader > * {
  max-width: 1280px;
  margin: auto;
 }
 /* unify main max width and centering of the main blocks
 */
 main > div {
  max-width: none !important;
  max-width: 80rem !important;
  max-width: 90rem !important;
  margin-left: auto;
  margin-right: auto;
 }
 /* main "columns" wrapper (files | sidebar) - convert to reversed rows */
 #repository-container-header + * .Layout {
  display: flex !important;
  flex-direction: column-reverse !important;
 }
 /* Files, Sidebar - now rows*/
 #repository-container-header + * .Layout > div {
  width: auto;
 }
 /*
  main column - wrapper of:
  - file navigation (branches, tags left, goto, file right)
  - files (moved to bottom, except for 1. "row" with latest commit positioned to file navigation)
  - readme (moved under file navigation)
 */
 #repository-container-header + * .Layout > .Layout-main {
  position: relative;
  display: flex;
  flex-direction: column;
 }
 #repository-container-header + * .Layout > .Layout-main > .file-navigation {
  order: -2;
 }
 /*
 Readme - move before files files
 there are two kinds of readme blocks:
 - "fancy" readme-toc component with kebab menu of headings (introduced around 2021-03-26)
   - see e.g. https://github.com/SerenityOS/serenity
 - "normal" div#readme
   - see e.g. https://github.com/mozilla/readability
 */
 #repository-container-header + * .Layout > .Layout-main > readme-toc,
 #repository-container-header + * .Layout > .Layout-main > #readme {
  order: -1;
 }
 /* sticky "README.md" heading / TOC box make simple button */
 #repository-container-header + * .Layout > .Layout-main > readme-toc > #readme > :first-child {
  display: inline-flex !important;
  border: none !important;
  background-color: transparent !important/**/
 }
 /* "readme.md" label/link heading after TOC button: hide */
 #repository-container-header + * .Layout > .Layout-main > readme-toc > #readme > :first-child h2 {
  display: none;
 }
 /* actual readme box: push up into place freed by heading / TOC box */
 #repository-container-header + * .Layout > .Layout-main > readme-toc > #readme > :last-child {
  margin-top: -3rem
 }
 /* readme - line length limit (originnaly 1012px through .container-lg) */
 #repository-container-header + * .Layout > .Layout-main > readme-toc > #readme article.markdown-body.entry-content {
  max-width: 80ch;
 }
 /*
 sidebar - now top content
 for god's sake, THIS div should be MAIN and should be near H1 or something
 not suffocated at the end of the document in sidebar
 */
 #repository-container-header + * .Layout > .Layout-sidebar > div {
  display: flex;
  flex-direction: row;
  /* ...