settings

code:style.css

font-family: helvetica, arial, "Kosugi Maru", sans-serif;

}

行間

code:style.css

.line {

line-height: 1.6em;

}

引用

code:style.css

.line .quote {

font-style: normal;

}

.line .quote {

font-style: normal;

}

.line .meta {

}

引用1

引用2

行頭のドットを薄くする

code:style.css

.line .indent-mark .dot {

top: 11px;

width: 6px;

height: 3px;

}

カーソルのある行の背景色と下線を薄いグレーにする

code:style.css

.cursor-line {

background-color: rgba(0, 0, 0, .02);

box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, .3);

}

code:style.css

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

cursor: pointer;

font: 88%/1 monospace;

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

transition: opacity .2s ease-out;

}

opacity: 1 /* ←マウスを乗せたときの濃さ 100% */

}

z-index: 30;

position: sticky;

bottom: 0;

text-align: right;

}

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

z-index: 30;

position: absolute;

bottom: 2em;

right: -1em;

border-radius: .25em;

box-shadow: 0 0 8px 1px rgba(8,8,8,.1);

padding: .8em;

background-color: azure;

font: 13.5px/1.4 monospace;

transition: opacity .3s ease-out;

}

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

display: none;

}

code:style.css

display: inline-block;

width: 0;

text-indent: -9999px;

}

display: inline-block;

min-width: 1.15em;

padding-left: 1px;

font-family: "Font Awesome 5 Free";

font-weight: 400;

font-size: 120%;

text-align: center;

vertical-align: middle;

}

}

}

ハッシュタグの表示

code:style.css

display: inline-block;

padding: 2px 8px;

margin: 0 8px 10px 0;

font-size: 0.8em;

border-radius: 3px;

-webkit-transform: scale(1);

transform: scale(1);

}

}

code:style.css

.deco-\{, .deco-\} {

font-size: 1em;

padding: 0.1em 0.2em 0.1em 0.2em;

border-radius: 0.4em;

margin: auto 0.3em;

display: inline-block;

max-width: calc(100% - 100px);

vertical-align: top;

}

.deco-\{:before {

position: absolute;

margin: 0;

padding: 0;

transform: translateX(-100%) translateY(calc(1em - 80%));

width: 0;

content: "";

border-width: 0 0 0.6em 0.6em;

border-style: solid;

}

.deco-\}:after {

position: absolute;

margin: 0;

padding: 0;

transform: translateY(calc(1em - 80%));

width: 0;

content: "";

border-width: 0 0.6em 0.6em 0;

border-style: solid;

}

code:style.css

/* 空のリンクの色を通常リンクと同じにする */

.line a.empty-page-link {

}

/* 別タブ開くリンクをわかりやすくする */

.line a.link:not(.icon)::after {

font-family: "Font Awesome 5 Free";

font-weight: 900;

content: '\f35d';

display: inline-block;

}

/* サムネ画像をフィットさせる */

.grid li.page-list-item a .icon {

position: relative;

}

.grid li.page-list-item a .icon img {

display: table-cell;

width: auto;

max-height: 90px;

max-width: 90%;

vertical-align: middle;

border-radius: 5px;

position: absolute;

top: 50%;

left: 50%;

transform: translateX(-50%) translateY(-50%);

}

画像の周りに影をつける

code:style.css

.deco-\| img {

box-shadow: 6px 6px 6px rgba(0,0,0,0.4);

}

アイコンサイズを大きく

code:style.css

.line img.icon {

height: 2.0em;

}

code:style.css

.line img.strong-icon {

max-height: 7em;

height: auto;

}

ピン止め

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

bottom: 0;

display: inline-block;

transform: rotate(35deg);

}

ハイライト表示

code:style.css

.deco-\! {

padding: 0.1em 0.2em 0.1em 0.2em;

}

code:style.css

/* 中央寄せ */

/*

.deco-\| {

position: absolute;

width: 100%;

text-align: center;

}

*/

/* 右寄せ */

.deco-\> {

position: absolute;

width: 100%;

text-align: right;

}

/* 左寄せ */

.deco-\< {

position: absolute;

width: 100%;

text-align: left;

}

code:style.css

.level-1 img { width: 16.7%; height: 16.7%; } /* width だけだと比率が変わる */

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

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

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

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

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

code:style.css

.navbar-brand img, .navbar-brand span {

display: none !important

}

.navbar-brand::before {

content: '';

width: 40px;

height: 40px;

position: absolute;

background-size: cover;

border-radius: 4px;

}