generated at
settings

白いScrapbox コンセプト
白を基調としたデザイン
ページタイトルを強調する
文字を大きくする
文字詰めする
行間を広くとる
本文の左右に余白を入れる

いくつかのおまけ
ヘッダー固定 標準化したので style.css から削除
プロジェクトタイトルをヘッダーに移動するスタイルはそのまま残した
検索ボックスを右寄せ
プロジェクトTOPへのリンクをヘッダーに移動
本文の終わりの位置にテキストを追加
白基調になったことで、本文と関連リンクの境目が見えにくくなったため
拡張装飾記法
見出しっぽい [#* 見出しっぽい]

とりあえず使ってみたい人向け
自分のページに以下コピペ
※ほかのスタイル定義より前に置いてね
style.css
@import "/api/code/madobes/settings/style.css";

補足のような備忘録のような
失敗した話

style.css
/* 白っぽくするためのスタイル定義 */ body, .page { background-color: #fff; box-shadow: unset } .navbar-default { background-color: rgba(255,255,255,.7) } .navbar-default:hover { background-color: rgba(245,245,245,.9) } .search-form .form-group input { border: 1px solid rgba(0,0,0,.13) } .search-form .form-group button { color: rgba(0,0,0,.13) } .navbar-default .visible-xs .navbar-form { border-color: rgba(0,0,0,.067) } .navbar .navbar-menu>li>a.mobile-search-toggle { color: rgba(0,0,0,.33) }

style.css
.navbar-form .dropdown.open .dropdown-menu { min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }

不要になってた & ページ一覧の翻訳ボタンと干渉してたので削除 2024-04-20
style_.css
/* プロジェクトTOPへのリンクと周辺パーツを強引にヘッダーエリアに移動 */ @media screen and (min-width: 768px) { .quick-launch { position: fixed; top: 0; left: calc((100% - 1080px)/2); z-index: 1001 } .page { padding-top: 0 } } @media screen and (min-width: 768px) and (max-width: 1200px) { .quick-launch { left: 80px } }

標準で固定されるようになったため以下のスタイルは不要 2021-06-12
style_.css
/* はりつくメニューバー */ @media screen and (min-height: 600px) and (min-width: 768px) { .app:not(.presentation) { padding-top: 90px; padding-right: 0 !important } .app:not(.presentation) .page-menu { position: fixed; top: 90px } .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset } .dropdown.open .dropdown-menu { position: absolute; left: auto; top: auto; max-height: calc(100vh - 100px); overflow-y: auto } .dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px } .page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 } }

テロメアの存在感が薄すぎたので濃くしてみた 2021-07-16
テロメアとページメニューの位置を調整 2021-07-19
style.css
/* テロメアとページメニューを脇に寄せて本文を広く見せる */ @media screen and (min-width: 1200px) { .line .telomere .telomere-border { left: calc((100% - 960px)/2 - 120px) } .app:not(.presentation) .page-menu { text-align: right; width: calc(100% - 20px) } } /* テロメアの存在感を薄くする */ .line .telomere .telomere-border:not(:hover) { opacity: .4 } .line .telomere .telomere-border.unread:not(:hover) { opacity: .3 } /* 本文の最後にテキスト挿入 */ .app:not(.presentation) .page::after { content: '本文はここで終わっている'; display: block; margin-top: 5rem; padding: 1rem 0; text-align: center; border: solid rgba(0,0,0,.2); border-width: 1px 0; font: 500 normal 1.8rem/1 sans-serif } .app:not(.presentation) .page.not-persistent::after { content: '本文は書かれていない' } @media screen { /* 本文のフォント設定: 文字サイズ */ .app:not(.presentation) .editor { font-size: 130% } /* 本文のフォント設定: 文字詰め */ .line .text:not(.code-block) { font-feature-settings: "pkna" } /* 本文のフォント設定: 行間 */ .app:not(.presentation) .line .text:not(.code-block) { line-height: 2.1 } .line .indent-mark .dot { top: calc(100% - .2em) } /* ページタイトルのフォント設定と罫線 */ .app:not(.presentation) .line.line-title .text { font-size: calc(1.2vw + 2rem); font-weight: 600; line-height: 1.2 !important; border-bottom: 1px solid rgba(0,0,0,.2); padding-bottom: 1rem } } /* カード型ページリンクの枠 */ .grid li.page-list-item a { border: 1px solid rgba(0,0,0,.14) } .grid li.page-list-item a .header { border-top: unset } /* 拡張装飾記法 [#* 見出しっぽい太字テキスト] */ .level .deco-\# { border-left: .6em solid #ffcfc6; padding-left: .7rem }