DEV.TO in Web Comics Style ?
Tags: discuss, meta, css
Published: 2019-11-08 15:04:32

## Disclaimer : I am a big fan of comics !
First time when when I saw http://dev.to for some reason the style of it reminded me so so much of comics (that as I said I love) !

So at some point several days ago I switched to Minimal Light Theme for more clear look, but it was not my thing :(

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jclts0291fg7wvi5r8li.jpg)

You know there are themes right ? Anyway this theme is good but I don't know, something was missing and it was not cartoony and fun and comics enough maybe.

I am __not a frontend guy__, I have __0 knowledge in CSS__ even -1 and I am proud of it! I hate the DOM and I hate styling it with anything especially CSS, but I just had to see how it will look in a bit more... _comicsish_ style? 

So I used Stylus plugin for chrome to inject a bit of CSS into the page, basically just changed the `border-styles` and some alignments.

```css

/* feeds view */


.sidebar-profile-snapshot {
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

.sidebar-nav-header{
   text-align:right;
}

.widget {
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 2% 162% 3%/9% 96% 2% 99% !important;
}

.widget header {
    text-align:right;
}

.single-article  {
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 3px 5px 5px !important;
}

/* article view */

.article article{
    border: solid black;
    border-color: black;
    border-width: 3px 3px 5px 5px;
}

.inner-comment{
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 3px 5px 5px !important;
}

.primary-sticky-nav-author{
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

.primary-sticky-nav-element{
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}
```

And YES I put !important everywhere cuz... it's only for me! My precious!

Anyway I think the results are quite good and I will use it this way from now on, but what do you think, should someone KNOWING how to do it properly can and will create a theme ?

Full feeds page:
![feeds page](https://thepracticaldev.s3.amazonaws.com/i/n786pkzq2cc224u4yxi1.jpg)


And a single article page:

![single article ](https://thepracticaldev.s3.amazonaws.com/i/w6zo8p4d8d89ov8bsomq.jpg)


Also I tried to change the fonts.. I would love to have the Bangers font for the h4 headings but didn't had any luck :D

```css
@font-face {
  font-family: Bangers;
  src: url(https://fonts.googleapis.com/css?family=Bangers);
}

h4{
    font-family: Bangers !important;
}

```
Adding this for some idea doesn't work, the HTTP request is made properly the font is downloaded but... 
at the end I would LOVE something like this for the right side :
![Right side](https://thepracticaldev.s3.amazonaws.com/i/lg0373n9l9k8xqfasx3y.jpg)

It would be cool, but without CSS knowledge and for around 30mins this was my limit :D 

Cya all, I will love to hear your thoughts - back to the backend and debugging Java.

Oh yes... I forgot I was experimenting here before applying CSS to DEV.TO

{% codepen https://codepen.io/gochev-the-styleful/pen/wvvXJKx %}


here we have the Bangers fonts and etc I was curious how to make the borders. 

__UPDATE__.
Ah I am an idiot, it looks the value of @font-face src was incorrect it works in a link since it gets added in a style as stylesheet pf anyway, so
```css
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/bangers/v12/FeVQS0BTqb0h60ACH55Q2A.woff2) format('woff2');
}
```
Works (the url above was incorect) ! 

so __VERSION 2 !__

- Changed the sidebar titles
- Changed the shape of buttons
- Changed my name and username 

I think this 2 screenshots show most of it:
I LOVE the new and improved header:

![new header](https://thepracticaldev.s3.amazonaws.com/i/ploenoa7fgip5ce1wula.png)


And the full look:

![version 2](https://thepracticaldev.s3.amazonaws.com/i/60sy1nj3l556waootpia.png)


And what I __added__ to the previous CSS:

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

.sidebar-profile-name{
    font-family: Bangers !important;
    font-size:12px;
}

.sidebar-profile-username {
    font-family: Bangers !important;
    font-size:20px;
}

.widget header h4{
    font-family: Bangers !important;
    font-size:25px;
  transform: rotate(2deg);
  margin:15px;
  padding:0 5px;
  float:right;
  background:#ddd;
  border:1px solid #222;
  box-shadow:3px 3px 0 #222;
}

.widget .cta-button {
        border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

.articles-list .nav-chronofiter-link {
        border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

.sidebar-profile-snapshot {
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

.sidebar-nav-header:first-child{
   text-align:right;
        font-family: Bangers !important;
    font-size:25px;
  transform: rotate(2deg);
  margin:15px;
  padding:0 5px;
  float:right;
  background:#ddd;
  border:1px solid #222;
  box-shadow:3px 3px 0 #222;

```

The full file (since the post is already too long) : 

https://gist.github.com/gochev/1ee874a0bb6218ffcb652170ef3bb3a7

__Anyone for up for how to make it a real theme thing ? :)__