しずかなScrapbox

しずかなインターネットの見た目の静かさがScrapboxにもほしい

フォントを静かにする

Noto Sansにして色を薄く

LINE Seed JPにしてみた

code:style.css

@import url('https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@400;700&display=swap');

html, body, .editor, .stream, .grid li {

font-family: "LINE Seed JP", sans-serif;

color: rgb(100, 100, 100);

font-weight: 400;

}

.deco-\* {

font-weight: 700;

}

しずかなインターネットには源柔ゴシックのWebフォントが使われてるっぽい

@importは先頭にないといけないようだったので移動した

一番白っぽいテーマを選ぶ

とりあえず白くする

code:style.css

body {

background-color: #fff;

}

テロメアが気になる

テロメア関係のcss変数の部分

code:css

--telomere-border: #e2e2e2;

--telomere-unread: #89a3ff;

--telomere-updated: #6b8cff;

少し薄くした

code:style.css

body {

--telomere-border: #f8f8f8;

--telomere-unread: #c0d1ff;

--telomere-updated: #b0c7ff;

}

ピン止めの色が濃い

ピン度目の色

code:css

--card-backside: #979797;

少し薄くした

code:style.css

body {

--card-backside: #cccccc;

}

トップページのカードのボックスシャドウを本文やページリストにも出したい

カードのボックスシャドウ

code:css

.page-list .grid li{box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;}

code:style.css

main.page {box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;}

li.page-list-item {box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;}

結構静かになった

右下のやつ邪魔だわ…

消した

ただの白いScrapboxになった