bitclust-core 1.2.6 → 1.6.0

data/theme/default/style.css

@@ -2,15 +2,26 @@
     default.css
 */
 
+html {
+    scroll-behavior: smooth;
+}
+
 body {
     background-color: white;
     color: black;
-    font-family: Meiryo, "Hiragino Kaku Gothic Pro", "MS Gothic", Osaka, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont,
+      "Helvetica Neue", Arial,
+      "Hiragino Kaku Gothic ProN", "Hiragino Sans",
+      "BIZ UDGothic", Meiryo,
+      sans-serif;
     text-align: left;
     margin-top: 20px;
     margin-left: 2%;
     margin-right: 2%;
     line-height: 1.3;
+    /* 和文と欧文の間に自動で空きを入れる。プログレッシブエンハンスメント
+       (未対応ブラウザでは無視される) */
+    text-autospace: normal;
 }
 
 /*
@@ -116,8 +127,32 @@ span.compileerror {
 code, pre, tt {
     font-size: 90%;
     font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+    /* コード内では和欧文間の自動スペースを入れない */
+    text-autospace: no-autospace;
+}
+
+/* 地の文中のインラインコード(<code>, <tt>)に淡い背景を敷いて、地の文との
+   区別をはっきりさせる。色は pre の背景(#f2f2f2)と同系統だが、それより
+   少し薄くして地の文中では主張しすぎないようにする */
+code, tt {
+    background-color: #f5f5f5;
+    padding: 0.1em 0.3em;
+    border-radius: 3px;
+}
+
+/* pre の中の code/tt は pre 自体がブロックとして背景色を持つため、上の
+   ルールをここで打ち消して二重に背景・パディングがつかないようにする
+   (pre 内の見た目は従来どおり) */
+pre code,
+pre tt {
+    background-color: transparent;
+    padding: 0;
+    border-radius: 0;
 }
 
