settings

背景を白ではなく、少し色をつけて目に優しくする

全体的に余白を開けて可読性を増す

あと実験に

code:style.css

/* 全体の色設定 */

body, .page { background-color: rgb(247,247,255); box-shadow: unset; }

.page { padding: 42px 49px 84px; }

.col-page { max-width: 780px; }

.navbar-default { background-color: rgba(255,255,255,.7); border-bottom: none; }

.navbar-default:hover { background-color: rgba(247,247,255,.9); }

.navbar .navbar-brand .icon-arrow-down { display: none; }

.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); }

/* 本文のフォント設定 */

.editor, .stream {

font-family: Roboto, Helvetica, Arial, "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;}

.app:not(.presentation) .line .text:not(.code-block) { line-height: 2.2; }

.line .indent-mark .dot { top: calc(100% - .2em); }

/* テロメアの存在感を薄くする */

.line .telomere .telomere-border:not(:hover) { opacity: .1 }

.line .telomere .telomere-border.unread:not(:hover) { opacity: .3 }

/* テロメアとページメニューを脇に寄せて本文を広く見せる */

@media screen and (min-width: 1200px) {

.line .telomere .telomere-border { left: calc((100% - 1160px)/2 - 4px) }

.app:not(.presentation) .page-menu { right: calc((100% - 1160px)/2 - 4px) }

/* カード型ページリンクの枠 */

.grid li.page-list-item a { border: none; border-top: none; box-shadow: none;}

.grid li.page-list-item a .header { border-top: unset }

/* 行頭ドットを薄く */

.line .indent-mark .dot { background-color: rgba(0, 0, 0, .20) !important; }

/* マーカー */

.deco-\~ {

background: linear-gradient( transparent 65%, rgb(190,227,219) 0% ) !important;

}

.line strong {

font-weight: 600 !important;

}

/* ピンしたページのスタイル */

.grid li.page-list-item a .pin { background-color: transparent; background-image: none }

.grid li.page-list-item a .pin::after {

content: '\f02e'; font-family: 'FontAwesome'; font-size: 20px; color: rgb(190,227,219); bottom: 0;

display: inline-block; }

/* 新規作成ボタン */

.new-button .horizontal-line, .new-button .vertical-line { background-color: rgb(190,227,219); }