版式:蝶舞

Suprematism.

至上主义

真理隐于几何之间

蝶舞是一个由 Liurd 基于 至上主义 制作的主题版式，可以被引用于“蒲绪卡黛诸相观”系列。要在页面上引用这个版式，请在其中加入如下代码：

[[include :backrooms-wiki-cn:theme:suprematism]]

[[include :miss-zhu:theme:chrysalis]]

以下为本版式的部分元素示例。

示例

通过四个连字符 “----”¹ 来在你的页面中创建水平分割线。若未被放在其他部件（诸如引用块）中，其会左右延伸贯穿整个页面。这种将文件分割为多个部分的线就是分割线。

《白上白》（马列维奇，1918）

可通过 1 至 6 个加号（“+”）来创建不同级的标题。

折叠 - 点击以展开

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

至上主义（俄语：супрематизм，英语：suprematism，或译作“绝对主义”）现代主义艺术流派之一，二十世纪初俄罗斯抽象绘画的主要流派。创始人为卡济米尔·谢韦里诺维奇·马列维奇（1878-1935）。“至上主义”一词来自于1915年马列维奇发表的宣言式小册子《从立体主义和未来主义到至上主义》（От Кубизма и Футуризма к Супрематизму）。在这本书中，马列维奇，强调至上主义是艺术中的绝对最高真理，它将取代此前一切曾经存在过的流派。人类社会可以以至上主义的原则进行组织和构建，进入新的历史发展阶段。至上主义的代表作品是马列维奇在1915年“0.10最后的未来主义展览”展出的油画《黑方块》。

至上主义的理论和创作对同时期的构成主义、以及欧洲的抽象绘画产生了重要的影响。²

分页

此为分页（tab view）。

分页

看，这有更多文字。

多么精巧绝伦。

长 Tab

实际上这里有文字。

由于一些奇怪的原因，这个空 tab 有一个很长的名字，也就是“长而无物”，很糟的现象。

空 Tab

空 Tab

空 Tab

空 Tab

空 Tab

这是	表格
说实话	不写做法不太好。
但是解释起来很麻烦，你还是自己查一下吧。

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

---

一条分割线

嵌套引用块

[[div class="shadebox"]]

这个引用块的特点是引用块内的文字和引用块外的文字对齐。

[[div class="block"]]

这是一个基础的块级元素，通过为其添加更多的类（class）来进一步样式化。

与 shadebox 不兼容！

[[div class="block shadow"]]

这个引用块的特点是拥有阴影。

[[div class="block dropshadow"]]

同理，但是阴影更大一些。

[[div class="block light-bg"]]

较浅的背景。

[[div class="block dark-bg"]]

较深的背景。

[[div class="block serif-text shadow"]]

这个引用块使用衬线体。

[[div class="block serif-text shadow fakemail" data-title="致：THE CHYSALIS"]]

这个引用块类似电子邮件——算是吧。

[[div class="block serif-text shadow curved"]]

这个引用块添加了一个独特的背景。

——所以我加了点空白让你看看理想的尺寸。

[[div class="block serif-text shadow styled"]]

这个引用块有一定的样式化。

[[div class="block serif-text shadow styled"]]

它还有一个暗色版本。

[[div class="handwrite"]]

这个引用块使用了手写字体。

这东西很烦人，不过嘛…有些时候它就是没法避免…

Footnotes

1. Placeholder McD 看到这个会很欣慰，大概。

2. 至上主义 - 维基百科

3. 注：本预设额外使用了 司源赢宋 作为横幅字体。

---

横幅字体为 Almendra Display / 思源宋体。

标题和衬线体元素字体为 Cormorant / 思源宋体。

手写体元素字体为 Jim Nightshade / Zhi Mang Xing。

预定义

预设： 另一视角。³

引用方式： |humanity=true

版式 CSS 代码

@import url('https://fonts.googleapis.com/css2?family=Jim+Nightshade&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Almendra+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap');
@import url('https://font-now.netlify.app/api/css?url=/font/14c9bb87-5184-5eb2-a433-de397f94415d/result.css');
 
:root {
    --global-accent-1: 100, 10, 0;
    --global-accent-2: 180, 90, 100;
    --global-accent-3: 120, 120, 120;
 
    --global-pale-color: 240, 235, 235;
    --global-light-color: 200, 170, 170;
    --global-dark-color: var(--global-accent-1);
 
    --global-shadow: 60, 60, 60;
 
    --header-bg: var(--dark-ui-bg);
    --header-txt: var(--dark-ui-txt);
    --header-hover-bg: var(--light-ui-bg);
    --header-hover-txt: var(--global-dark-color);
    --topbar-hover-bg: var(--header-hover-bg);
    --topbar-hover-txt: var(--header-hover-txt);
    --dropdown-hover-bg: var(--header-hover-bg);
    --dropdown-hover-txt: var(--header-hover-txt);
    --user-hover-drop-bg: var(--header-bg);
    --user-hover-drop-txt: var(--header-txt);
 
    --content-bg: var(--global-white-color);
 
    --header-title: "THE CHRYSALIS";
    --banner-title: "THE CHRYSALIS";
    --banner-subtitle: "你孵化自这里";
 
    --banner-title-size: clamp(2rem, calc(1.5rem + 3vw), 5rem);
 
    --header-font: var(--title-font);
    --banner-font: "Almendra Display", "Noto Serif SC", "Noto Serif TC", Times New Roman, Arial, serif;
    --title-font: var(--serif);
 
    --handwrite: "Jim Nightshade", "Zhi Mang Xing", Brush Script MT, cursive;
    --serif: "Cormorant", "Noto Serif SC", "Noto Serif TC", Times New Roman, Arial, serif;
 
    --bg-1: url(http://brsandbox-pro.wikidot.com/local--files/beijin/kuan-hudie-qian-222);
    --bg-2: url(http://brsandbox-pro.wikidot.com/local--files/beijin/kuan-hudie-hou-2);
 
    --meta-toolbar: url("data:image/svg+xml,%3Csvg width='192mm' height='64mm' viewBox='0 0 192 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.852 30h36.296C51.17 30 52 30.83 52 31.852v.296C52 33.17 51.17 34 50.148 34H13.852A1.852 1.852 0 0 1 12 32.148v-.296C12 30.83 12.83 30 13.852 30z' paint-order='fill markers stroke'/%3E%3Cpath fill='none' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='.6' stroke='%23000' d='M76 12h40v40H76zM140 12l40 40M180 12l-40 40'/%3E%3C/svg%3E");
    --curvedsvg: url("data:image/svg+xml,%3Csvg width='744.727' height='744.727' viewBox='0 0 744.727 744.727' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M712.7 216.896c24.027 55.344 6.843 128.205-57.747 122.14 10.958 6.173 30.888 13.623 41.247 14.475 11.153.916 32.083 1.933 48.527-5.886V185.268c-4.974 0-11.841.642-16.727-.277-39.75-7.478-51.755-37.751-48.947-62.166-25.687-1.072-56.14-30.758-50.244-66.825.954-5.836 3.47-32.182 43.918-46.182-16.2 0-31.277 2.187-44.727 12.18-40.99 30.455-27.707 98.643 15.436 106.474-36.663 11.431-55.043 40.15-59.976 79.463 29.418-48.606 110.358-34.532 129.24 8.96zM399.364 383.864c15.137 55.632-53.11 102.044-110.637 67.772-1.035 1.981-.075 6.14-5.96 11.53-3.09 2.83-7.85 4.403-12.949 5.21 12.672 2.873 18.301 23.987 13.28 34.897-3.552 7.715-10.031 11.12-17.643 13.454 12.338 14.809 35.274 29.238 54.049 30.288 19.032 1.064 44.95-8.272 55.878-13.49 7.012 7.25 19.582 27.407 21.483 53.656 1.978 27.315-7.087 48.527-22.583 59.63-56.492 38.528-121.873 11.401-130.045-45.669-31.411 3.413-41.209 19.612-52.91 37.757 2.582-13.185 1.151-26.752-1.287-39.99-8.922-42.202-46.306-63.397-73.676-66.909 24.006 10.54 37.748 22.757 49.224 42.91 18.188 33.705 7.416 76.718-19.302 104.17-13.463 13.83-59.74 20.597-59.74 20.597 14.222 4.784 32.237 4.545 39.506 3.444 8.879-1.345 24.03-8.703 29.832-12.53-11.636 15.52-13.103 35.817-13.879 54.136h10.746c-3.476-24.314 8.146-46.454 24.734-63.242 27.429-27.054 77.51-23.347 103.226 3.97 15.143 16.085 21.117 37.68 21.117 59.272h22.057c25.55-81.957 95.346-128.215 171.388-125.448 19.502.71 42.205 6.752 68.866 21.448-58.814 16.686-77.654 62.29-63.654 104h15.308c-13.23-42.774 9.975-65.709 17.629-71.376 14.228-11.218 35.796-14.639 53.271-11.341 34.864 6.578 54.276 47.464 41.307 82.717h116.727c0-50.564-.509-101.641 0-152.363-55.095 32.657-134.042 24.38-177.022-5.473-29.035-20.166-44.899-50.325-46.924-77.794 36.305-7.655 56.104-30.541 63.4-57.415-52.618-16.462-32.25-92.195 13.672-79.798 10.348-41.098-9.266-96.81-35.228-108.694 35.228 108.694-77.995 162.684-163.261 120.674zm-135.168 33.83c-4.902 19.615-16.509 28.265-26.719 31.606-6.404 2.096-13.365 3.79-20.022 3.79 8.553 2.92 29.745 5.084 44.623-6.616.288-.227 13.723-7.258 17.483-34.997.76-19.968-9.253-40.196-26.834-48.722-6.093-2.955-18.139-4.112-27.883-2.655 36.793 8.47 43.238 42.042 39.352 57.593zm374.689 28.47c-19.19 2.338-33.298 18.294-36.703 30.563 22.588-10.566 47.715-14.919 64.97-2.954 30.698 21.285 27.23 48.746 18.848 79.795 17.506-10.664 40.623-31.668 29.996-56.477 10.515 1.064 21.494-1.909 28.731-9.867v-95.103c0 72.846-55.831 93.48-105.842 54.042zM426.56 436.144c4.833-1.048 10.183.142 14.895.744 24.143 3.083 43.72 24.346 45.783 48.566 2.31 27.12-17.391 53.214-44.334 58.083-4.77.862-9.59.716-14.177.147-10.569-1.313-20.443-3.847-29.09-10.703-23.56-18.678-27.132-54.432-8.437-77.813 8.928-11.166 21.966-16.119 35.36-19.024M62.967 704.815c14.895 8.428 19.62 22.574 22.256 39.912h20.232c-1.59-12.146-8.78-24.4-16.633-33.448-1.573-1.811-12.163-13.96-33.798-17.295-17.172-2.647-31.287 1.578-41.766 8.641 17.247-4.03 37.055-4.97 49.71 2.19z' fill-opacity='.154'/%3E%3Cpath d='M229.5 492.375a22.5 22.5 0 0 0-22.5 22.5 22.5 22.5 0 0 0 5.588 14.826 22.938 22.938 0 0 1-1.088-6.889 22.938 22.938 0 0 1 22.938-22.937 22.938 22.938 0 0 1 15.832 6.35 22.5 22.5 0 0 0-20.77-13.85z' fill='%23e3e3e3'/%3E%3C/svg%3E");
}
 
#header {
    background: linear-gradient(to bottom, rgba(var(--global-black-color), 0.5) -10%, rgba(var(--global-black-color), 0.15), rgba(var(--global-dark-color), 0) 75%);
}
 
#header h2 {
    font-weight: 200;
}
 
#header h2 span {
    text-shadow: 0.05rem 0.05rem 0rem rgb(var(--global-pale-color)), -0.05rem 0.05rem 0rem rgb(var(--global-pale-color)), 0.05rem -0.05rem 0rem rgb(var(--global-pale-color)), -0.05rem -0.05rem 0rem rgb(var(--global-pale-color));
}
 
#header-extra-div-1 {
    border-bottom: unset;
    box-shadow: 0 -7.5rem 7.5rem 5rem rgb(var(--global-black-color));
}
 
#extra-div-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(15em + 25vh + 5vw);
    background-image: var(--bg-1);
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
    z-index: -1;
}
 
#extra-div-2 {
    --mask: linear-gradient(175deg, black 0, transparent calc(90% - 5vw));
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(10em + 25vh + 5vw);
    background-image: var(--bg-2);
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
    z-index: -2;
    mask: var(--mask);
    -webkit-mask: var(--mask);
}
 
#content-wrap {
    margin: calc(0px - var(--header-height) - var(--topbar-height)) 0 0;
}
 
#main-content {
    margin: 0 auto 5vh;
    padding: 1.5em;
    box-shadow: 0 0 1.5rem -1rem rgb(var(--global-shadow));
    background: rgba(var(--content-bg));
    box-sizing: border-box;
}
 
:is(.bibitems, .footnotes-footer) .title, #main-content h1 {
    color: rgb(var(--global-accent-1));
}
 
.handwrite {
    font-family: var(--handwrite);
}
 
.hovertip {
    --title-font: var(--handwrite);
}
 
.dark-bg {
    --link-primary: var(--global-pale-color);
    --link-hover: var(--global-light-color);
    --link-primary: var(--global-light-color);
}
 
.shadow {
    box-shadow: 0 0.2rem 0.5rem -0.2rem rgba(var(--global-shadow), .8);
}
 
.dropshadow {
    box-shadow: 0 0.2rem 1rem -0.5rem rgba(var(--global-shadow), .6);
}
 
.serif-text {
    max-width: max(100%, 15rem);
    font-family: var(--serif);
    color: rgb(var(--global-black-color));
    margin: 1rem auto;
font-size: 1em;
    font-weight: 350;
}
 
.fakemail {
    position: relative;
    padding-top: 2.5rem;
}
 
.fakemail::before {
    content: attr(data-title);
    display: flex;
    height: 1.8rem;
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    font-size: 1rem;
    color: rgb(var(--global-black-color));
    font-family: var(--serif);
    align-items: center;
}
 
.fakemail::after {
    content: "";
    display: block;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    height: 1.5rem;
    width: 3rem;
    background-image: var(--meta-toolbar);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
 
.block.curved {
    margin: 1rem auto;
    background-image: var(--curvedsvg);
    background-size: auto max(80%, 7.5rem);
    background-position: bottom right;
    background-repeat: no-repeat;
}
 
.styled {
    padding-left: 2.5rem;
    position: relative;
}
 
.styled::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1rem;
    width: 0.4rem;
    height: 100%;
    background-color: rgb(var(--global-accent-1));
    box-shadow: 0.05rem 0.1rem 0.1rem rgba(var(--global-shadow), .6);
}
 
.dark-bg.styled {
    --dark-block-bg: var(--global-black-color);
    color: rgb(var(--dark-block-txt));
}
 
@media only screen and (max-width: 767px) {
    :root {
        --bg-1: url(http://brsandbox-pro.wikidot.com/local--files/beijin/zhai-hudie-qian-2);
        --bg-2: url(http://brsandbox-pro.wikidot.com/local--files/beijin/zhai-hudie-hou-2);
    }
}