@mitsuharu/vivliostyle-theme-iosdc-pamphlet 0.2.0 → 0.3.0

package/README.md

@@ -6,7 +6,7 @@ This is a Vivliostyle theme for techbook of iOSDC Japan pamphlet.
 
 ## Required
 
-- @vivliostyle/cli >= 9.3.1
+- @vivliostyle/cli >= 9.3.2
 
 ## Use
 

package/example/default.md

@@ -1,11 +1,14 @@
-# バブルソートの説明
+<header>
+
+# サンプルのタイトルですサンプルのタイトルですサンプルのタイトルです
 
 <div class="author-info">
-サンプルたろう（株式会社????）<BR />
-𝕏: @????<BR />
-Bluesky: @????.bsky.social
+サンプルたろう<br>
+株式会社????
 </div>
 
+</header>
+
 バブルソートは、隣接する要素を比較して並べ替える簡単なソートアルゴリズムです。初学者にも分かりやすいように、Swift のコードと一緒にイラストと表を使って説明します。[^ChatGPT]
 
 [^ChatGPT]: この文章と画像は ChatGPT で書きました
@@ -16,6 +19,16 @@ Bluesky: @????.bsky.social
 
 ![バブルソートの過程](./images/bubble-sort.png){width=300}
 
+<!-- <figure class="column-top">
+  <img src="./images/bubble-sort.png">
+  <figcaption>キャプション</figcaption>
+</figure> -->
+
+<!-- <figure>
+  <img src="./images/bubble-sort.png">
+  <figcaption>キャプション</figcaption>
+</figure> -->
+
 1. **初期状態**: ソートされていない配列が並んでいる
 2. **比較と交換**: 隣接する要素を比較し、必要に応じて交換する
 3. **最終状態**: 配列がソートされた状態になる
@@ -50,6 +63,9 @@ print("Sorted array: \(numbers)")
 
 ## バブルソートの過程を示す表
 
+<figure class="column-top">
+<figcaption>Markdownの表のキャプション</figcaption>
+
 | イテレーション | 配列の状態              | 比較された要素         | 交換された要素 |
 |--------------|--------------------|-------------------|-------------|
 | 初期状態         | [64, 34, 25, 12, 22, 11, 90] | -                 | -           |
@@ -59,6 +75,8 @@ print("Sorted array: \(numbers)")
 | ...          | ...                | ...               | ...         |
 | 最終状態         | [11, 12, 22, 25, 34, 64, 90] | -                 | -           |
 
+</figure>
+
 この表は、各イテレーションごとに配列の状態がどのように変化するかを示しています。各ステップで、隣接する要素を比較し、必要に応じて交換することで、配列が徐々にソートされていきます。
 
 バブルソートは、シンプルなアルゴリズムですが、大規模なデータセットには効率的ではないため、学習目的や小規模なデータセットでの使用に適しています。

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mitsuharu/vivliostyle-theme-iosdc-pamphlet",
   "description": "It is vivliostyle theme for iOSDC Japan pamphlet",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": "Mitsuharu Emoto <mthr1982@gmail.com>",
   "main": "theme.css",
   "scripts": {
@@ -60,5 +60,5 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "packageManager": "yarn@4.9.2"
+  "packageManager": "yarn@4.16.0"
 }

package/theme.css

@@ -148,7 +148,58 @@ pre[class*="language-"] {
 
 :root {
   font-weight: 400;
-  line-height: 1.7;
+  line-height: 1.8;
+  column-count: 1; /* 段組の設定 */
+  column-fill: auto;
+  column-gap: 10mm;
+}
+
+header {
+  float: block-start;
+  float-reference: page;
+  text-align: center;
+  margin-bottom: 10mm;
+}
+
+.column-top {
+  float: block-start;
+  float-reference: page;
+}
+
+.column-bottom {
+  float: block-end;
+  float-reference: page;
+}
+
+/* 図のキャプション */
+figure.fig,
+figure:has(> img.fig) {
+  counter-increment: figure;
+}
+figure.fig figcaption::before,
+figure:has(> img.fig) figcaption::before {
+  content: "図" counter(figure);
+}
+
+/* 表のキャプション */
+figure.table {
+  counter-increment: table;
+}
+figure.table figcaption::before {
+  content: "表" counter(table);
+}
+figure.fig figcaption::before,
+figure:has(> img.fig) figcaption::before,
+figure.table figcaption::before {
+  font-weight: bold;
+  font-family: sans-serif;
+  margin-inline-end: 1rem;
+}
+figure.fig img:not(:first-of-type) {
+  margin-inline-start: 1rem; /* 画像と画像の間隔 */
+}
+table {
+  border-collapse: collapse;
 }
 
 h1,
@@ -159,16 +210,17 @@ h3 {
 
 h1 {
   font-size: 2.3rem;
-  line-height: 1.2;
+  line-height: 1.3;
+  text-align: center;
 }
 
 h2 {
-  font-size: 1.8rem;
+  font-size: 1.5rem;
   line-height: 1.2;
 }
 
 h3 {
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   line-height: 1.2;
 }
 
@@ -216,14 +268,14 @@ pre {
 
 @page {
   size: 210mm 297mm;
-  margin-top: 25mm;
-  margin-bottom: 21mm;
+  margin-top: 20mm;
+  margin-bottom: 23mm;
 }
 
 @page :left {
   /* 偶数ページの設定 */
-  margin-left: 30mm;
-  margin-right: 25mm;
+  margin-left: 22mm;
+  margin-right: 20mm;
 
   /* 下部のページ数と上部の表示を削除する */
   --vs-page--mbox-content-top-left: "";
@@ -232,8 +284,8 @@ pre {
 
 @page :right {
   /* 奇数ページの設定 */
-  margin-left: 25mm;
-  margin-right: 30mm;
+  margin-left: 20mm;
+  margin-right: 22mm;
 
   /* 下部のページ数と上部の表示を削除する */
   --vs-page--mbox-content-top-right: "";
@@ -243,8 +295,9 @@ pre {
 @media print {
   :root {
     /* フォントの基本サイズ */
-    /* 2023 は 14px を設定したが、書籍上では少し大きく感じた */
-    font-size: 12px;
+    /* おすすめサイズはヒラギノ角ゴシック8.5ptだが、Noto Sans JP を利用するので少し大きく設定する */
+    font-size: 10pt;
+    line-height: 1.8;
   }
   .token {
     /* ソースコードの文字サイズ */
@@ -255,9 +308,10 @@ pre {
 
 /* 著者紹介のブロック */
 .author-info {
-  display: flex;
-  justify-content: flex-end;
-  text-align: left;
+  font-size: 1.5rem;
+  line-height: 1.4;
+  font-weight: 500;
+  text-align: center;
 }
 
 /* 改行しない */
@@ -265,3 +319,9 @@ pre {
   word-wrap: break-word;
   white-space: nowrap;
 }
+
+/* 改行しない */
+.nowrap {
+  word-wrap: break-word;
+  white-space: nowrap;
+}