第二ハイトステーマ・BHLカスタム

+ Show component code

@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: 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: 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;
            }
        }
    }
}

ロゴ

注意: このテーマはBlack Highlighterをベースにしています。このテーマを使用するには、Black Highlighterのテーマもインポートする必要があります。

以下の構文を入力してください:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]

[[module CSS]]

/*
    Based on Second Hytoth Theme.
    [2022 Wikidot Theme]
    The Second Hytoth logo is by Taoka.
    Theme customized by Enderman_desu.
*/

:root {
--header-title: "第二ハイトス教会" !important;
--header-subtitle: "生命のため、存在のため、そして永遠のために" !important;
--logo-image: url("http://scp-jp-storage.wdfiles.com/local--files/file%3A6759963-220-g20m/The%20Second%20Hytoth%20logo.svg");
--body-font: Inter, Verdana, Geneva, "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
--UI-font: PTRootUI, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantrell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
--header-font: Inter, Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
--mono-font: Recursive, Consolas, monaco, monospace !important;
--min-font-size: 0.75rem;
--max-font-size: 0.78rem;
--base-font-size: 0.90rem;
--base-line-height: 1.5;
--toggle-roundness: 0 !important;

--header-gradient-color-top: 213,89,2;
--header-gradient-color-middle: 213,89,2;
--header-gradient-color-bottom: 106,7,2;
--diagonal-stripes: none !important;
--swatch-background: 255,213,133;
--background-gradient-color: 237,117,18;
--swatch-menubg-color: 255,211,175;
}
#side-bar { --base-font-size: 0.85rem !important; }
#container { overflow: hidden; }
@media (max-width: 479px) { #page-content { font-size: 0.8rem; } }
[[/module]]

例

水平方向の罫線は5つのハイフン "-----" で作成でき、ブロッククオートなどの中に置かなければ、ページ全体に広がります。この文書のセクションを区切る線は、水平方向の罫線です。

---

行頭に1～6個の "+" をつけるとヘッダータイトルが作成できます

+ Titles

第1 Title

第2 Title

第3 Title

第4 Title

第5 Title

第6 Title

Tabulator

想像力を働かせて、ここに「Lorem Ipsum`」があると思えばいいのです。

Tabulation

ほら、ここにもっとテキストがある。

なんて風流なんでしょう。

Long Tab

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

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

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

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

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

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

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

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

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

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

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

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

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

weed lmao

これはブロッククオートで、各行の先頭に ">" をつけて作成します。
More text

---

That's a horizontal rule

Nested blockquotes

And another¹

This is a	table
You should know	how to make these
already

---

• • _
  批評コメント批評コメント

  
  コメント投稿フォームへ

  批評コメントTopへ

  - hide block

ERROR

The Enderman_desu's portal does not exist.

エラー:	Enderman_desuのportalページが存在しません。利用ガイドを参照し、portalページを作成してください。

利用ガイド

1. portal:6759963 (24 Aug 2020 05:02)

Footnotes

1. And here's a footnote!