新書用UserCSS
https://gyazo.com/095a89407297dc2ba4fd367e40d7865b
読書に集中できるように見やすく、余計なものを排除してみました
code:style.css
@import '/api/code/customize/新書用UserCSS/style.css'
/icons/hr.icon
全体的に色合いを白にする
code:style.css
/* navbarを目立たなくする */
.navbar {
}
body {
background-color: white;
}
ページ内のパーツを、hoverしたら出現するように変更
navbar(上)
page-menu(右)
project-home(左上)
code:style.css
.navbar,
.page-menu,
div.flex-item>span {
opacity: 0;
transition-property: opacity;
transition-duration: 0.6s;
transition-delay: 0.3s;
transition-timing-function: ease;
}
.navbar:hover,
.page-menu:hover,
.flex-item>span:hover {
opacity: 1;
transition-property: opacity;
transition-duration: 0.2s;
transition-delay: 0s;
transition-timing-function: ease;
}
電子書籍っぽくするには幅が広すぎると良くない
code:style.css
.page-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.page {
background-color: white;
box-shadow: none;
width: 90vw;
max-width: 620px;
padding: 0;
margin: 0;
}
テロメアを隠す
code:style.css
.line .telomere .telomere-border {
display: none;
}
フォントの調整
code:style.css
.text {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif !important;
font-size: 18px;
line-height: 36px;
-webkit-font-feature-settings: 'palt' 1;
font-feature-settings: 'palt' 1;
word-wrap: break-word;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-kerning: normal;
font-kerning: normal;
}
.editor .line-title .text {
font-size: 36px;
line-height: 1.5;
letter-spacing: 0.04em;
font-weight: bold;
border-bottom: solid 1px #DDD; padding-bottom: 5px;
margin-bottom: 50px;
}
UserCSS.icon