災厄テーマ

rev.21

クレジット

タイトル: 災厄テーマ
作者: ©︎Oboebandgeek99
原題: Calamity Theme
作成年: 2021

これは災厄テーマであり、人ならぬものカノンに帰属する記事の為作成されました。

Oboebandgeek99がCroquemboucheの渦巻く灰テーマを改造したものです。本テーマにはWoedenazのBHL中央寄せヘッダー及びBHLトグルサイドバーもincludeされています。

ヘッダーは65秒かけて長い昼と夜のサイクルを繰り返します。夜になるたび雨が降り出しますが、これは真夜中に止みます。

使い方

注: これはBlack Highlighterベースのテーマです。このテーマを使用するにはBlack Highlighterテーマもインポートする必要があります。詳細については、ここを参照してください

本テーマを導入するには、あなたページへ以下を追加してください:

[[include :scp-jp:theme:black-highlighter-theme]]
[[include :scp-jp:theme:calamity]]

テーマカラー

Eastern Blue--medium-accent(23, 152, 158)

Scampi--dark-accent(90, 90, 152)

Scooter--bright-accent(51, 201, 208)

Melrose--pale-accent(150, 150, 254)

{$color5-name}{$color5-variable}{$color5-info}

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

Roman--sky-at-dawn(221, 93, 112)

Seagull--sky-at-morning(131, 192, 233)

Hippie Blue--sky-at-daytime(104, 153, 186)

Shuttle Gray--sky-at-evening(87, 98, 106)

Storm Dust--sky-at-dusk(99, 100, 90)

Mirage--sky-at-night(21, 25, 43)

{$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}

人ならぬものロゴ

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

+ 見出し

1番目の見出し

2番目の見出し

3番目の見出し

4番目の見出し

5番目の見出し

6番目の見出し

タブを作る

これはタブです。

タブが作られた

見てください、ここにもテキストがあります。

なんと奇妙な。

長いタブ

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

空のタブ

空のタブ

空のタブ

空のタブ

空のタブ

空のタブ

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

---

これは罫線です

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

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

bodyフォントはUbuntu.
ヘッダーフォントはCabin SketchとNew Tegomin。
見出しフォントはBaumansとYusei Magic。
等幅フォントはSpace Mono。

+ テーマコードを表示

/*
Calamity Theme
[2021 Wikidot Theme]
Created by Oboebandgeek99
Edited for SCP財団 by Mishary and MikuKaneko
Based on Swirling Ashes Theme created by Croquembouche.
The UnHuman logo was created by Oboebandgeek99 based on an image in the Public Domain. Licensed under CC-BY-SA 3.0.
*/
 
@import url('https://fonts.googleapis.com/css?family=Cabin+Sketch|Ubuntu|Space+Mono|Baumans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');
 
/* BHL Vars */
 
:root {
    --theme-base: "black-highlighter";
    --theme-id: "calamity";
    --theme-name: "Calamity Theme";
 
    /* Header */
    --logo-image: none;
    --header-title: "人ならぬもの";
    --header-subtitle: "終焉を越えし生命";
 
    /* Typefaces */
    --body-font: "Ubuntu", "M Plus 1p", sans-serif;
    --header-font: "Cabin Sketch", "New Tegomin", sans-serif;
    --title-font: "Baumans", "Yusei Magic", sans-serif;
    --mono-font: "Space Mono", "Andale Mono", "Courier New", Courier, monospace;
 
    /* Standard Colors */
    --black-monochrome: var(--sky-at-night);
    --dark-gray-monochrome: var(--sky-at-evening);
    --pale-accent: 150, 150, 254;
    /* lavender, for visited links */
    --bright-accent: 51, 201, 208;
    /* bright turquoise */
    --medium-accent: 23, 152, 158;
    /* darker turquoise */
    --dark-accent: 90, 90, 152;
    /* darker purple */
    --alt-accent: var(--sky-at-dawn);
    /* pinkish red, for newpage links */
 
    /* Sky */
    --sky-at-dawn: 221, 93, 112;
    --sky-at-morning: 131, 192, 233;
    --sky-at-daytime: 104, 153, 186;
    --sky-at-evening: 87, 98, 106;
    --sky-at-dusk: 99, 100, 90;
    --sky-at-night: 21, 25, 43;
    --sky-length: 15;
    --sky-time: 65s;
 
    /* Delete the default header background */
    --gradient-header: linear-gradient(transparent, transparent);
    --diagonal-stripes: linear-gradient(transparent, transparent);
 
    /* Background Colors */
    --background-gradient-color: var(--sky-at-daytime);
 
    /* Primary Theme Colors */
    --swatch-primary: var(--medium-accent);
    --swatch-primary-darker: var(--pale-accent);
 
    /* Primary Menu Colors */
    --swatch-menubg-medium-dark-color: var(--medium-accent);
 
    /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--bright-accent);
    --swatch-tertiary-color: var(--pale-accent);
 
    /* Link Colors */
    --link-color: 110, 110, 170;
    --visited-link-color: var(--medium-accent);
 
    /* Spacing Measurements */
 
    /* header measurements */
    --header-height-on-desktop: 10rem;
    --header-height-on-mobile: 10rem;
 
    /* final values */
    --header-h1-font-size: calc(var(--base-font-size) * 4);
    --header-h2-font-size: calc(var(--base-font-size) * 1.6);
 
    /*Toggle Colors */
    --toggle-border-color: rgb(var(--dark-accent));
    --toggle-icon-color: rgb(var(--pale-accent));
    --toggle-roundness: 40%;
 
    /* Login Gradient */
    --login-gradient: linear-gradient(to top,
     rgb(var(--dark-accent)) 0%,
     rgb(var(--medium-accent)) 100%);
 
    /* Ayers Info Bar */
    --barColour: #5A5A98 !important;
    --linkColour: #FCFCFC !important;
 
}
 
