ピン留めを小さなパネルにするUserCSS
イメージ図
UserCSSは一から書いたけど、この発想は誰かのScrapboxのページを読んで見つけた
たしか、「ピン留めされているページは普段はあまり見ないから……」みたいな動機で実装していた
誰だったか……
試しにやってみまふか
ありがとうございます！めっちゃ見やすくなって良いですね👍
課題としては、ピン留め小パネルのサイズを自動調整する
2024/04/22〜妥協バージョン
妥協した点
ピン留めカードの間の隙間が広くなった
.pin の値を持つ要素だけgapを変える仕方がわからないスマホの場合、ピン留めの数によっておかしな見た目になることがある
style.css .grid li.pin {
height: 32px;
width: 100%;
margin-bottom: 5px;
}
@media (hover: none) {
/* ピン留めするカードの数が偶数である限りは秩序が保たれる脆弱なCSS */
.page-list ul.grid {
grid-template-columns: repeat(6, 1Fr);
}
.grid li.pin {
grid-column: 2 span;
}
.grid li:not(.pin):nth-child(odd) {
grid-column: 1 / 4;
}
.grid li:not(.pin):nth-child(even) {
grid-column: 4 / 7;
}
}
.grid li.page-list-item.pin a {
background-color: var(--card-bg);
border-radius: 7px;
margin: none;
box-shadow: none;
}
.grid li.page-list-item a .header.pinned {
border-top:none;
padding: 6px 5px;
}
.grid li.page-list-item.pin a .title {
font-size: 12px;
color: var(--card-title-color);
max-height: 20px;
text-align: center;
}
.grid li.page-list-item.pin a .content :is(.description,.icon) {display: none;}
.grid li.page-list-item a .pin {background: none;}style.css/* ピン留めされてるカードの段を分ける */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}2022/11/26解除したバージョン
style.css.grid li.pin {
height: 32px;
width: 10em;
margin-right: 5px !important;
margin-bottom: 5px;
}
@media screen and (max-width: 768px) {
.grid li.pin {
width: 9em;
}
}
.grid li.pin a {
background-color: var(--card-bg) !important;
width: inherit !important;
border-radius: 7px;
height: inherit !important;
margin: none !important;
box-shadow: none !important;
}
.grid li.pin .header {
border-top:none !important;
padding: 6px 5px !important;
}
.grid li.pin .title {
font-size: 12px !important;
color: var(--card-title-color) !important;
max-height: 20px !important;
text-align: center !important;
}
.grid li.pin .content :is(.description,.icon) {display: none !important;}
.page-list-item a .pin {background: none !important;}style.css.grid li.pin {
height: 30px !important;
width: calc(10em - 15.4px) !important;
margin: 0 1px 1px 0 !important;
}
.grid li.pin a {
background-color: #fefedd !important;
margin: none !important;
box-shadow: none !important;
}
.grid li.pin .header {
border-top:none !important;
padding: 5px 10px !important;
}
.grid li.pin .title {
font-size: 0.8em !important;
max-height: 20px !important;}
.grid li.pin .content :is(.description,.icon) {display: none !important;}
.page-list-item a .pin {background: none !important;}style.css/* ピン留めされてるカードの段を分ける */
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}style.css.grid li.pin {
height: 30px !important;
width: calc(10em - 15.4px) !important;
margin-right: 1px !important;
margin-bottom: 5px;
}
.grid li.pin a {
background-color: var(--card-bg) !important;
width: inherit !important;
border-radius: 7px;
height: inherit !important;
margin: none !important;
box-shadow: none !important;
}
.grid li.pin .header {
border-top:none !important;
padding: 5px 5px !important;
}
.grid li.pin .title {
font-size: 10px !important;
color: var(--card-title-color) !important;
max-height: 20px !important;
text-align: center !important;
}
.grid li.pin .content :is(.description,.icon) {display: none !important;}
.page-list-item a .pin {background: none !important;}style.css/* ピン留めされてるカードの段を分ける */
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}このスタイル設定には元ネタがあったはずなので、見つけたい