Hexoのlandscape themeの引用スタイルが気に入らないので変えた。 変更点概要は↓。よく見る感じの引用スタイルになったと思う。

• フォントサイズを小さく
• イタリック
• 左揃え
• 左端に青線(Qiita)
• 背景色をグレーに
• 余白とかをええ感じに

↓のように書く。

> ## h2
>
> ## h3
>
> ## h4
>
> こんな感じの引用スタイルになるよん。こんな感じの引用スタイルになるよん。こんな感じの引用スタイルになるよん。
> こんな感じの引用スタイルになるよん。こんな感じの引用スタイルになるよん。こんな感じの引用スタイルになるよん。
> こんな感じの引用スタイルになるよん。こんな感じの引用スタイルになるよん。こんな感じの引用スタイルになるよん。
>
> コードは↓。
>
> ```js
> const myFunc = (x, y) => {
>   const c = x + y;
>   return c;
> };
> ```

↓のような感じになる。

h2

h3

h4

こんな感じの引用スタイルになるよん。こんな感じの引用スタイルになるよん。こんな感じの引用スタイルになるよん。 こんな感じの引用スタイルになるよん。こんな感じの引用スタイルになるよん。こんな感じの引用スタイルになるよん。 こんな感じの引用スタイルになるよん。こんな感じの引用スタイルになるよん。こんな感じの引用スタイルになるよん。

コードは↓。

const myFunc = (x, y) => {
  const c = x + y;
  return c;
};

詳細なdiffは↓(syntax highlightが上手く効いてないかも…)。

diff --git a/themes/landscape/source/css/_partial/article.styl b/themes/landscape/source/css/_partial/article.styl
index 282de2f..76fad5d 100644
---

a/themes/landscape/source/css/\_partial/article.styl
+++ b/themes/landscape/source/css/\_partial/article.styl
@@ -80,9 +80,18 @@
padding: 10px 0
blockquote
font-family: font-serif

- font-size: 1.4em
- margin: line-height 20px
- text-align: center

* font-style: italic
* font-size: 1em
* margin: (line-height / 2) 0px
* padding: article-padding // must match the negative margin value of `$code-block`.
* text-align: left
* background-color: color-quote-background
* border-left: solid 6px color-quote-border
* border-radius: 0 12px 12px 0
* \*:first-child
*      margin-top: 0;
* \*:last-child
*      margin-bottom: 0;
       footer
         font-size: font-size
         margin: line-height 0
  diff --git a/themes/landscape/source/css/\_variables.styl b/themes/landscape/source/css/\_variables.styl
  index 52f59f9..c528351 100644
  --- a/themes/landscape/source/css/\_variables.styl
  +++ b/themes/landscape/source/css/\_variables.styl
  @@ -7,6 +7,8 @@ color-default = #555
  color-grey = #999
  color-border = #ddd
  color-link = #258fb8
  +color-quote-background = #eee
  +color-quote-border = color-link
  color-background = #eee
  color-sidebar-text = #777
  color-widget-background = #ddd

注意点として、paddingの値はarticle-paddingとすること。 これは、code block要素がmarginにarticle-padding * -1を指定するため。 要はquote blockの左端にcode blockをぴったりくっつけるため。

また、*:first-childと*:last-childは、 <blockquote>の子要素のうち、最初(最後)の要素だけmarginを削るのに必要。 cssの意味不明仕様に、親要素(ここでは<blockquote>)にpaddingやborderがないときだけ、 子要素(ここでは<h2>とか<p>)のmarginが親要素を飛び越して適用されるってのがある。 変更前はpaddingもborderもなかったので、体裁が保たれていた。 が、今回追加したので、最初と最後だけmarginを削って対処するようにした。