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:
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;
}
Well that's it folks I hope you enjoy it.
Top comments (1)
Looks good. Thanks for sharing 😊