settings

https://gyazo.com/28e6a2b39eced2805b75033f78c03c29

フォントの指定 M PLUS 2

code:style.css

html,

body,

.grid li {

font-family: "M PLUS 2", sans-serif;

}

背景パターン

code: style.css

body {

}

code: style.css

body {

}

テロメア

code: style.css.old

/* スリムなテロメア */

.line .telomere .telomere-border,

.line .telomere .telomere-border.unread {

transition: none;

box-sizing: content-box;

border-color: transparent;

}

.line .telomere .telomere-border:hover,

.line .telomere .telomere-border.unread:hover {

box-sizing: border-box;

width: auto;

background-color: transparent;

}

新規作成ボタンを消す

code:style.css

.new-button {

visibility: hidden;

}

アイコンを少し大きくする

code: style.css

.line img.icon{

height: 2em;

}

code: style.css

.deco-\! {

color: var(--warning-text-color);

background-color: var(--warning-bg);

font-weight: bold;

padding: 1px 2px;

border-radius: 1px;

background: repeating-linear-gradient(

-45deg,

var(--warning-bg),

var(--warning-bg) 17px,

var(--warning-bg-border) 3px,

var(--warning-bg-border) 20px

);

}

タイトルのデザイン

code: style.css

.line.line-title {

padding-bottom: 24px;

}

.line.line-title .text {

padding-bottom: 12px;

}

code: style.css

strong.level.level-2 > span {

font-size: 2.5rem;

}

strong.level.level-2 > span::after {

content: "";

display: block;

height: 3px;

width: 40px;

transform: translateY(8px);

}

code: style.css

}

インデントに色をつける

code: style.css

/* インデントに色を付ける */

.line .indent-mark .dot {

}

.line .indent-mark .c-1 + .dot {

}

.line .indent-mark .c-2 + .dot {

}

.line .indent-mark .c-3 + .dot {

}

.line .indent-mark .c-4 + .dot {

}

code: style.css

body *::before {

--code-number-color: var(--code-color);

/* --common-accent-color: ; */

}

/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */

@media screen and (min-width: 768px) {

.section-title {

counter-reset: codeline;

}

.code-block span.indent code.code-body {

counter-increment: codeline;

margin-left: -1.5em;

padding-left: 3.5em;

}

.code-block span.indent code.code-body::before {

content: counter(codeline);

position: absolute;

display: inline-block;

z-index: 10;

margin-left: -3.5em;

width: 3em;

padding-right: 0.2em;

text-align: right;

vertical-align: bottom;

/* ↓行番号の色の指定はここ */

color: var(--code-number-color);

}

/* カーソル行の行番号を濃く表示する */

.code-block span.indent code.code-body::before {

opacity: 0.5;

}

.cursor-line .code-block span.indent code.code-body::before {

opacity: 1;

font-weight: bolder;

/* ↓カーソル行の背景色の色はここ */

background-color: var(--common-accent-color);

}

}

code: style.css

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

min-width: 100%;

max-height: calc(100vh - 130px) !important;

overflow-y: auto;

}

プロジェクトタイトルと戻るボタンを上部に固定

code: style.css

@media (min-width: 1000px) {

/* PC版（長い方） */

div.left-box {

display: flex;

align-items: center;

position: fixed;

top: 0;

margin-left: 52px;

z-index: 1000;

flex-wrap: nowrap;

width: 212px;

}

div.quick-launch a.project-home {

position: relative;

left: 0;

}

}

code: style.css

/* ＃で始まるタグをラベル風にする */

display: inline-block;

padding: 2px 8px;

margin: 4px;

background-color: rgba(12, 12, 13, 0.1);

font-size: 0.8em;

border-radius: 3px;

transition: 0.1s;

-webkit-transform: scale(1);

transform: scale(1);

}

background: rgba(97, 114, 232, 0.3);

}

background: rgba(97, 114, 232, 0.4);

}

code: style.css

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

.line

span:not(.modal-image):not(.pointing-device-map)

a.link:not(.icon)::after {

font-family: "Font Awesome 5 Free";

content: " \f35d";

font-weight: bold;

display: inline-block;

font-size: 0.5em;

padding-right: 2px;

}

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: "Font Awesome 5 Free";

font-weight: 900;

font-size: 20px;

color: var(--card-title-color);

bottom: 0;

display: inline-block;

transform: rotate(35deg);

}

/* ピン留めアイテムとそれ以外を分ける */

.page-list .grid-style-item.pin + .grid-style-item:not(.pin):not(#foo) {

clear: left;

}

コードブロックのタイトル行のスタイル

code: style.css

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

display: inline-block;

font-size: 14px;

margin-left: 0.5px;

padding: 2px 4px;

color: var(--page-text-color);

background-color: var(--accent-color);

filter: brightness(90%);

border-right: var(--code-start-border);

border-bottom: var(--code-start-border);

}

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

color: var(--page-text-color);

}

チェックボックスになるタグ

code: style.css

/* チェックボックスになるタグ v2 Font Awesome版 */

display: inline-block;

width: 0;

text-indent: -9999px;

}

display: inline-block;

min-width: 1.15em;

padding-left: 1px;

font-family: "Font Awesome 5 Free";

font-weight: 400;

font-size: 120%;

text-align: center;

vertical-align: middle;

}

content: "\f0c8";

}

content: "\f14a";

}

codeblockのフォントを小さくする

code:style.css

.line span.code-block {

line-height: 1.2em;

font-size: 88%;

}

code: style.css

.deco-\~:not(:hover) {

filter: blur(3px);

}

.cursor-line .deco-\~:not(:hover) {

filter: none;

}

code: style.css

div.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon):is(

)::after {

display: none;

}

.line span:not(.deco-\.) > span > a.link:is(

)::before {

display: inline-block;

width: 1em; /*16px;*/

height: 1em; /*16px;*/

vertical-align: -1px;/*-3px;*/

text-align: center;

background-size: contain;

background-repeat: no-repeat;

font-family:"Font Awesome 5 Free","Font Awesome 5 Brands";

/* margin-right: 2px; */

}

content: '\f1c1';

font-weight: 400; /* use Regular Style */

margin-right: 1px;

}

:is(.line, .line .deco) a.link:is(

)::before {

content: '\f09b';

font-weight: 400;

margin-right: 1px;

}

:is(.line, .line .deco) a.link:is(

)::before {

content: '\f266';

font-weight: 400;

margin-right: 3px;

}

.line .deco-\. a.link:is(

) span.char-index {

display: inline-block;

width: 0;

text-indent: -9999px;

}

.line .deco-\. a.link:is(

) span.char-index:nth-of-type(30) ~ span.char-index {

display: inherit;

width: inherit;

text-indent: inherit;

}