/* Remove text shadow from headers */
#header h1 a::before,
#header h2 span::before {
    --text-shadow: none;
    text-shadow: none;
}
 
/* Subtitle size and case */
#header h2,
#header h2::before,
#header h2 span,
#header h2 span::before {
    text-transform: none;
}
 
#header h2 span {
    margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 1em);
}
 
/* Tab Selected Color */
.yui-navset .yui-nav .selected,
.yui-navset .yui-nav .selected a:focus {
    background-color: rgb(var(--dark-accent));
}
 
.yui-navset .yui-nav {
    background-color: rgb(var(--pale-accent));
    color: rgb(var(--black-monochrome));
}
 
/* Header Logos -
* This calculates the distance between the two images that make up the
* UnHuman logo, measured in rems (root ems - an em as defined by the root
* font size) from center.
*/
 
#header::before {
    display: none;
}
 
div#extra-div-1,
div#extra-div-2 {
    position: absolute;
    top: 1rem;
    width: 100%;
    height: 8rem;
}
 
div#extra-div-1 {
    background: url("https://scp-jp.wdfiles.com/local--files/theme%3Acalamity/unhuman-left-logo.png");
    background-repeat: no-repeat;
    background-position: calc(50% - 9rem) 80%;
    background-size: contain;
}
 
div#extra-div-2 {
    background: url("https://scp-jp.wdfiles.com/local--files/theme%3Acalamity/unhuman-right-logo.png");
    background-repeat: no-repeat;
    background-position: calc(50% + 9rem) 80%;
    background-size: contain;
}
 
/* Header on Mobile */
@media only screen and (max-width: 64rem) {
 
    :root {
     --header-h1-font-size: calc(var(--base-font-size) * 2.65);
     --header-h2-font-size: calc(var(--base-font-size) * 1.25);
    }
 
    div#extra-div-1 {
     background-position: calc(50% - 6rem) 80%;
    }
 
    div#extra-div-2 {
     background-position: calc(50% + 6rem) 80%;
    }
}
 
#header {
    /* ===HEADER ELEMENTS=== */
    /* ===HEADER TITLES=== */
    /* Header H1 and H2 colors */
    --swatch-headerh1-color: var(--swatch-text-light);
    --swatch-headerh2-color: var(--swatch-text-light);
 
    /* ===SEARCH ELEMENT=== */
    --search-icon-color: var(--swatch-text-secondary-color);
    --search-icon-bg-color: var(--swatch-primary-darkest);
    --search-icon-hover-color: var(--swatch-text-secondary-color);
    --search-icon-hover-bg-color: var(--swatch-alternate-color);
    --search-textbox-text-color: 0, 0, 0, 0;
    /* Focus is when the search box has been clicked on */
    --search-icon-focus-color: var(--swatch-text-secondary-color);
    --search-icon-focus-bg-color: var(--swatch-primary);
    --search-focus-outline-color: var(--swatch-primary);
    --search-focus-textbox-bg-color: var(--swatch-alternate-color);
    --search-focus-textbox-text-color: var(--swatch-text-secondary-color);
 
    /* ===LOGIN BOX ELEMENT=== */
    --login-line-divider-color: var(--swatch-text-secondary-color);
    --login-username-color: var(--dark-accent);
    --login-myaccount-color: var(--dark-accent);
    --login-myaccount-underline-color: var(--swatch-primary-darkest);
    --login-myaccount-hover-bg-color: var(--swatch-primary-darkest);
    --login-arrow-color: var(--swatch-text-light);
    /* Dropdown Box when arrow is clicked */
    --login-dropdown-bg-color: var(--login-gradient);
    --login-dropdown-bg-image: var(--login-gradient);
    --login-dropdown-border-color: var(--bright-accent), 0.5;
    --login-dropdown-text-color: var(--swatch-text-secondary-color);
    --login-dropdown-text-hover-color: var(--swatch-text-secondary-color);
    --login-dropdown-bg-hover-color: var(--black-monochrome);
}
 
