Skip to content

Instantly share code, notes, and snippets.

@remy
Last active July 25, 2018 16:27
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save remy/057fac5e453eb06e11d0d53bb088c3f8 to your computer and use it in GitHub Desktop.
Save remy/057fac5e453eb06e11d0d53bb088c3f8 to your computer and use it in GitHub Desktop.
User style sheet to put the README in the right place.

README first for github

Using a user style sheet extension, this CSS should give you enough targetting to put the README above the files, putting the important information in the right place.

I use uptight, by the late Chloe Weil, you can use what you want.

example

/* github - to put README at the top */
#js-repo-pjax-container .repository-content {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: auto;
}
/* fix exploding grid */
#js-repo-pjax-container .repository-content > div {
max-width: 980px;
}
#js-repo-pjax-container .js-repo-meta-container {
grid-row: 1 / 2;
}
#js-repo-pjax-container .overall-summary-bottomless {
grid-row: 2 / 3;
}
#js-repo-pjax-container .repository-lang-stats-graph {
grid-row: 3 / 4
}
#js-repo-pjax-container .repository-content #readme {
grid-row: 4 / 5;
margin-top: 20px;
}
@remy
Copy link
Author

remy commented Jul 25, 2018

I've just made a small update that fixes the file browser being too wide. Not quite sure why it forces the grid to be wide, but it works.

@brandonb927
Copy link

Thanks for this @remy! A slight modification to this if you're using it in conjunction with wide github is to axe this chunk:

#js-repo-pjax-container .repository-content > div {
  max-width: 980px;
}

otherwise it clobbers the extra-wide width on the page from the Wide Github extension.

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