/* ============================================================
閲覧画面 本文用スタイル（entry-style.css）
編集画面用は /css/editor-style.css（テーマの admin.html の
@section("editor-css") から読み込み）。
回り込みの見え方は揃えるが、編集用マーカーのラベル表示など
一部は意図的に異なる。
Tailwind バンドル（src/style/main.css）に入れず素のCSSにしているのは、
.clearHidden などが @layer utilities 内では hr に効かないことがあり、
レイヤー外で確実に優先させたいため。
============================================================ */
/* 背景・枠のボックス */
div.bg-gray,
div.border-gray {
padding: 30px;
margin-block: 2em;
}
div.bg-gray {
background-color: #eee;
}
div.border-gray {
border: 1px #ddd solid;
}
/* 内側の余白は padding だけで決める。
中の段落が持つ上下マージンが加わると、上だけ広く下は狭い、
という不揃いになるため、先頭と末尾のぶんを打ち消す。 */
div.bg-gray :first-child,
div.border-gray :first-child {
margin-top: 0;
}
div.bg-gray :last-child,
div.border-gray :last-child {
margin-bottom: 0;
}
/* ------------------------------------------------------------
画像ブロックの回り込み（float）
figure のクラスを :has() で拾い、親 .media-image-block を float。
幅は max-width のみ指定＝画像を拡大しない（小さい画像は原寸のまま）。
本文カラム 808px 基準: 20%≒161px / 33%≒266px / 50%≒404px
回り込み解除はテーマ既存の
を使う。
------------------------------------------------------------ */
.media-image-block:has([class*="float-left-"]),
.media-image-block:has([class*="float-right-"]) {
display: inline-block;
width: auto;
max-width: 50%;
}
.media-image-block:has([class*="float-left-"]) {
float: left;
margin: .25em 1.5em 1.5em 0;
}
.media-image-block:has([class*="float-right-"]) {
float: right;
margin: .25em 0 1.5em 1.5em;
}
.media-image-block:has([class*="float-left-"]) > figure,
.media-image-block:has([class*="float-right-"]) > figure {
margin: 0;
max-width: 100%;
}
.media-image-block:has([class*="float-left-"]) img,
.media-image-block:has([class*="float-right-"]) img {
max-width: 100%;
height: auto;
/* prose（Tailwind Typography）の img { margin-block: 2em } を打ち消す。
これが残ると画像だけ 32px 下がり、本文の1行目と天が揃わない。 */
margin-block: 0;
}
/* float 直後の段落・見出しは上の余白を消して画像と天を揃える。
見出しは padding-top: var(--spacing-unit-top-heading)=32px、
段落は margin-block: var(--unit-margin-top)=1rem を持つため、
そのままだとテキストだけが下がる。
段落は「float が親の先頭にあるとき」だけズレる点に注意。
前に兄弟要素があると、float は out-of-flow なので前後の在フロー要素どうしで
マージンが相殺され、結果的に天が揃ってしまう。先頭のときは相殺相手が無く
margin-top がそのまま効いて 16px 下がる。両方のケースをこの指定で揃える
（相殺が起きるケースでも、前要素の margin-bottom 側が残るためズレない）。 */
.media-image-block:has([class*="float-left-"]) + :is(p, h2, h3, h4, h5, h6),
.media-image-block:has([class*="float-right-"]) + :is(p, h2, h3, h4, h5, h6) {
padding-top: 0;
margin-top: 0;
}
/* float の直前の要素に下余白を持たせる。
このテーマは margin-top だけで余白を作る設計（--unit-margin-bottom: 0）だが、
float の位置は「次要素の margin-top」では動かず「前要素の margin-bottom」で決まる。
上の指定で次要素の margin-top を 0 にしているため、ここで前要素側に余白を
移さないと画像が直前の文章に密着する。前要素の margin-bottom なら
float と後続テキストが一緒に下がるので、天揃えを保ったまま余白を作れる。 */
/* ※ :has() の中に :has() は入れられない（無効セレクタとしてルールごと破棄される）。
「次の兄弟 .media-image-block の子孫に float クラスがある」を
入れ子なしの相対セレクタで表現すること。 */
:is(p, h2, h3, h4, h5, h6, ul, ol, blockquote, table):has(+ .media-image-block [class*="float-left-"]),
:is(p, h2, h3, h4, h5, h6, ul, ol, blockquote, table):has(+ .media-image-block [class*="float-right-"]) {
margin-bottom: var(--unit-margin-top, 1rem);
}
/* 幅バケット（上限だけ変える） */
.media-image-block:has(.float-left-20),
.media-image-block:has(.float-right-20) { max-width: 20%; }
.media-image-block:has(.float-left-33),
.media-image-block:has(.float-right-33) { max-width: 33%; }
.media-image-block:has(.float-left-50),
.media-image-block:has(.float-right-50) { max-width: 50%; }
/* ============================================================
本文のテキストリンク
acms-editor.min.css が青（#006dd9）を当てているが、既定では
色を変えず本文色のままにして、ホバー時だけ他のリンク
（タグ・カテゴリーなどの hover:text-sky-600）と同じ色にする。
下線は判別のため既定から残す。
除外リストは acms-editor.min.css と同じにして、画像リンクなどには
影響させない。 */
.acms-entry a:not(:where(
[class~="not-editor-style"], [class~="not-editor-style"] *,
[class~="media-image-block"], [class~="media-image-block"] *,
[class~="column-image"], [class~="column-image"] *,
[class~="column-media"], [class~="column-media"] *,
[class~="column-eximage"], [class~="column-eximage"] *
)) {
color: inherit;
/* 下線は文字色に連動させて薄くする（text-decoration-color は
文字色と独立して指定できる）。ホバー時は下で濃くする。 */
text-decoration-color: color-mix(in srgb, currentcolor 30%, transparent);
text-underline-offset: 0.15em;
}
@media (hover: hover) {
.acms-entry a:not(:where(
[class~="not-editor-style"], [class~="not-editor-style"] *,
[class~="media-image-block"], [class~="media-image-block"] *,
[class~="column-image"], [class~="column-image"] *,
[class~="column-media"], [class~="column-media"] *,
[class~="column-eximage"], [class~="column-eximage"] *
)):where(:any-link):hover {
color: var(--color-sky-600, #0284c7);
/* ホバー時は下線も文字色と同じ濃さにする */
text-decoration-color: currentcolor;
}
}
/* ============================================================
目次（アウトライン）
本文の前に置かれる場合と、hr.outline の位置へ移設された場合の
どちらでも同じ見た目になるよう、nav 自身に枠を付ける。
移設後は .acms-entry / prose の配下に入るため、
中のリスト・段落の余白は打ち消しておく。
============================================================ */
.entry-outline {
/* 下にも余白を持たせる。次が段落なら段落側の margin-top と相殺されるので
見た目は変わらないが、回り込み画像のように上マージンを持たない要素が
続くときに密着してしまうのを防ぐ。 */
margin-block: var(--unit-margin-top, 1rem);
padding: 1rem 1.25rem;
border: 1px solid var(--color-gray-200, #e5e7eb);
border-radius: var(--radius-md, 0.375rem);
}
/* 目次のリンク。
nav に not-editor-style を付けている関係で本文リンク用の指定からは
除外されるため、ここで個別に当てる。
既定は文字色のまま・下線なし、ホバーで他のリンクと同じ sky-600 ＋ 下線。 */
.entry-outline a {
color: inherit;
text-decoration: none;
}
@media (hover: hover) {
.entry-outline a:hover {
color: var(--color-sky-600, #0284c7);
text-decoration: underline;
text-decoration-color: currentcolor;
}
}
.entry-outline .outline-title {
margin: 0 0 0.5rem;
font-weight: bold;
}
.entry-outline .outline-list {
margin: 0;
padding-inline-start: 1.25em;
}
/* 入れ子（level-2 以降）は少しだけ字下げして詰める */
.entry-outline .outline-list .outline-list {
margin-block: 0.25rem 0;
}
.entry-outline .outline-item {
margin-block: 0.25rem;
padding-inline-start: 0;
}
/* 目次の位置マーカー。
src/js/modules/outline-relocate.js が目次の