settings

https://gyazo.com/1358484b0e7f1f2040fc69167f77693f

メニュー用

code:style.css

.navbar .row {

height: 55px;

}

.navbar-brand{

height: 55px;

}

/* プロジェクトTOPへのリンクと周辺パーツを強引にnavbarに移動 */

/* ※次のはりつくnavbarと同時に使う必要がある */

@media screen and (min-width: 768px) {

.quick-launch .project-home .title{

.quick-launch .project-home {

position: fixed; top:7px; left: calc((100% - 1080px)/2); z-index: 990}

.quick-launch .project-home:hover,.quick-launch .project-home:focus, .quick-launch .project-home:active {

@media screen and (min-width: 768px) and (max-width: 991px) {

.quick-launch .project-home { left: 85px } }

@media screen and (min-width: 992px) and (max-width: 1260px) {

.quick-launch .project-home { left: 100px } }

@media screen and (min-width: 1261px) {

.quick-launch .project-home { left: calc((100% - 1260px)/2 + 100px) } }

/* はりつくnavbar */

@media screen and (min-height: 600px) and (min-width: 768px) {

.app:not(.presentation) { padding-top: 90px; padding-right: 0 !important }

.app:not(.presentation) .page-menu { position: fixed; top: 90px }

.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }

.dropdown.open .dropdown-menu {

position: absolute; left: auto; top: auto;

max-height: calc(100vh - 100px); overflow-y: auto }

.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }

.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 } }

ピン留めされたページを独立する

code:style.css

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

clear: both;

}

文字用

強調

中央寄せ

右寄せ

ラインマーカー

code:style.css

/* 背景赤色、文字白色 */

.deco-\! {

padding: 0.1em 0.2em 0.1em 0.2em;

}

/* 中央寄せ */

.deco-\< { position: absolute; width: 100%; text-align: center }

/* 右寄せ */

.deco-\> { position: absolute; width: 100%; text-align: right }

/* 行頭のドット */

.line .indent-mark .dot {

top: 11px;

width: 4px;

height: 4px;

}

/* 二重括弧による強調をマーカーっぽくする */

background: linear-gradient(transparent 60%, rgba(171, 255, 79, .6) 60%, rgba(171, 255, 79, .6) 100%);

}

吹き出し表現

code:style.css

/* 吹き出し本体 */

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

position: relative;

font-size: 1em;

max-width: calc(100% - 4em);

padding: 0em 0.5em 0em 0.5em;

border-radius: 0.4em;

margin: 0em 0.8em 0.4em 0.8em;

display: inline-block;

vertical-align: top;

}

/* 左吹き出しの角 */

.deco-\{:before {

position: absolute;

margin: 0;

padding: 0;

transform: translateX(-130%) translateY(calc(1em - 60%));

width: 0;

content: "";

border-width: 0 0 0.8em 0.8em;

border-style: solid;

}

/* 右吹き出しの角 */

.deco-\}:after {

position: absolute;

margin: 0;

padding: 0;

transform: translateX(30%) translateY(calc(1em - 60%));

width: 0;

content: "";

border-width: 0 0.8em 0.8em 0;

border-style: solid;

}

画像用

code:style.css

/* マトリクス記法 */

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

.line .deco-\| img.image { object-fit: contain; margin: 0 }

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

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

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

行内の画像を左寄せ

code:style.css

/* 行内の画像を左寄せにする */

.line .text, .stream .line { clear: both; overflow: hidden }

.line img.image { float: left; margin-right: .5em }

.stream .line img.image { float: none; margin-right: 0 }