User style sheet to put the README in the right place.

_README.md

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.

github-readme-top.css

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

zzz-example.png

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

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.

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.