tl;dr

  • Qrunch は qrunch.ioqrunch.net に分割され、同時に「デザイン」機能が追加されました。
  • デザイン」では、テーマカラーや独自にCSSを指定することができます。

デザイン

じぶんはこんな感じ。 (2018.12.31 現在)

SCSS (2018.12.31)
#blog-description {  
  color: #5f5f5f;  
}  

@keyframes slidein{  
  from {  
    opacity: 0;  
    transform: translateX(40px);  
  }  
  to {  
    opacity: 1;  
    transform: translateX(0);  
  }  
}  

.entry-inner {  
  transition: all 0.3s ease;  
}  

.entry-inner:hover {  
  background-color: #f7f7f7;  
}  

.tag.entry-tag {  
  color: #4b6584;  
}  


@for $cnt from 0 through 9{  
    .entry:nth-child(#{$cnt + 1}) .entry-inner{  
        animation: 0.6s ease-out $cnt*0.1+s normal both running slidein;  
    }  
}  

.blog-sub-tags-inner ul{  
  list-style-image: url(https://icongr.am/feather/hash.svg?size=17&color=3f3f3f);  
}  

.tag-number {  
  color: #808080;  
}  

.blog-archive-inner ul {  
  list-style-image: url(https://icongr.am/fontawesome/folder-open.svg?size=17&color=3f3f3f);  
}  

.blog-links-inner ul {  
  list-style-image: url(https://icongr.am/clarity/link.svg?size=20&color=3f3f3f);  
}  

.blog-search-input::placeholder::before {  
  background-image: url(https://icongr.am/fontawesome/search.svg?size=15&color=3f3f3f);  
}  

.blog-copyright-inner a {  
  color: #485460;  
}  
CSS (コンパイル後)
#blog-description {  
  color: #5f5f5f;  
}  

@keyframes slidein {  
  from {  
    opacity: 0;  
    transform: translateX(40px);  
  }  
  to {  
    opacity: 1;  
    transform: translateX(0);  
  }  
}  
.entry-inner {  
  transition: all 0.3s ease;  
}  

.entry-inner:hover {  
  background-color: #f7f7f7;  
}  

.tag.entry-tag {  
  color: #4b6584;  
}  

.entry:nth-child(1) .entry-inner {  
  animation: 0.6s ease-out 0s normal both running slidein;  
}  

.entry:nth-child(2) .entry-inner {  
  animation: 0.6s ease-out 0.1s normal both running slidein;  
}  

.entry:nth-child(3) .entry-inner {  
  animation: 0.6s ease-out 0.2s normal both running slidein;  
}  

.entry:nth-child(4) .entry-inner {  
  animation: 0.6s ease-out 0.3s normal both running slidein;  
}  

.entry:nth-child(5) .entry-inner {  
  animation: 0.6s ease-out 0.4s normal both running slidein;  
}  

.entry:nth-child(6) .entry-inner {  
  animation: 0.6s ease-out 0.5s normal both running slidein;  
}  

.entry:nth-child(7) .entry-inner {  
  animation: 0.6s ease-out 0.6s normal both running slidein;  
}  

.entry:nth-child(8) .entry-inner {  
  animation: 0.6s ease-out 0.7s normal both running slidein;  
}  

.entry:nth-child(9) .entry-inner {  
  animation: 0.6s ease-out 0.8s normal both running slidein;  
}  

.entry:nth-child(10) .entry-inner {  
  animation: 0.6s ease-out 0.9s normal both running slidein;  
}  

.blog-sub-tags-inner ul {  
  list-style-image: url(https://icongr.am/feather/hash.svg?size=17&color=3f3f3f);  
}  

.tag-number {  
  color: #808080;  
}  

.blog-archive-inner ul {  
  list-style-image: url(https://icongr.am/fontawesome/folder-open.svg?size=17&color=3f3f3f);  
}  

.blog-links-inner ul {  
  list-style-image: url(https://icongr.am/clarity/link.svg?size=20&color=3f3f3f);  
}  

.blog-search-input::placeholder::before {  
  background-image: url(https://icongr.am/fontawesome/search.svg?size=15&color=3f3f3f);  
}  

.blog-copyright-inner a {  
  color: #485460;  
}  

_lemon2003_'s tech blog

CSSを当てた点

  • 記事リスト
    • ロード時に右からスライド&フェードイン
    • ホバー時に背景に薄く網掛け
  • よく使うタグ, 月別アーカイブ, リンク
    • (数字) を薄くする
    • リストの丸の画像

やったね。

やったね。

関連記事

この記事へのコメント

まだコメントはありません
+1
18
@lemon2003の技術ブログ
このエントリーをはてなブックマークに追加