Skip to content

Instantly share code, notes, and snippets.

@remy

remy/_README.md

Last active Jul 25, 2018
Embed
What would you like to do?
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;
}
@WolfieZero

This comment has been minimized.

Copy link

@WolfieZero WolfieZero commented Jul 25, 2018

Awesome stuff! I've added this using StyleBot and works very nicely.

@remy

This comment has been minimized.

Copy link
Owner Author

@remy 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

This comment has been minimized.

Copy link

@brandonb927 brandonb927 commented Jul 25, 2018

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