Greasy Fork is available in English.

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.

/* ==UserStyle==
@name           GitHub - single-column repository page with important info on the top
@namespace      myfonj
@version        1.13.0
@description    Pulls Readme above files list and reorganizes repository root page moving sidebar content foremost.
@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.13.0 (2024-02-1) - 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 */
 }
 /* … 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/(?!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/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;
 }
 /* Header row with name, description for mobile, tabs, etc */
 main > div:first-child {
  display: flex;
  flex-direction: column;
  background-color: transparent !important;
  padding-top: 0 !important;
 }
 /* "Tabs" (Code , PRs, Actions, ... ) pull above main heading */
 main > div:first-child > nav {
  order: -1;
  margin-bottom: 1rem;
 }
 /* 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;
  /* let's try without
  flex-wrap: wrap;
  now */
  padding-bottom: 1rem;
 }
 /* all main flex items (about .. languages)*/
 #repository-container-header + * .Layout > .Layout-sidebar > div > * {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  border-left: 1px solid var(--color-border-secondary);
  border-left: none;
  padding-left: .5rem; 
  padding-right: .5rem; 
  padding-bottom: 1rem;
 }
 /*
  first "about" cell
 */
 #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div:first-child {
  flex-basis: 50ch;
  flex-grow: 2;
  max-width: 80ch;
  border-left: none;
  padding-left: 0;
 }
 /* 📖 Readme ⚖️ License : condense, icons-(+ counts)-only footer */
 /* those h3 are .sr-only, preceding divs and `include-fragment` */
 #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div:first-child > div h3 ~ * {
  display: inline;
  font-size: 0;
  line-height: 1rem;
  
  & strong,
  & a[href$="/LICENSE"],
  & a:not(:has(svg)){
   font-size: 1rem;
   white-space: nowrap !important;
  }
  &:has(svg)::after {
   content: '\A0';
   font-size: 1rem;
  }
  /* 
   Hide redundant ☆ / 👁 / 🜉 + counts under tags.
   They are present in the header already, and better.
  */
  &:has(
   a[href$="/stargazers"],
   a[href$="/watchers"],
   a[href$="/forks"]
  ) {
   display: none !important
  }
 }
 /* unnecessary 🔗 link icon, may cause wrap, hide */
 #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div:first-child  .octicon-link {
  display: none; 
 }
 /* last "(programming) languages" cell */
 #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div:last-child {
  /*
  flex-shrink: 100;
  flex-grow: 0;
  /* let's try without limiting */
 }
 /* Contributors "grid" min three in rows (to not get a two or single row skyscraper) */
 #repository-container-header + * .Layout > .Layout-sidebar > div:first-child  h2 + ul {
  min-width: 8rem !important;
 }
 /* no border nor paddings */
 #repository-container-header + * .Layout > .Layout-sidebar > div > div > div {
  border: none;
  padding: 0;
 }
 /* headings  */
 #repository-container-header + * .Layout > .Layout-sidebar > div > div > div > h2 ,
 #repository-container-header + * .Layout > .Layout-sidebar > div > div > div > h2 > a {
  white-space: nowrap !important;
 }
 /* tags in about cell - restack and dim */
 #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div .f6:not(:hover) {
  opacity: 0.5;
 }
 #repository-container-header + * .Layout > .Layout-sidebar > div:first-child > div .f6 {
  display: flex;
  flex-wrap: wrap;
 }
 #repository-container-header + * .Layout > .Layout-sidebar > div:first-child  > div .f6 > * {
  flex-grow: 1;
  text-align: center;
 }
 /* "used by 108" - make 8 avatars wrap */
 .hx_flex-avatar-stack {
  flex-wrap: wrap;
  max-width: 10rem;
  padding-right: .8rem;
 }
 /* allowing wrap of counter under "used by" avatars */
 #repository-container-header + * .Layout > .Layout-sidebar > div:first-child  > div .d-flex.flex-items-center {
  flex-wrap: wrap;
 }
 /*
 un-truncating everything to allow wrapping of long (esp. in "releases" cell
 affects "releases", but whatever
 */
 #repository-container-header + * .Layout > .Layout-sidebar > div > * * {
  white-space: normal !important;
 }
 /* un-flexing latest release */
 #repository-container-header + * .Layout > .Layout-sidebar > div > * .Link--primary.d-flex * { display: block !important}

 /* superfluous link icon in "sponsor this project" */
 #repository-container-header + * .Layout > .Layout-sidebar > div > * [style="min-width:32px;height:32px;"] {
  display: none !important;
 }
 /* environments "active" tag below text */
 #repository-container-header + * .Layout > .Layout-sidebar > div > * h2 + .list-style-none li .Label {
  display: block; 
 }

