网络漫画风格的 DEV.TO ？

免责声明：我是漫画的忠实粉丝！

第一次看到http://dev.to时，不知为何它的风格让我想起了漫画（正如我所说，我喜欢漫画）！

因此，几天前的某个时候，我切换到了 Minimal Light Theme，以获得更清晰的外观，但这不是我喜欢的 :(

你知道有主题吧？总之这个主题不错，但我不知道，是不是缺了点什么，可能不够卡通、有趣、漫画感。

我不是前端开发，CSS 一窍不通，但我却为此感到自豪！我讨厌 DOM，也讨厌用任何东西，尤其是 CSS 来设计它，但我就是想看看它看起来会是什么样子……有点漫画风格？

因此我使用 Chrome 的 Stylus 插件向页面注入了一些 CSS，基本上只是改变了border-styles一些对齐方式。


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

是的，我把!important放在了所有地方，因为……它只属于我！我的宝贝！

无论如何，我认为结果相当不错，从现在开始我会以这种方式使用它，但是您认为，如果有人知道如何正确地做这件事，就可以创建一个主题吗？

完整供稿页面：

以及单个文章页面：

我也尝试过更改字体。我很想使用 Bangers 字体作为 h4 标题，但是没有成功 :D

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

h4{
    font-family: Bangers !important;
}

对于某些想法来说，添加这个是行不通的，HTTP 请求正确进行，字体已下载，但是...
最后，我希望右侧有类似这样的东西：

这很酷，但是由于缺乏 CSS 知识，而且大约 30 分钟的时间，这就是我的极限了 :D

大家好，我很想听听你们的想法——回到后端并调试 Java。

哦，是的……我忘了在将 CSS 应用于 DEV.TO 之前我在这里做过实验

这里有 Bangers 字体等，我很好奇如何制作边框。

更新。
啊，我真是个傻瓜，看起来 @font-face src 的值不对，它在链接中是可以工作的，因为它无论如何都会作为样式表 pf 添加到样式中，所以

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

有效（上面的 URL 不正确）！

所以是版本 2！

更改了侧边栏标题
改变了按钮的形状
更改了我的姓名和用户名

我认为这两张截图展示了大部分内容：
我喜欢新的和改进的标题：

完整外观：

我在之前的 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;

完整文件（因为帖子已经太长了）：

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

有人知道怎样让它成为一个真正的主题吗？:)

文章来源：https://dev.to/gochev/dev-to-in-web-comics-style-36ca