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:'';

background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23bee3db%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M184%2C32H72A16%2C16%2C0%2C0%2C0%2C56%2C48V224a8%2C8%2C0%2C0%2C0%2C12.24%2C6.78L128%2C193.43l59.77%2C37.35A8%2C8%2C0%2C0%2C0%2C200%2C224V48A16%2C16%2C0%2C0%2C0%2C184%2C32Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');

background-repeat: no-repeat;

background-size: contain;

width: 3rem;

aspect-ratio: 1;

right: 0;

top: 0;

position: absolute;

display: block;}

/* 新規作成ボタン */

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