/* Login Status */
#login-status .printuser,
#login-status #my-account {
    --ui-wght: 700;
    color: rgb(var(--login-username-color));
    text-shadow:
     rgb(var(--white-monochrome)) 0.0625rem 0rem 0rem,
     rgb(var(--white-monochrome)) 0.0338rem 0.0526rem 0rem,
     rgb(var(--white-monochrome)) -0.026rem 0.0568rem 0rem,
     rgb(var(--white-monochrome)) -0.0619rem 0.0088rem 0rem,
     rgb(var(--white-monochrome)) -0.0409rem -0.0473rem 0rem,
     rgb(var(--white-monochrome)) 0.0177rem -0.0599rem 0rem,
     rgb(var(--white-monochrome)) 0.06rem -0.0175rem 0rem;
}
 
#account-options {
    width: auto;
    padding: 0.5em;
    border-color: rgba(var(--bright-accent));
    background: var(--login-gradient);
    color: rgb(var(--swatch-text-light));
}
 
/* search box */
#search-top-box-form>input,
#search-top-box-form>input:hover,
#search-top-box-form>input:focus {
    background: rgb(var(--dark-accent));
}
 
#search-top-box-form input[type="submit"] {
    background: rgb(var(--medium-accent));
}
 
#search-top-box input.empty {
    color: rgba(var(--white-monochrome));
}
 
/* Horizontal rule */
hr {
    height: 0rem;
    border-top: 0.0625rem solid rgb(var(--medium-accent));
    border-bottom: 0.0625rem solid rgb(var(--dark-accent));
    background: rgba(0, 0, 0, 0);
}
 
/* Blockquote */
blockquote,
.blockquote,
div.blockquote {
    margin: 1em 0;
    border-style: solid;
    border-color: rgb(var(--medium-accent));
    background-color: rgba(var(--pale-accent), 0.1);
}
 
/* table */
table.wiki-content-table th {
    border-color: rgb(var(--pale-accent));
    background: rgb(var(--medium-accent));
    color: rgb(var(--white-monochrome));
}
 
/* Side Bar Touch Up */
#side-bar .heading,
#side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded {
    background: rgba(var(--pale-accent), 0.35);
    font-family: var(--title-font);
    min-height: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-size: 125%;
}
 
#side-bar .heading p {
    color: rgb(62, 62, 104);
    font-family: var(--title-font);
    text-shadow: none;
    --text-shadow: none;
    text-align: center;
}
 
/* Top Bar Touch Up */
#top-bar {
    --topmenu-category-color: var(--swatch-text-secondary-color);
    --topmenu-category-hover-color: var(--swatch-text-primary-color);
    --topmenu-category-hover-bg: var(--pale-accent);
    --topmenu-hover-border-color: var(--swatch-primary);
    --mobile-topmenu-sidebar-button-color: var(--swatch-text-secondary-color);
    --dropdown-bg-color: var(--swatch-alternate-color), 0.9;
    --dropdown-border-color: var(--swatch-text-tertiary-color), 0.5;
    --dropdown-links-color: var(--swatch-text-secondary-color);
    --dropdown-links-bg-color: 0, 0, 0, 0;
    --dropdown-links-hover-color: var(--swatch-text-secondary-color);
    --dropdown-links-hover-bg-color: var(--swatch-primary);
}
 
/* Header Background - adapted from Croquembouche's Swirling Ashes theme */
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height-on-desktop);
    pointer-events: none;
}
 
