settings
よくわからないので色々な人のを引っ張ってきてます
ピン留めされたページを独立した段に表示する
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1 !important;
}
ピンの装飾を消す
code:style.css
.grid li.page-list-item a .pin {
background-color: transparent; background-image: none
}
ul.grid li.page-list-item a:hover {
box-shadow: none !important;
border-bottom: none !important;
}
ページリストの調整
code:style.css
.page-list-itemdata-page-links*="'favorite'",
.stream .pagedata-page-links*="'favorit'" {
grid-row-start: span 2;
}
これ横2つ分だけ使ってグリッドを長方形するのだけうまくいかない
カーソルを点滅させる
code:style.css
@keyframes blink {
0% { opacity: 0; }
49% { opacity: 0; }
50% { opacity: 1; }
}
.cursor {
animation: blink 1s infinite
}
code:style.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: rgba(173,173,173,.55) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
code:style.css
ul.grid {
& :is(.page-list, .related-page-list) & li.page-list-item {
margin: 0;
}
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
.page-list & li.page-list-item {
height: 160px;
width: 160px;
aspect-ratio: auto;
grid-column: span 1;
grid-row: span 1;
&data-page-links*="'favorite'":not(data-page-links*="'prof'"):not(data-page-links~="'_'"):not(.pin) {
grid-column: span 2;
width: auto;
}
&data-page-links~="'prof'" {
grid-column: span 2;
grid-row: span 2;
width: 330px;
height: auto;
aspect-ratio: 1 / 1;
}
}
}
.page-list-itemdata-page-links*="'private'",
.stream .pagedata-page-links*="'private'" {
display: none;
}
code:style.css
.navbar .project-home::after {
background-image: url(https://count.getloli.com/@sorutrt-scrapbox?name=sorutrt-scrapbox&theme=original-new&padding=5&offset=0&align=top&scale=0.4&pixelated=1&darkmode=0);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
content: "";
display: block;
height: 40px;
margin-left: 20px;
width: 90.6px;
top: 100px;
}
スマホ対応
code:style.css
/*ページリスト設定*/
@media screen and (max-width: 768px) {
html, body, .page, .content {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
}
@media screen and (max-width: 768px) {
.page-list ul.grid, {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
grid-auto-rows: 100px;
}
.page-list ul.grid > .page-list-item {
grid-column: auto !important;
grid-row: auto !important;
width: auto !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
}
}
@media screen and (max-width: 768px) {
:is(.page-list, .related-page-list) ul.grid {
grid-auto-flow: row !important;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px !important;
}
}
@media screen and (max-width: 768px) {
:is(.page-list, .related-page-list) ul.grid > li.page-list-item.pin + li.page-list-item:not(.pin) {
grid-column-start: 1 !important;
}
}
@media screen and (max-width: 768px) {
.links-container {
width: 95% !important;
}
}
@media screen and (max-width: 768px) {
.container, .row, .col-page {
width: 95% !important;
}
.row {
height: auto !important;
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.app {
padding-top: 0px !important;
}
}
@media screen and (max-width: 768px) {
.container {
padding-top: 80px !important;
}
}
@media screen and (max-width: 768px) {
.page-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
}
@media screen and (max-width: 768px) {
.page-list-itemdata-page-links~="'spacer_1'",.page-list-itemdata-page-links~="'spacer_2'",.page-list-itemdata-page-links~="'spacer_3'",.page-list-itemdata-page-links~="'spacer_4'",.page-list-itemdata-page-links~="'spacer_5'" {
display: none;
}
}
@media screen and (max-width: 768px) {
.related-page-list .links-container {
gap: 30px;
}
}
/*ページ内設定*/
@media screen and (max-width: 768px) {
.line:not(.cursor-line).image-line-2 .image, .line:not(.cursor-line).image-line-2 .strong-image {
max-width: 49.2%;
}
}
@media screen and (max-width: 768px) {
.line:not(.cursor-line).image-line-3 .image, .line:not(.cursor-line).image-line-3 .strong-image {
max-width: 32.33%;
}
}
@media screen and (max-width: 768px) {
.iframe-video-player iframe {
max-height: 50vw;
}
}
@media screen and (max-width: 768px) {
.lines, textarea, contenteditable="true", .editor textarea, .editor contenteditable="true", .text-input {
font-size: .8em !important;
}
}
@media(max-width: 768px) {
.brand-icon{
display: block;
width: 30px;
height: 30px;
pointer-events: auto;
}
}
@media(max-width: 768px) {
.page-list-itemdata-page-title="アクセスカウンタ":not(.related-page-list .page-list-item) {
grid-column: span 1 !important;
width: auto !important;
order: -1 !important;
& .title {
display: none;
}
& a .icon img {
width: 100% !important;
object-fit: contain;
}
}
}
@media(max-width: 768px) {
& .col-page {
transform: translateX(0px)
}
& .page-list::before {
display: none;
}
& .expandable-menu {
display: none;
}
& .expandable-menu-margin {
display: none;
}
& .app .line .indent-mark .dot {
margin-top: 0.1em;
right: 4.5px;
}
}