Reddit In Comics Style

#css #discuss #meta

Hello guys, as a follow up of my previous post almost an year ago https://dev.to/gochev/dev-to-in-web-comics-style-36ca which was to make this amazing webside https://dev.to in comics style (it is a bit outdated btw) I just tried with Reddit.

Again I am no CSS or frontend person I just love comics
And again the REDDIT css will be broken very soon because their selectors and CSS classes looks like this

.Y4MkVr6trrdypfZVUkpIA, ._2vkeRJojnV7cb9pMlPHy7d

So I guess they are server side randomly generated and they change from time to time.

Still I will enjoy it till I can.

I have used an extension Stylus for chrome to apply the additional CSS on top of the reddit.com default css.

The CSS I wrote can be found here
https://gist.github.com/gochev/eccfab4b9038ff460a3eb1f9ca49c5b3

After applying it your reddit will look like this on small view:

Or like this in general

The article read view looks like this :

I just hope reddit can make a new style since the old one is so so ugly. Even linkedin had an updated style since today.. cmon :) it's about time.

I hope someone can improve it and actually make it better.
Right now there are only 2 important bits. One is the general borders change :

    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 30% 2% 162% 3%/9% 96% 2% 99% !important;

And another one for more article or more "boxed" shaped boxes

    border: solid black;
    border-color: black;
    border-width: 3px 3px 5px 5px;

And of course about the titles font:

@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/bangers/v12/FeVQS0BTqb0h60ACH55Q2A.woff2) format('woff2');
}

h3{
    font-family: Bangers !important;
    font-size:22px;
}