settings
code:style.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: rgba(173,173,173,.55) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
code:style.css
.level-1{
background: linear-gradient(transparent 60%, #ffeb36 60%); }
code:style.css
.line strong.level-2{
display: block;
position: relative;
font-size: 200%;
line-height: 160%;
text-align: center;
margin: 12px auto 18px;
font-weight: 100;
}
.line strong.level-2:after{
position: absolute;
content: '';
width: 100px;
top: 0;
bottom: -0.5em;
left: 0;
right: 0;
margin: 0 auto;
}
code:style.css
.deco-\< {
border-radius: 3px;
display: inline-block;
line-height: 10px;
padding: 5px 8px;
vertical-align: middle;
}
code:style.css
/* #で始まるタグをラベル風にする */
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
font-size: 0.8em;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
-webkit-transform: scale(1.1);
transform: scale(1.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;
}
左吹き出しの角
code:style.css
.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;
}
右吹き出しの角
code:style.css
.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
.deco-\* {
}
弱強調
code:style.css
.deco-\! {
}
袋文字
code:style.css
:root{
--bag-str-color: gray
}
.deco-\( {
color: white;
margin:0;
padding:0;
text-shadow:
var(--bag-str-color) 2px 0px, var(--bag-str-color) -2px 0px,
var(--bag-str-color) 0px -2px, var(--bag-str-color) 0px 2px,
var(--bag-str-color) 2px 2px , var(--bag-str-color) -2px 2px,
var(--bag-str-color) 2px -2px, var(--bag-str-color) -2px -2px,
var(--bag-str-color) 1px 2px, var(--bag-str-color) -1px 2px,
var(--bag-str-color) 1px -2px, var(--bag-str-color) -1px -2px,
var(--bag-str-color) 2px 1px, var(--bag-str-color) -2px 1px,
var(--bag-str-color) 2px -1px, var(--bag-str-color) -2px -1px;
}