settings

他のプロジェクトをパクりまくっています

code:style.css

@import url('./mainStyle.css');

@import url('./telomereColor.css');

@import url('./indentVertialLine.css');

@import url('./checkbox.css');

@import url('./externalLinkMarker.css');

@import url('./titleLayout.css');

@import url('./boldMarker.css');

@import url('./inlineQuote.css');

@import url('./imageAlign.css');

@import url('./tagLabel.css');

@import url('./imageResize.css');

@import url('./codeLineNum.css');

@import url('./centered thumbnail.css');

@import url('./resizeIndentMark.css');

@import url('./linkColor.css');

@import url('./hideBoxShadow.css');

@import url('./hideAlias.css');

@import url('./rubi.css');

@import url('./separator.css');

チェックボックス

code:checkbox.css

中黒の位置調整

code:resizeIndentMark.css

.line .indent-mark .dot {

top: 10px;

width: .5rem;

height: .5rem;

background-color: black;

}

code:indentVertialLine.css

.lines .line .indent-mark {

height: 100%;

}

.lines .line .table-block .indent-mark {

height: auto; /*tableは除外する*/

}

.indent-mark .pad {

height: 100% !important;

overflow: unset !important;

}

.indent-mark span:not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {

}

a

a

a

a

フォント

code:mainStyle.css

body {

/* ... */

background:

/* radial-gradient(green, black); */

white;

--tool-badge-bg: black;

--card-bg: white;

--card-backside: black;

--card-box-hover-shadow: none;

--card-description-link-color: currentColor;

/* Custom CSS variables */

--text-font: 'Zen Kaku Gothic New', sans-serif;

--heading-font: 'Inter', Helvetica, 'Noto Snas JP', sans-serif;

--code-font: 'Fira Code', Monaco, monospace;

}

.editor {

font-family: var(--text-font) !important;

}

color: var(--body-bg);

text-decoration: none;

border-radius: 0em;

background: white;

background-attachment: fixed;

background-position: 0 0;

background-size: 1000px 1px;

filter: grayscale(100%) invert(1);

/*transition: 0.15s*/;

font-weight: bold;

animation: link-bg-anim 4s linear 0s infinite;

-webkit-animation: link-bg-anim 4s linear 0s infinite;

}

color: white !important;

filter: invert(0) !important;

}

.line {

color: black;

.page & {

line-height: 1.8;

}

&.line-title {

font-family: var(--heading-font);

font-size: 2.8rem;

font-weight: 400;

line-height: 1.7;

text-wrap: balance;

}

& strong {

font-weight: 700 !important;

font-family: var(--heading-font);

}

& strong.level-1{

text-decoration: inherit;

text-decoration-color: rgba(0, 0, 0, 1);

font-family: var(--text-font) !important;

}

}

font-family: var(--heading-font);

}

font-family: var(--heading-font);

}

ul.grid {

li.page-list-item a .pin {

background: black;

}

& :is(.page-list, .related-page-list) & li.page-list-item {

width: 100%;

height: 100%;

margin: 0;

aspect-ratio: 10 / 11;

}

--border-color: black;

--body-bg: white;

& li.page-list-item a {

position: relative;

box-shadow: inset 0 0 0 .5px black;

overflow: visible;

height: 100%;

border-radius: 2px;

&:after {

content: '';

position: absolute;

inset: 0;

background: var(--border-color);

mix-blend-mode: screen;

z-index: 20;

}

& .pin {

right: 0px;

top: px;

border-radius: 0 0 0 2px;

z-index: 100;

background: linear-gradient(

45deg,

var(--body-bg) 50%,

var(--border-color) 50%

);

}

& .content {

font-family: var(--text-font);

height: calc(100% - 14px);

border-radius: 3px;

overflow: hidden;

margin: 0 0px 0px;

padding-top: 0px;

}

& .header {

border-top: none;

padding: 12 12 12px;

}

&:hover {

filter: contrast(100%) grayscale(100%) invert(1);

transition: 0.15s;

border-radius: 2px;

}

& .title {

font-weight: 700 !important;

font-size: 14px;

color: black;

font-family: var(--heading-font);

}

& .description {

color: black;

font-family: inherit;

}

}

}

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

grid-column-start: 1;

}

code:externalLinkMarker.css

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

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

font-family: 'Font Awesome 5 Free';

color: rgba(0, 0, 0, 0.4);

content: ' \f35d';

font-weight: 900;

display: inline-block;

}

code:style-test.css

button#Templates.tool-btn:hover { text-decoration: none }

button#Templates.tool-btn::before { position: absolute; content: '\f067'; font: 900 21px/46px 'Font Awesome 5 Free' }

button#Templates.tool-btn img { opacity: 0 }

code:imageAlign.css

/* マトリクス記法 */

.line:not(.cursor-line) .deco-\| { display: inline-flex }

.line .deco-\| img.image { object-fit: contain; margin: 0 }

/* 太字記法と組み合わせて列数を変える */

.line .level-1 .deco-\| > span { width: calc(100%/1) }

.line .level-2 .deco-\| > span { width: calc(100%/2) }

.line .level-3 .deco-\| > span { width: calc(100%/3) }