/*
§ Hide "No releases published" / "No packages published" boxes.
*/
#repository-container-header + * .Layout > .Layout-sidebar > div > div.BorderGrid-row:has(
 > .BorderGrid-cell:only-child
 > h2:first-child /* :has( a[href$="/releases"]) */
 + div.text-small.color-fg-muted:last-child
) {
 display: none;
}



 /*
  last commit & "commits" link
  normally above files table, moving into file navigation
 */
 #repository-container-header + * .Layout > .Layout-main > *:not([id]) > .Box-header {
  position: absolute !important;
  padding: 0; 
  top: .33rem;
  border: none;
  left: 16rem; /* space for branch selector, branches, tags */
  right: 21rem; /* space for Go to file, Add file, Code/clone */
  background-color: transparent !important;
  z-index: 90; /* for "..." unfolding */
 }
 /* unnecesary non-TOC "readme.md" heading box */
 #repository-container-header + * .Layout > .Layout-main > [id="readme"] > .Box-header:first-child {
  display: none !important;
 }
 /* hide hash */
 #repository-container-header + * .Layout > .Layout-main .Box-header .text-mono {
  display: none !important
 }
 /* reverse order so commit count ends up beside tag count */
 #repository-container-header + * .Layout > .Layout-main .Box-header  > div > :last-child {
  order: -1;
  padding-right: 1rem;
 }
  /* hide "commits" text (lave icon) (more space for last commit msg) */
 #repository-container-header + * .Layout > .Layout-main .Box-header  > div > :last-child .color-text-secondary {
  display: none !important;
 }
 /* hide "branches" and "tags" text (lave icons) (more space for last commit msg) */
 .file-navigation .color-text-tertiary{
  display: none;
 }
/*
 hide word "commits", "tags", "branches" after counts 
*/
svg[aria-hidden="true"]:first-child + strong:not(:hover) + span:last-child {
  font-size: 0;

}
svg[aria-hidden="true"]:first-child + span:last-child:not(:hover) > strong:first-child + span:last-child {
  font-size: 0;
}

/*
 (just trying) see wide tables without scrolling them
*/ 
.markdown-body table {
 overflow: visible;
}


/**
2023-12-11
new structure, totally turdy
rushed hotfix
readme first
**/
[data-selector="repos-split-pane-content"]{
 margin: 0;
 max-width: none;
 & div:has(>div>h2#folders-and-files) {
  order: 1;
 }
}

 /*
  "last commit" info: pull between header and readme
 */
 table[aria-labelledby="folders-and-files"] > tbody > tr:first-child > td[colspan="3"]:only-child > div {
  xoutline: #0FF6 solid;
  xoutline-offset: -2px;
  position: absolute;
  top: -2.6rem;
  left: 0rem;
  z-index: 1;
  padding-inline: 0;
  xborder: 1px solid color-mix(in srgb, transparent 70%, currentcolor);
  /*
   that "~more info" dropdown opened by "…" button
  */
  & + div {
   top: 0;
   right: 0;
  }
  /*
   move total commits count and last commit time to the left
  */
  & relative-time,
  & *:has(>[aria-label="Commit history"]),
  & [aria-label="Commit history"] {
   order: -1;
   color: var(--color-fg-default);
   font-weight: 600;
  }
  /*
   fix separators and spacing
  */
  & [aria-label="Commit history"] {
   margin-left: -12px
  }
  & :has(> relative-time) {
   /* removing the ' · ' */
   font-size: 0;
   /* and put it back; */
   & > * {
    font-size: var(--body-font-size, 0.875rem);
   }
   & relative-time {
    &::before ,
    &::after {
     color: var(--color-fg-muted);
     font-weight: normal;
    }
    &::before {
     content: 'Last commit: ';
    }
    &::after {
     content: '; '; 
    }
   }
  }
 }

/*
 2024-02-13 new structure again, "yaaaay".
*/
[partial-name="repos-overview"] {
 & > * > * > *  {
  display: flex;
  & > *:has([id="folders-and-files"]) {
   order: 1;
  }
 }
}


/* END */
}