Settings
https://gyazo.com/f5aad8e143b8d197c25d5e884bb315a2
全体共通
code:style.css
html, body {
background: transparent;
font-family: "游明朝体", "Yu Mincho", YuMincho, Serif;
touch-action: manipulation;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
}
.navbar {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 1000;
}
.navbar .row .col-menu {
width: 0%;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0.84);
box-shadow: 0 0 0 1px #eee; -webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.navbar-default .navbar-brand {
}
.navbar .navbar-brand::before {
content: '';
display: block;
background-size: contain;
width: 40px;
height: 40px;
}
.navbar .navbar-brand img, .navbar .navbar-brand .kamon {
display: none;
}
}
.navbar-default .navbar-form {
border-bottom: 0;
}
.navbar .open .navbar-brand .kamon-caret-down {
}
.navbar .navbar-menu > li > a {
}
.navbar .navbar-menu > li > a:hover {
}
.navbar a.mobile-search-toggle.active {
}
.new-button {
opacity: 0;
}
}
.search-form .form-group input {
box-shadow: 0 0 0 1px #eee; background-color: transparent;
}
.search-form .form-group input:focus {
background-color: white;
}
.search-form .form-group button .kamon {
}
.quick-launch .project-home {
position: relative;
}
.page-menu {
top: 54px;
}
記事グリッド
code:style.css
li.page-list-item a {
border-radius: 0 !important;
}
.grid li.page-list-item a {
background-color: transparent;
box-shadow: none;
box-shadow: 0 0 0 1px #eee; }
box-shadow: 0 0 0 1px #eee; }
.grid li.page-list-item a .header {
border: 0;
}
.grid li.page-list-item a .title {
font-family: "游明朝体", "Yu Mincho", YuMincho, Serif !important;
font-weight: 500;
}
.grid li.page-list-item a .description {
font-family: "游明朝体", "Yu Mincho", YuMincho, Serif;
}
.grid li.page-list-item a .icon {
padding: 0;
}
.grid li.page-list-item a .icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
ページ
code:style.css
.page {
box-shadow: inset 0 0 0 1px #eee; border-radius: 0;
}
.line .telomere .telomere-border {
border-width: 0 0 0 1px !important;
}
.line .telomere .telomere-border.unread {
}
.line.line-title {
font-family: "游明朝体", "Yu Mincho", YuMincho, Serif;
}
.editor {
font-family: "游明朝体", "Yu Mincho", YuMincho, Serif;
}
.line .image {
box-shadow: 0 0 0 1px #eee; }
.line .section-0{
line-height: 1.2em !important;
}
.line .quote {
padding-left: 0;
background-color: rgba(0, 0, 0, 0.02);
}
見出し3
見出し2
見出し1
code:style.css
.level-1{
background: linear-gradient(transparent 60%, #ffeb36 60%); }
.line strong.level-2 {
display: inline-block;
position: relative;
margin: 12px auto 18px;
font-size: 200%;
line-height: 160%;
text-align: center;
width: 100%;
text-align: center;
}
.line strong.level-2:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 120px;
}
.line strong.level-3 {
display: inline-block;
position: relative;
margin: 12px auto 18px;
font-size: 250%;
line-height: 160%;
text-align: center;
width: 100%;
text-align: center;
}
.line strong.level-3:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 120px;
}
強調
code:style.css
.line .strong, .line strong.level {
font-weight: 600 !important;
}
.line strong:not(class) { background: linear-gradient(white 10%, #a6ebff 25%, #a6ebff 70%, white 90%); }
キャプション
code:style.css
.deco-\| {
font-size: 1.2rem;
box-sizing: border-box;
padding-left: 4px;
border-left: 2px solid #EEE; font-style: italic;
}
コードブロック
code:style.css
.line .code {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
background-color: rgba(0, 0, 0, 0.02);
border-radius: 0;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.line span.code-block {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
background-color: rgba(0, 0, 0, 0.02);
}
.line span.code-block .code-block-start {
background: transparent;
}
.line span.code-block .code-block-start:before {
z-index: 0;
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 25px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.02);
}
.line span.code-block .code-block-start a {
z-index: 1;
display: inline-block;
position: relative;
height: 100%;
box-sizing: border-box;
padding: 0 10px;
}
テーブル
code:style.css
.table-block {
font-family: "游ゴシック", "Yu Gothic", YuGothic, Serif;
}
.table-block .table-block-start {
box-sizing: border-box;
display: inline-block;
padding: 0 10px;
background: rgba(0, 0, 0, 0.08);
}
箇条書きを控えめに
code:style.css
.app .line .indent-mark .dot {
height: 0.2em;
width: 0.4em;
border-radius: 25%;
opacity: 0.2;
}
.app:not(.presentation) .line .indent-mark .dot {
top: auto;
bottom: 0;
}
ピンしたページのスタイル
code:style.css
.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;
bottom: 0;
display: inline-block;
transform: rotate(35deg);
}
ドロップダウンを画面縦幅に合わせて拡大
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}
外部リンク
code:style.css
.line a.link:not(.icon)::after {
font-family: 'FontAwesome';
content: ' \f08e';
display: inline-block;
}
#はじまりの文字列をいい感じに
code:style.css
display: inline-block;
padding: 0px 4px;
margin: 0 2px 4px 0;
border: 0px;
border-radius: 0px;
text-align: center;
box-shadow: 0 0 0 1px #eee; }
background-color: rgba(0, 0, 0, 0.08);
}
;){kind=link}