/customize/新書用UserCSS

generated at 2/17/2025, 1:02:22 PM
新書用UserCSS


読書に集中できるように見やすく、余計なものを排除してみました

style.css@import '/api/code/customize/新書用UserCSS/style.css'


全体的に色合いを白にする
style.css/* navbarを目立たなくする */
.navbar {
	background-color: #E8E8E8;
}
body {
 	background-color: white;
 }

ページ内のパーツを、hoverしたら出現するように変更
 navbar (上)
 page-menu (右)
 project-home (左上)
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;
}

電子書籍っぽくするには幅が広すぎると良くない
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;
}

テロメアを隠す
style.css.line .telomere .telomere-border {
	display: none;
}

フォントの調整
style.css.text {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif !important;
 	color: #444444;
  	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;
}