body::before {
    -webkit-animation: sky linear var(--sky-time) infinite;
    animation: sky linear var(--sky-time) infinite;
    background: linear-gradient(to top,
     rgb(var(--sky-at-morning)) 0%,
     rgb(var(--sky-at-morning)) 11%,
     rgb(var(--sky-at-dawn)) 22%,
     rgb(var(--sky-at-night)) 33%,
     rgb(var(--sky-at-night)) 44%,
     rgb(var(--sky-at-dusk)) 55%,
     rgb(var(--sky-at-evening)) 66%,
     rgb(var(--sky-at-daytime)) 77%,
     rgb(var(--sky-at-daytime)) 88%,
     rgb(var(--sky-at-morning)) 100%);
    background-size: 100% calc(var(--header-height-on-desktop) * var(--sky-length));
}
 
@-webkit-keyframes sky {
    from {
     background-position: 0 calc(var(--header-height-on-desktop) * var(--sky-length));
    }
 
    to {
     background-position: 0 0;
    }
}
 
@keyframes sky {
    from {
     background-position: 0 calc(var(--header-height-on-desktop) * var(--sky-length));
    }
 
    to {
     background-position: 0 0;
    }
}
 
/* Rain - adapted from EstrellaYoshte's Christmas theme */
#header-extra-div-1 {
    display: block;
    position: absolute;
    top: 0%;
    left: calc((-100vw + 100%)/2);
    width: 99.4vw;
    height: 10rem;
    -webkit-animation: rainOne 1.7s infinite linear,
     rainFade var(--sky-time) ease;
    animation: rainOne 1.7s infinite linear,
     rainFade var(--sky-time) ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    background: url("https://scp-jp.wdfiles.com/local--files/theme%3Acalamity/rain1.png");
    background-repeat: repeat;
    background-size: 14.375rem;
    pointer-events: none;
    -webkit-filter: blur(.9px);
    filter: blur(.9px);
}
 
#header-extra-div-2 {
    display: block;
    position: absolute;
    top: 0%;
    left: calc((-100vw + 100%)/2);
    width: 99.4vw;
    height: 10rem;
    -webkit-animation: rainTwo 1.2s infinite linear,
     rainFade var(--sky-time) ease;
    animation: rainTwo 1.2s infinite linear,
     rainFade var(--sky-time) ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    background: url("https://scp-jp.wdfiles.com/local--files/theme%3Acalamity/rain1.png");
    background-repeat: repeat;
    background-size: 23.125rem;
    pointer-events: none;
    -webkit-filter: blur(0.4px);
    filter: blur(0.4px);
}
 
#header-extra-div-3 {
    display: block;
    position: absolute;
    top: 0%;
    left: calc((-100vw + 100%)/2);
    width: 99.4vw;
    height: 10rem;
    -webkit-animation: rainThree .75s infinite linear,
     rainFade var(--sky-time) ease;
    animation: rainThree .75s infinite linear,
     rainFade var(--sky-time) ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    background: url("https://scp-jp.wdfiles.com/local--files/theme%3Acalamity/rain1.png");
    background-repeat: repeat;
    background-size: 45rem;
    pointer-events: none;
    -webkit-filter: blur(.2px);
    filter: blur(.2px);
}
 
@-webkit-keyframes rainOne {
    0% {
     opacity: .9;
     background-position: 0rem 0rem;
    }
 
    10% {
     opacity: 1;
    }
 
    90% {
     opacity: 0.95;
    }
 
    100% {
     opacity: 0.85;
     background-position: 0rem 46.875rem;
    }
}
 
@keyframes rainOne {
    0% {
     opacity: .9;
     background-position: 0rem 0rem;
    }
 
    10% {
     opacity: 1;
    }
 
    90% {
     opacity: 0.95;
    }
 
    100% {
     opacity: 0.85;
     background-position: 0rem 46.875rem;
    }
}
 
@-webkit-keyframes rainTwo {
    0% {
     opacity: 0.8;
     background-position: 0rem -6.25rem;
    }
 
    8% {
     opacity: 1;
    }
 
    90% {
     opacity: 0.9;
    }
 
    100% {
     opacity: 0.8;
     background-position: -3.125rem 43.75rem;
    }
}
 
@keyframes rainTwo {
    0% {
     opacity: 0.8;
     background-position: 0rem -6.25rem;
    }
 
    8% {
     opacity: 1;
    }
 
    90% {
     opacity: 0.9;
    }
 
    100% {
     opacity: 0.8;
     background-position: -3.125rem 43.75rem;
    }
}
 
