チュートリアルの追加

_data/global_header.yml

@@ -14,6 +14,8 @@ en:
 ja:
   - title: 使ってみる
     url: /ja/getting-started/
+  - title: チュートリアル
+    url: /ja/tutorials/
   - title: サンプル
     url: /ja/samples/
   - title: ダウンロード

_includes/button/download.html

@@ -0,0 +1,8 @@
+<li>
+  <a
+    href="{{ include.url }}"
+    class="{{ include.class | default: 'button--secondary--large' }}"
+    download>
+    <i class="fas fa-download"></i> {{ include.text }}
+  </a>
+</li>

_includes/page/tutorials.html

@@ -0,0 +1,11 @@
+{% include h1.html title=include.title lead=include.lead %}
+
+<section class="with-toc">
+  <section class="section">
+    <div class="container">
+      {{ content | markdownify }}
+    </div>
+  </section>
+
+  {% include toc.html %}
+</section>

_sass/_basic_elements.scss

@@ -45,6 +45,20 @@ ul {
   padding: 0;
 }
 
+table {
+  width: 100%;
+
+  th,
+  td {
+    padding: 3px 10px;
+    border: 1px solid $gray_dark;
+  }
+
+  th {
+    background-color: $gray_lighter;
+  }
+}
+
 @include media_small {
   // フォントサイズを小さく
   body {

assets/tutorials/ja/configure-basic-elements/theme_common.scss

@@ -0,0 +1,153 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+@page {
+  size: 148mm 210mm;
+  margin: 10mm 15mm;
+
+  @bottom-center {
+    content: counter(page);
+    writing-mode: horizontal-tb;
+  }
+}
+
+@page :left {
+  margin-right: 25mm;
+
+  @top-left {
+    content: env(doc-title);
+  }
+}
+
+@page :right {
+  margin-left: 25mm;
+}
+
+@page :first {
+  counter-reset: chapter;
+}
+
+@page :nth(1) {
+  counter-increment: chapter;
+}
+
+body {
+  break-before: right;
+  counter-reset: section subsection figure;
+}
+
+html {
+  // writing-mode: vertical-rl;
+  // font-family: '游明朝', 'YuMincho', serif;
+  font-size: 10pt;
+  widows: 1;
+  orphans: 1;
+  text-align: justify;
+
+  text-spacing: allow-end;
+  hanging-punctuation: allow-end;
+}
+
+ruby > rt {
+  font-size: 0.5rem;
+}
+
+p {
+  line-height: 1.5;
+  text-indent: 1em;
+}
+
+body > section {
+  margin: 10px auto;
+}
+
+section > {
+  h1, h2, h3, h4, h5, h6 {
+    padding: 0;
+    font-weight: bold;
+    break-after: avoid;
+  }
+
+  h1 {
+    margin: 10pt auto 5pt;
+    font-size: 14pt;
+    line-height: 1.5;
+
+    counter-increment: section;
+    counter-reset: subsection;
+
+    &:before {
+      margin-right: 1rem;
+      content: counter(chapter) '.' counter(section) '章';
+    }
+  }
+
+  h2 {
+    margin: 8pt auto 4pt;
+    font-size: 12pt;
+
+    counter-increment: subsection;
+
+    &:before {
+      margin-right: 1rem;
+      content: counter(chapter) '.' counter(section) '.' counter(subsection) '章';
+    }
+  }
+}
+
+@import 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism.min.css';
+
+code {
+  background-color: #f6f6f6;
+  padding: 0 3pt;
+}
+
+figure[class^='language-'] {
+  margin: 0.5em 0;
+
+  figcaption {
+    background-color: #e6e6e6;
+  }
+
+  pre {
+    margin: 0pt;
+  }
+}
+
+img {
+  max-width: 100%;
+  display: block;
+  margin: 0 auto;
+}
+
+figure {
+  figcaption {
+    text-align: center;
+
+    counter-increment: figure;
+
+    &:before {
+      margin-right: 1rem;
+      content: 'Figure' counter(figure) '.';
+
+      :root:lang(ja) & {
+        content: '図' counter(figure) '.';
+      }
+    }
+  }
+}
+
+.footnote-ref sup {
+  background-color: #ff8989;
+}
+
+.footnote-back {
+  background-color: #ff8989;
+}
+
+.footnotes {
+  font-size: 8pt;
+}

assets/tutorials/ja/configure-counters-running-heads/theme_common.scss

@@ -0,0 +1,69 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+@page {
+  size: 148mm 210mm;
+  margin: 10mm 15mm;
+
+  @bottom-center {
+    content: counter(page);
+    writing-mode: horizontal-tb;
+  }
+}
+
+@page :left {
+  margin-right: 25mm;
+
+  @top-left {
+    content: env(doc-title);
+  }
+}
+
+@page :right {
+  margin-left: 25mm;
+}
+
+@page :first {
+  counter-reset: chapter;
+}
+
+@page :nth(1) {
+  counter-increment: chapter;
+}
+
+body {
+  break-before: right;
+  counter-reset: section;
+}
+
+html {
+  // writing-mode: vertical-rl;
+  // font-family: '游明朝', 'YuMincho', serif;
+  font-size: 10pt;
+  widows: 1;
+  orphans: 1;
+  text-align: justify;
+
+  text-spacing: allow-end;
+  hanging-punctuation: allow-end;
+}
+
+ruby > rt {
+  font-size: 0.5rem;
+}
+
+p {
+  line-height: 1.5;
+  text-indent: 1em;
+}
+
+h1 {
+  counter-increment: section;
+
+  &::before {
+    content: counter(chapter) '.' counter(section) '章 ';
+  }
+}

assets/tutorials/ja/configure-page-text/manuscripts/atogaki.md

@@ -0,0 +1,7 @@
+---
+title: あとがき
+---
+
+# あとがき
+
+これはあとがきです。

assets/tutorials/ja/configure-page-text/manuscripts/honbun.md

@@ -0,0 +1,84 @@
+---
+title: 本文
+body:
+  class: 'foo bar'
+vfm:
+  hardLineBreaks: false
+---
+
+この原稿は [VFM (Vivliostyle Flavored Markdown)](https://vivliostyle.github.io/vfm/vfm) で書かれています。詳細はドキュメントを確認してください。
+
+# ソースコード {#code}
+
+```javascript
+function main() {}
+```
+
+## キャプション付き {#code-with-caption}
+
+```javascript:app.js
+function main() {}
+```
+
+or
+
+```javascript title=app.js
+function main() {}
+```
+
+# 後注 {#footnotes}
+
+VFM は GitHub リポジトリ[^1]で開発されています。
+issue は GitHub[^issues]で管理されています。
+後注はインラインで記述することもできます^[これは後注です。]。
+
+[^1]: [VFM](https://github.com/vivliostyle/vfm)
+[^issues]: [Issues](https://github.com/vivliostyle/vfm/issues)
+
+# Frontmatter {#frontmatter}
+
+Markdown ファイルの冒頭で、メタデータを設定することができます。詳細は [Frontmatter part in VFM document](https://vivliostyle.github.io/vfm/vfm#frontmatter) を確認してください。
+
+# 改行 {#newline}
+
+デフォルトでは、空行を1行はさむことで改行が行われます。Frontmatter で `hardLineBreaks` を `true` にすると、空行なしで改行が行われます。
+
+はじめまして。
+
+Vivliostyle Flavored Markdown（略して VFM）の世界へようこそ。
+VFM は出版物の執筆に適した Markdown 方言であり、Vivliostyle プロジェクトのために策定・実装されました。
+
+# 画像 {#figure}
+
+![](https://vivliostyle.org/assets/vivliostyle-logo.svg)
+
+## キャプション {#figure-with-caption}
+
+![Vivliostyle Logo](https://vivliostyle.org/assets/vivliostyle-logo.svg)
+
+![Vivliostyle Logo](https://vivliostyle.org/assets/vivliostyle-logo.svg '公式サイトで配布されています'){id="image" data-sample="sample"}
+
+# 数式 {#math}
+
+インライン： $x = y$
+
+ディスプレイ： $$1 + 1 = 2$$
+
+# HTML {#html}
+
+<div class="custom">
+  <p>Hey</p>
+</div>
+
+## Markdown と HTML の併用 {#html-with-markdown}
+
+<div class="custom">
+
+- hoge
+- fuga
+
+</div>
+
+# ルビ {#ruby}
+
+This is {Ruby|ルビ}

assets/tutorials/ja/configure-page-text/manuscripts/maegaki.md

@@ -0,0 +1,7 @@
+---
+title: まえがき
+---
+
+# まえがき
+
+これはまえがきです。