Bedrockテーマ

rev.6

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-color24,163,20

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://scp-jp.github.io/Basalt/basaltlogo.svg");
    --header-title: "SCP財団";
    --header-subtitle: '確保 - 収容 - 保護';
    --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 テーマ

ページリビジョン: 3, 最終更新: 28 Jan 2023 02:21

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

SCP-JP環境再現サイト

実験、実験、爆発

Bedrock

クレジット

例

1番目の見出し

2番目の見出し

3番目の見出し

4番目の見出し

5番目の見出し

6番目の見出し

ヘッダーフォントはLexend。

CSS変数

その他