# 次期CSSフレーム用覚書

変数

## 注意事項
画面サイズによって変動する部分は画面サイズ用の変数を作るのではなく、
メディアクエリーで変数の値を上書きする

| 変数名 | 役割 |
| ---- | ---- |
| --vk-color-text-body | 本文文字色 |
| --vk-color-text-light | 日付やキャプションなど薄い文字用 |
| --vk-color-text-link | リンク文字色 |
| --vk-color-text-link-hover | リンクホバー文字字色 |
| --vk-color-border-hr | 投稿リストやメニュー項目の区切り線の色 |
| --vk-color-border-light | 少し太い線など、通常の線色だと重くなる場合のみ（ほぼExUnitのカード用） |
| --vk-color-border-zuru | ズルいボーター線用 |
| --vk-color-footer-bg | フッター背景の色 |
| --vk-color-bg-accent | 通常背景色より少しだけ暗くしたい時に使用 |
| --vk-width-container | コンテナ幅 |
| --vk-margin-elem | pやテーブルなど各ブロック下の余白 |
| --vk-margin-minisec-inner | 投稿カードなどの要素の一番外側の余白など |
| --vk-margin-minisec-inner-elem | 投稿カードなどの要素の中の要素の余白 |
| --vk-margin-section-inner | セクションエリア内の余白 |
| --vk-margin-section-bottom | セクション後の余白 |
| --vk-radius-unit-sm | 要素のR |
| --vk-radius-unit-md | 要素のR |
| --vk-radius-unit-lg | 要素のR |
| --vk-size-text | 文字サイズ（普通） |
| --vk-size-text-meta | 文字サイズ（メタテキスト） |
| --vk-size-text-sm | 文字サイズ（小） |
| --vk-size-text-xs | 文字サイズ（極小） |
| --vk-line-height | 行間（標準） |
| --vk-line-height-low | 行間（標準） |

* ボタンの左右のpaddingをもっととる

* 見出しの上の余白は基本つけない。
* 次の要素が見出しの場合に余分に余白がつくように

※数値は適当

:root {
--vk-color-text-body : #444444;
--vk-color-text-link : #0000cc;
--vk-color-text-link-hover : #0000ff;
--vk-color-border-hr : #efefef;
--vk-color-footer-bg : #f5f5f5;
--vk-width-container : 1110px;
--vk-margin-block-bottom : 2rem;
--vk-margin-section-bottom : 4ewm;
}
body.mode-dark {

}
@media ( max-width:560px; ) {
    --vk-width-container : 1110px;
}

https://techblog.yahoo.co.jp/entry/2020122130052964/?fbclid=IwAR3ZZ_ZwYnevzyUgVvUynmGFEDNzeMboH0K8YlRLGHjrdDShdU3kTUzdvz0