Lack of border between badges on profiles

[auscompgeek]

GitHub-Dark removes the border on .member-badge + .member-badge, which looks odd.

• Browser: Firefox 60
• Operating System: Arch Linux
• Screenshot: dark light
• Link: https://github.com/Pancrisp
• HTML of the section where the issue occurs:

  <a class="member-badge border-top border-gray-light py-3 d-block" href="https://developer.github.com">
  <svg class="octicon octicon-circuit-board" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M3 5c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1zm8 0c0-.55-.45-1-1-1s-1 .45-1 1 .45 1 1 1 1-.45 1-1zm0 6c0-.55-.45-1-1-1s-1 .45-1 1 .45 1 1 1 1-.45 1-1zm2-10H5v2.17c.36.19.64.47.83.83h2.34c.42-.78 1.33-1.28 2.34-1.05.75.19 1.36.8 1.53 1.55.31 1.38-.72 2.59-2.05 2.59-.8 0-1.48-.44-1.83-1.09H5.83c-.42.8-1.33 1.28-2.34 1.03-.73-.17-1.34-.78-1.52-1.52C1.72 4.49 2.2 3.59 3 3.17V1H1c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1l5-5h2.17c.42-.78 1.33-1.28 2.34-1.05.75.19 1.36.8 1.53 1.55.31 1.38-.72 2.59-2.05 2.59-.8 0-1.48-.44-1.83-1.09H6.99L4 15h9c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1z"></path></svg> Developer Program Member
  </a>
  <a class="member-badge border-top border-gray-light py-3 d-block" href="https://education.github.com/experts">
  <svg class="octicon octicon-mortar-board" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.83 9.19L4 8c-4-8 0 1.5 0 2.5S5.8 12 8 12s4-.5 4-1.5V8L8.17 9.19a.73.73 0 0 1-.36 0h.02zm.28-6.39a.34.34 0 0 0-.2 0L.27 5.18a.35.35 0 0 0 0 .67L2 6.4v1.77c-.3.17-.5.5-.5.86 0 .19.05.36.14.5-.08.14-.14.31-.14.5v2.58c0 .55 2 .55 2 0v-2.58c0-.19-.05-.36-.14-.5.08-.14.14-.31.14-.5 0-.38-.2-.69-.5-.86V6.72l4.89 1.53c.06.02.14.02.2 0l7.64-2.38a.35.35 0 0 0 0-.67L8.1 2.81l.01-.01zM8.02 6c-.55 0-1-.22-1-.5s.45-.5 1-.5 1 .22 1 .5-.45.5-1 .5z"></path></svg> GitHub Campus Expert
  </a>

[the-j0k3r]

After a second or five it starts looking better without, Maybe because it groups similar items together instead of separating them.

Its a simple fix to re-add by removing .member-badge+.member-badge, but thats autogenerated content so...mmmm https://github.com/StylishThemes/GitHub-Dark/blob/73f78d23a1b853267ba46a4f781464a45eb61f28/github-dark.css#L517

Upon closer inspection it may have been an erroneous addition.

see https://github.com/StylishThemes/GitHub-Dark/commit/200bb5d2878deed42fc8fa1423e0c2a39e4dd139 which proposes to hide border that GH hides somewhere in default stylesheet. @silverwind maybe has better insight.

[auscompgeek]

It'd look alright if there wasn't so much padding between the badges, I guess. But I recall the intention is that GitHub-Dark shouldn't be opinionated.

[the-j0k3r]

It'd look alright if there wasn't so much padding between the badges

I thought that it would look better yes :)

But I recall the intention is that GitHub-Dark shouldn't be opinionated.

It looks like it was an error in that autogenerated rule, only @silverwind can say, its pointless to remove it manually if autogenerating will add it again.

[silverwind]

GitHub's style removes that border and re-adds it on another style using !important, but in our style, all rules are !important so the longer selector won in our case. Had to add a manual fix outside of the generated rules.