settings
フォント
scrapboxでは一文字単位で<span>で囲われているからfont-variant-ligatures: common-ligatures;による合わせ文字表示ができない。Fira Code君無念。携帯でみるとCSSの書き換えでフォントが描画のネックのように見えたのでFira codeを抜いた。要調査。 実験的に画面サイズに応じて利用するフォントを変えてみる。 判定のロジックが挟まって余計遅く感じる。
code:style.css
@media screen and (min-width : 1024px) {
body {
font-family: Sawarabi Gothic,sans-serif;
font-stretch: condensed;
}
.editor {
font-family: Sawarabi Gothic,sans-serif;
font-size: 16px;
}
.grid li {
font-family: Sawarabi Gothic,sans-serif;
}
.list li.page-list-item{
font-family: Sawarabi Gothic,sans-serif;
}
}
配色
code:style.css
.navbar-default {
}
body {
}
.new-button {
}
.new-button .vertical-line {
}
.new-button .horizontal-line {
}
.quick-launch .project-home, .quick-launch .history-back-button {
}
.grid li.page-list-item a {
box-shadow: none;
}
.grid li.page-list-item a .header {
}
.search-form .form-group input {
}
コードの文字幅調整
スニペットは個人的に幅小さいほうが見やすい
code:style.css
.line span.code-block {
line-height: 18px;
font-size: 16px;
background-color: rgba(0,0,0,0.04);
}
タグのラベル化
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
.line strong.level-2{
display: block;
position: relative;
font-size: 32px;
line-height: 40px;
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;
}
css memo
code:memo.css
/* code blockのフォントを小さくする設定 */
.line span.code-block {
line-height: 20px;
font-size: 90%;
background-color: rgba(30, 20, 10, 0.05);
filter: invert();
}
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
background-color: rgb(39, 40, 34);
padding: 2px 5px 2px 5px !important;
}
.line span.code-block .code-block-start a { font-size: 110%; color: #FFF } 画像中央寄せ
http://simpleicon.com/wp-content/uploads/setting2.png
画像が中央寄せになる。
code:style.css
.line .image{
display: block;
position: relative;
font-size: 16px;
line-height: 20px;
text-align: center;
margin: 12px auto 18px;
font-weight: 100;
}
.line .image:after{
position: absolute;
content: '';
width: 100px;
top: 0;
bottom: -0.5em;
left: 0;
right: 0;
margin: 0 auto;
}
中央寄せ補佐
hogehoge
code:style.css
.deco-\| {
position: absolute;
width: 100%;
text-align: center;
}
赤シートで隠す
見えない文字列
1192年 鎌倉幕府
code:style.css
.deco-\!{
border-radius: 8px;
cursor: pointer;
}
.deco-\!:hover{
background-color: transparent;
}
https://i.gyazo.com/thumb/1200/c309f2fe652ec9eec18fca8b74313387-gif.gif
文字列を赤シートで隠す。横のボタンからdisplay/hideを選択することで表示切り替え。
ホバー時も表示するようにした。
code:style.css
a#Templates.tool-btn:hover { text-decoration: none }
a#Templates.tool-btn::before { position: absolute; left: calc(46px/3 - 1px); content: '\f067'; font: 21px/46px 'FontAwesome' }
a#Templates.tool-btn img { opacity: 0 }
実験系
code:.css
.page {
background-color: rgba(9, 9, 9, 1);
box-shadow: none;
border: #666 solid 0.5px; border-radius: 5px;
}
.text {
}
/* code blockのフォントを小さくする設定 */
.line span.code-block {
line-height: 20px;
font-size: 90%;
background-color: rgba(30, 20, 10, 0.05);
filter: invert();
}
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
background-color: rgb(39, 40, 34);
padding: 2px 5px 2px 5px !important;
}
.line span.code-block .code-block-start a { font-size: 110%; color: #FFF } textarea#text-input:focus {
background: rgba(255, 255, 255, 0.3);
}