追忆 主题版式

使用方法

注意：这是一个基于黑色标记笔的主题版式。若你想使用此版式，你还需要导入黑色标记笔版式。点击这里了解更多。

在你的作品开头添加如下语法以应用此版式：

[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:memoria]]

另外，本版式内置了可折叠侧边栏。

在渐变背景上你需要添加如下白色方块，才能更好地显示文本：

[[div class="textbox"]]
如常添加文本。
[[/div]]

所罗门尼派“圣经”：

[[div class="type1"]]
你需要使用“@@ @@”符号来分段。
[[>]]
[[span style="font-family:var(--body-font); font-size: calc(var(--base-font-size) * 1.00); color: #000000;"]]- //“来源”//[[/span]]
[[/>]]
[[/div]]

⁷那时候，他们穿过大陆，有人要他们解释圣经的样子。⁸于是，先知站出来，用工匠的话说，⁹“看，就在这时我正对着你说话，你要留意这些话，看看这些话对你有什么意义。”

- 归属之书，1:7-9；所罗门尼派《Valkzaron》

这是什么

此版式由 MalyceGraves 开发，用于“追忆，内殿”设定下的故事和 SCP 文档。

采用 CC BY-SA 3.0 授权协议。

---

主题颜色

Payne's Grey--gray-monochrome(66, 66, 72)

Rosewood--bright-accent(133, 0, 5)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

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

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

Alto--very-light-gray-monochrome(215, 215, 215)

White Smoke--pale-gray-monochrome(244, 244, 244)

Bastille--dark-gray-monochrome(48, 48, 52)

Buccaneer--medium-accent(100, 46, 44)

Maroon--dark-accent(100, 3, 15)

Mango Tango--newpage-color(221, 102, 17)

{$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 级标题

分页

此为分页（tab view）。

分页

看，这有更多文字。

多么精巧绝伦。

长 Tab

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

空 Tab

空 Tab

空 Tab

空 Tab

空 Tab

空 Tab

这是一个引用块，在一行字的起始处加上“> ”来创建。

更多文字

---

一条分割线

嵌套引用块

这是	表格
你应该老早	就知道怎么
做这个了吧

正文字体为 Noto Sans SC。
标题字体为 Long Cang。
等宽字为 Recursive / Noto Serif SC。

---

+ 显示版式代码

@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');
 
@supports(--css:variables) {
 
    :root {
     --header-title: "追忆，内殿";
     --header-subtitle: "卡尔马克塔玛的回响。";
     --header-font: 'Long Cang',  'Nanum Brush Script', cursive;
     --background-gradient-distance:75rem; !important
    }
 
 :root:lang(cn) {
     --header-title: "追忆，内殿";
     --header-subtitle: "卡尔马克塔玛的回响。";
     --header-font: 'Long Cang',  'Nanum Brush Script', cursive;
     --background-gradient-distance:75rem; !important
    }
 
    #header {
     background-image: url('https://scp-wiki.wdfiles.com/local--files/theme:memoria/TitleLogo.png');
    }
 
    #page-title {
     display: none
    }
 
    @supports (background-blend-mode: screen) {
 
     #extrac-div-1 {
     width: 100%;
     height: var(--header-height-on-desktop);
     position: absolute;
     top: 0;
     left: 0;
     background-image: var(--gradient-header), url('https://scp-wiki.wdfiles.com/local--files/theme%3Amemoria/background.jpg');
     background-size: var(--header-background-image-size) 100%, 100%, 100%;
     background-blend-mode: normal;
     pointer-events: none;
     }
 
     div#extra-div-1 {
     width: 100%;
     height: calc(100% - var(--final-header-height-on-desktop));
     position: absolute;
     top: calc(var(--final-header-height-on-desktop));
     left: 0;
     z-index: -1;
     background-color: rgba(222, 222, 222, 1);
     background-color: rgba(var(--swatch-background), 1);
     mask: var(--gradient-background);
     -webkit-mask: var(--gradient-background);
     background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Amemoria/background.jpg'), var(--gradient-background);
     background-size: 100%, 80% var(--background-gradient-distance);
     background-blend-mode: difference;
     background-repeat: no-repeat, repeat-x;
     pointer-events: none;
     }
   }
 
.type1 {
    display: block;
    overflow: hidden;
    font-family: 'Long Cang', 'Nanum Brush Script', cursive;
    font-style: normal;
    font-size: 170%;
    color: rgb(57, 0, 0);
 
    background-attachment: scroll;
    background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Amemoria/textback.jpg');
 
    background-clip: border-box;
    background-color: rgb(222, 222, 222);
    background-origin: padding-box;
    background-repeat: repeat;
    background-size: 100%;
 
    border-radius: 10px;
    padding: 10px 10px;
    margin-bottom: 10px;
 
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2)
    }
 
