settings

https://gyazo.com/8dba0287c5eca8940a6586917e0f53da https://icons8.com/icon/CHLemlqzKl0z/gear

https://78.media.tumblr.com/401d9e6eb916d88ffe742b4aff17b64f/tumblr_neuksrfDJ21qelyl4o1_500.gif

code:style.css

--card-title-bg: transparent;

--card-bg: transparent;

--card-icon-offset-x: 0px;

--card-icon-offset-y: 3px;

}

.grid li.page-list-item a {

/* background: transparent; */

box-shadow: none;

height: max-content;

max-height: 140%;

}

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

/* background: transparent; */

border: none;

}

.grid li.page-list-item a .icon {

position: relative;

margin: auto;

width: calc(128px + var(--card-icon-offset-x) * 2);

height: calc(128px + var(--card-icon-offset-y) * 2);

}

.grid li.page-list-item a .icon img {

width: 128px;

height: 128px;

border-radius: 50%;

animation: fa-spin 1.818s infinite linear;

margin: auto;

position: relative; z-index: 10;

}

.grid li.page-list-item a .icon::after {

content: "";

display: block;

position: absolute;

z-index: 11;

top: 50%;

left: 50%;

width: 16px;

height: 16px;

border-radius: 100%;

transform: translate(-50%, -50%);

}

円盤をカードタイトルの上に表示するCSSが有効な場合は不要

code:style.css

code:dosabled.css

.page-list-item .title {

min-height: 40px;

text-wrap: balance !important;

}

カードのページタイトルを#000にする

テキストのコントラストを上げて視認性を高める

code:style.css

--card-title-color: black;

}

ページタイトルと画像を中央寄せにする

アルバムアートワークが映えるように

画像は、行頭にインデントがあると左寄せになります

https://scrapbox.io/api/pages/cd/settings/icon#.gif

code:style.css

.line.line-title .text,

.stream .page .line-title,

.stream h1,

:where(.page) .line .text:has(img.image, img.strong-image):not(:has(.indent)) {

text-align: center;

text-wrap: balance;

}

画像に影をつける

輪郭を影で縁取ることでアルバムアートの印象を単色背景から分離する

画像にz方向の「厚み」が生じます

code:style.css

body {

--page-image-filter:

drop-shadow(0 0 4px rgba(0, 0, 0, 0.12)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.12)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14));

--page-image-margin: 0.5em 0.5em;

}

.page .line :is(.image, .strong-image) {

filter: var(--page-image-filter);

margin: var(--page-image-margin);

}

ページリストのアルバムアートワークに影をつける

回転するアルバムアートをさらに円盤メディアっぽくする

回転体の輪郭の影が毎フレーム動的に生成されるため

code:style.css

code:disabled.css

.grid li.page-list-item a .icon {

filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.28));

}

ただし、回転をさせないでおく

code:style.css

body .grid li.page-list-item a .icon::before {

content: "";

display: inline-block; position: absolute; z-index: 9;

background-size: contain;

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

background-color: crimson;

top: 0%;

right: calc(0% + var(--card-icon-offset-x));

height: 128px; width: 128px;

border-radius: 50%;

margin: auto;

filter:

invert(100%)

opacity(.3)

drop-shadow(var(--card-icon-offset-x, 0px) var(--card-icon-offset-y, 0px) 4px hsl(0 0% 0% / .28))

drop-shadow(0 0 4px rgba(0, 0, 0, .12))

drop-shadow(0 0 6px rgba(0, 0, 0, .12))

drop-shadow(0 8px 16px rgba(0, 0, 0, .14));

}

カード表示の円盤を上に、ページタイトルを下に

回転速度を下げる（ または完全に静止させる）と"それ" らしきものになる

マウスオーバーされているジャケットの回転が停止するようにしてみるのもよいかもしれない

code:disabled.css

code:style.css

.grid-style-item {

background: var(--card-bg);

}

.grid-style-item .content {

display: flex;

flex-direction: column-reverse !important;

/* align-items: center; */

& > .header {

display: block !important;

text-align: start;

word-wrap: balance;

}

& > .description {

display: block !important;

height: 128px !important;

background: var(--card-bg) !important;

}

& > .icon {

display: block !important;

box-sizing: content-box;

}

}

自転が静止する日 - マウスオーバーでジャケットの回転が止まるようにする

code:disabled.css

code:style.css

.grid li.page-list-item:hover a .icon img {

animation: none;

}

やっつけダークテーマ（要調整）

code:disabled.css

code:style.css

:root {

color-scheme: light dark;

}

@media screen and (prefers-color-scheme: dark) {

& code.highlight {

}

& code.highlight .hljs {

display: block;

overflow-x: auto;

padding: .5em;

}

& code.highlight .hljs-comment,

& code.highlight .hljs-quote {

}

& code.highlight .hljs-keyword,

& code.highlight .hljs-selector-tag,

& code.highlight .hljs-addition {

}

& code.highlight .hljs-number,

& code.highlight .hljs-string,

& code.highlight .hljs-meta .hljs-meta-string,

& code.highlight .hljs-literal,

& code.highlight .hljs-doctag,

& code.highlight .hljs-regexp {

}

& code.highlight .hljs-title,

& code.highlight .hljs-section,

& code.highlight .hljs-name,

& code.highlight .hljs-selector-id,

& code.highlight .hljs-selector-class {

}

& code.highlight .hljs-attribute,

& code.highlight .hljs-attr,

& code.highlight .hljs-variable,

& code.highlight .hljs-template-variable,

& code.highlight .hljs-class .hljs-title,

& code.highlight .hljs-type {

}

& code.highlight .hljs-symbol,

& code.highlight .hljs-bullet,

& code.highlight .hljs-subst,

& code.highlight .hljs-meta,

& code.highlight .hljs-meta .hljs-keyword,

& code.highlight .hljs-selector-attr,

& code.highlight .hljs-selector-pseudo,

& code.highlight .hljs-link {

}

& code.highlight .hljs-built_in,

& code.highlight .hljs-deletion {

}

& code.highlight .hljs-strong {

font-weight: bold

}

& {

--brand-icon-y-first-stop-opacity: 0.3;

--brand-icon-y-last-stop-opacity: 0.6;

--brand-icon-x-first-stop-opacity: 0.2;

--brand-icon-x-last-stop-opacity: 0.3;

--navbar-bg: rgba(55, 59, 68, 0.5);

--search-form-bg: rgba(255, 255, 255, 0.13);

--2hop-search-bg: rgba(255, 255, 255, 0.15);

--card-hover-bg: rgba(0, 0, 0, 0.1);

--card-active-bg: rgba(229, 229, 229, 0.1);

--card-box-shadow: 0 2px 0 var(--card-box-shadow-color);

--card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, 0.23);

--new-button-bg: hsl(227 51% 56% / 1);

--new-button-hover-bg: hsl(227 51% 50% / 1);

--new-button-active-bg: hsl(227 51% 45% / 1);

--page-text-color: rgba(255, 255, 255, 0.87);

--line-title-color: rgba(255, 255, 255, 0.87);

--line-permalink-color: rgba(234, 218, 74, 0.35);

--code-bg: rgba(0, 0, 0, 0.18);

--quote-bg-color: rgba(0, 0, 0, 0.2);

--card-disk-holl-color: var(--card-bg);

}

}

}