settings
https://gyazo.com/5dc36be9e15547f2d0d5517a8f47006a
太字
[[太字]]で書けるよ。
リンク
[リンク]で書けるよ。
外部リンク
[外部リンク http://example.com/]で書けるよ。
重要
[! 重要]で書けるよ。
フキダシ
[{ フキダシ]で書けるよ。
引用
[" 引用]で書けるよ。
右側に注目！ => 付箋
[~ 付箋]で書けるよ。
o
[o]で書けるよ。
v
[v]で書けるよ。
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image {
max-height: none !important;
max-width: 95% !important;
}
/* 太字記法と組み合わせて列数を変える */
.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 {
width: 100%; height: 100%; margin: 0; object-fit: cover }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level-" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level-" .deco-\| img.image { margin: .2em }
/* 画像に太字記法を適用すると横幅いっぱいになる */
.line class^="level-" img.image {
max-height: none !important;
max-width: 95% !important;
}
/* External links */
.line a.link:not(.icon)::after { font-family:'FontAwesome'; content: ' \f08e'; display: inline-block }
/* 重要 */
.deco-\! {
color: #fff; /* 白文字 */
background-color: #ee6666; /* 赤背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
/* フキダシ記法 */
.line:not(.cursor-line) .deco-\{ {
display: inline-block; position: relative; max-width: calc(100% - 4em);
line-height: 1; font-size: small; color: #FFF !important; background-color: rgba(107, 177, 148, 0.85);
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 }
/* 引用 */
.deco-\" {
border-radius: .2em; padding: 0 .4em; background-color: rgba(128,128,128,0.1);
font-size:95%; font-style: italic }
.deco-\"::before {
color: #a0a0a0; font-size:85%; font-family: 'FontAwesome'; content: '\f10d'; vertical-align: super }
/* 付箋記法のスタイル */
.line:not(.cursor-line) .deco-\~ {
display: inline-block; position: absolute; top: -0.6em; right: -6vw;
max-width: 40%; padding: .3rem 1rem;
border-right: 1rem solid #04B2D9;
background-color: #f9f8f6;
transform: rotate(-0.8deg); box-shadow: 4px 1px 3px rgba(0,0,0,.2) }
.presentation .line .deco-\~ { position: static; max-width: 100% }
@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% } }
@media print { .line:not(.cursor-line) .deco-\~ {
right: 0; border-bottom: 1px solid #ccc; background-color: #f9f8f6 } }
/* 太字記法との組み合わせでスタイルを変える場合 */
/* カラーパレット→ https://color.adobe.com/Softie-color-theme-2233237/ */
.line .level-2 .deco-\~ { border-right-color: #009175 }
.line .level-3 .deco-\~ { border-right-color: #EFBB33 }
.line .level-4 .deco-\~ { border-right-color: #F23E2E }
/* 付箋記法内で打消し線記法と下線記法を併用する場合 */
.line .deco-\~.deco-- { text-decoration: line-through }
.line .deco-\~.deco-_ { text-decoration: underline }
/* ピンしたページのスタイル */
.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: 'FontAwesome'; font-size: 20px; color: #22296A; bottom: 0;
display: inline-block; transform: rotate(35deg) }
/* 箇条書きを控えめにする */
.line .indent-mark .dot {
height: .2em; width: .4em; top: auto; bottom: 0;
background-color: rgba(173,173,173,.55) }
body.presentation .line .indent-mark .dot { top: 12px }
/* チェックボックスになるタグ v2 Font Awesome版 */
.line:not(.cursor-line) ahref='./o':not(.icon) span,
.line:not(.cursor-line) ahref='./v':not(.icon) span {
display: inline-block; width: 0; text-indent: -9999px }
.line:not(.cursor-line) ahref='./o':not(.icon)::after,
.line:not(.cursor-line) ahref='./v':not(.icon)::after {
display: inline-block; min-width: 1.15em; padding-left: 1px;
font-family: FontAwesome; font-size: 120%; text-align: center; vertical-align: middle }
.line:not(.cursor-line) ahref='./o':not(.icon)::after { content: '\f096'; color: #08BDBD }
.line:not(.cursor-line) ahref='./v':not(.icon)::after { content: '\f046'; color: #2489C5 }
/* チェックボックスのaタグの無効化 */
ahref="./o".page-link.empty-page-link,
ahref="./o".page-link,
ahref="./v".page-link.empty-page-link,
ahref="./v".page-link {
pointer-events : none; }
/* カーソルの点滅 https://codepen.io/g12n/pen/FgzEj */
@keyframes blink {
0% {opacity: 0}
49%{opacity: 0}
50%{opacity: 1}
}
.cursor { animation: blink 1s infinite }
/* TODOリンク非表示 */
/*
#app-container > div > div:nth-child(7) > div.col-page > div.page-wrapper > div.related-page-list.clearfix > ul > li.relation-label.headword > ahref="/n-debate/o"{
visibility:hidden
}
#app-container > div > div:nth-child(7) > div.col-page > div.page-wrapper > div.related-page-list.clearfix > ul > li.relation-label.headword > ahref="/n-debate/o" + span{
visibility:hidden
}
*/
/* クルクル回す */
.page-list .grid li{
perspective: 1000px;
transform-style: preserve-3d;
}
.page-list .grid li:hover {
transition: 1.6s;
-webkit-transform: rotateZ(1080deg);
-moz-transform: rotateZ(1080deg);
transform: rotate3d(1,1,0,360deg);
}
/* PINされたカードは回らない */
.page-list .grid li.pin:hover {
-webkit-transform: none;
-moz-transform: none;
transform: none;
}