.textbox {
    border-radius: 10px;
    padding: 10px 10px;
    margin-bottom: 10px;
    background-color: rgb(var(--white-monochrome));
}
 
#side-bar:hover, 
#side-bar:active {
background:
linear-gradient(
    rgba(var(--swatch-menubg-color),1) 30%,
    rgba(var(--swatch-menubg-color),0)),
linear-gradient(
    rgba(var(--swatch-menubg-color),0),
    rgba(var(--swatch-menubg-color),1) 70%) 0 100%,
radial-gradient(farthest-side at 50% 0,
    rgba(var(--swatch-primary-darkest),.5),
    rgba(var(--black-monochrome),0)),
radial-gradient(farthest-side at 50% 100%,
    rgba(var(--swatch-primary-darkest),.5),
    rgba(var(--black-monochrome),0)) 0 100%;
}
#side-bar {
background:
linear-gradient(
    rgba(var(--swatch-menubg-color),0) 30%,
    rgba(var(--swatch-menubg-color),0)),
linear-gradient(
    rgba(var(--swatch-menubg-color),0),
    rgba(var(--swatch-menubg-color),0) 70%) 0 100%,
radial-gradient(farthest-side at 50% 0,
    rgba(var(--swatch-primary-darkest),0),
    rgba(var(--black-monochrome),0)),
radial-gradient(farthest-side at 50% 100%,
    rgba(var(--swatch-primary-darkest),0),
    rgba(var(--black-monochrome),0)) 0 100%;
    }
}

---

+ Show component code

:root {
        --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
        --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 56.25rem) {
        #content-wrap {
            display: flex;
            position: initial;
            flex-direction: row;
            flex-grow: 2;
            width: calc(100vw - (100vw - 100%));
            max-width: inherit;
            height: auto;
            min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem));
            margin: 0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2);
        }
 
        #main-content {
            position: initial;
            width: var(--body-width-on-desktop, 45.75rem);
            max-width: var(--body-width-on-desktop, 45.75rem);
            max-height: 100%;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        #side-bar {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            left: 0;
            grid-area: side-bar;
            width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            max-height: 100vh;
            padding-right: 2.5rem;
            padding-left: 0.5rem;
            overflow-y: scroll;
            transition:
                translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                padding 300ms linear,
                margin 300ms linear;
            border: none;
            border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
            translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem);
            direction: rtl;
            scrollbar-width: thin;
            -ms-scroll-chaining: none;
                overscroll-behavior: contain;
            scrollbar-color: 
                rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
                rgba(var(--swatch-tertiary-color), 0.05); /* Track */
        }
 
        #side-bar::-webkit-scrollbar-track {
            background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
        }
 
        #side-bar::-webkit-scrollbar,
        #side-bar::-webkit-scrollbar-thumb,
        #side-bar::-webkit-scrollbar-corner {
            width: 0.5rem;
            border-right-width: calc(100vw + 100vh);
            border-right-style: inset;
            border-color: inherit;
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
        }
 
        #side-bar:is(:hover, :active, :focus-within) {
            margin-right: 2.25rem;
            padding-right: 0.25rem;
            overflow-x: hidden;
            overflow-y: auto;
            border-color: rgba(var(--swatch-primary-darker), 1);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
            translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0));
            scrollbar-color: 
                rgba(170, 170, 170, 1)  /* Thumb */
                rgba(252, 252, 252, 1); /* Track */
            scrollbar-color: 
                rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
                rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
        }
 
        #main-content::after {
            content: " ";
            display: flex;
            position: fixed;
            top: 0;
            left: 1rem;
            align-items: center;
            justify-content: center;
            width: 1rem;
            height: 100%;
            max-height: 100%;
            transition:
                left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center left 1rem;
            background-size: 1rem 12.875rem;
            pointer-events: none;
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::after {
            left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            width: 0rem;
            transition:
                left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            opacity: 0;
            background-position: center left calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            font-size: 0em;
        }
 
        #main-content::before {
            content: " ";
            position: absolute;
            z-index: 9;
            top: var(--final-header-height-on-desktop, 0);
            left: 0;
            width: var(--sidebar-width-on-desktop, 14.5rem);
            height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
            margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
            transition:
                translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            opacity: 0.5;
            background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
            pointer-events: none;
            translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem);
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::before {
            translate: 0;
            opacity: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1em;
            padding-left: 0.25em;
            border-right-width: 0rem;
            border-left-width: 0rem;
            border-radius: 0;
            background-color: rgb(0, 0, 0, 0);
            direction: ltr;
        }
 
        #side-bar .scpnet-interwiki-wrapper {
            direction: ltr;
        }
 
        /* Print Friendly Formatting by Estrella */
        body.print-body { 
            --sidebar-width-on-desktop: 0; 
        } 
        body.print-body #main-content::before,
        body.print-body #main-content::after { 
            display: none; 
        }
    }