トップページでピン留めしたページを小さく表示する

トップページでピン留めしたページを小さく表示する

code:style.css

.page-list > .grid li.pin {

height: 32px;

width: 100%;

margin-bottom: 5px;

}

@media (hover: none) {

/* ピン留めするカードの数が偶数である限りは秩序が保たれる脆弱なCSS */

.page-list ul.grid {

grid-template-columns: repeat(6, 1Fr);

}

.page-list > .grid li.pin {

grid-column: 2 span;

}

.page-list > .grid li:not(.pin):nth-child(odd) {

grid-column: 1 / 4;

}

.page-list > .grid li:not(.pin):nth-child(even) {

grid-column: 4 / 7;

}

}

.page-list > .grid li.page-list-item.pin a {

background-color: var(--card-bg);

border-radius: 4px;

margin: none;

box-shadow: none;

}

.page-list > .grid li.page-list-item a .header.pinned {

border-top:none;

padding: 6px 2px;

}

.page-list > .grid li.page-list-item.pin a .title {

font-size: 12px;

font-size: clamp(11px, 3vw, 13px);

color: var(--card-title-color);

max-height: 20px;

text-align: center;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.page-list > .grid li.page-list-item.pin a .content :is(.description,.icon) {display: none;}

.page-list > .grid li.page-list-item a .pin {background: none;}

出典：