第五教会テーマ・BHLカスタム

このページの批評は終了しました。

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

@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;
     background: unset;
     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;
     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-jp:theme:black-highlighter-theme]]
[[include :scp-jp:component:toggle-sidebar-bhl]]

[[module CSS]]

:root {
 --header-title: "第五教会" !important;
 --header-subtitle: "星辰の啓蒙、煙のシグナル" !important;
 --gray-monochrome: 0, 0, 0;
 --logo-image: url("http://scp-jp-storage.wikidot.com/local--files/file:3282741-83-bj2f/Fifthist.png");
 --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: 237,213,225;
 --header-gradient-color-middle: 255,230,242;
 --header-gradient-color-bottom: 153,138,145;
 --diagonal-stripes: none !important;
 --swatch-background: 200,200,200;
 --background-gradient-color: 130,130,130;
 --swatch-menubg-color: 80,80,80;
 --pale-accent: 0,0,0;
 --bright-accent: 251,210,228;
 --medium-accent: 0,0,0;
 --dark-accent: 0,0,0;
 --alt-accent: 0,0,0;
}

#side-bar {
 --base-font-size: 0.85rem !important;
}
#container {
 overflow: hidden;
}
@media (max-width: 479px) {
 #page-content {
  font-size: 0.8rem;
 }
}
#page-content a {
    text-decoration: underline;
    text-decoration-color: rgb(251, 210, 228);
}
#page-content a:hover {
    text-decoration-thickness: 2px;
}
#page-content .yui-nav a {
    text-decoration: none;
}

[[/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 four Boretto's portal does not exist.

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

利用ガイド

1. portal:7707552 (15 Oct 2021 16:17)

Footnotes

1. And here's a footnote!