웹툰 스타일의 DEV.TO ?

면책 조항 : 저는 만화의 열렬한 팬입니다!

어떤 이유에서인지 처음 봤을 때 그 스타일이 만화를 너무 많이 떠올리게 했어요(내가 말했듯이 사랑합니다)!

그래서 며칠 전 어느 시점에서 좀 더 선명한 모습을 위해 Minimal Light Theme로 전환했는데 제 취향은 아니었습니다 :(



테마가 있는거 아시죠? 어쨌든 이 테마는 좋지만 잘 모르겠습니다. 뭔가 빠졌고 만화 같지도 않고 재미도 없고 만화적일 수도 있습니다.

저는 프론트엔드 전문가가 아닙니다. CSS에 대한 지식이 0이고 심지어 -1인 것이 자랑스럽습니다! 나는 DOM이 싫고 특히 CSS로 스타일을 지정하는 것이 싫지만 조금 더... 코믹한 스타일로 어떻게 보일지 확인해야 했습니다.

그래서 크롬용 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;
}

그리고 YES 난 모든 곳에 !important를 붙였어 왜냐하면... 그건 나만을 위한 거니까! 내 소중한!

여하튼 결과물이 꽤 좋은 것 같아서 앞으로는 이렇게 사용해볼 생각인데, 제대로 할 줄 아는 사람이 테마를 만들 수 있고 또 만들어 줄 수 있을까?

전체 피드 페이지:


그리고 단일 기사 페이지:



또한 글꼴을 변경하려고 했습니다.. h4 제목에 Bangers 글꼴을 사용하고 싶지만 운이 없었습니다. :D

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

h4{
    font-family: Bangers !important;
}

아이디어를 추가하면 작동하지 않고 HTTP 요청이 제대로 이루어지고 글꼴이 다운로드되지만...
결국 나는 오른쪽에 대해 이와 같은 것을 좋아할 것입니다.


멋지겠지만 CSS 지식 없이 약 30분 동안 이것이 내 한계였습니다 :D

Cya 모두 백엔드 및 Java 디버깅에 대한 여러분의 생각을 듣고 싶습니다.

아 맞다... DEV.TO에 CSS를 적용하기 전에 여기서 실험을 하고 있다는 걸 깜빡했네요.



여기에 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!

사이드바 제목 변경됨

버튼의 모양이 변경됨

내 이름과 사용자 이름을 변경함

이 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

실제 테마로 만드는 방법에 대해 아는 사람이 있습니까? :)