settings
code:style.css
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700');
.line .quote {
font-style: normal;
background: #ffffff;
}
body {
background-color: #ffffff;
color: #555555;
font-family: 'Noto Serif JP', 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}
.line {
line-height: 37px;
}
.line .quote {
font-style: normal;
}
.line .meta {
border-color: #ffffff;
}
.navbar-default {
background-color: #ffffff;
}
.navbar-default .navbar-nav>li>a {
color: #2;
}
.grid li {
margin:5px;
padding:5px;
}
.grid li.page-list-item a {
box-shadow: 0 1px 0 rgba(0,0,0,0);
width:100%;
height:100%;
}
.grid li.page-list-item a:hover {
box-shadow: 0 1px 0 rgba(0,0,0,0);
}
.grid li.page-list-item a .content {
border: 0;
display:flex;
flex-direction:column;
}
.grid li.page-list-item a .content .header {
border: 0;
order:0;
padding:10px;
}
.grid li.page-list-item a .content .header .title {
color:#424242;
}
.grid li.page-list-item a .content .icon {
order:1;
}
.grid li.page-list-item a .content .description {
order:2;
font-size:0.8em;
line-height:1.5em;
margin:-8px 0 0;
padding:10px;
}
.page {
box-shadow: 0 0px 0 rgba(0,0,0,0.16);
background-color: #ffffff;
}
.col-page {
max-width:920px;
}
.col-page-side {
width: calc((100% - 920px) / 2);
}
.editor {
font-family: 'Noto Serif JP', 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 1.2em;
line-height: 2.0em;
}
.line.line-title {
text-align:center;
border-bottom:thin solid #eeeeee;
margin-bottom:40px;
font-weight:bold;
color:#424242;
}
.lines {
border-bottom:thin solid #eeeeee;
padding-bottom:40px;
}
.lines .line .telomere {
visibility:hidden;
}
.line a.link {
text-decoration:none;
color:#156e9b;
}
.line a.link:visited {
text-decoration:none;
color:#156e9b;
}
.line a.link:hover {
text-decoration:none;
color:#aaaaaa;
}
.line a.link:active {
text-decoration:none;
color:#aaaaaa;
}
.line a.page-link {
text-decoration:none;
color:#156e9b;
}
.line a.page-link:visited {
text-decoration:none;
color:#156e9b;
}
.line a.page-link:hover {
text-decoration:none;
color:#aaaaaa;
}
.line a.page-link:active {
text-decoration:none;
color:#aaaaaa;
}
.line a.link.icon {
border-style:none !important;
}
.line a.page-link:visited {
border-style:none !important;
}
.line a.page-link:hover {
border-style:none !important;
}
.line a.page-link:active {
border-style:none !important;
}
.line .indent-mark .dot {
top: 1.0em;
width:5px;
height:2px;
background-color:#cccccc;
}
.line img.strong-image {
max-width:100%;
}
.line span.code-block {
font-size: 0.9em;
}
.page-menu .random-jump-button {
display:none;
}
.grid li.relation-label a {
color:#aaaaaa;
background-color:#fafafa !important;
}
.grid li.relation-label .arrow {
border-left-color:#aaaaaa !important;
}
.grid li.relation-label.empty-links {
display:none;
}
.page-list-item.empty {
display:none;
}
/* プロジェクトTOPへのリンクと周辺パーツを強引にnavbarに移動 */
/* ※次のnavbar固定と同時に使う必要がある */
@media screen and (min-width: 768px) {
.quick-launch .project-home {
position: fixed; top: 3px; left: calc((100% - 1080px)/2); z-index: 10000 }
/*.page { padding-top: 0 }*/ }
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .project-home { left: 65px } }
@media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .project-home { left: 80px } }
@media screen and (min-width: 1261px) {
.quick-launch .project-home { left: calc((100% - 1260px)/2 + 80px) } }
/*** navbar固定 ***/
@media screen and (min-height: 600px) and (min-width: 768px) {
body:not(.presentation) { padding-top: 90px; padding-right: 0 !important }
body:not(.presentation) .page-menu { position: fixed; top: 90px }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.navbar-default .navbar-nav>li>a {
color: #637282;
}
.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 } }
/* ピンしたページのスタイル */
.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: #A45AFF; bottom: 0;
display: inline-block; transform: rotate(35deg) }
/*** 画像を並べて表示 ***/
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.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 { object-fit: cover; width: 100%; height: 100% }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #aaaaaa !important;
font-size: 0.8em;
border: 1px solid #aaaaaa !important;
border-radius: 15px / 50%;
/* transition: .3s; */
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
color: #555555 !important;
border: 1px solid #555555 !important;
}
code:style.css
.line strong.level-2 {
font-size:1.3em;
margin-bottom: 0.5em;
font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}
.line strong.level-3 {
width: 100%;
padding: 0.1em 0.3em;
margin-bottom: 0.5em;
border-bottom: dashed 1px #dddddd;
font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}
code:js
document.execCommand('insertText', false, '`');
カーソルのある行の背景色と下線を薄いグレーにする
code:style.css
.cursor-line {
color: #000;
background-color: #f9f9f9;
}
選択した文字の背景色
code:style.css
.selection {
background: #ffd900;
}
マーカー・太字
code:style.css
.line strong:not(class) {
font-size: 100%;
background: #ffd70f;
padding: 0 0px;
margin: 0 0px;
width: auto;
}
.line strong{
font-size: 100%;
}
span.quote {
padding: 10px;
width: 100%;
display: block;
border-left: solid 1px #4b7ff5;
}
コードブロックを見やすく
code:style.css
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
background-color: #efefef;
padding: 2px 5px 2px 5px !important;
}
.line span.code-block .code-block-start a { font-size: 110%; color: #919191}
リンク
code:style.css
a,
.page-list-item .description .link {
color: #000;
font-weight: 550;
}
a:hover, a:active {
color: #3068ff ;
}
.line a.empty-page-link {
color: #000 ;
font-weight: 550;
}
.line a.empty-page-link:hover {
color: #3068ff ;
}
Linksのlabelの色をおとなしくする
code:style.css
.grid li.relation-label.links .arrow {
border-left-color: #afafaf;
}
.grid li.relation-label.links a {
background-color: #f9f9f9;
border-radius: 7px;
}
.grid li.relation-label.links a .title {
color: #afafaf;
}
.grid li.relation-label a {
color: #afafaf;
background-color: #f9f9f9;
border-radius: 7px;
}
グリッド
code:style.css
.grid li.page-list-item {
margin-bottom: 0.7em ;
font-family: "Avenir Next", Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.grid li.page-list-item .text{
}
.grid li.page-list-item a .title {
text-align: center;
}
.grid li.page-list-item a,
.grid.grid-md li.page-list-item a,
.grid.grid-lg li.page-list-item a {
background-color: #ffffff ;
box-shadow: 7px 7px 15px rgba(0,0,0,0.02);
border-radius: 7px ;
}
.grid li.page-list-item a:hover,
.grid.grid-md li.page-list-item a:hover,
.grid.grid-lg li.page-list-item a:hover {
background: #ffffff ;
box-shadow: 7px 7px 15px rgba(0,0,0,0.02);
}
.grid li.page-list-item a::before,
.grid li.page-list-item a::after {
display: block ;
content: '' ;
position: absolute ;
width: 13em ;
}
.grid li.page-list-item a::before {
}
.grid li.page-list-item a::after {
}
.grid li.page-list-item a .pin {
width: 100% ;
height: 100% ;
border-radius: 0px ;
background-image: none ;
}
.grid li.page-list-item a .pin::before,
.grid li.page-list-item a .pin::after {
display: block ;
content: '' ;
position: absolute ;
width: 13em ;
}
.grid li.page-list-item a .pin::before {
;
}
.grid li.page-list-item a .pin::after {
}
.grid li.page-list-item a .header {
border-top: 0 ;
}