settings
constants
code:style.css
body {
--heading-decoration-color: #745B80; /* 小見出し左の疑似要素 */ --emphasis-undeline-color: yellow; /* これの下線 */
--pinned-page-background-color: #7475AE; --serif-font: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
参考
見出し
[* これ] を使う
level1 は strong のままで、 level2 を小見出しっぽくする
code:style.css
.level-1 {
background: linear-gradient(transparent 60%, var(--emphasis-undeline-color) 60%);
}
code:style.css
.line strong.level-2 {
display: block;
position: relative;
padding-left: 16px;
}
.line strong.level-2:before {
content: '';
position: absolute;
width: 5px;
height: 100%;
top: 0;
left: 0;
background: var(--heading-decoration-color);
}
引用をいい感じにする
課題
iPhone 表示でダッシュがつながらないので、フォントをいじる必要がある #wip code:style.css
.line .quote {
border-left: 2px solid black;
padding-left: 1.2em;
}
.line .quote i {
}
.line .quote .deco-\/::before {
content: '―― ';
font-family: var(--serif-font);
}
引用をいい感じにする
出典もいい感じにする
リンク
code:style.css
/* 様子見
.line a:is(.page-link):not(.empty-page-link) {
color: black;
text-decoration: none;
background-image: linear-gradient(transparent 50%, black 50%);
background-position: left bottom;
background-size: 10px 1px;
background-repeat: repeat-x;
}
.line a:is(.empty-page-link) {
text-decoration: none;
background-image: linear-gradient(transparent 50%, orange 50%);
background-position: left bottom;
background-size: 10px 2px;
background-repeat: repeat-x;
}
*/
アイコン
アイコンを丸くするlemonadern.icon
code:style.css
.line img.icon {
border-radius: 50%;
top: -0.1em;
margin: 2px;
}
ルビを振れるようにする
code:style.css
/* <ruby>相当 */
.line:not(.cursor-line) .deco-\# {
display: inline-flex;
flex-direction: column-reverse;
vertical-align: bottom; /* Chrome 108で表示が乱れる場合の対応 */
}
/* <rb>相当 */
.line:not(.cursor-line) .deco-\# > span:nth-child(1) {
display: inline-flex;
justify-content: space-around;
width: 100%;
}
/* <rt>相当 */
.line:not(.cursor-line) .deco-\# > span:nth-child(2) {
line-height: 0;
font-size: 50%;
}
/* <rt>相当 */
.line:not(.cursor-line) .deco-\# > span:nth-child(2) > a {
display: inline-flex;
justify-content: space-around;
width: 100%;
pointer-events: none;
}