settings
code: style.css
.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2)) {
position: relative;
}
.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2))::before {
content: " ";
position: absolute;
left: 43%;
margin: -4px 0;
border-left: 2px solid #dcdcdc; /* 色の指定 */
}
code:style.css
@keyframes icon-rotate {
0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}
.deco-- img.icon {
animation: 1.5s icon-rotate linear infinite;
}
[[]]
code:style.css
.line .deco-\& {
display: inline-block;
padding: 0.2em 0.4em;
text-decoration: none;
background: #55acee;
color: #fff;
border-radius: 4px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
line .deco-\&{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.line .deco-\& a{
text-decoration: none;
color: #fff;
}
画像を並べて表示
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
タイトル
code:style.css
.project-home > .title {
/* Make title line-height more narrow */
line-height: 1.1em;
}
/* Project description */
.project-home > .title:after {
content: "\A　presented by Altfloor";
white-space: pre;
font-size: 0.7em;
}
バレットを薄くする
code:style.css
.line .indent-mark .dot {
top: 12px;
width: 6px;
height: 4px;
background-color: #c9c9c9;
}
テロメアをおとなしくする
code:style.css
.line .telomere .telomere-border {
border-width: 0px 0px 0px 2.5px !important;
border-color: #52555D;
width: 0;
}
.line .telomere .telomere-border .description {
display: none
}
.unread {
border-color: #e7a270 !important;
}
ピンしたページのスタイル
code:style.css
/* ピンしたページのスタイル */
.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {
content: '\f08d'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
font-size: 20px; color: #A45AFF; bottom: 0; display: inline-block; transform: rotate(35deg) }
見出しとタイトルをかっこよく
/akio6o6/settings#59298c794096630000c78071 をカスタマイズ
code:style.css
.line strong {
display: inline-block;
}
.line strong.level-2 {
width: 100%;
margin: 0.25em 0;
padding: 0.25em 0.05em 0.05em 0.5em;
border-left: solid 2.5px #BFBFBF;
border-bottom: solid 0.1px #BBB !important;
}
.line strong.level-4 {
width: 100%;
margin: 0.25em 0;
padding: 0.25em 0.05em 0.05em 0.5em;
border-left: solid 4.5px #BBB;
border-bottom: solid 0.5px #BBB !important;
}
.line.line-title .text {
width: 100%;
margin: 0.25em 0 0.75em 0;
padding: 0.25em 0.5em 0.25em 0.5em;
border-left: solid 7.5px #999;
border-bottom: solid 2px #BBB !important;
font-weight: bold;
font-size: 35px;
position: relative; left: -15px;
}
外部リンクをわかりやすくする
code:style.css
/* External links */
.line a.link:not(.icon)::after { font-family:'Font Awesome 5 Free'; font-weight: 900; content: ' \f35d'; display: inline-block }
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
background: linear-gradient(transparent 50%, #FFDE2E 60%);
}
ピン留めされたページを独立した段に表示する
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
code:style.css
.navbar {
top: 0px;
z-index: 51010;
}
.expandable-menu {
z-index: 51011;
}
.page-menu {
top: 70px;
}
.global-menu.dropdown-menu {
overflow-y: scroll;
max-height: calc(100vh - 58px);
}
.modal {
z-index: 501013;
}
.modal-backdrop {
z-index: 501012;
}