settings
プロジェクト全体に適用される css
code:style.css
/* ?? で始まるページをページ一覧画面から消す */
display: none;
}
/* 文中にある ?? を含む page-link を消す */
↓ここには [?? テスト] があるけどゲストからは見えない
↑ここには [?? テスト] があるけどゲストからは見えない
code:style.css
/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.section-title, .code-block-start { counter-reset: codeline }
.code-block code > span:not(class) { counter-increment: codeline } .code-block code > span:not(class)::before { content: counter(codeline);
position: absolute; display: inline-block; left: -4em; z-index: 10;
min-width: 50px; text-align: right; vertical-align: bottom;
/* ↓行番号のフォントとか色とかの指定はここ */
font-family: monospace; color: grey }
/* カーソル行の行番号を濃く表示する */
.code-block code > span:not(class)::before { opacity: .5 } .cursor-line .code-block code > span:not(class)::before { opacity: 1; font-weight: bolder } } code:style.css
/* hover div を消す */
.grid li.page-list-item a .hover {
display: none
}
.grid li.page-list-item a .title {
line-height: 1.2;
max-height: calc(1.2em * 1); /* 1行分 */
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
-webkit-mask-image: linear-gradient(to right, black 80%, transparent);
mask-image: linear-gradient(to right, black 80%, transparent);
}
.grid li.page-list-item a .header:hover .title,
.grid li.page-list-item a .header:focus .title,
.grid li.page-list-item a .header:focus-within .title,
.grid li.page-list-item a .header:active .title {
max-height: 100%;
white-space: normal;
mask-image: unset;
}
code:style.css
max-width: 1500px;
}
/* original は repeat(auto-fill, minmax(147px, 1fr)) */
/* 4倍細かい grid を使う。3:4 みたいな比率が使える */
grid-template-columns: repeat(auto-fit, minmax(36.75px, max-content));
/* ちょっと狭めに表示 */
gap: clamp(8px, 1.5vw, 12px);
/* 中央寄せ風 */
justify-content: center;
li {
grid-row: span 2;
grid-column: span 4;
aspect-ratio: 2/1;
}
li.image {
grid-row: span 4;
grid-column: span 4;
aspect-ratio: 1/1.1;
}
}
code:style.css
ul.grid li.page-list-item a, li.grid-style-item a {
border-radius: 0 0 0 8px;
.icon {
border-radius: 2px 2px 2px 6px;
}
}
project settings で default project theme こと light にしている。
この CustomCSS は prefers-color-scheme: dark なら data-project-theme="default" の各種色を default-dark のスキーマで上書きする
source から持ってきたけど brand-color と navbar-title-color は見当たらなかったので #fff を当てている。
code:style.css
@media(prefers-color-scheme: dark){
@media screen {
}
display: block;
overflow-x: auto;
padding: 0.5em;
}
}
}
code.highlight
.hljs-meta
.hljs-meta-string,
}
}
code.highlight
.hljs-template-variable,
code.highlight
.hljs-class
.hljs-title,
}
code.highlight
.hljs-meta
.hljs-keyword,
}
}
font-weight: bold;
}
--brand-icon-color: #fff; --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);
--navbar-title-color: #fff; --navbar-icon-color: #fff; --search-form-bg: rgba(255, 255, 255, 0.13);
--search-form-icon-color: #fff; --search-form-icon-focus-color: #4a4a4a; --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-description-code-color: #ccc; --card-box-shadow-color: #000; --card-box-shadow: 0 2px 0 var(--card-box-shadow-color);
--card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, 0.23);
--relation-label-empty-text: #fff; --new-button-vertical-color: #fff; --new-button-horizontal-color: #fff; --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);
--page-image-loading-border-color: #555; }
}
}
@media(prefers-color-scheme: light){
body{
}
}