☰

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

Pulls Readme above files list and reorganizes repository root page moving sidebar content foremost.

当前为 2023-12-13 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           GitHub - single-column repository page with important info on the top
  3. @namespace      myfonj
  4. @version        1.12.3
  5. @description    Pulls Readme above files list and reorganizes repository root page moving sidebar content foremost.
  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.12.3 (2023-12-13) - total commit count and last commit time pulled to the left edge
  15.   1.12.2 (2023-12-12) - also rushed pulling of "last commit" info, for now above readme - license - (...) - edit - menu line
  16.   1.12.0 (2023-12-12) - rushed hotfix for new main content structure, readme is back up. Ton of dead code remains.
  17.   1.11.1 (2023-11-15) - restore compacting stuff under tags (license, CoC, ... icons) after structure change (new wrapper)
  18.   1.11.0 (2023-09-25) - Hide redundant ☆ / 👁 / 🜉 + counts under tags.
  19.   1.10.0 (2023-09-25) - Hide "No releases published" / "No packages published" boxes
  20.   1.9.4 (2023-09-20) - prevent links under tags wrapping between words
  21.   1.9.3 (2023-09-07) - wider "About" box, narrower rest, icons-(+ counts)-only footer
  22.   1.9.2 (2023-08-15) - max-width for header
  23.   1.9.1 (2023-07-13) - fix superfluous line break in resources (`include-fragment`)
  24.   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
  25.   1.8.4 (2023-03-03) - hopefuly applied even for "turbopages"
  26.   1.8.3 (2022-08-11) - just name and info changes
  27.  */
  28.  /* just for categorization */
  29.  /* … and this little photo zoom */
  30.  .Popover .avatar-user {
  31.   min-width: 240px;
  32.   min-height: 240px;
  33.   /* image-rendering: crisp-edges */
  34.  }
  35.  /* … and pulling the readme at code pages deeper */
  36.  main div:has(> #readme) {
  37.   /* wohohoo, new era of usestyling just arrived. */
  38.   order: -1; 
  39.  }
  40. }
  41. @-moz-document regexp("^https?://github.com/(?!password_reset|settings)([^#?/]+)/([^#?/]+)/?([#?].*)?$") {
  42.  /*
  43.  examples
  44.  https://github.com/mmulet/code-relay
  45.   few contributors, many columns
  46.  https://github.com/mozilla/readability
  47.   used by ..
  48.  https://github.com/GoogleChromeLabs/dark-mode-toggle
  49.   many tags, much everything
  50.  https://github.com/WebReflection/sqlite-worker
  51.   five columns
  52.  https://github.com/rilwis/bamboo
  53.   fork, just two columns
  54.  https://github.com/mozilla/standards-positions
  55.   no about, no tags
  56.  https://github.com/mcmilk/7-Zip-zstd/
  57.   sponsor
  58.  https://github.com/mdn/mdn-minimalist
  59.   no readme TOC
  60.  
  61.  `.repository-content` class is actually unreliable, since it is not present for ajaxified turbonavigations
  62.  using `#repository-container-header + *` instead
  63.  that `*` seems like
  64. <turbo-frame id="repo-content-turbo-frame" target="_top" data-turbo-action="advance" class="">
  65.       <div id="repo-content-pjax-container" class="repository-content ">
  66.  */
  67.  /* header block nentred
  68.  */
  69.  .AppHeader > * {
  70.   max-width: 1280px;
  71.   margin: auto;
  72.  }
  73.  /* unify main max width and centering of the main blocks
  74.  */
  75.  main > div {
  76.   max-width: none !important;
  77.   max-width: 80rem !important;
  78.   max-width: 90rem !important;
  79.   margin-left: auto;
  80.   margin-right: auto;
  81.  }
  82.  /* Header row with name, description for mobile, tabs, etc */
  83.  main > div:first-child {
  84.   display: flex;
  85.   flex-direction: column;
  86.   background-color: transparent !important;
  87.   padding-top: 0 !important;
  88.  }
  89.  /* "Tabs" (Code , PRs, Actions, ... ) pull above main heading */
  90.  main > div:first-child > nav {
  91.   order: -1;
  92.   margin-bottom: 1rem;
  93.  }
  94.  /* main "columns" wrapper (files | sidebar) - convert to reversed rows */
  95.  #repository-container-header + * .Layout {
  96.   display: flex !important;
  97.   flex-direction: column-reverse !important;
  98.  }
  99.  /* Files, Sidebar - now rows*/
  100.  #repository-container-header + * .Layout > div {
  101.   width: auto;
  102.  }
  103.  /*
  104.   main column - wrapper of:
  105.   - file navigation (branches, tags left, goto, file right)
  106.   - files (moved to bottom, except for 1. "row" with latest commit positioned to file navigation)
  107.   - readme (moved under file navigation)
  108.  */
  109.  #repository-container-header + * .Layout > .Layout-main {
  110.   position: relative;
  111.   display: flex;
  112.   flex-direction: column;
  113.  }
  114.  #repository-container-header + * .Layout > .Layout-main > .file-navigation {
  115.   order: -2;
  116.  }
  117.  /*
  118.  Readme - move before files files
  119.  there are two kinds of readme blocks:
  120.  - "fancy" readme-toc component with kebab menu of headings (introduced around 2021-03-26)
  121.    - see e.g. https://github.com/SerenityOS/serenity
  122.  - "normal" div#readme
  123.    - see e.g. https://github.com/mozilla/readability
  124.  */
  125.  #repository-container-header + * .Layout > .Layout-main > readme-toc,
  126.  #repository-container-header + * .Layout > .Layout-main > #readme {
  127.   order: -1;
  128.  }
  129.  /* sticky "README.md" heading / TOC box make simple button */
  130.  #repository-container-header + * .Layout > .Layout-main > readme-toc > #readme > :first-child {
  131.   display: inline-flex !important;
  132.   border: none !important;
  133.   background-color: transparent !important
  134.   /**/
  135.  }
  136.  /* "readme.md" label/link heading after TOC button: hide */
  137.  #repository-container-header + * .Layout > .Layout-main > readme-toc > #readme > :first-child h2 {
  138.   display: none;
  139.  }
  140.  /* actual readme box: push up into place freed by heading / TOC box */
  141.  #repository-container-header + * .Layout > .Layout-main > readme-toc > #readme > :last-child{
  142.   margin-top: -3rem
  143.  }
  144.  /* readme - line length limit (originnaly 1012px through .container-lg) */
  145.  #repository-container-header + * .Layout > .Layout-main > readme-toc > #readme article.markdown-body.entry-content {
  146.   max-width: 80ch;
  147.  }
  148.  /*
  149.  sidebar - now top content
  150.  for god's sake, THIS div should be MAIN and should be near H1 or something
  151.  not suffocated at the end of the document in sidebar
  152.  */
  153.  #repository-container-header + * .Layout > .Layout-sidebar > div {
  154.   display: flex;
  155.   flex-direction: row;
  156.   /* let's try without
  157.   flex-wrap: wrap;
  158.   now */
  159.   padding-bottom: 1rem;
  160.  }
  161.  /* all main flex items (about .. languages)*/
  162.  #repository-container-header + * .Layout > .Layout-sidebar > div > * {
  163.   flex-grow: 1;
  164.   flex-shrink: 1;
  165.   flex-basis: 0;
  166.   border-left: 1px solid var(--color-border-secondary);
  167.   border-left: none;
  168.   padding-left: .5rem; 
  169.   padding-right: .5rem; 
  170.   padding-bottom: 1rem;
  171.  }
  172.  /*
  173.   first "about" cell
  174.  */
  175.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div:first-child {
  176.   flex-basis: 50ch;
  177.   flex-grow: 2;
  178.   max-width: 80ch;
  179.   border-left: none;
  180.   padding-left: 0;
  181.  }
  182.  /* 📖 Readme ⚖️ License : condense, icons-(+ counts)-only footer */
  183.  /* those h3 are .sr-only, preceding divs and `include-fragment` */
  184.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div:first-child > div h3 ~ * {
  185.   display: inline;
  186.   font-size: 0;
  187.   line-height: 1rem;
  188.   
  189.   & strong,
  190.   & a[href$="/LICENSE"],
  191.   & a:not(:has(svg)){
  192.    font-size: 1rem;
  193.    white-space: nowrap !important;
  194.   }
  195.   &:has(svg)::after {
  196.    content: '\A0';
  197.    font-size: 1rem;
  198.   }
  199.   /* 
  200.    Hide redundant ☆ / 👁 / 🜉 + counts under tags.
  201.    They are present in the header already, and better.
  202.   */
  203.   &:has(
  204.    a[href$="/stargazers"],
  205.    a[href$="/watchers"],
  206.    a[href$="/forks"]
  207.   ) {
  208.    display: none !important
  209.   }
  210.  }
  211.  /* unnecessary 🔗 link icon, may cause wrap, hide */
  212.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div:first-child  .octicon-link {
  213.   display: none; 
  214.  }
  215.  /* last "(programming) languages" cell */
  216.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div:last-child {
  217.   /*
  218.   flex-shrink: 100;
  219.   flex-grow: 0;
  220.   /* let's try without limiting */
  221.  }
  222.  /* Contributors "grid" min three in rows (to not get a two or single row skyscraper) */
  223.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child  h2 + ul {
  224.   min-width: 8rem !important;
  225.  }
  226.  /* no border nor paddings */
  227.  #repository-container-header + * .Layout > .Layout-sidebar > div > div > div {
  228.   border: none;
  229.   padding: 0;
  230.  }
  231.  /* headings  */
  232.  #repository-container-header + * .Layout > .Layout-sidebar > div > div > div > h2 ,
  233.  #repository-container-header + * .Layout > .Layout-sidebar > div > div > div > h2 > a {
  234.   white-space: nowrap !important;
  235.  }
  236.  /* tags in about cell - restack and dim */
  237.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div .f6:not(:hover) {
  238.   opacity: 0.5;
  239.  }
  240.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div .f6 {
  241.   display: flex;
  242.   flex-wrap: wrap;
  243.  }
  244.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child  > div .f6 > * {
  245.   flex-grow: 1;
  246.   text-align: center;
  247.  }
  248.  /* "used by 108" - make 8 avatars wrap */
  249.  .hx_flex-avatar-stack {
  250.   flex-wrap: wrap;
  251.   max-width: 10rem;
  252.   padding-right: .8rem;
  253.  }
  254.  /* allowing wrap of counter under "used by" avatars */
  255.  #repository-container-header + * .Layout > .Layout-sidebar > div:first-child  > div .d-flex.flex-items-center {
  256.   flex-wrap: wrap;
  257.  }
  258.  /*
  259.  un-truncating everything to allow wrapping of long (esp. in "releases" cell
  260.  affects "releases", but whatever
  261.  */
  262.  #repository-container-header + * .Layout > .Layout-sidebar > div > * * {
  263.   white-space: normal !important;
  264.  }
  265.  /* un-flexing latest release */
  266.  #repository-container-header + * .Layout > .Layout-sidebar > div > * .Link--primary.d-flex * { display: block !important}
  267.  
  268.  /* superfluous link icon in "sponsor this project" */
  269.  #repository-container-header + * .Layout > .Layout-sidebar > div > * [style="min-width:32px;height:32px;"] {
  270.   display: none !important;
  271.  }
  272.  /* environments "active" tag below text */
  273.  #repository-container-header + * .Layout > .Layout-sidebar > div > * h2 + .list-style-none li .Label {
  274.   display: block; 
  275.  }
  276.  
  277. /*
  278. § Hide "No releases published" / "No packages published" boxes.
  279. */
  280. #repository-container-header + * .Layout > .Layout-sidebar > div > div.BorderGrid-row:has(
  281.  > .BorderGrid-cell:only-child
  282.  > h2:first-child /* :has( a[href$="/releases"]) */
  283.  + div.text-small.color-fg-muted:last-child
  284. ) {
  285.  display: none;
  286. }
  287.  
  288.  
  289.  
  290.  /*
  291.   last commit & "commits" link
  292.   normally above files table, moving into file navigation
  293.  */
  294.  #repository-container-header + * .Layout > .Layout-main > *:not([id]) > .Box-header {
  295.   position: absolute !important;
  296.   padding: 0; 
  297.   top: .33rem;
  298.   border: none;
  299.   left: 16rem; /* space for branch selector, branches, tags */
  300.   right: 21rem; /* space for Go to file, Add file, Code/clone */
  301.   background-color: transparent !important;
  302.   z-index: 90; /* for "..." unfolding */
  303.  }
  304.  /* unnecesary non-TOC "readme.md" heading box */
  305.  #repository-container-header + * .Layout > .Layout-main > [id="readme"] > .Box-header:first-child { display: none !important; }
  306.  /* hide hash */
  307.  #repository-container-header + * .Layout > .Layout-main .Box-header .text-mono {
  308.   display: none !important
  309.  }
  310.  /* reverse order so commit count ends up beside tag count */
  311.  #repository-container-header + * .Layout > .Layout-main .Box-header  > div > :last-child {
  312.   order: -1;
  313.   padding-right: 1rem;
  314.  }
  315.   /* hide "commits" text (lave icon) (more space for last commit msg) */
  316.  #repository-container-header + * .Layout > .Layout-main .Box-header  > div > :last-child .color-text-secondary {
  317.   display: none !important;
  318.  }
  319.  /* hide "branches" and "tags" text (lave icons) (more space for last commit msg) */
  320.  .file-navigation .color-text-tertiary{
  321.   display: none;
  322.  }
  323. /*
  324.  hide word "commits", "tags", "branches" after counts 
  325. */
  326. svg[aria-hidden="true"]:first-child + strong:not(:hover) + span:last-child {
  327.   font-size: 0;
  328.  
  329. }
  330. svg[aria-hidden="true"]:first-child + span:last-child:not(:hover) > strong:first-child + span:last-child {
  331.   font-size: 0;
  332. }
  333.  
  334. /*
  335.  (just trying) see wide tables without scrolling them
  336. */ 
  337. .markdown-body table {
  338.  overflow: visible;
  339. }
  340.  
  341.  
  342. /**
  343. 2023-12-11
  344. new structure, totally turdy
  345. rushed hotfix
  346. readme first
  347. **/
  348. [data-selector="repos-split-pane-content"]{
  349.  margin: 0;
  350.  max-width: none;
  351.  & div:has(>div>h2#folders-and-files) {
  352.   order: 1;
  353.  }
  354.  
  355.  /*
  356.   "last commit" info: pull between header and readme
  357.  */
  358.  table[aria-labelledby="folders-and-files"] > tbody > tr:first-child > td[colspan="3"]:only-child > div {
  359.   xoutline: #0FF6 solid;
  360.   xoutline-offset: -2px;
  361.   position: absolute;
  362.   top: -2.6rem;
  363.   left: 0rem;
  364.   z-index: 1;
  365.   padding-inline: 0;
  366.   xborder: 1px solid color-mix(in srgb, transparent 70%, currentcolor);
  367.   /*
  368.    that "~more info" dropdown opened by "…" button
  369.   */
  370.   & + div {
  371.    top: 6.7rem;
  372.   }
  373.   /*
  374.    move total commits count and last commit time to the left
  375.   */
  376.   & relative-time,
  377.   & *:has(>[aria-label="Commit history"]),
  378.   & [aria-label="Commit history"] {
  379.    order: -1;
  380.   }
  381.   /*
  382.    fix separators and spacing
  383.   */
  384.   & [aria-label="Commit history"] {
  385.    margin-left: -12px
  386.   }
  387.   & :has(> relative-time) {
  388.    /* removing the ' · ' */
  389.    font-size: 0;
  390.    /* and put it back; */
  391.    & > * {
  392.     font-size: var(--body-font-size, 0.875rem);
  393.    }
  394.    & relative-time {
  395.     &::before { content: 'Last '; opacity: .7; }
  396.     &::after { content: ': ';  }
  397.    }
  398.   }
  399.  }
  400. }
  401.  
  402. /* END */
  403. }