☰

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

Pulls Readme above files list and moves sidebar content as foremost horizontal row before content.

  1. /* ==UserStyle==
  2. @name           GitHub - single-column repository page with important info on the top
  3. @namespace      myfonj
  4. @version        1.17.6
  5. @description    Pulls Readme above files list and moves sidebar content as foremost horizontal row before content.
  6. @author         myf
  7. @license        CC0
  8. ==/UserStyle== */
  9. @-moz-document domain("github.com") {
  10.  /*
  11.   https://userstyles.world/style/5069/github-repository-page-in-single-column-with-important-info-on-the-top
  12.   https://greasyfork.org/en/scripts/406729/versions/new
  13.  Changelog
  14.   1.17.6 (2024-11-27) - Issues new structure.
  15.   1.17.5 (2024-08-29) - Commits counts first before last commint details.
  16.   1.17.4 (2024-08-20) - Fix untrucated naked link in sponsor box.
  17.   1.17.3 (2024-08-13) - Fix narrow "sidebar" width in "new issue" (and presumably elsewhere).
  18.   1.17.2 (2024-07-03) - Fix broken header width (my fault, sorry folks).
  19.   1.17.1 (2024-06-21) - Fix "last commit" content order: count and "last" to the start.
  20.   1.17.0 (2024-05-30) - Also for pull request conversations
  21.   1.16.3 (2024-04-05) - Issue Notification button box fixed width, so it will not cause shift after init.
  22.   1.16.2 (2024-04-04) - Flex-shrink for the issues header; allows wrapping content inside items, but will not overflow.
  23.   1.16.1 (2024-04-03) - Max-width for labels in issues
  24.   1.16.0 (2024-03-26) - Preliminary support for single-column discussions.
  25.   1.15.3 (2024-03-23) - Issue comment header content narrower, to match max line length better
  26.   1.15.2 (2024-03-21) - Better align with issues header
  27.   1.15.1 (2024-03-21) - Issues Subscription reason prose into hover/focus popup to reduce height
  28.   1.15.0 (2024-03-20) - Preliminary single-columning of Issue pages
  29.   1.14.1 (2024-03-12) - "Last commit" back left.
  30.   1.14.0 (2024-02-28) - shrink "contributors" and "used by" lists' height, unless hovered
  31.   1.13.0 (2024-02-14) - adapt to a new structure, yet again
  32.   1.12.4 (2023-12-13) - fix last commit "…" more info dropdown position
  33.   1.12.3 (2023-12-13) - total commit count and last commit time pulled to the left edge
  34.   1.12.2 (2023-12-12) - also rushed pulling of "last commit" info, for now above readme - license - (...) - edit - menu line
  35.   1.12.0 (2023-12-12) - rushed hotfix for new main content structure, readme is back up. Ton of dead code remains.
  36.   1.11.1 (2023-11-15) - restore compacting stuff under tags (license, CoC, ... icons) after structure change (new wrapper)
  37.   1.11.0 (2023-09-25) - Hide redundant ☆ / 👁 / 🜉 + counts under tags.
  38.   1.10.0 (2023-09-25) - Hide "No releases published" / "No packages published" boxes
  39.   1.9.4 (2023-09-20) - prevent links under tags wrapping between words
  40.   1.9.3 (2023-09-07) - wider "About" box, narrower rest, icons-(+ counts)-only footer
  41.   1.9.2 (2023-08-15) - max-width for header
  42.   1.9.1 (2023-07-13) - fix superfluous line break in resources (`include-fragment`)
  43.   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
  44.   1.8.4 (2023-03-03) - hopefuly applied even for "turbopages"
  45.   1.8.3 (2022-08-11) - just name and info changes
  46.  */
  47.  /* just for categorization */
  48.  /* … and this little photo zoom */
  49.  .Popover .avatar-user {
  50.   min-width: 240px;
  51.   min-height: 240px;
  52.   /* image-rendering: crisp-edges */
  53.  }
  54.  /* make transparent avatars more contrasting */
  55.  .avatar-user {
  56.   filter:drop-shadow(0 0 1px canvastext)
  57.  }
  58.  /* … and pulling the readme at code pages deeper */
  59.  main div:has(> #readme) {
  60.   /* wohohoo, new era of usestyling just arrived. */
  61.   order: -1;
  62.  }
  63. }
  64.  
  65. @-moz-document regexp("^https?://github.com/[^?#]*?/(discussions|pull)/.*") {
  66.  /*
  67.  § Discussions: pull sidebar up as well
  68.  gosh, why every page has completely different layout structure??
  69.  */
  70.  #discussion_bucket {
  71.   :has(#partial-discussion-header) {
  72.    order: -2;
  73.   }
  74.   #partial-discussion-sidebar {
  75.    order: -1;
  76.    display: flex;
  77.    width: 100%;
  78.    gap: 2ch;
  79.    .discussion-sidebar-item {
  80.     margin: 0;
  81.     padding: 0;
  82.     border: none;
  83.    }
  84.    & create-branch {
  85.     /*
  86.     shrinking long "Successfully merging this pull request may close these issues."
  87.     */
  88.     max-width: 25ch
  89.    }
  90.   }
  91.  }
  92. }
  93. @-moz-document regexp("^https?://github.com/[^?#]*?/(issues|pull)/.*") {
  94.  /*
  95.  § Issue: pull sidebar up as well
  96.  */
  97.  [data-testid="issue-viewer-metadata-container"] {
  98.   width: auto;
  99.  }
  100.  *:has(> [data-testid="issue-viewer-metadata-container"]) {
  101.   flex-direction: column-reverse;
  102.   & [data-testid="issue-viewer-metadata-pane"] {
  103.    display: flex !important;
  104.    flex-direction: row
  105.   }
  106.  }
  107.  /*
  108.  § Old issues structure, not used as of 2024-11-27 (deleteme)
  109.  */
  110.  .Layout {
  111.   display: flex;
  112.   flex-direction: column-reverse;
  113.   --Layout-sidebar-width: none;
  114.   & > .Layout-sidebar {
  115.   --Layout-sidebar-width: none;
  116.    & > * {
  117.     display: flex;
  118.     flex-direction: row;
  119.     gap: 3ch;
  120.     & > *.discussion-sidebar-item {
  121.      margin-top: -34px;
  122.      flex-grow: 1;
  123.      flex-shrink: 1;
  124.      &:has(>.participation),
  125.      &:has(>.js-issue-labels) {
  126.       /* * /flex-shrink: 1 !important; /* */
  127.      }
  128.      &.sidebar-notifications {
  129.       order: 1;
  130.       flex-grow: 0;
  131.       flex-shrink: 0;
  132.       flex-basis: 12em;
  133.       min-width: 12em;
  134.       position: relative;
  135.       & #notification-subscribe-button-reason {
  136.        position: absolute;
  137.        top: calc(100% + 2ch); 
  138.        background-color: var(--bgColor-default, var(--color-canvas-default));
  139.        z-index: -1;
  140.        opacity: 0;
  141.        padding: 2ch;
  142.        margin: -2ch;
  143.       }
  144.       &:is(:hover,:focus-within) #notification-subscribe-button-reason {
  145.        z-index: 0;
  146.        opacity: 1;
  147.       }
  148.      }
  149.     }
  150.    }
  151.   }
  152.  }
  153.  /*
  154.  § limit comment line length (crude preliminary)
  155.  */
  156.  .comment-body {
  157.   &  p,
  158.   & > :is(ul,ol) > li {
  159.    max-width: 80ch
  160.   }
  161.  }
  162.  /*
  163.  § limit comment header content length, so it does not dangle
  164.  */
  165.  .timeline-comment-header {
  166.   justify-content: left;
  167.   h3 { max-width: 80ch !important}
  168.  }
  169.  /*
  170.  § REVIEW sweep reactions aside so they do not add vertical space?
  171.  it seems it is not possible to make them vertical
  172.  since they watch width and collapse them to button when narrow (?)
  173.  */
  174.  :has(>.pr-review-reactions) {
  175.   > .pr-review-reactions {
  176.    > .comment-reactions{
  177.    }
  178.    .js-comment-reactions-options{
  179.    }
  180.   }
  181.  }
  182.  /*
  183.  § swipe reactions to the, if available
  184.  */
  185. }
  186.  
  187.  
  188. @-moz-document regexp("^https?://github.com/(?!password_reset|settings)([^#?/]+)/([^#?/]+)/?([#?].*)?$") {
  189.  /*
  190.  examples
  191.  https://github.com/mmulet/code-relay
  192.   few contributors, many columns
  193.  https://github.com/mozilla/readability
  194.   used by ..
  195.  https://github.com/GoogleChromeLabs/dark-mode-toggle
  196.   many tags, much everything
  197.  https://github.com/WebReflection/sqlite-worker
  198.   five columns
  199.  https://github.com/rilwis/bamboo
  200.   fork, just two columns
  201.  https://github.com/mozilla/standards-positions
  202.   no about, no tags
  203.  https://github.com/mcmilk/7-Zip-zstd/
  204.   sponsor
  205.  https://github.com/clauseggers/Playfair
  206.   super long sponsor naked URL
  207.  https://github.com/mdn/mdn-minimalist
  208.   no readme TOC
  209.  
  210.  `.repository-content` class is actually unreliable, since it is not present for ajaxified turbonavigations
  211.  using `#repository-container-header + *` instead
  212.  that `*` seems like
  213. <turbo-frame id="repo-content-turbo-frame" target="_top" data-turbo-action="advance" class="">
  214.       <div id="repo-content-pjax-container" class="repository-content ">
  215.  */
  216.  /* header block nentred
  217.  */
  218.  .AppHeader > * {
  219.   max-width: 1280px;
  220.   margin: auto;
  221.  }
  222.  /* unify main max width and centering of the main blocks
  223.  */
  224.  main > div {
  225.   max-width: none !important;
  226.   max-width: 80rem !important;
  227.   max-width: 90rem !important;
  228.   margin-left: auto;
  229.   margin-right: auto;
  230.  }
  231.  /* main "columns" wrapper (files | sidebar) - convert to reversed rows */
  232.  #repository-container-header + * .Layout {
  233.   display: flex !important;
  234.   flex-direction: column-reverse !important;
  235.  }
  236.  /* Files, Sidebar - now rows*/
  237.  #repository-container-header + * .Layout > div {
  238.   width: auto;
  239.  }
  240.  /*
  241.   main column - wrapper of:
  242.   - file navigation (branches, tags left, goto, file right)
  243.   - files (moved to bottom, except for 1. "row" with latest commit positioned to file navigation)
  244.   - readme (moved under file navigation)
  245.  */
  246.  #repository-container-header + * .Layout > .Layout-main {
  247.   position: relative;
  248.   display: flex;
  249.   flex-direction: column;
  250.  }
  251.  #repository-container-header + * .Layout > .Layout-main > .file-navigation {
  252.   order: -2;
  253.  }
  254.  /*
  255.  Readme - move before files files
  256.  there are two kinds of readme blocks:
  257.  - "fancy" readme-toc component with kebab menu of headings (introduced around 2021-03-26)
  258.    - see e.g. https://github.com/SerenityOS/serenity
  259.  - "normal" div#readme
  260.    - see e.g. https://github.com/mozilla/readability
  261.  */
  262.  #repository-container-header + * .Layout > .Layout-main > readme-toc,
  263.  #repository-container-header + * .Layout > .Layout-main > #readme {
  264.   order: -1;
  265.  }
  266.  /* sticky "README.md" heading / TOC box make simple button */
  267.  #repository-container-header + * .Layout > .Layout-main > readme-toc > #readme > :first-child {
  268.   display: inline-flex !important;
  269.   border: none !important;
  270.   background-color: transparent !important/**/
  271.  }
  272.  /* "readme.md" label/link heading after TOC button: hide */
  273.  #repository-container-header + * .Layout > .Layout-main > readme-toc > #readme > :first-child h2 {
  274.   display: none;
  275.  }
  276.  /* actual readme box: push up into place freed by heading / TOC box */
  277.  #repository-container-header + * .Layout > .Layout-main > readme-toc > #readme > :last-child {
  278.   margin-top: -3rem
  279.  }
  280.  /* readme - line length limit (originnaly 1012px through .container-lg) */
  281.  #repository-container-header + * .Layout > .Layout-main > readme-toc > #readme article.markdown-body.entry-content {
  282.   max-width: 80ch;
  283.  }
  284.  /*
  285.  sidebar - now top content
  286.  for god's sake, THIS div should be MAIN and should be near H1 or something
  287.  not suffocated at the end of the document in sidebar
  288.  */
  289.  #repository-container-header + * .Layout > .Layout-sidebar > div {
  290.   display: flex;
  291.   flex-direction: row;
  292.   /* let's try without
  293.   flex-wrap: wrap;
  294.   now */
  295.   padding-bottom: 1rem;
  296.  }
  297.  /* all main flex items (about .. languages)*/
  298.  #repository-container-header + * .Layout > .Layout-sidebar > div > * {
  299.   flex-grow: 1;
  300.   flex-shrink: 1;
  301.   flex-basis: 0;
  302.   border-left: 1px solid var(--color-border-secondary);
  303.   border-left: none;
  304.   padding-left: .5rem;
  305.   padding-right: .5rem;
  306.   padding-bottom: 1rem;
  307.  }
  308.  /*
  309.   first "about" cell
  310.  */
  311.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div:first-child {
  312.   flex-basis: 50ch;
  313.   flex-grow: 2;
  314.   max-width: 80ch;
  315.   border-left: none;
  316.   padding-left: 0;
  317.  }
  318.  /* 📖 Readme ⚖️ License : condense, icons-(+ counts)-only footer */
  319.  /* those h3 are .sr-only, preceding divs and `include-fragment` */
  320.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div:first-child > div h3 ~ * {
  321.   display: inline;
  322.   font-size: 0;
  323.   line-height: 1rem;
  324.  
  325.   & strong,
  326.   & a[href$="/LICENSE"],
  327.   & a:not(:has(svg)) {
  328.    font-size: 1rem;
  329.    white-space: nowrap !important;
  330.   }
  331.   &:has(svg)::after {
  332.    content: '\A0';
  333.    font-size: 1rem;
  334.   }
  335.   /* 
  336.    Hide redundant ☆ / 👁 / 🜉 + counts under tags.
  337.    They are present in the header already, and better.
  338.   */
  339.   &:has( a[href$="/stargazers"],
  340.   a[href$="/watchers"],
  341.   a[href$="/forks"]) {
  342.    display: none !important
  343.   }
  344.  }
  345.  /* unnecessary 🔗 link icon, may cause wrap, hide */
  346.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div:first-child .octicon-link {
  347.   display: none;
  348.  }
  349.  /* last "(programming) languages" cell */
  350.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div:last-child {
  351.   /*
  352.   flex-shrink: 100;
  353.   flex-grow: 0;
  354.   /* let's try without limiting */
  355.  }
  356.  /* Contributors "grid" min three in rows (to not get a two or single row skyscraper) */
  357.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child h2 + ul {
  358.   min-width: 8rem !important;
  359.  }
  360.  /* no border nor paddings */
  361.  #repository-container-header + * .Layout > .Layout-sidebar > div > div > div {
  362.   border: none;
  363.   padding: 0;
  364.  }
  365.  /* headings  */
  366.  #repository-container-header + * .Layout > .Layout-sidebar > div > div > div > h2,
  367.  #repository-container-header + * .Layout > .Layout-sidebar > div > div > div > h2 > a {
  368.   white-space: nowrap !important;
  369.  }
  370.  /* tags in about cell - restack and dim */
  371.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div .f6:not(:hover) {
  372.   opacity: 0.5;
  373.  }
  374.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div .f6 {
  375.   display: flex;
  376.   flex-wrap: wrap;
  377.  }
  378.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div .f6 > * {
  379.   flex-grow: 1;
  380.   text-align: center;
  381.  }
  382.  /* "used by 108" - make 8 avatars wrap */
  383.  .hx_flex-avatar-stack {
  384.   flex-wrap: wrap;
  385.   max-width: 10rem;
  386.   padding-right: .8rem;
  387.  }
  388.  /* allowing wrap of counter under "used by" avatars */
  389.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div .d-flex.flex-items-center {
  390.   flex-wrap: wrap;
  391.  }
  392.  /*
  393.  un-truncating everything to allow wrapping of long (esp. in "releases" cell
  394.  affects "releases", but whatever
  395.  */
  396.  #repository-container-header + * .Layout > .Layout-sidebar > div > * * {
  397.   white-space: normal !important;
  398.  }
  399.  /* un-flexing latest release */
  400.  #repository-container-header + * .Layout > .Layout-sidebar > div > * .Link--primary.d-flex * {
  401.   display: block !important
  402.  }
  403.  
  404.  /* superfluous link icon in "sponsor this project" */
  405.  #repository-container-header + * .Layout > .Layout-sidebar > div > * [style="min-width:32px;height:32px;"] {
  406.   display: none !important;
  407.   & + * {
  408.    /*
  409.     Naked "sponsor" link:
  410.     As we are un-trucatining this content, we have to fix it back.
  411.     Instad of ellipsis, let it just break to lines.
  412.     Break all looks better, but with this one the host stands out better.
  413.    */
  414.    word-break: break-word;
  415.   }
  416.  }
  417.  /* environments "active" tag below text */
  418.  #repository-container-header + * .Layout > .Layout-sidebar > div > * h2 + .list-style-none li .Label {
  419.   display: block;
  420.  }
  421.  
  422.  /*
  423. § Hide "No releases published" / "No packages published" boxes.
  424. */
  425.  #repository-container-header + * .Layout > .Layout-sidebar > div > div.BorderGrid-row:has( > .BorderGrid-cell:only-child > h2:first-child/* :has( a[href$="/releases"]) */
  426.  + div.text-small.color-fg-muted:last-child) {
  427.   display: none;
  428.  }
  429.  
  430.  /*
  431.  § contributors tentatively wider
  432.  */
  433.  .BorderGrid-row:has(h2 :link[href$="/contributors"]) {
  434.   flex-basis: 25% !important;
  435.   xflex-grow: 40;
  436.   xflex-shrink: 30;
  437.   xoutline: #0FF6 solid;
  438.   xoutline-offset: -2px;
  439.  }
  440.  
  441.  /*
  442. § shrink "contributors" and "used by" lists' height, unless hovered
  443. */
  444.  .BorderGrid-cell ul {
  445.   max-height: 100vh;
  446.   transition-property: max-height, overflow;
  447.   transition-duration: 200ms;
  448.   transition-delay: 500ms;
  449.   overflow: hidden;
  450.  }
  451.  .BorderGrid-cell ul:not(:hover) {
  452.   max-height: 5rem !important;
  453.  }
  454.  
  455.  /* unnecesary non-TOC "readme.md" heading box */
  456.  #repository-container-header + * .Layout > .Layout-main > [id="readme"] > .Box-header:first-child {
  457.   display: none !important;
  458.  }
  459.  /* hide hash */
  460.  #repository-container-header + * .Layout > .Layout-main .Box-header .text-mono {
  461.   display: none !important
  462.  }
  463.  /* reverse order so commit count ends up beside tag count */
  464.  #repository-container-header + * .Layout > .Layout-main .Box-header > div > :last-child {
  465.   order: -1;
  466.   padding-right: 1rem;
  467.  }
  468.  /* hide "commits" text (lave icon) (more space for last commit msg) */
  469.  #repository-container-header + * .Layout > .Layout-main .Box-header > div > :last-child .color-text-secondary {
  470.   display: none !important;
  471.  }
  472.  /* hide "branches" and "tags" text (lave icons) (more space for last commit msg) */
  473.  .file-navigation .color-text-tertiary {
  474.   display: none;
  475.  }
  476.  /*
  477.  hide word "commits", "tags", "branches" after counts 
  478. */
  479.  svg[aria-hidden="true"]:first-child + strong:not(:hover) + span:last-child {
  480.   font-size: 0;
  481.  }
  482.  svg[aria-hidden="true"]:first-child + span:last-child:not(:hover) > strong:first-child + span:last-child {
  483.   font-size: 0;
  484.  }
  485.  
  486.  /*
  487.  (just trying) see wide tables without scrolling them
  488. */
  489.  .markdown-body table {
  490.   overflow: visible;
  491.  }
  492.  
  493.  
  494.  /**
  495. 2023-12-11
  496. new structure, totally turdy
  497. rushed hotfix
  498. readme first
  499. **/
  500.  [data-selector="repos-split-pane-content"] {
  501.   margin: 0;
  502.   max-width: none;
  503.   & div:has(>div>h2#folders-and-files) {
  504.    order: 1;
  505.   }
  506.  }
  507.  
  508.  
  509.  /*
  510.   "last commit" info: pull between header and readme
  511.  */
  512.  table[aria-labelledby="folders-and-files"] > tbody > tr:first-child > td:only-child > div:has([data-testid="latest-commit"]) {
  513.   position: absolute;
  514.   top: -2.2rem;
  515.   left: 0rem;
  516.   padding-inline: 0;
  517.   /*
  518.   commit count and "Last commit" to the start
  519.   */
  520.   & > :has([data-testid="latest-commit-details"]) {
  521.    order: -1;
  522.    & relative-time,
  523.    & :has(>[aria-label="Commit history"]),
  524.    & [aria-label="Commit history"] {
  525.     order: -2;
  526.     color: var(--color-fg-default);
  527.     font-weight: 600;
  528.    }
  529.    [data-testid="latest-commit-details"] {
  530.     order: 1;
  531.    }
  532.   }
  533.   /*
  534.    that "~more info" dropdown opened by "…" button
  535.   */
  536.   & + div {
  537.    position: absolute;
  538.    top: 0;
  539.    right: 20%;
  540.    max-width: 80%;
  541.   }
  542.   /*
  543.    fix separators and spacing
  544.   */
  545.   & [aria-label="Commit history"] {
  546.    margin-left: -12px;
  547.   }
  548.   & :has(> relative-time) {
  549.    /* removing the ' · ' */
  550.    font-size: 0;
  551.    /* and put it back; */
  552.    & > * {
  553.     font-size: var(--body-font-size, 0.875rem);
  554.    }
  555.    & relative-time {
  556.     &::before,
  557.     &::after {
  558.      color: var(--color-fg-muted);
  559.      font-weight: normal;
  560.     }
  561.     &::before {
  562.      content: 'Last commit: ';
  563.     }
  564.     &::after {
  565.      content: '; ';
  566.     }
  567.    }
  568.   }
  569.  }
  570.  
  571.  /*
  572.  2024-02-13 new structure again, "yaaaay".
  573. */
  574.  [partial-name="repos-overview"] {
  575.   & > * > * > * {
  576.    display: flex;
  577.    & > *:has([id="folders-and-files"]) {
  578.     order: 1;
  579.    }
  580.   }
  581.  }
  582.  
  583.  /* END */
  584. }