settings
目次
---
ページの見た目
code:style.css
.line .image {
max-width: 100%;
max-height: none;
}
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% } /* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden } .line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em } 記法追加
警告記法
code:style.css
/* 警告表記を使えるようにする */
.deco-\! {
color: var(--warning-text-color);
background-color: var(--warning-bg);
padding: 1px 2px;
border-radius: 1px;
/* 単色の赤色背景に変更 */
background-color: var(--warning-bg);
}
ネタバレ防止記法
これは見本です
code:style.css
.deco-\~:not(:hover) {
filter: blur(4px);
}
.cursor-line .deco-\~:not(:hover) {
filter: none;
}
code:style.css
&{
display: flex;
align-items: center;
text-align: center;
}
&:not(.cursor-line):after{
flex-grow: 1;
content: "";
}
&:not(.cursor-line){
height:28px;
}
}
display:none;
}
}
---
ホームの見た目
カードデザイン
code:style.css
ul.grid {
& li.page-list-item {
/* ------------------------- */
/* 特殊ページ */
/* ------------------------- */
/* タグに応じたCSS */
.header {
display: none;
}
img {
position: absolute;
object-fit: contain;
height: 100%;
inset: 0;
border-radius: 4px;
}
}
}
}
/* ピンされたページの次の非ピンページの配置調整 */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
ハッシュタグの見た目をよくする
code:style.css
color: var(--assort-color);
background-color: var(--main-color);
padding: 4px 6px;
border: 1px solid currentColor;
border-radius: 4px;
font-size: 0.9em;
}