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 */
}