.line .level-4 .deco-\| > span { width: calc(100%/4) }

.line .level-5 .deco-\| > span { width: calc(100%/5) }

/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */

タイトルのレイアウトを調整

code:titleLayout.css

.line.line-title {

font-weight: bold;

line-height: 1.4;

color: black;

}

.line.line-title .text {

font-size: 1.7em;

padding-bottom: .2em;

}

/* スマホ表示用に調整 */

@media screen and (max-width: 670px) {

.line.line-title .text {

font-size: 1.8rem;

}

}

"#"で始まるタグをラベル風にする

code:tagLabel.css

color: black !important; /* リンクされたハッシュタグの色 */

display: inline-block;

padding: 0px 0px;

margin: 0 6px 10px 0;

font-size: 0.8em;

text-decoration: none !important;

transition: 0s;

-webkit-transform: scale(1);

transform: scale(1);

}

color: red !important;

}

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

小見出し

code:strongLevel3.css

.line strong.level-3{

padding: 0.5em;/*文字周りの余白*/

font-size:1.3em

}

リンク色を変更

code:linkColor.css

color: black !important;

text-decoration: underline;

text-decoration-color: rgba(0, 0, 0, 0.3);

}

text-decoration: none;

}

code:inlineQuote.css

/* インライン引用 */

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

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

.deco-\" {

border-radius: .2em;

padding: 0 .4em;

background-color: rgba(128,128,128,0.1);

font-size: 95%;

font-style: italic;

}

.deco-\"::before {

font-size: 85%;

font-family: 'Font Awesome 5 Free';

content: '\f10d';

font-weight: 900;

vertical-align: super;

}

code:imageResize.css

.level-1 img { width: 16.7% }

.level-2 img { width: 33.3% }

.level-3 img { width: 50% }

.level-4 img { width: 66.7% }

.level-5 img { width: 83.3% }

.level-6 img { width: 100% }

code:codeLineNum.css

@import '../コードブロック行頭の空白の色を変えるCSS/style.css';

}

.section-title, .code-block-start {

counter-reset: codeline

}

.code-block .indent-mark > span.char-index:last-child {

counter-increment: codeline

}

body:not(.presentation) .code-block .indent-mark > span.char-index:last-child::before {

content: counter(codeline);

position: absolute;

}

.code-block .indent-mark > span.char-index:last-child::before {

}

/* カーソル選択時の行番号の色 */

.cursor-line .code-block .indent-mark > span.char-index:last-child::before {

font-weight: bolder;

}

サムネイル画像を中央に収める

code:centered thumbnail.css

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

display: flex;

justify-content: center;

align-items: center;

img {

width: auto;

max-width: 100%;

max-height: 100%;

border-radius: 3px;

}

}

privateタグでリンクとStreamから消す

code:style.css

display: none;

}

hideタグでホームから消す

code:style.css

display: none !important;

}

日報をホームから消す

code:hideDiary.css

display: none !important;

}

code:hideAlias.css

.page-list :is(

) {

display: none;

}

リンクに下線を引く

code:linkUnderline.css

.line{

a:is(.link, .page-link) {

text-decoration: underline;

text-decoration-color: rgba(0, 0, 0, 0.4);

}

}

.line{

a:is(.empty-page-link ) {

text-decoration: none !important;

}

}

ページの陰を消す

code:hideBoxShadow.css

.page {

box-shadow: 1px 2px 4px 2px rgba(0,0,0,0);

}

テロメアの色変更

code:telomereColor.css

.line .telomere .telomere-border.unread { border-color: black; width: 1px}

.line .telomere .telomere-border.unread.updated-after-load { border-color: black; width: 1px}

ナビバー調整

code:navbar.css

.navbar{

opacity: .25;

transition: opacity 0.1s;

box-shadow: none;

}

/*.page-sort-menu*/ .tool-btn{

opacity: 0.1;

transition: opacity 0.5s;

}

.navbar:hover, .page-menu:hover, .project-home:hover, /*.page-sort-menu*/ .tool-btn:hover {

opacity: 1;

}

カーソル点滅

code:blinkCursor.css

.cursor {

animation: blink 1s infinite;

}

@keyframes blink {

0% { opacity: 0; }

50% { opacity: 0; }

51% { opacity: 1; }

100% { opacity: 1;}

}

code:rubi.css

.deco-\| {

display: inline-block ;

position: relative ;

}

.deco-\| a{

display: inline-flex ;

position: absolute ;

top: -1em ;

left: 0 ;

right: 0 ;

justify-content: space-around ;

font-size: 0.6em ;

}

.deco-\| a:link,

.deco-\| a:visited {

text-decoration: none;

}

セパレーター

code:separator.css

&{

display: flex;

align-items: center;

text-align: center;

}

&:not(.cursor-line):after{

flex-grow: 1;

content: "";

}

&:not(.cursor-line){

height:28px;

}

}

display:none;

}

}

コード表記

code:style.css

@font-face {

/*フォントの名前*/

font-family: "MNoto Sans";

/*フォントファイルへのパス（複数指定の場合、上から順に読み込まれる）*/

}

.deco-\# {

font-family: "MNoto Sans";

}

Asus

code:style.css

public.icon