settings

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

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

List

code:stylexx.css

.quick-launch .project-home {

padding: 0 0 0 10px;

}

.quick-launch .project-home .title::after {

content: "";

margin-left: 10px;

padding: 5px 0px 5px 50px;

background-size: contain;

background-repeat: no-repeat;

}

code:style.css

.quick-launch .project-home::after {

display: block;

flex-shrink: 0;

height: 36px;

aspect-ratio: 4 / 3;

/* margin-left: 6px; */

margin-left: 10px;

content: "";

background-repeat: no-repeat;

background-size: contain;

}

code:style.css

.scrollTable { overflow-x: scroll; }

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

.scrollTable:not(.scrollTableBottom) {

-ms-overflow-style: none;

scrollbar-width: none;

}

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

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: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;

}