settings
テーマいじり
code:style.css
htmldata-project-theme='hacker1' {
--body-bg: #0b162d;
--navbar-bg: #323c52;
--new-button-horizontal-color: #ffcc37;
--new-button-bg: #0b162d;
--new-button-hover-bg: #0b162d;
--new-button-active-bg: #2b364d;
--tool-color: #eeeeee;
--tool-text-color: #eeeeee;
--code-bg: rgba(32,32,32,.04);
}
body {
background-image: url(https://i.gyazo.com/4882595f206ebd73e6d7f6997c567579.png);
background-size: 100%;
}
.grid li.page-list-item a .pin {
background: linear-gradient(45deg, #f98119, #fff09f 50%, #0b162d 50%, #0b162d);
}
.grid li.page-list-item a .pin + .content .header {
border-top-color: #ffd522;
padding: 10px 14px;
}
.table-block .table-block-start {
background-color: rgba(255,205,55,.4);
}
.navbar {
backdrop-filter: none;
}
テロメアのテーマ変更
code:style.css
.line .telomere .telomere-border,
.line .telomere .telomere-border.unread,
.line .telomere .telomere-border.unread.updated-after-load {
transition: none;
box-sizing: content-box;
border-color: var(--navbar-bg);
border-width: 0 0 0 4px !important;
width: 4px !important;
margin: 0 2px;
}
.line .telomere .telomere-border {
border-color: var(--telomere-border);
}
.line .telomere .telomere-border.unread {
border-color: var(--telomere-unread);
}
.line .telomere .telomere-border.unread.updated-after-load {
border-color: var(--telomere-updated);
}
.line .telomere .telomere-border .description,
.line .telomere .telomere-border .menu-item {
width: max-content;
}
参考 : /ePi5131/ePi WABISABI theme
テキストのスタイルいじり
code:style.css
.line .text {
font-size: 14.5px;
line-height: 2.8rem;
}
.line.line-title .text {
font-size: 2.8rem;
font-weight: bold;
line-height: 1.2;
border-bottom: dashed 2px;
padding: 0 0 1rem 1rem;
margin-bottom: 3rem;
}
.line .indent-mark .dot {
width: .8rem;
height: .3rem;
border-radius: 0;
background-color: #c0c0c0;
}
参考 : /scrasobox/箇条書きを控えめにする
文字装飾記法
code:style.css
.deco-\! {
color: #ffc036;
}
.deco-\~ {
color: #fff;
background-color: #ffc036;
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: .2em;
}
.deco-\+ {
color: #ffffff;
padding: .5rem 3rem .5rem 0;
display: inline-block;
line-height: 1.3;
background: #ffc036;
vertical-align: middle;
border-radius: 25px 0px 0px 25px;
margin-bottom: 0.6rem;
}
.deco-\+:before {
content: '●';
color: white;
margin: 0 .6em;
}
.deco-\(:before {
content:"[";
}
.deco-\(:after {
content:"]";
}
.deco-\'{
padding: 0px 8px;
font-size: 90%;
color: #342d9c;
background-color: var(--code-bg);
border-radius: 4px;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}
strike { text-decoration: none; }
strike span { text-decoration: line-through; }
.deco-\> {
font-size: 0.7em;
}
参考 : https://saruwakakun.com/html-css/reference/h-design, /ePi5131/インラインコード風の記法
yellow text
label
caption
square brackets
inline code
small
画像を並べて表示 兼 ヘッダー画像風の表示
code:style.css
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
.line class^="level" .deco-\| { width: 100%; flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { max-width: 420px; width: calc(90%/2); height:80%; }
.line .level-3 .deco-\| > span { width: calc(100%/3); height:80%; }
.line .level-4 .deco-\| > span { width: calc(100%/4); height:80%; }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
参考 : /scrasobox/画像を並べて表示
XのリンクのTwitterアイコンを消す
code:style.css
iclass="fab fa-twitter favicon" { opacity: 0; width: 0; }
ハッシュ記法のリンクをラベル風にする
code:style.css
atype="hashTag" {
display: inline-block;
padding: 0 6px;
margin: 1px 4px;
background-color: #0b162d;
color: #fff !important;
border-radius: .2em;
}
参考 : /yuta0801/ハッシュ記法をタグにするUserCSS
プロジェクトTOPへのリンクをメニューバーに移動
code:style.css
.quick-launch .left-box {
position: fixed;
top: -2px;
left: 80px;
z-index: 1000;
}
参考 : /madobes/settings
ページの横幅制限解除
code:style.css
/*
.container { width: 100%; max-width: none; }
.quick-launch { max-width: 1400px; margin: 0 auto 12px auto; }
.page-list { max-width: 1400px; margin: 0 auto; }
.page-column { grid-template-columns: 46px minmax(20%, 1400px) min-content; }
.line ahref$="/icons/-" img { width: 100%; }
iframe.youtube { max-width: 60%; max-height: 25vw; }
*/
参考 : /ePi5131/ページの横幅制限解除, /ePi5131/YouTubeの埋め込みデカすぎなので控えめにする