綾坂こと
https://lh3.googleusercontent.com/a/ACg8ocK3K1FhDQvGwQyTmVSMeKgbKu9YBN-VGxGy05L6I-Ep-XqAgDcs=s96-c#.png
やあ！
名前 : 綾坂こと
読み : あやさかこと
a.k.a. : AyagawaP
アカウントいろいろ :
Excel-jpなのにExcel情報ねーじゃんにはさせない
style.css
フォント読み込み
code:style.css
/* ==== 'M PLUS 1p' - 通常フォント ==== */
/* ==== 'Ubuntu' - 英字デザインフォント ==== */
/* ==== 'M PLUS 1 Code' - 等幅フォント ==== */
/* ==== 'Zen Kurenaido' - 手書きフォント ==== */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&family=M+PLUS+1p:wght@100;300;400;500;700;800;900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Zen+Kurenaido&display=swap');
/* ==== 'Font Awesome 6 Free' - アイコンフォント ==== */
@import url('https://use.fontawesome.com/releases/v6.5.2/css/all.css');
フォントを変更
code:style.css
* {
font-family: 'M PLUS 1p';
}
.fontawesome {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
code, code * {
font-family: 'M PLUS 1 Code', monospace;
font-weight: 400;
}
箇条書きの点を控えめに
code:style.css
.app .line .indent-mark .dot {
height: .1em;
width: .4em;
border-radius: 20%;
background-color: #8b8bb1;
&::before {
display: none;
}
}
.app:not(.presentation) .line .indent-mark .dot {
top: auto;
bottom: 0;
}
.app:not(.presentation) .line.number-list .indent-mark .dot {
background-color: #8b8bb180;
}
リンクの見た目を変える
code:style.css
.page a.page-link:not(:has(>img.icon)) {
display: inline-block;
position: relative;
text-decoration: none;
&::before {
content: '';
position: absolute;
left: 0%;
bottom: 7.5%;
width: 100%;
height: 2px;
background-color: oklch(55% .2 270 / .4);
transition: height 0.2s, background-color 0.2s;
pointer-events: none;
}
&:hover::before {
height: calc(100% - 6px);
background-color: oklch(55% .2 270 / .2);
}
&.big-page-link {
&::before {
background-color: oklch(55% .2 315 / .4);
}
&:hover::before {
background-color: oklch(55% .2 315 / .2);
}
}
&.empty-page-link {
&::before {
background-color: oklch(55% .2 0 / .4);
}
&:hover::before {
background-color: oklch(55% .2 0 / .2);
}
}
}
.line a.big-page-link {
font-weight: inherit;
}
表が含まれるページで横スクロールを有効化する(自作)
code:style.css
.page:has(.table-block-row) {
overflow-y: hidden;
overflow-x: scroll;
}
.page:has(.table-block-row)::-webkit-scrollbar {
display: none;
}
[/icons/hr.icon], [/icons/---.icon]を横幅いっぱいに表示する(自作)
code:style.css
a:has(img.icon:is(title="hr", title="---")) {
position: relative;
width: 100%;
}
a:has(img.icon:is(title="hr", title="---"))::before {
display: none;
}
img.icon:is(title="hr", title="---") {
width: 100%;
object-fit: cover;
}
#member