settings

基本色

code:style.css

:root{

}

フォント

code:style.css

.text{

font-family: 'Roboto', "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

本文の文字サイズ・文字詰め・行間

code:style.css

@media screen {

/* .app:not(.presentation) .editor { font-size: 130% } */

.line .text:not(.code-block) { font-feature-settings: "pkna" }

.app:not(.presentation) .line .text:not(.code-block) { line-height: 2.1 }

}

引用

code:style.css

/*.line .quote {

font-style: normal;

padding-top: 10pt;

padding-bottom: 10pt;

font-size: 100%;

line-height: 1.0

}*/

code:style.css

color:#696969;

background:linear-gradient(#ffffff 30%,var(--swawa-purple) 80%)

/*background:linear-gradient(#ffffff 30%,#ffd700 80%)*/

}

強調

強調

code:style.css

.deco-\!{ color: rgb(249, 124, 0)}

/*

.deco-\! {

padding: 0.1em 0.2em 0.1em 0.2em;

}

*/

見出し2

見出し

code:style.css

.deco-\# {

border-left: .6em solid var(--swawa-purple);

padding-left: .7rem

}

背景

code:style.css

body { background-color: var(--swawa-purple); }

テロメア(左の線) を消す

code:style.css

/*.telomere-border {

opacity: 0 !important; }

テーブル

テーブルの直上に空白行が必要なことに注意

table:table

a b c

hoge mochi ohayo

code:style.css

.table-block .cell {

}

.table-block .cell:first-child {

}

.section-title + .line .table-block .cell {

}

.section-title + .line .table-block .cell {

font-weight: bolder;

text-align: center;

}

インデントしたときのドットの色

0

1

2

3

4

5

6

7

code:style.css

code:style.css

code.code span { color: inherit !important; }

コードブロックを見やすく

code:style.css

/* code blockの頭を静かな色にする */

.line span.code-block .code-block-start {

padding: 2px 5px 2px 5px !important;

}

.line span.code-block .code-block-start a {

}

.line span.code-block .code-block-start a:hover {

}

リンクの色

code:style.css

a,

画像サイズの指定

code:style.css

.level-1 img { width: 16.7%; max-height: none; }

.level-2 img { width: 33.3%; max-height: none; }

.level-3 img { width: 50%; max-height: none; }

.level-4 img { width: 66.7%; max-height: none; }

.level-5 img { width: 83.3%; max-height: none; }

.level-6 img { width: 100%; max-height: none; }

code:style.css

display: inline-block;

padding: 2px 10px;

margin: 6px 4px 10px 0px;

color: var(--swawa-brown);

font-size: 0.8em;

border: 1px solid var(--swawa-brown);

border-radius: 3px;

transition: .05s;

-webkit-transform: scale(1);

transform: scale(1);

}

-webkit-transform: scale(1.04);

transform: scale(1.04);

color: var(--swawa-green);

border: 1px solid var(--swawa-green);

}*/

ページタイトルの設定と罫線

code:style.css

.app:not(.presentation) .line.line-title .text {

color:#505050;

font-size: calc(1.2vw + 2rem); font-weight: 600; line-height: 1.2 !important;

border-bottom: 1px solid rgba(0,0,0,.2); padding-bottom: 1rem;}

}

セクション区切りの可視化

code:style.css

/*

.app:not(.presentation) .line.section-title:not(.line-title) .text {

border-top: 1px dashed rgba(173,173,173,.5)

}

*/

カードの色

code:style.css

/*

.grid li.page-list-item a .header .title { overflow: visible}

.grid li.page-list-item a .header { overflow: visible }

.line-img { display: none }

*/

code:style.css

.grid li.page-list-item a .icon img {

max-width: 100%;

max-height: 100%;

width: auto !important;

}

検索候補を全て表示する

code:style.css

.navbar-form .dropdown.open .dropdown-menu {

min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }

スマホの時のグリッドサイズ

code:style.css

@media (max-width: 767px) {

.page-list .grid li{

/*.page-list-item.grid-style-item {*/

width: calc(33% - 8px * 2);

height: 150px;

}

.grid li.page-list-item a { width: 100%; }

.grid li.page-list-item a .content { width: 100%; }

}

ロゴを画像に差し替える

code:style.css

.navbar-brand::before {

content: '';

width: 40px;

height: 40px;

position: absolute;

background-size: cover;

border-radius: 20px;/*角丸はお好みで*/

}

外部リンクを自動判別・無料webフォントを引っ張り出してくる

code:style.css

/* 外部リンクにiconをつける */

.line span:not(.modal-image) > a.link:not(.icon)::before {

font-family: 'Font Awesome 5 Free';

content: ' \f35d';

font-weight: 600;

display: inline-block;

padding: 0 0.5em 0 0;

}

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) {

grid-column-start: 1;

}