settings
code:style.css
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@300;400;600;700&display=swap');
body .editor, .stream, .links-container {
font-family: "Avenir Next", "IBM Plex Sans JP", sans-serif;
--primary-colour: #4BB8B4;
--background-colour: #FCFAFF;
--text-colour: #2D3948;
--secondary-colour: #E0E0E0;
--highlight-colour: #F4A261;
--sub-red: #E63946;
--sub-blue: #8080C1;
color: var(--text-colour);
}
/*タグをラベル風に*/
atype="hashTag"{
display: inline-block;
padding: 0 8px;
margin: 0 4px 4px 0;
background: var(--background-colour);
color: var(--primary-colour);
font-size: 0.8em;
border: 1px solid var(--primary-colour);
border-radius: 20px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* ヘッダを作ろうプロジェクト
.page-list::before {
margin-top: 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #333;
display: flex;
flex-direction: column;
align-items: center;
}
*/
/* ピン留め行独立 */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
/* ピン留めイメージ消去 */
.grid li.page-list-item a .pin {
background-image: none }
/* カードの縁を丸く */
.page,
.grid li.page-list-item a,
.grid.grid-md li.page-list-item a,
.grid.grid-lg li.page-list-item a {
border-radius: 10px;
}
/* カードに付されたタイトル背景を下につける */
.grid li.page-list-item:not(.pin) a .header {
position: absolute;
bottom: 0px;
z-index: 1;
background: #EDF8F7;
border-top: 3px;
text-align: center;
color: var(--text-colour);
}
/* ピン留めされたカードのタイトルのサイズを小さく(プレビューを省略) */
.page-list > .grid li.pin {
height: 40px;
width: 100%;
margin-bottom: 5px;
}
/* ピン留めされたカードのタイトル背景だけ白 */
.grid li.page-list-item.pin a .header {
position: absolute;
bottom: 0px;
z-index: 1;
border-top: 3px;
text-align: center;
color: white;
background: #FCFAFF;
}
/* ピン留めされたカードのタイトル文字を黒、さらに強調 */
.grid li.page-list-item.pin a .title {
font-size: 110%;
color: black;
}
/* "用語まとめ"タグ(実質的にリンク)が存在する場合、ヘッダの色を変更する(調整中) */
.grid li.page-list-itemdata-page-links~='用語まとめ' a .header {
background: rgba(250, 0, 0, 1.0) !important;
}
/* カードにホバーすると拡大 */
.grid li.page-list-item a:hover{
-webkit-transition: 0.2s; /* Chrome、Safari用 */
-webkit-transform: scale(1.05);
transition: 0.2s;
transform: scale(1.05);
}
/* 警告表記 */
.deco-\! {
--warning-text-color: var(--background-colour);
--warning-bg: var(--sub-red);
--warning-bg-border: #ee6000;
--page-link-color: #80c9fe;
--empty-page-link-color: #ffb7b8;
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);
}
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
color: var(--highlight-colour);
/* background: linear-gradient(transparent 10%, var(--highlight-colour) 25%, var(--highlight-colour) 70%, transparent 90%) */
}
/*トプ画変更*/
.navbar .project-home::before {
background-color: var(--background-colour);
background-image: url(https://scrapbox.io/files/67acbf28fb9ab380563a1ad2.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 4px;
content: "";
display: inline-block;
height: 32px;
width: 160px;
}
span.title {
display: none;
}
/* settingsというタイトルのページをメインページで非表示 */
.page-list-itemdata-page-title*="setting" {
display: none !important;
}
/* 各ページのタイトルを太く、中央揃え、下線を引く*/
.line-title .text{
font-weight: bold;
font-size: 32px;
text-align: center;
border-bottom: solid 2px #ddd;
padding-bottom: 0;
margin-bottom: 28px;
color: var(--text-colour);
}
/*強調表現に色つける*/
.deco-\* {
border-left: .2em solid var(--primary-colour); /* 左端太線の色 */
padding-left: .7rem;
margin-right: .5em;
font-size: 1.2em;
font-weight: 700;
color: var(--text-colour); /* 文字色 */
}
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: var(--secondary-colour) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
/*ページに影つける*/
.page {
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
/*　リンクの色調整*/
.line a.link, .line a.page-link {
color: var(--sub-blue);
text-decoration: none;
}
.line a:hover {
text-decoration: underline;
}