settings
カードのアスペクト比を5:3.2にする
code:style.css
.container {
max-width: 1304px !important;
}
/* スマホ：2列固定 */
.page-list .grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
/* PC（600px以上）：最小200pxで最大列数を自動調整 */
@media (min-width: 600px) {
.page-list .grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
}
}
/* 幅はグリッドに任せ、アスペクト比で高さを自動算出 */
.page-list .grid li.page-list-item {
width: auto !important;
height: auto !important;
aspect-ratio: 5 / 3.2 !important;
flex-shrink: unset !important;
}
一覧表示で画像がカード内に収まるようにする
code:style.css
.page-list .grid li.page-list-item a .icon img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
引用ブロック
code:style.css
.line .quote {
border-left: solid 0px #FFF !important; /* 左罫線をなくす */
}
.line:not(.cursor-line) .quote>.tag {
display: none; /* 行頭の隙間をなくす */
}
deco-.の文字色を背景色と同化させる
code:style.css
:root {
--quote-bg-color: #F2F2F2;
}
not(.cursor-line) .deco-\. {
color: var(--page-bg, #FFF);
}
.cursor-line .deco-\. {
color: #000;
}
.quote-line:not(.cursor-line) .deco-\. {
color: var(--quote-bg-color, #000);
}
.quote-line.cursor-line .deco-\. {
color: #000;
}