+/* RUN/COPY ボタンは pre の外のツールバー行(script.js が生成)にあるので、
+   pre の中身は四辺とも均等に padding をとれる(上だけ 0 にして中身が
+   上端に張り付く、以前のボタン内蔵ハックは不要になった) */
 pre {
     line-height: 1.1;
     background-color: #f2f2f2;
@@ -126,32 +161,108 @@ pre {
     overflow: auto;
 }
 
-pre.highlight {
-    line-height: 1.1;
-    background-color: #f2f2f2;
-    padding: 0px 1.1em 1.1em 1.1em;
-    font-weight: normal;
-    position: relative;
+
+/* pre の直前に密着するヘッダー行(script.js が生成)。コード部分より
+   ひと段暗い背景でコードブロックと一体に見せつつ(白い帯として浮くと、
+   コードの上の隙間が広く見える)、コード部分と同色の caption タブや
+   白背景のボタンが埋没しないようにする。左端に caption のタブ、右端に
+   RUN/COPY のボタン群を置く */
+.highlight__toolbar {
+  display: flex;
+  align-items: flex-end;
+  margin: 1em 0 0;
+  padding: 0.25em 0.25em 0 0.25em;
+  background-color: #e6e6e6;
+}
+.highlight__toolbar + pre {
+  margin-top: 0;
+  /* ヘッダー行が上の余白を兼ねるので、上 padding は控えめにする。
+     以前は <code> 直後の改行由来の空行が上余白を足していたが、
+     出力側の修正(#254)で無くなったため、そのぶんここで少し広げる */
+  padding-top: 0.75em;
+}
+/* RUN の出力欄: 入力欄の pre と出力欄(ヘッダー行+pre)を密着させて
+   1つのブロックに見せる(js/run.js が付与)。境には 2px だけ白を挟み、
+   出力欄のヘッダー(「実行結果」タブ+COPY)が入力欄の枠に貼り付いて
+   見えないよう区切る */
+.highlight--with-output {
+  margin-bottom: 0;
+}
+.highlight__toolbar--attached {
+  margin-top: 2px;
+}
+
+/* ツールバー右端のボタン置き場。ボタン間の隙間のカーソル形状と
+   選択不可はここが引き受ける */
+.highlight__button-group {
+  margin-left: auto;
+  cursor: default;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* for RUN (js/run.js, statichtml --run-ruby-wasm)。
+   ヘッダー行の灰色に埋没しないよう、白背景+枠線でボタンらしくする */
+.highlight__run-button {
+  margin: 0 0.5em 0.25em 0;
+  padding: 0.25em 0.5em;
+  background-color: #fff;
+  cursor: pointer;
+  border: 1px solid #999;
+  border-radius: 4px;
+  font: inherit;
+}
+.highlight__run-button:hover {
+  background-color: #EE8;
+}
+.highlight__run-button[disabled] {
+  background-color: #070;
+  border-color: #070;
+  color: white;
+  cursor: wait;
+}
+.highlight__run-output {
+  width: 100%;
+  box-sizing: border-box;
+  background-color: #f2f2f2;
+  margin-top: 0;
+  white-space: pre-wrap;
+}
+.highlight__run-output--error {
+  color: #a00;
+}
+pre.highlight.ruby[data-editing="true"]:focus-within {
+  outline: auto;
+}
+/* 編集時は code をブロック化して pre の内容幅いっぱいをクリック・
+   編集対象にする(内容の外側のクリックは js/run.js が code に
+   フォーカスを移す) */
+pre.highlight.ruby[data-editing="true"] > code {
+  display: block;
+}
+pre.highlight.ruby[data-editing="true"] > code:focus {
+  outline: none;
 }
 
-/* for COPY */
+/* for COPY(highlight__button-group の中に入る)。RUN と同じ見た目 */
 .highlight__copy-button {
-  float: right;
-  margin: 0 -1.1em 0.25em 0.5em;
+  display: inline-block;
+  margin-bottom: 0.25em;
   padding: 0.25em 0.5em;
-  background: #DDD;
-  opacity: 0.75;
+  background: #fff;
   cursor: pointer;
+  border: 1px solid #999;
+  border-radius: 4px;
 }
 .highlight__copy-button:hover {
   background: #EE8;
-  opacity: 1;
 }
 .highlight__copy-button::after {
   content: "COPY"
 }
 .highlight__copy-button.copied {
   background: #070;
+  border-color: #070;
   color: white;
 }
 .highlight__copy-button.copied::after {
@@ -162,13 +273,23 @@ pre.highlight {
   left: -1000px;
 }
 
-pre .caption {
-    position: absolute;
-    top: 0;
-    left: 0;
-    padding: 0.2em;
-    background: #ddd;
-    border-width: 0 1px 1px 0;
+/* サンプルコードのキャプション。pre の上に密着したタブとして表示する
+   (上だけ角丸でタブらしく)。script.js がツールバー行の左端に取り込む。
+   下のコード部分と同じ背景色にして「つながったタブ」に見せる(ヘッダー
+   行のほうがひと段暗いので埋没しない) */
+.caption {
+    display: inline-block;
+    padding: 0.2em 0.5em;
+    background: #f2f2f2;
+    margin: 1em 0 0;
+    border-radius: 6px 6px 0 0;
+}
+/* JS 無効時など、ツールバー化されず pre の直前に残った場合の密着 */
+.caption + pre {
+    margin-top: 0;
+}
+.highlight__toolbar > .caption {
+    margin: 0;
 }
 
 blockquote {
@@ -248,10 +369,13 @@ td.signature {
 td.signature a {
     display: block;
     padding: 0.3em;
-    height: 100%;
     box-sizing: border-box;
 }
 
+td.signature a:only-child {
+    height: 100%;
+}
+
 td.description {
     padding: 0.3em;
     background-color: #EEE;
@@ -360,10 +484,13 @@ hr {
 }
 
 .class-toc > li {
+    display: inline-block;
     padding-left: 1em;
     text-indent: -1em;
     word-break: break-all;
     break-inside: avoid;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 @media print {
@@ -395,6 +522,23 @@ hr {
  right: 10px;
 }
 
+/* EOL 警告バナー(statichtml --eol-warning、body の先頭に入る)。
+   #rurema-topbar と同じく負マージンで body の余白(上 20px・左右 2%)を
+   突き破って全幅にする。下マージン 20px は直後の topbar の margin-top -20px と
+   相殺され、topbar がバナーの真下に密着する(バナーが無いページでは
+   topbar 自身の負マージンが従来どおり body の余白を打ち消す) */
+.eol-warning {
+    background-color: #aa3333;
+    color: white;
+    padding: 0.4em 2%;
+    margin: -20px -2% 20px;
+}
+
+.eol-warning a {
+    color: white;
+    text-decoration: underline;
+}
+
 @media only screen and (max-width:425px) {
     table.entries tr {
         display: block;
@@ -414,3 +558,31 @@ hr {
         overflow-wrap: break-word;
     }
 }
+
+/* CC BY ロゴ画像はデフォルトの vertical-align: baseline だと下に文字の
+   ディセンダ分の隙間ができ、横のリンクより浮いて見える上、リンクの
+   ホバー背景がその隙間ぶん右・下にはみ出して見える。画像を a 要素の
+   下端に揃えて解消する */
+#footer img {
+    vertical-align: bottom;
+}
+
+/* CC BY ロゴと無関係な「フィードバックを送る」リンクが近すぎるので、
+   ひと呼吸あける */
+#feedback-link {
+    margin-left: 0.5em;
+}
+
+/* since/until バージョンバッジ(bitclust#132 P3)。地の文から浮かないよう
+   リンク色(#33a)や EOL バナー(#aa3333)と同系統の抑えた配色にする */
+span.method-since-badge,
+span.method-until-badge {
+    display: inline-block;
+    margin-left: 0.6em;
+    padding: 0 0.6em;
+    border-radius: 1em;
+    font-size: 75%;
+    font-weight: normal;
+}
+span.method-since-badge { background-color: #e6f2e6; color: #2d6a2d; }
+span.method-until-badge { background-color: #f7e6e6; color: #aa3333; }

data/theme/default/syntax-highlight.css

@@ -8,6 +8,14 @@
   color: #999999;
   font-weight: bold;
 }
+.highlight .cpf { /* preprocessor file (C の #include <...> など。Rouge 用) */
+  color: #999999;
+  font-weight: bold;
+}
+.highlight .pi { /* YAML などの indicator (Rouge 用) */
+  color: #999999;
+  font-weight: bold;
+}
 .highlight .c1 {
   color: #999988;
   font-style: italic;

data/theme/lillia/style.css

@@ -11,6 +11,9 @@ body {
     margin-left: 2%;
     margin-right: 2%;
     line-height: 1.3;
+    /* 和文と欧文の間に自動で空きを入れる。プログレッシブエンハンスメント
+       (未対応ブラウザでは無視される) */
+    text-autospace: normal;
 }
 
 address {
@@ -157,6 +160,9 @@ td.signature a {
     display: block;
     padding: 0.3em;
     width: 95%;
+}
+
+td.signature a:only-child {
     height: 100%;
 }
 
@@ -173,10 +179,34 @@ td.library {
     border: 3px solid white;
 }
 
-code {
+code, tt {
     font-family: monospace;
 }
 
+/* コード内では和欧文間の自動スペースを入れない */
+code, pre, tt {
+    text-autospace: no-autospace;
+}
+
+/* 地の文中のインラインコード(<code>, <tt>)に淡い背景を敷いて、地の文との
+   区別をはっきりさせる。色は pre の背景(#eee)と同系統だが、それより少し
+   薄くして地の文中では主張しすぎないようにする */
+code, tt {
+    background-color: #f5f5f5;
+    padding: 0.1em 0.3em;
+    border-radius: 3px;
+}
+
+/* pre の中の code/tt は pre 自体がブロックとして背景色を持つため、上の
+   ルールをここで打ち消して二重に背景・パディングがつかないようにする
+   (pre 内の見た目は従来どおり) */
+pre code,
+pre tt {
+    background-color: transparent;
+    padding: 0;
+    border-radius: 0;
+}
+
 a {
     font-weight: bold;
     text-decoration: none;
@@ -273,6 +303,20 @@ hr {
   float: right;
 }
 
+/* since/until バージョンバッジ(bitclust#132 P3)。他の配色(リンク #33a)
+   から浮かないよう抑えた配色にする */
+span.method-since-badge,
+span.method-until-badge {
+  display: inline-block;
+  margin-left: 0.6em;
+  padding: 0 0.6em;
+  border-radius: 1em;
+  font-size: 75%;
+  font-weight: normal;
+}
+span.method-since-badge { background-color: #e6f2e6; color: #2d6a2d; }
+span.method-until-badge { background-color: #f7e6e6; color: #aa3333; }
+
 .method-description{
   padding-bottom: 10px;
   margin-bottom: 90px ;