settings
code: style.css
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP&display=swap");
.line section-0 line-title section-title{
font-family: "IBM Plex Sans JP";
font-weight: 1000;
}
html,
body,
code,
kbd,
pre,
samp,
.tooltip,
.editor,
.grid li,
.list li.page-list-item,
.popup-menu,
.stream {
font-family: "IBM Plex Sans JP";
font-weight: 1000;
/*ドットを○にする*/
.line .indent-mark .dot {
background: white;
border: 1px solid black;
}
/*行頭に---を入れるだけでセパレーターになる*/
.line:has(span.char-index.c-0data-char="-"):has(span.char-index.c-1data-char="-"):has(span.char-index.c-2data-char="-"){
display: flex;
align-items: center;
&:not(.cursor-line){
height:28px;
&:after{
flex-grow: 1;
content: "";
border-top: 1px solid #afafaf;
}
}
}
.line:not(.cursor-line):has(.c-0data-char="-"):has(.c-1data-char="-"):has(.c-2data-char="-") span.char-index{
&.c-0data-char="-",
&.c-1data-char="-",
&.c-2data-char="-"{
display:none;
}
}
/*ページリストアイテムの画像を全画面に*/
.grid li.page-list-item a .icon img {
position: absolute;
object-fit: cover;
height: 100%;
inset: 0;
border-radius: 4px;
}
/*タイトル*/
.grid li.page-list-item a .title {
position: relative;
z-index: 1;
color: black; /* 文字の色を白にする */
background-color: rgba(255, 255, 255, 1); /* 半透明の黒い背景 */
padding: 0.05em 0.2em; /* 文字の周りの余白 */
border-radius: 3px; /* 角を少し丸める */
display: inline-block; /* 背景が文字の幅でぴったりになるように */
}
/* 通常時（カーソルが乗っていないとき）は白黒 */
.grid li.page-list-item a .icon img {
filter: grayscale(40%);
transition: filter 0.5s ease; /* 変化を滑らかにするため */
}
/* カーソルが乗ったときに元の色に戻す */
.grid li.page-list-item a:hover .icon img {
filter: grayscale(0%);
transition: filter 0.5s ease;
}
/*ページリストの大きさ*/
:is(.page-list, .related-page-list) ul.grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--grid-gap);
grid-auto-flow: row;
}
ul.grid .header {
border-top: none;
padding: 12 12 12px;
}
/*特定のタグが付いたピン留め済みカードを大きくする */
.page-list-item.pindata-page-links*="'_big'" {
grid-column: span 2;
grid-row: span 2;
}
body {
background-color: white;
}
.telomere {
display: none;
}
/* _bigタグが付いたピン留め済みカードを一番上に持ってくる */
.page-list-item.pindata-page-links*="'_big'" {
order: -1;
}
/* カード一覧が表示される全体の幅を広げる */
.page-list {
max-width: 200%;
}
.line:not(.cursor-line) .deco-\~:not(:hover) { filter: blur(3px); }