@cosense-toolbox/style 0.1.0-beta.5 → 0.1.0-beta.7

package/README.md

@@ -2,8 +2,10 @@
 
 > **beta.** class 名はまだ変わりえます。安定するまではバージョン固定での利用を推奨します。
 
-[`@cosense-toolbox/parser`](../parser) の `toHtml` が出す HTML に当てる既定のスタイルシート。
-CSS 1 枚だけのパッケージなので、スタイルが要らないなら入れなくてよい。
+[`@cosense-toolbox/parser`](../parser) の `toHtml` が出力する HTML に適用する、既定のスタイルシートです。
+CSS ファイル1枚だけで構成されているため、独自の見た目を使う場合はインストールする必要はありません。
+
+**ドキュメント → <https://cosense-toolbox.qaynam.dev/style/>**
 
 ```sh
 npm i @cosense-toolbox/style
@@ -17,8 +19,8 @@ import "@cosense-toolbox/style"
 > (`.line > .text > 1 文字ごとの .char-index`) に当てたもので `toHtml` の出力には当たらないため、
 > 見た目を寄せた別実装として書き起こしたものです。
 
-Tailwind CSS を使っているなら、この CSS を読み込む代わりに [`@cosense-toolbox/tailwind`](../tailwind) を使える。
-`class="cosense"` を付けた要素の中に、同じスタイルが当たる。
+Tailwind CSS を使う場合は、この CSS の代わりに [`@cosense-toolbox/tailwind`](../tailwind) を利用できます。
+`class="cosense"` を付けた要素の中に同じスタイルが適用されます。
 
 ## 前提
 
@@ -75,7 +77,7 @@ CSS 変数を定義するだけでよい。定義した変数が最優先にな
 Cosense と同じく、字下げの右端に中点を出す。`toHtml` の既定の出力には中点にあたる要素が
 無いので `.line[data-indent]::before` で描いている。
 
-`toHtml(page, { showPads: true })` でCosense Web と同じ `.indent-mark` / `.pad` / `.dot` を
+`toHtml(page, { showPads: true })` で Cosense Web と同じ `.indent-mark` / `.pad` / `.dot` を
 書き出した場合は、擬似要素を止めて要素側のスタイルを使う。どちらでも見た目は同じ。
 
 ## コードブロックの行番号

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosense-toolbox/style",
-  "version": "0.1.0-beta.5",
+  "version": "0.1.0-beta.7",
   "description": "Default stylesheet for the HTML that @cosense-toolbox/parser renders.",
   "license": "MIT",
   "type": "module",

package/style.css

@@ -331,6 +331,50 @@
   max-height: none;
 }
 
+/* 動画は画像と同じ大きさの決まりで置く。 */
+.page .video {
+  display: inline-block;
+  max-width: 100%;
+  max-height: 300px;
+  vertical-align: bottom;
+}
+
+.page .video[data-large] {
+  margin: 3px 0;
+  max-width: 95%;
+  max-height: none;
+}
+
+/* 音声は再生の操作とラベルを 1 行に並べる。 */
+.page .audio {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+.page .audio audio {
+  max-width: 100%;
+  height: 2.5em;
+}
+
+/* 埋め込みのプレーヤーは 16:9。音声だけのサービスは高さを決めて横に伸ばす。 */
+.page .embed {
+  display: block;
+  width: 100%;
+  max-width: 560px;
+  aspect-ratio: 16 / 9;
+  margin: 3px 0;
+  border: 0;
+}
+
+.page .embed[data-provider="spotify"],
+.page .embed[data-provider="anchor"] {
+  aspect-ratio: auto;
+  height: 152px;
+}
+
 /*
  * アイコンは a.icon > img.icon の入れ子。iconImageUrl を渡していないときは img が無く、
  * ユーザー名のテキストリンクとして出る (色は .link から継承する)。