@-webkit-keyframes rainThree {
    0% {
     opacity: 0.9;
     background-position: 0rem 6.25rem;
    }
 
    13% {
     opacity: 1;
    }
 
    91% {
     opacity: 0.9;
    }
 
    100% {
     opacity: 0.7;
     background-position: 0rem 46.875rem;
    }
}
 
@keyframes rainThree {
    0% {
     opacity: 0.9;
     background-position: 0rem 6.25rem;
    }
 
    13% {
     opacity: 1;
    }
 
    91% {
     opacity: 0.9;
    }
 
    100% {
     opacity: 0.7;
     background-position: 0rem 46.875rem;
    }
}
 
@-webkit-keyframes rainFade {
 
    34%,
    56% {
     opacity: 1;
    }
 
    0%,
    30%,
    60%,
    100% {
     opacity: 0;
    }
}
 
@keyframes rainFade {
 
    34%,
    56% {
     opacity: 1;
    }
 
    0%,
    30%,
    60%,
    100% {
     opacity: 0;
    }
}
 
/* Wikidot Footer Link Colors */
#footer {
    background: #4A4A7D;
    color: #55D2D8;
}
 
/* Reduce Motion Check */
@media screen and (prefers-reduced-motion: reduce) {
 
    body::before,
    #header-extra-div-1,
    #header-extra-div-2,
    #header-extra-div-3 {
     -webkit-animation: none;
     animation: none;
    }
}

インターウィキコード:

@import url('https://fonts.googleapis.com/css?family=Cabin+Sketch|Ubuntu|Space+Mono|Baumans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');
 
#interwiki {
    /* Typefaces */
    --body-font: "Ubuntu", "M Plus 1p", sans-serif;
    --header-font: "Cabin Sketch", "New Tegomin", sans-serif;
    --title-font: "Baumans", "Yusei Magic", sans-serif;
    --mono-font: "Space Mono", "Andale Mono", "Courier New", Courier, monospace;
 
    /* Standard Colors */
    --black-monochrome: var(--sky-at-night);
    --dark-gray-monochrome: var(--sky-at-evening);
    --pale-accent: 150, 150, 254;
    /* lavender, for visited links */
    --bright-accent: 51, 201, 208;
    /* bright turquoise */
    --medium-accent: 23, 152, 158;
    /* darker turquoise */
    --dark-accent: 90, 90, 152;
    /* darker purple */
    --alt-accent: var(--sky-at-dawn);
    /* pinkish red, for newpage links */
 
    /* Sky */
    --sky-at-dawn: 221, 93, 112;
    --sky-at-morning: 131, 192, 233;
    --sky-at-daytime: 104, 153, 186;
    --sky-at-evening: 87, 98, 106;
    --sky-at-dusk: 99, 100, 90;
    --sky-at-night: 21, 25, 43;
    --sky-length: 15;
    --sky-time: 65s;
 
    /* Primary Theme Colors */
    --swatch-primary: var(--medium-accent);
    --swatch-primary-darker: var(--pale-accent);
 
    /* Primary Menu Colors */
    --swatch-menubg-medium-dark-color: var(--medium-accent);
 
    /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--bright-accent);
    --swatch-tertiary-color: var(--pale-accent);
 
    /* Link Colors */
    --link-color: 110, 110, 170;
    --visited-link-color: var(--medium-accent);
}
/* Side Bar Touch Up */
#interwiki .heading {
    background: rgba(var(--pale-accent), 0.35);
    font-family: var(--title-font);
    min-height: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-size: 125%;
}
 
#interwiki .heading p {
    color: rgb(62, 62, 104);
    font-family: var(--title-font);
    text-shadow: none;
    --text-shadow: none;
    text-align: center;
}
 
/* Reduce Motion Check */
@media screen and (prefers-reduced-motion: reduce) {
 
    body::before,
    #header-extra-div-1,
    #header-extra-div-2,
    #header-extra-div-3 {
     -webkit-animation: none;
     animation: none;
    }
}

---

+ コンポーネントのコードを表示

@supports(display: grid) {
    :root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        background-image: var(--logo-image);
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/1.6 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
     #login-status::before {
     --mask-image: none;
     background-color: transparent;
     }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
            box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
     #search-top-box:focus-within ~ #login-status {
     opacity: 1;
     }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }
}

+ コンポーネントのコードを表示

