settings
サイト設定
装飾用のCSS
code:style.css
body {
background: #a3b4cc;
}
nav.navbar.navbar-default {
background:linear-gradient( midnightblue,royalblue);
}
.deco-\! {
color: red;
font-weight:bold;
}
.deco-\+ {
font-weight:bold;
font-size: 25px;
}
.level-1{
border-bottom: solid 2px orange;
}
.level-2{
background: linear-gradient(transparent 65%, #99CCFF 60%);
}
.level-3{
border-left: 8px solid #00CC00;
border-bottom: 1px solid #00CC00;
padding: 0 10px;
}
.image {
border: 1px solid rgba(0,0,0,0.6);
box-shadow: 4px 4px 5px rgba(0,0,0,0.4);
}
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
color: #00CC66;
font-weight: bold;
font-size: 1em;
border: 1px solid #00CC66;
border-radius: 5px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
.line img.strong-icon { max-height: 7em; height: auto }
窓辺ちゃん様のScrapboxページからお借りしました。
code:style.css
@media screen and (min-width: 768px) {
.section-title, .code-block-start { counter-reset: codeline }
.code-block code > span:not(class) { counter-increment: codeline }
.code-block code > span:not(class)::before {
content: counter(codeline);
position: absolute; display: inline-block; left: -4em; z-index: 10;
min-width: 50px; text-align: right; vertical-align: bottom;
/* ↓行番号のフォントとか色とかの指定はここ */
font-family: monospace; color: green }
/* カーソル行の行番号を濃く表示する */
.code-block code > span:not(class)::before { opacity: .5 }
.cursor-line .code-block code > span:not(class)::before { opacity: 1; font-weight: bolder } }
.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {
content: '\f276'; font-family: 'FontAwesome'; font-size: 20px; color: #335080; bottom: 0;
diplay: inline-block;
}
@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 } }
daiiz様からお借りしました
code:style.css
.page-list .grid li:hover {
transition: 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
.line span.code-block .code-block-start {
background-color: #add8e6;
}
.line span.code-block .code-block-start a {
color: black;
}
.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;
border-color: #83c328 transparent;
}
.deco-\{, .deco-\} {
font-size: 1em;
color: #fff;
background-color: #83c328;
/* padding: 0.3em 0.2em 0.3em 0.2em; */
padding: 0 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}