settings
フォント読み込み
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap');
タイトルとか壁紙とか
タイトルの色も微調整してみたり。
code:style.css
htmldata-project-theme=summer {
--tool-text-color: honeydew;
}
.title {
font-family: 'Hachi Maru Pop', cursive;
font-size: 1.3em;
}
body {
background-image: URL('https://i.gyazo.com/9d3362779c81a1ffad71036a6d04912f.png');
background-attachment: fixed;
}
見出し関連
タイトルと[*** 文字]と[** 文字]を見出しっぽく。
参照元：memooooo/settings
code:style.css
.line.line-title {
background: linear-gradient(transparent 90%, crimson 90%);
font-family: 'Hachi Maru Pop', cursive;
margin-bottom: 1em;
}
.level-3 {
display: block;
border-bottom: 4px double var(--card-box-shadow-color);
}
.level-2 {
display: block;
border-bottom: 1px dashed var(--card-box-shadow-color);
}
ハッシュタグ及び★の色付け
タグの方は面倒なのでマイてがろぐからの流用。
code:style.css
atype="hashTag" {
background-color: var(--card-title-bg);
border-radius: 1rem;
padding: 0px 6px;
}
.deco-\+ {
color: #ff9900;
}
リンク関連
デフォの画像付きリンクの見た目が好みじゃないので。
code:style.css
.line a.link .image {
border-style: none solid solid none;
border-width: 2px;
}
ピン止めページを独立
参照元：customize/ピン留めされたページを独立した段に表示する
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
・を＞に変更
参照元：villagepump/箇条書きのバレットをFontAwesomeにするUserCSS
code:style.css
.line .indent-mark .dot {
background-color: transparent;
}
.line .indent-mark .dot::before {
display: block;
position: absolute;
top: -10px;
font-size: 6px;
content: '\ff1e';
font-weight: 900;
color: honeydew;
}
.indent-markstyle*="width: 1.5em" .dot::before,
.indent-mark .dot:nth-child(6n+2)::before {
color: #ff9900;
}
.indent-markstyle*="width: 3em" .dot::before,
.indent-mark .dot:nth-child(6n+3)::before {
color: crimson;
}
.indent-markstyle*="width: 4.5em" .dot::before,
.indent-mark .dot:nth-child(6n+4)::before {
color: lime;
}
.indent-markstyle*="width: 6em" .dot::before,
.indent-mark .dot:nth-child(6n+5)::before {
color: var(--card-box-shadow-color);
}
.indent-markstyle*="width: 7.5em" .dot::before,
.indent-mark .dot:nth-child(6n+6)::before {
color: peru;
}
.indent-markstyle*="width: 9em" .dot::before,
.indent-mark .dot:nth-child(6n+7)::before {
color: violet;
}
伏せ字の部分をぼかす
参照元：/villagepump/曇りガラス記法、villagepump/愚痴記法を参考に
code:style.css
.deco-\~:not(:hover) {
filter: blur(5px);
}
.deco-\~:not(:hover) img {
filter: blur(5px);
}