@supports(display: grid) {
    :root {
     --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
     --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 769px) {
     #side-bar .close-menu {
     display: block;
     position: fixed;
     top: unset;
     bottom: 0.5rem;
     left: 0.5rem;
     width: 3rem;
     height: 3rem
     opacity: 1;
     pointer-events: all;
     z-index: -1;
     }
 
     #side-bar .close-menu img {
     color: transparent;
     }
 
     #side-bar .close-menu::before,
     #side-bar .close-menu::after {
     content: "";
     box-sizing: border-box;
     position: fixed;
     display: block;
     top: unset;
     bottom: 0.5rem;
     left: 0.5rem;
     width: 3rem;
     height: 3rem;
     padding: 0;
     margin: 0;
     text-align: center;
     pointer-events: all;
     cursor: pointer;
     transition:
     opacity var(--sidebar-transition-timing);
     }
 
     #side-bar .close-menu::before {
     --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
     z-index: -1;
     background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
     -webkit-mask: var(--mask);
     mask: var(--mask);
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-position: 50% 50%;
     mask-position: 50% 50%;
     -webkit-mask-size: 60%;
     mask-size: 60%;
     }
 
     #side-bar .close-menu::after {
     z-index: -2;
     background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
     border-radius: var(--toggle-roundness, 50%);
     border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
     }
 
     #side-bar:focus-within .close-menu,
     #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu {
     pointer-events: none;
     }
 
     #side-bar:focus-within .close-menu::before,
     #side-bar:focus-within .close-menu::after {
     opacity: 0;
     pointer-events: none;
     }
 
     #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before,
     #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after {
     opacity: 0;
     pointer-events: none;
     }
 
     #side-bar {
     display: block;
     position: fixed;
     top: 0;
     left: calc(var(--sidebar-width-on-desktop)*-1);
     z-index: 10;
     transition:
     left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
     margin-top: 0;
     }
 
     #side-bar:focus-within {
     left: 0;
     }
 
     #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover {
     left: 0;
     }
 
     #side-bar .side-block {
     margin-top: 1rem;
     background-color: rgb(0, 0, 0, 0);
     border-radius: 0;
     border-left-width: 0px;
     border-right-width: 0px;
     }
 
     #main-content::before {
     content: "";
     display: block;
     position: fixed;
     top: 0;
     right: 0;
     z-index: -1;
     opacity: 0;
     transition:
     opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
     width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     margin-left: var(--sidebar-width-on-desktop);
     background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
     padding-right: 0;
     width: 100%;
     height: 100vh;
     pointer-events: none;
     z-index: 99;
     }
 
     #side-bar:focus-within ~ #main-content::before {
     width: calc(100% - var(--sidebar-width-on-desktop));
     opacity: 1;
     pointer-events: all;
     }
 
     #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before {
     width: calc(100% - var(--sidebar-width-on-desktop));
     opacity: 1;
     pointer-events: all;
     }
 
     @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar {
     padding: inherit;
     } }
 
     #content-wrap {
     display: flex;
     flex-direction: row;
     width: calc(100vw - (100vw - 100%));
     min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
     flex-grow: 2;
     height: auto;
     position: relative;
     margin: 0 auto;
     max-width: inherit;
     }
 
     #main-content {
     width: 100%;
     position: initial;
     max-height: 100%;
     padding: 2rem 1rem;
     width: var(--body-width-on-desktop, 45.75rem);
     max-width: var(--body-width-on-desktop, 45.75rem);
     margin: 0 auto;
     }
 
     #page-content {
     max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
     }
 
     @supports (-webkit-hyphens:none) {
     #side-bar {
     transition:
     left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
     padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
     background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     padding-right: 0;
     background-color: rgb(0, 0, 0, 0);
     pointer-events: all;
     overflow-x: visible;
     overflow-y: visible;
     z-index: 999;
     }
 
     #side-bar::-webkit-scrollbar {
     opacity: 0;
     -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     }
 
     #side-bar .close-menu::before {
     z-index: 999;
     }
 
     #side-bar .close-menu::after {
     z-index: 998;
     }
 
     #side-bar:hover .close-menu::before,
     #side-bar:hover .close-menu::after {
     opacity: 0;
     }
 
     #side-bar:hover {
     left: 0;
     background-color: rgba(var(--swatch-menubg-color), 1);
     padding-right: 0;
     }
 
     #side-bar:hover::-webkit-scrollbar {
     opacity: 1;
     }
 
     #side-bar:hover~#main-content::before {
     width: calc(100% - var(--sidebar-width-on-desktop));
     opacity: 1;
     pointer-events: all;
     }
     }
     }
    }
}

Footnotes

1. これは脚注です