Bedrockテーマ

rev.21

Bedrock

クレジット

タイトル: Bedrockテーマ
作者: EstrellaYoshte & Liryn & Placeholder McD
原題: Bedrock Theme
作成年: 2022

Bedrockは EstrellaYoshte, Liryn, Placeholder McDによって作成された美的なベーステーマです。GitHubでサポートをしてくださった aismallardと、編集エリアのボタンのSVGと一般的なコンサルティングをしてくださった Woedenazに多大な感謝を捧げます。
このテーマはBasalt 2.0の基礎構造となります。

Quartz--basalt-primary-color254,254,254

Calcite--basalt-secondary-color247,248,250

Lapis Lazuli--basalt-bright-element-color16,76,184

Amethyst--basalt-undertone61,71,202

Slate--basalt-overtone56,60,64

{$color6-name}{$color6-variable}{$color6-info}

Granite--basalt-tertiary-color218,219,222

Andesite--basalt-sub-text-color155,154,162

Sunstone--basalt-alternate-color255,132,0

Emerald--basalt-positive-color26,180,28

Ruby--basalt-negative-color255,48,48

Sapphire--basalt-dark-element-color18,20,150

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

使用するには、以下を追加してください:

[[include :scp-jp:theme:bedrock]]

例

罫線は、4つのハイフン「----」を使用して作成でき¹、何かの内側（例: ブロック引用）に配置されていなければページ全体に適用されます。このドキュメントのセクションを区切る線は罫線です。

画像ブロック。

見出しは、行の先頭に1～6文字の「+」を置くことで作成できます。

折りたたみ - 私をクリックして！

これはタブです。

これは引用ブロックです。各行の先頭に半角の「> 」を置くことで作成されます。
追加のテキスト

これは罫線です

入れ子になった引用ブロック

これは	テーブルです
もう	作り方は
知っているはずです

ヘッダーフォントはLexend。

BodyフォントはInter。

UIフォントはJost。

等幅フォントはJetBrains Mono。

CSS変数

Bedrockは一連のCSS変数の上に構築されており、それらを変更することで外観を変えることができます。トップレベルの変数は以下の通りです:

:root {
    --basalt-primary-color: 254,254,254;
    --basalt-secondary-color: 247,248,250;
    --basalt-tertiary-color: 218,219,222;
    --basalt-main-text-color: 20,20,20;
    --basalt-overtone: 50,50,50;
    --basalt-undertone: 61,71,202;
 
    --basalt-bright-element-color: 16,76,184;
    --basalt-dark-element-color: 18,20,150;
    --basalt-alternate-color: 255,132,0;
    --basalt-positive-color: 24,163,20;
    --basalt-negative-color: 255,48,48;
    --basalt-cancel-color: var(--basalt-negative-color);
    --basalt-sub-text-color: 155,154,162;
    --basalt-light-text-color: var(--basalt-primary-color);
 
    --basalt-UI-dark-palette: var(--basalt-overtone);
    --basalt-focus-color: var(--basalt-undertone);
    --basalt-background-color: var(--basalt-primary-color);
}

カラー変数はRGBフォーマットで記述してください。

:root {
    --header-font-primary: 'Lexend';
    --UI-font-primary: 'Jost';
    --body-font-primary: 'Inter';
    --mono-font-primary: 'JetBrains Mono';
}

Bedrockで使用されている4種類のフォント。

:root {
    --header-logo: url('https://cdn.scpwiki.com/theme/en/basalt/basaltlogo.svg');
    --header-title: 'SCP Foundation';
    --header-subtitle: 'SECURE - CONTAIN - PROTECT';
    --title-size: 1.5rem;
    --subtitle-size: 0.825rem;
 
    --base-font-size: 1rem;
    --main-content-width: 67.5rem;
    --side-bar-width: 19rem;
}

CSSのcalc()関数の仕組みにより、remやpxのような長さの単位を持つ変数は、値が0に設定されていても破棄されないことに注意してください。例えば、--subtitle-size: 0rem;はサブタイトルを消しますが、calc()関数は無効になりません。

--main-content-widthは%の単位で設定しないでください。メインエリアを画面幅最大に表示するには、代わりに任意の高いrem値を使用してください。

その他

このテーマのソースコードはGitHubページにあります。

Bedrockは現在、通常テーマと互換性はありません。

en mikukaneko テーマ

ページリビジョン: 7, 最終更新: 26 Jul 2024 18:19

編集評価 (0) タグディスカッション履歴ファイル印刷サイトツール + オプション

SCP-JP環境再現サイト

実験、実験、爆発

Bedrock

クレジット

例

1番目の見出し

2番目の見出し

3番目の見出し

4番目の見出し

5番目の見出し

6番目の見出し

ヘッダーフォントはLexend。

CSS変数

その他