/noratetsu/_CSS_Grid-md - Scrapbox Reader

generated at 2/16/2025, 8:40:46 PM
_CSS_Grid-md
UserCSS設定のための管理者用ページです。
グリッドサイズを中サイズにした時の挙動をリストビュー風に変更。
説明→●グリッドサイズ変更でビューを変えるようにした

万が一参考にしたいとお考えの方がいらっしゃる場合、私のCSSではなく、これのために参考にした元のプロジェクト/katolab様をご参照ください。（大規模に改造していますが元はこちらです）
（は手探りでやっているので適切でない記述がたくさん紛れている可能性があります。）

●ページ一覧での左右余白を変数で整理する
style.css@media screen and (min-width: 1261px) {
   :root {--margin-side: calc(50vw - 592px);}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
    :root {--margin-side: 38px;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    :root {--margin-side: 23px;}
}
@media screen and (max-width: 767px) {
    :root {--margin-side: 8px;}
}

style.css.page-list .grid.grid-md li.page-list-item {
    width: unset;
    height: unset;
    margin: 0;
} 
.page-list .grid.grid-md li.page-list-item a {
    width: calc(50vw - var(--margin-side));
    border-radius: 0;
    background: none;
    background-image: none !important;
    background-color: var(--card-bg, #fff); 
    box-shadow: none;
}
.page-list .grid.grid-md li.page-list-item a .title {
   font-size: 14px;
   line-height: 20px;
   -webkit-line-clamp: 1;
}
.page-list .grid.grid-md li.page-list-item a .header {
	border: none;
	padding: 10px 20px;
}
.page-list .grid.grid-md li.page-list-item a .description,
.page-list .grid.grid-md li.page-list-item a .icon {
	display: none;
} 

grid-size-rangeの手前にガイドの文を挿入する
style.css@media screen and (min-width: 768px) { /* PCのみ */
.quick-launch .right-box::before { 
 	position: relative; 
 	white-space: pre;
 	content: 'Change View\AGrid/List/Blog';
    padding: 2px 10px; /* 1行の時は 12px 10px 0px; */
 	font-size: 14px; color: var(--tool-text-color, #363c49);
 }
 }

#_import