前から予告されていた通り #2023/02/23 に[[Obsidian Publish]]のレイアウトに変更のあるアップデートが入った。[[Obsidian]]1.0で大幅に変更されたstyleを[[Obsidian Publish]]にも充てた内容。未来のことを考えるなら良いアップデートだが、[[Obsidian]]本体のテーマアップデートでもあったように破壊的変更のリスクが生じる。
今回は[[Minerva]]に発生したデグレを調査し、解消してみた。未発見のものもあると思うので、閲覧者に支障をきたすようなもの、目についたものに限って修正した。あとは見つけ次第修正する形で。
以下はその記録である。使っているテーマは[[Solarized for Obsidian]]である。
## ページの横幅が崩れる
![[Pasted image 20230223115843.png|frame-verticle]]
以下の[[CSS]]を削除する。
```css
/* 横幅をObsidian Previewにあわせる */
.site-body-center-column {
flex: 0 1 800px !important;
}
```
## [[コールアウト]]が表示されない
[[📰Obsidian v1.0#✅ Callout が Reading view で表示されない]] と同じ状況。
`.theme-light`に以下を追加。
```css
.theme-light {
--highlight-mix-blend-mode: darken;
}
```
ついでに以下も。
```css
.theme-light {
--link-decoration: none;
--link-unresolved-opacity: 0.4;
}
```
## 見出しがなんか違う
線の太さとか、間隔とか。
![[Pasted image 20230223120410.png|frame]]
[[Obsidian Publish]]用の定義を追加。
```css
.published-container .markdown-rendered h1,
.published-container .markdown-rendered h2 {
border-bottom: 2px solid var(--background-modifier-border);
padding-bottom: 0.2em;
}
```
## タイトルの文字がでかすぎる
[[Obsidian Publish]]用の[[カスタムプロパティ (CSS)|カスタムプロパティ]]を定義する。
```css
.published-container {
--page-title-size: 2.0em;
}
```
## モバイルだと右側が欠ける
![[Pasted image 20230223125943.png|300x600]]
以下は横幅ぴったり。
```css
<div class="markdown-preview-view markdown-rendered node-insert-event">
```
以下がはみ出てる。
```css
<div class="markdown-preview-sizer markdown-preview-section" style="padding-bottom: 0px;">
```
以下の[[CSS]]が原因。サイドバーが表示されているときはこのスタイルが必要だけど、サイドバーが出ていないmobileのレイアウトでも`margin-right`が効いてしまっている。
```css
.published-container.is-readable-line-width:not(.has-navigation).has-graph .publish-renderer > .markdown-preview-view > .markdown-preview-sizer, .published-container.is-readable-line-width:not(.has-navigation).has-outline .publish-renderer > .markdown-preview-view > .markdown-preview-sizer {
margin-right: calc((100vw - var(--page-width) + var(--sidebar-right-width)) / 2);
}
```
デスクトップの場合
- `100wv: 1920px`
- `--page-width: 800px`
- `--sidebar-right-width: 300px`
なので `(1920 - 800 + 300) / 2`。コンテンツが中央に表示されるとナビゲーションバーが重なってしまい、左にずらすためこの値を使っている。
計算式が複雑で意図も正確には読み取れなかったため、モバイル端末の場合は一律でmarginを0にする。[[Minerva]]を表示するだけであれば、これで問題ないはず...。
```css
/** モバイルのスマホで右側が欠ける問題の応急処置 **/
@media screen and (max-width: 800px) {
.published-container.is-readable-line-width:not(.has-navigation).has-graph .publish-renderer > .markdown-preview-view > .markdown-preview-sizer, .published-container.is-readable-line-width:not(.has-navigation).has-outline .publish-renderer > .markdown-preview-view > .markdown-preview-sizer {
margin-right: 0;
}
}
```
## モバイル版だとサイトフッターが邪魔
![[Pasted image 20230223133042.png|frame]]
デスクトップ版なら邪魔にならないが、流石にこれはコンテンツのクオリティに直結するので厳しい。モバイルの場合のみ非表示にする。
```css
@media screen and (max-width: 800px) {
.site-footer {
display: none;
}
}
```