settings

自分がよく使うプロジェクトのsettingsはこのページを参照するようになってる

ここを変えると全部変わる

List

code:style.css

.line .indent-mark .dot {

top: 12px;

width: 6px;

height: 4px;

border-radius: 0;

}

code:style.css

.scrollTable { overflow-x: scroll; }

.scrollTable:not(.scrollTableBottom)::-webkit-scrollbar { display: none; }

.scrollTable:not(.scrollTableBottom) {

-ms-overflow-style: none;

scrollbar-width: none;

}

sectionに番号を表示する

code:style.css

.app {

counter-reset: section;

}

.app:not(.presentation) .line.section-title:not(.line-title) {

position: relative;

}

.app:not(.presentation) .line.section-title:not(.line-title):after {

z-index: 1000;

counter-increment: section;

content: counter(section);

display: inline-block;

width: 1.6em;

height: 1.6em;

position: absolute;

top: -10px;

left: -55px;

border-radius: 50%;

font: 600 normal 90%/1.6 'Century Gothic', Arial, sans-serif;

text-align: center;

white-space: nowrap

}

ピン留めされたページを独立した段に表示する

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) {

clear: both;

}

code:style.css

.deco-\( {

opacity: 0.5;

}

sectionを水平線で区切る

code:style.css

.app:not(.presentation) .line.section-title:not(.line-title) {

position: relative;

}

.app:not(.presentation) .line.section-title:not(.line-title) .text {

padding-top: 1em;

}

.app:not(.presentation) .line.section-title:not(.line-title):before {

content: "";

display: block;

width: 111%;

position: absolute;

left: -49px;

border-top: 1px lightgray solid;

}

引用表記を目立たなくする

code:style.css

.line .quote {

padding-left: 16px;

}

インライン引用

code:style.css

.deco-\" {

border-radius: .2em; padding: 0 .4em; background-color: rgba(128,128,128,0.1);

font-size:95%; font-style: italic }

.deco-\"::before {

code:style.css

/* カウンターのスタイル */

cursor: pointer; font: 88%/1 monospace;

opacity: .35; /* ←マウスを乗せてないときの濃さ 35% */

transition: opacity .2s ease-out }

/* ポップアップのスタイル */

z-index: 30; position: absolute; bottom: 2em; right: -1em;

transition: opacity .3s ease-out }

/* プレゼンモードのときは非表示にする */

非公開のプロジェクトへのリンクは鍵アイコンをつける

吹き出し

code:style.css

/* フキダシ記法版 */

.line:not(.cursor-line) .deco-\{ {

display: inline-block; position: relative; max-width: calc(100% - 4em);

padding: 3px 4px 2px 5px; margin-left: .6em;

border-radius: .4em; border-bottom-left-radius: 0 }

.line:not(.cursor-line) .deco-\{::after {

display: block; /* reduce the damage in FF3.0 */

position: absolute; bottom: 0; left: -0.45em;

width: 0; content: '';

border-width: 0 0 .5em .5em; border-style: solid; border-color: rgba(107, 177, 148, 0.85) transparent }

画像を均等に並べる

code:style.css

/* マトリクス記法 */

.line:not(.cursor-line) .deco-\| { display: inline-flex }

.line .deco-\| img.image {

width: 150px;

height: 150px;

object-fit: cover; /* 🖐 */ }

/* 太字記法と組み合わせて列数を変える */

.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) }

width: 150px;

height: 150px;

object-fit: cover; /* 🖐 */ }

/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */

辿ったページを明示的に

code:style.css

margin: 0 3px;

}

font-weight: bold;

pointer-events: none;

cursor: default;

}

code:style.css

.level-1 img {

border: dashed 1px silver;

width: 150px;

height: 150px;

object-fit: cover; /* 🖐 */

}

.level-2 img { width: 33.3%; max-height: none; }

.level-3 img { width: 50%; max-height: none; }

.level-4 img { width: 66.7%; max-height: none; }

.level-5 img { width: 83.3%; max-height: none; }

.level-6 img { width: 100%; max-height: none; }

code:style.css

.navbar .navbar-menu>li.stream-btn,

.navbar .navbar-menu>li.stream-btn.hidden-xs

{ display: block !important; }

外部リンクを区別する

code:style.css

/* 外部リンクにiconをつける */

.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {

font-family: 'Font Awesome 5 Free';

content: ' \f35d';

font-weight: 900;

display: inline-block;

}

箇条書きの深さによって色を変える

code:style.css

.selection {

}

.line .indent-mark .dot {

margin-top: 1px;

}

.line .indent-mark .c-1 + .dot {

}

.line .indent-mark .c-2 + .dot {

}

.line .indent-mark .c-3 + .dot {

}

.navbar .navbar-brand img {

display: none;

}

.line span.code-block .code-block-start {

padding: 2px 5px 2px 5px !important;

}

.line span.code-block .code-block-start a {

}

a:hover, a:active {

}