ピン留めを小さなパネルにするUserCSS
イメージ図
https://gyazo.com/a09eb0452dabad526de9c29328790b14
UserCSSは一から書いたけど、この発想は誰かのScrapboxのページを読んで見つけた
たしか、「ピン留めされているページは普段はあまり見ないから……」みたいな動機で実装していた
誰だったか……
uvoa.iconこれプロジェクトのCSS設定しないんですかね？便利そうですが。
試しにやってみまふか
ありがとうございます！めっちゃ見やすくなって良いですね👍
2024/04/22〜妥協バージョン
妥協した点
ピン留めカードの間の隙間が広くなった
.pinの値を持つ要素だけgapを変える仕方がわからない久住哲.icon
スマホの場合、ピン留めの数によっておかしな見た目になることがある
https://gyazo.com/d2de1217dd4d2da8200b1ec6b420ee27
code: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;}
code:style.css
/* ピン留めされてるカードの段を分ける */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
2022/11/26解除したバージョン
code: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;}
code: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;}
code:style.css
/* ピン留めされてるカードの段を分ける */
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
code: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;}
code:style.css
/* ピン留めされてるカードの段を分ける */
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
このスタイル設定には元ネタがあったはずなので、見つけたい