settings
全体的に色合いを白にする
code:style.css
/* navbarを目立たなくする */
.navbar {
}
body {
background-color: white;
background-size: 7%;
}
/*
.line {
text-align: center;
}
*/
/*
.line *:not(img){
display: block;
margin-left: 0;
}
*/
.imagex { /* 画像をセンタリングしたいのだけど */
display: block;
margin: 0 auto;
margin-left: auto;/*これでもOK*/
margin-right: auto;/*これでもOK*/
}
ページ内のパーツを、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: 80vw;
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;
}
code:style.css
){kind=link}
){kind=link}
){kind=link}