Skip to content

Instantly share code, notes, and snippets.

@ashwinvis
Last active July 7, 2020 05:22
Show Gist options
  • Save ashwinvis/569e7814ff91f52807554789afa7f107 to your computer and use it in GitHub Desktop.
Save ashwinvis/569e7814ff91f52807554789afa7f107 to your computer and use it in GitHub Desktop.
GitHub Retro

🚧 Development moved to GitHub 🚧

https://github.com/ashwinvis/github-retro.git

What does it do?

Retrofit the repository interface prior to June 2020 GitHub update.

  • Recenter Header
  • Lines between files
  • Squareish avatars
  • Makes all repo navigation items visible

Installation

A userstyle extension is required, common ones include:

🎨 Stylus for Firefox, Chrome or Opera.

🎨 xStyle for Firefox or Chrome.

Then:

📦 Install the usercss with Stylus or xStyle. Supports automatic updates.

/* ==UserStyle==
@name GitHub Retro
@version 0.1.0
@description Retrofit the repository interface prior to June 2020 GitHub update
@namespace ashwinvis
@author ashwinvis
@homepageURL https://github.com/ashwinvis/github-retro
@supportURL https://github.com/ashwinvis/github-retro/issues
@updateURL https://raw.githubusercontent.com/ashwinvis/github-retro/master/github-retro.user.css
@license CC-BY-SA-4.0
@preprocessor uso
==/UserStyle== */
@-moz-document regexp("^https?:\\/\\/github.com.*") {
@media (min-width: 1280px) {
.js-repo-nav,
.px-lg-5 {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: 32px !important;
padding-right: 32px !important;
}
/* Horizontal line under header */
.pagehead {
box-shadow: inset 0 -1px 0 #e1e4e8 !important;
}
/*
At desktop resolutions some of the repo navigation items disappear. This fixes it.
Uses !important because it appears to be controlled by a resize event handler.
Possibly a GitHub bug.
*/
.js-selected-navigation-item {
visibility: unset !important;
}
}
/* Lines between files/folders. */
.js-navigation-item:not(.js-issue-row) {
border-bottom: solid 1px #8e8e8e4a;
}
}
@-moz-document domain("github.com") {
/* Squarish avatars. */
.avatar-user {
border-radius: 10% !important;
}
}
@quantum5
Copy link

    .pagehead {
        box-shadow: inset 0 -1px 0 #e1e4e8 !important;
    }

will make the horizontal bar under the tabs extend to the full width of the page, which IMO looks nicer.

@ashwinvis
Copy link
Author

Thanks @quantum5 and other redditors for the enhancements.

@Vusys
Copy link

Vusys commented Jun 24, 2020

/* Lines between files/folders. */
.js-navigation-item:not(.js-issue-row) {
	border-bottom: solid 1px #8e8e8e4a;
}

Fixes 2px bottom borders on issues.

/* Horizontal line under header */
.pagehead:not(.gisthead) {
	box-shadow: inset 0 -1px 0 #e1e4e8 !important;
}

Fixes 2px bottom borders on the header on gists.

@ashwinvis
Copy link
Author

Thanks @Vusys

@quantum5
Copy link

Also the header block in the CSS file should be changed so that autoupdating works:

@homepageURL  https://gist.github.com/ashwinvis/569e7814ff91f52807554789afa7f107
@updateURL    https://gist.githubusercontent.com/ashwinvis/569e7814ff91f52807554789afa7f107/raw/github-retro.user.css

@ashwinvis
Copy link
Author

Ooops... I am regretting not making this a git repo 😭.

@jaszhix
Copy link

jaszhix commented Jun 25, 2020

At 3440x1440 resolution some of the repo navigation items disappear. This fixes it for me:

 .js-selected-navigation-item {
      visibility: unset !important;
  }

Uses !important because it appears to be controlled by a resize event handler.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment