settings
my scrapbox settings (javascript and css)
code:script.js
$('head > linkrel=icon').attr('href','/api/pages/aodaruma/aodaruma/icon');
/customize/ピン留めされたページを独立した段に表示する
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&family=Roboto+Mono:wght@100;400;700&family=Zen+Kaku+Gothic+New:wght@500;900&display=swap');
@import "https://scrapbox.io/api/code/customize/ピン留めされたページを独立した段に表示する/style.css";
html {
--AOD-BLUE: #1900FF;
--AOD-BLUE-DARK: #3325B6;
--AOD-GRAYBLUE: #6756FC;
--AOD-GRAYBLUE-DARK: #493BCB;
--AOD-PINK: #FF4A71;
--AOD-PINK-DARK: #D92C51;
--AOD-YELLOW: #FFF263;
--AOD-WHITE: #fff;
--AOD-BG-COLOR: #1F0322;
--AOD-FONTS: 'Roboto Mono',"Open Sans",Helvetica,Arial,'Zen Kaku Gothic New',sans-serif;
--body-bg: var(--AOD-BG-COLOR)!important;
--navbar-bg: transparent!important;
--navbar-icon-color: var(--AOD-WHITE)!important;
--navbar-icon-active-color: var(--AOD-BLUE)!important;
--navbar-icon-hovered-color: var(--AOD-BLUE)!important;
--search-form-bg: rgba(255, 255, 255, 0.13);
--search-form-icon-color: #fff;
--search-form-icon-focus-color: var(--AOD-BLUE)!important;
--card-title-color: var(--AOD-WHITE)!important;
--card-title-bg: transparent!important;
--card-bg: rgba(255,255,255,0.1)!important;
--card-hover-bg: rgba(0, 0, 0, 0.1);
--card-active-bg: var(--AOD-PINK)!imporatant;
--card-backside: transparent!important;
--card-description-color: #c4c4c4;
--card-description-link-color: #80c9fe;
--card-description-code-color: #ccc;
--card-box-shadow-color: var(--AOD-BLUE)!important;
--card-box-shadow: 0 2px 0 var(--card-box-shadow-color);
--card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, 0.23);
--card-title-bg-pinned: var(--AOD-BLUE)!important;
--relation-label-bg: var(--AOD-BLUE)!important;
--relation-label-text: var(--AOD-WHITE)!important;
--relation-label-links-bg: var(--AOD-BLUE-DARK)!important;
--relation-label-links-text: var(--AOD-WHITE)!important;
--relation-label-empty-bg: var(--AOD-BLUE-DARK)!important;
--relation-label-empty-text: var(--AOD-WHITE)!important;
--tool-color: var(--AOD-WHITE)!important;
--tool-light-color: #353b48;
--tool-badge-bg: #2b2e38;
--tool-bg: var(--AOD-BLUE)!important;
--tool-text-color: var(--AOD-WHITE)!important;
--new-button-vertical-color: var(--AOD-WHITE)!important;
--new-button-horizontal-color: var(--AOD-WHITE)!important;
--new-button-bg: transparent!important;
--new-button-hover-bg: transparent!important;
--new-button-active-bg: var(--AOD-BLUE)!important;
--telomere-border: var(--AOD-BLUE)!important;
--telomere-unread: var(--AOD-GRAYBLUE)!important;
--telomere-updated: var(--AOD-PINK)!important;
--page-text-color: rgba(255, 255, 255, 0.87);
--page-link-color: var(--AOD-GRAYBLUE)!important;
--page-link-hover-color: var(--AOD-GRAYBLUE-DARK)!important;
--page-link-color-cursor-line: #a985e4;
--page-bg: rgba(255,255,255,0.1)!important;
--empty-page-link-color: var(--AOD-PINK)!important;
--empty-page-link-hover-color: var(--AOD-PINK-DARK)!important;
--line-title-color: var(--AOD-WHITE)!important;
--line-permalink-color: rgba(234, 218, 74, 0.35);
--code-color: #ccc;
--code-bg: rgba(0, 0, 0, 0.18);
--quote-bg-color: rgba(0, 0, 0, 0.2);
--page-image-loading-border-color: #555;
--cursor-color: #fff
}
body{
font-family: var(--AOD-FONTS);
}
.page{
/*background:;*/
backdrop-filter: blur(5px);
-moz-box-shadow: 2px 8px 22px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 2px 8px 22px 5px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 2px 8px 22px 5px rgba(0, 0, 0, 0.1);
box-shadow: 2px 8px 22px 5px rgba(0, 0, 0, 0.1);
border-radius: 1rem;
}
.editor{
font-family: var(--AOD-FONT);
}
.line.line-title, .line.section-title{
font-family: 'Roboto Mono',Montserrat,Arial,'Noto Sans JP',sans-serif;
}
.line.section-title:not(.line-title) span.char-index{
/*background-color: var(--AOD-BLUE);*/
}
strong.level span.char-index{
background-color: var(--AOD-BLUE);
}
strong.level::before {color: rgba(255,255,255,0.2); }
strong.level-6::before { content: "# " }
strong.level-5::before { content: "## " }
strong.level-4::before { content: "### " }
strong.level-3::before { content: "#### " }
/*strong.level-2::before { content: "##### " }*/
/*strong.level-1::before { content: "###### " }*/
.line.line-title{
background-color: var(--AOD-BLUE);
font-size: 8rem!important;
margin-bottom: 2rem;
letter-spacing: -8px;
line-height: 7rem;
/*font-weight: lighter;*/
}
.line.line-title a{
color: inherit;
}
.new-button{
border: 2px solid var(--AOD-WHITE);
}
@media screen and (max-width:768px){
.line.line-title{
font-size:6rem!important;
line-height:5rem;
}
}