“创伤”版式

至上主义

真理隐于几何之间

至上主义是一个由 LemonCat233 和 Liurd 制作的基础美学版式，旨在保证极端简洁，无多余过渡效果的前提下提供充足的二次开发基础。要在任意页面中引用该版式，请在其中加入如下代码：

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

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

Fold

Table of Contents

示例

著作信息

名称： 至上主义美学版式
作者： LemonCat233 & Liurd 。

至上主义是一个由 LemonCat233 和 Liurd 制作的基础美学版式，旨在保证极端简洁，无多余过渡效果的前提下提供充足的二次开发基础。

著作信息

名称： 至上主义美学版式
作者： LemonCat233 & Liurd 。

至上主义是一个由 LemonCat233 和 Liurd 制作的基础美学版式，旨在保证极端简洁，无多余过渡效果的前提下提供充足的二次开发基础。

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

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

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

折叠 - 点击以展开

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

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

此为分页（tab view）。

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

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

一条分割线

嵌套引用块

[[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"]]

较深的背景。

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

页眉字体为 Poiret One / 思源黑体。

横幅字体为 Alumni Sans Pinstripe / 朱雀仿宋。

标题字体为 Sulphur Point / 思源黑体。

正文字体为 Barlow / 思源黑体。

用户界面字体为 Montserrat / 思源黑体。

等宽字体为 PT Mono / 思源宋体。

预定义

至上主义内置了一些已经做好的预设，可以通过在引入时修改参数来改变其外观。它们是：

预设： 左侧版头。

简介： 这个预设的版头标题在左侧，这让它看起来很经典。

引用方式： left-header=true

预设： 无版头。

简介： 这个预设抛弃了自己的版头，这让它看起来很简约。

引用方式： no-header-desktop=true

预设： 另一种侧栏按钮样式。

简介： 这个预设给自己的收放按钮(collapse button)换了个样式，不知道这样“Neo-collapsism”的预设爱不爱听 Prokofiev³ 的曲子？

引用方式： collapse-sidebar-desktop=true

预设： 常驻侧栏。

简介： 这个预设毫无保留地展示着自己的侧栏，我想它们的关系一定很好。

引用方式： show-sidebar=true

预设： 全屏模式。

简介： 这个预设是全屏的，它非常喜欢屏幕外面人们摆来摆去的侧脸，哦，我想它可能是一位画家！

引用方式： fullscreen=true

预设： 大横幅。

简介： 这个预设的横幅很大，它对自己的横幅非常骄傲，哦，它真自信！

引用方式： big-banner=true

预设： 无横幅。

简介： 这个预设藏起了自己的横幅，它很懂得什么叫做中庸之道，哦，它真有头脑！

引用方式： no-banner=true

预设： 永夜。

简介： “我和我的兄弟们不一样，”这个预设说，“比起在白天相互争抢，我更喜欢一个人安静地待在黑夜中，这使我感到平静。”
我想，这个预设可能很喜欢玩植物大战僵尸。

引用方式： evernight=true

预设： SCP 基金会。

简介： 用于某个机密组织的文件。呃——你知道的，上一个轻视他们的人刚进去，所以我就不多说了，真的。

…你们说“必须忘记他”是什么意思？

引用方式： scp=true

自定义

除此之外，至上主义还内置了一系列 CSS 变量，可以被修改以改变其外观。此处展示的是版式的部分变量：

此分页展示的是版式的全部一级色彩变量，改变它们可以快速地改变版式的整体色彩风格。

:root {
    --global-white-color: 248, 248, 248;
    --global-pale-color: 235, 235, 235;
    --global-light-color: 180, 180, 180;
    --global-dark-color: 90, 90, 90;
    --global-black-color: 30, 30, 30;
    --global-accent-1: 68, 123, 230;
    --global-accent-2: 24, 80, 187;
    --global-accent-3: 23, 24, 120;
    --alt-color: 221, 102, 17;
    --warning-color: 193, 44, 50;
    --accept-color: 20, 169, 32;
    --neutral-color: 193, 147, 44;
}

此处展示的是版式的全部二级颜色变量，改变它们可以快速实现对一部分特定元素的色彩样式更改而不影响其它元素。

:root {
    --global-bg: var(--global-white-color);
    --global-txt: var(--global-black-color);
    --light-ui-bg: var(--global-pale-color);
    --light-ui-txt: var(--global-black-color);
    --dark-ui-bg: var(--global-dark-color);
    --dark-ui-txt: var(--global-white-color);
    --bright-ui-bg: var(--global-accent-2);
    --bright-ui-txt: var(--dark-ui-txt);
 
    --global-border:  var(--global-light-color);
 
    --link-primary: var(--global-accent-2);
    --link-hover: var(--global-accent-1);
    --link-visited: var(--global-accent-3);
    --link-newpage: var(--alt-color);
}

此处展示的是版式的全部三级颜色变量，改变它们可以实现相较二级色彩变量更加精准的色彩样式更改。

:root {
    --body-bg: var(--global-bg);
    --body-txt: var(--global-txt);
 
    --header-bg: var(--light-ui-bg);
    --header-txt: var(--light-ui-txt);
    --header-hover-bg: var(--dark-ui-bg);
    --header-hover-txt: var(--dark-ui-txt);
 
    --topbar-bg: var(--header-bg), 0;
    --topbar-txt: var(--header-txt);
    --topbar-hover-bg: var(--dark-ui-bg);
    --topbar-hover-txt: var(--dark-ui-txt);
    --topbar-border: var(--global-border), .8;
 
    --dropdown-bg: var(--header-bg);
    --dropdown-txt: var(--header-txt);
    --dropdown-hover-bg: var(--bright-ui-bg);
    --dropdown-hover-txt: var(--bright-ui-txt);
    --dropdown-border: var(--topbar-border);
 
    --search-bg: var(--header-bg), 0;
    --search-txt: var(--header-txt);
    --search-hover-bg: var(--header-hover-bg);
    --search-hover-txt: var(--header-hover-txt);
 
    --user-bg: var(--header-bg), 0;
    --user-txt: var(--header-txt);
    --user-hover-bg: var(--header-hover-bg);
    --user-drop-bg: var(--header-hover-bg);
    --user-drop-txt: var(--topbar-hover-txt);
    --user-hover-drop-bg: var(--dropdown-hover-bg);
    --user-hover-drop-txt: var(--dropdown-hover-txt);
 
    --openmenu-bg: var(--header-bg), 0;
    --openmenu-txt: var(--header-txt);
    --openmenu-hover-bg: var(--header-hover-bg);
    --openmenu-hover-txt: var(--header-hover-txt);
 
    --sidebar-bg: var(--global-bg);
 
    --heading-bg: var(--dark-ui-bg);
    --heading-txt: var(--dark-ui-txt);
    --heading-border: var(--global-light-color);
 
    --menu-bg: var(--light-ui-bg);
    --menu-txt: var(--light-ui-txt);
    --menu-hover-bg: var(--bright-ui-bg);
    --menu-hover-txt: var(--bright-ui-txt);
 
    --scrollbar-track: var(--light-ui-bg), .4;
    --scrollbar-thumb: var(--dark-ui-bg);
 
    --rate-bg: var(--light-ui-bg);
    --rate-txt: var(--light-ui-txt);
    --rateup-bg: var(--rate-bg);
    --rateup-txt: var(--accept-color);
    --ratedown-bg: var(--rate-bg);
    --ratedown-txt: var(--warning-color);
    --cancel-bg: var(--rate-bg);
    --cancel-txt: var(--neutral-color);
    --info-bg: var(--rate-bg);
    --info-txt: var(--global-accent-2);
 
    --tabview-bg: var(--light-ui-bg);
    --tabview-txt: var(--light-ui-txt);
    --tabview-hover-bg: var(--bright-ui-bg);
    --tabview-hover-txt: var(--bright-ui-txt);
    --tabview-selected-bg: var(--dark-ui-bg);
    --tabview-selected-txt: var(--dark-ui-txt);
 
    --toc-bg: var(--light-ui-bg);
    --toc-txt: var(--light-ui-txt);
    --toc-heading-bg: var(--dark-ui-bg);
    --toc-heading-hover-bg: var(--bright-ui-bg);
    --toc-heading-hover-txt: var(--bright-ui-txt);
    --toc-heading-txt: var(--dark-ui-txt);
    --toc-border: var(--global-border);
 
    --th-bg: var(--light-ui-bg);
    --th-txt: var(--light-ui-txt);
    --td-bg: var(--global-bg);
    --td-txt: var(--global-txt);
 
    --light-block-bg: var(--light-ui-bg);
    --light-block-txt: var(--light-ui-txt);
    --dark-block-bg: var(--dark-ui-bg);
    --dark-block-txt: var(--dark-ui-txt);
 
    --global-fader-bg: var(--global-black-color), .8;
 
    --btn-bg: var(--light-ui-bg);
    --btn-txt: var(--light-ui-txt);
    --btn-hover-bg: var(--dark-ui-bg);
    --btn-hover-txt: var(--dark-ui-txt);
 
    --bottombar-bg: var(--light-ui-bg);
    --bottombar-txt: var(--light-ui-txt);
}

此处展示的是用于修改部分页面元素尺寸的布局变量，修改它们可以快速改变版式的局部布局。

:root {
    --header-height: 3rem;
    --topbar-height: 2rem;
    --banner-height: 10rem;
    --dropdown-height: 2rem;
    --sidebar-width: 15rem;
    --content-width: 48rem;
 
    --header-ui-size: var(--header-height);
 
    --user-icon-padding: 0.5rem;
    --user-drop-width: 9rem;
    --user-drop-height: 3rem;
 
    --global-border-width: 0.1rem;
    --topbar-border-width: var(--global-border-width);
    --dropdown-border-width: var(--global-border-width);
 
    --global-font-size: 0.975rem;
 
    --header-title-size: calc(0.5rem + 1.6vw);
    --topbar-size: calc(0.5rem + 0.5vw);
    --dropdown-size: var(--topbar-size);
    --banner-title-size: calc(2.5rem + 3vw);
    --banner-subtitle-size: 1rem;
 
    --rate-height: 1.2rem;
 
    --toc-min-width: 12.5rem;
    --toc-heading-height: 2rem;
}

此处展示的是版式的文本变量，用于改变页眉与横幅处的文本。

:root {
    --header-title: "基金会中文维基";
    --banner-title: "SUPREMATISROOMS.";
    --banner-subtitle: "几何至上";
}

此处展示的是版式使用的字体变量，用于改变特定区域的文本字体。

:root {
    --banner-font: "Alumni Sans Pinstripe", "Zhuque Fangsong (technical preview)", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif;
    --header-font: "Poiret One", "Noto Sans SC", "Noto Sans TC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif;
    --title-font: "Sulphur Point", "Noto Sans SC", "Noto Sans TC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif;
    --body-font: "Barlow", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
    --ui-font: "Montserrat", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
    --mono-font: "PT Mono", "Noto Serif SC", "Noto Serif TC", Consolas, monaco, monospace;
}

‡ 授权 / 引用

至上主义

真理隐于几何之间

创伤是一个由 Liurd 基于至上主义制作的美学主题版式，可以被引用于任意页面。要在页面上引用这个版式，请在其中加入如下代码：

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

[[include :scp-wiki-cn:theme:trauma]]

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

Fold

Table of Contents

示例

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

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

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

折叠 - 点击以展开

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

此为分页（tab view）。

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

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

一条分割线

嵌套引用块

[[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"]]

较深的背景。

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

[[footnoteblock]]

页眉和横幅字体为 Nixie One / 思源宋体。

标题和用户界面字体为 Outfit / 思源黑体。

正文字体为 Atkinson Hyperlegible / 思源黑体。

等宽字体为 PT Mono / 思源宋体。

预定义

创伤内置了一些已经做好的预设，可以通过在引入时修改参数来改变其外观。

注意：本版式与至上主义的绝大多数预设不兼容！

预设： 灰色。

引用方式：直接引入版式。

预设： 阵雨。

引用方式： |rainy=true

预设： 明黄。

引用方式： |yellow=true

预设： 深蓝。⁶

引用方式： |blue=true

预设： 极简。

引用方式： |minimal=true

版式 CSS 代码

关闭

@import url('https://fonts.googleapis.com/css2?family=Nixie+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
 
:root {
    --body-bg: 225, 225, 225;
    --content-bg: var(--global-white-color);
    --bg-opacity: 0.9;
 
    --extra-bg-1: url(https://imagebed.pro/images/liurd/skyline.svg);
    --extra-bg-2: url(https://imagebed.pro/images/liurd/skyline.svg);
    --extra-bg-3: url(https://imagebed.pro/images/liurd/skyline.svg);
    --extra-opacity-1: 0.15;
    --extra-opacity-2: 0.05;
    --extra-opacity-3: 0.05;
 
    --topbar-hover-bg: var(--dark-ui-bg), 0.2;
    --topbar-hover-txt: var(--light-ui-txt);
 
    --user-drop-txt: var(--dark-ui-txt);
 
    --bottombar-bg: var(--dark-ui-bg);
    --bottombar-txt: var(--dark-ui-txt);
 
    --header-title: "SCP 基金会";
 
    --banner-title: "FOUNDATION";
    --banner-subtitle: "当色彩褪去的时候";
 
    --header-height: 3rem;
    --topbar-height: 2.5rem;
    --dropdown-height: var(--topbar-height);
    --banner-height: 25rem;
 
    --header-ui-size: 3rem;
 
    --header-title-size: 1.8rem;
    --topbar-size: clamp(0.8em, calc(0.4rem + 0.8vw), 1em);
    --banner-title-size: clamp(2rem, calc(2rem + 3.5vw), 6rem);
    --banner-subtitle-size: 1rem;
 
    --banner-font: "Nixie One", "Noto Serif SC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, serif;
    --header-font: var(--banner-font);
    --title-font: "Outfit", "Noto Sans SC", "Noto Sans TC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif;
    --body-font: "Atkinson Hyperlegible", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
    --ui-font: "Outfit", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
}
 
#extra-div-1 {
    position: fixed;
    width: 100%;
    height: 25vh;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: var(--extra-bg-1);
    background-size: 20rem;
    background-repeat: repeat-x;
    background-position: center;
    opacity: var(--extra-opacity-1);
}
 
#extra-div-2 {
    position: fixed;
    width: 100%;
    height: 50vh;
    bottom: 0;
    left: 0;
    z-index: -2;
    background-image: var(--extra-bg-2);
    background-size: 40rem;
    background-repeat: repeat-x;
    background-position: center;
    opacity: var(--extra-opacity-2);
}
 
#extra-div-3 {
    position: fixed;
    width: 100%;
    height: 100vh;
    bottom: 0;
    left: 0;
    z-index: -3;
    background-image: var(--extra-bg-3);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    opacity: var(--extra-opacity-3);
}
 
#container {
    display: grid;
    grid-template-columns: minmax(var(--sidebar-width), 1fr)auto 1fr;
    grid-template-rows: auto auto auto auto;
}
 
#extrac-div-1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--banner-font);
    font-weight: 200;
    width: 100%;
    height: var(--banner-height);
    color: rgb(var(--header-txt));
    order: -1;
}
 
#extrac-div-1::before {
    content: var(--banner-title);
    font-size: var(--banner-title-size);
}
 
#extrac-div-1::after {
    content: var(--banner-subtitle);
    font-size: var(--banner-subtitle-size);
}
 
#header {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    min-width: var(--sidebar-width);
    width: 100%;
    height: fit-content;
    grid-template-columns: var(--header-ui-size) 1fr auto auto;
    grid-template-rows: var(--header-ui-size) calc(var(--banner-height) - var(--header-ui-size)) auto;
    top: calc(0px - var(--banner-height));
    order: -2;
}
 
#search-top-box {
    grid-column: 3 / 4;
    position: fixed;
    right: var(--header-ui-size);
    backdrop-filter: blur(1rem);
}
 
#login-status {
    grid-column: 4 / 5;
    position: fixed;
    right: 0;
    backdrop-filter: blur(1rem);
}
 
#header h1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: var(--header-height);
    position: static;
}
 
#header h1 a {
    justify-content: flex-start;
    padding: 0;
    padding-left: 0.5rem;
    transition: padding var(--global-duration);
}
 
#header h1 a:is(:hover, :focus) {
    padding-left: 1rem;
    transition: padding var(--global-hover-duration);
}
 
#header h2 {
    display: none;
}
 
#header-extra-div-1 {
    display: none;
}
 
#top-bar {
    grid-column: 1 / 5;
    grid-row: 3 / 4;
    height: auto;
}
 
#top-bar > div > ul {
    flex-direction: column;
    height: auto;
    margin-right: 0;
}
 
#top-bar > div > ul > li {
    flex-basis: unset;
    height: var(--topbar-height);
}
 
#top-bar > div > ul > li > a {
    justify-content: flex-end;
    padding: 0 1rem;
}
 
#top-bar > div > ul > :is(li, li:last-of-type) > ul {
    top: 0;
    left: 100%;
    width: 32em;
    max-width: max-content;
    min-width: auto;
    flex-direction: row;
    flex-wrap: wrap;
}
 
#top-bar > div > ul > li > ul > li {
    width: 50%;
    flex-grow: 1;
}
 
#top-bar > div > ul > :is(li, li:hover, li:focus, li.sfhover, li:focus-within) > ul > li > a {
    box-sizing: border-box;
}
 
#content-wrap {
    display: contents;
}
 
#side-bar {
    max-height: unset;
    overflow-y: auto;
    border: unset;
    box-shadow: 0 0 1.5rem -1rem rgb(var(--global-dark-color));
}
 
#side-bar::after {
    backdrop-filter: blur(1rem);
}
 
#main-content {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0 auto 15vh;
    padding: 1.5rem;
    box-shadow: 0 0 2.5rem -1rem rgb(var(--global-dark-color));
    position: relative;
    background: rgba(var(--content-bg), var(--bg-opacity));
}
 
#main-content::after {
    content: "控制，收容，保护.";
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10vh;
    color: rgb(var(--header-txt));
    font-family: var(--banner-font);
    font-weight: 200;
}
 
#page-title {
    padding: 0;
}
 
:is(blockquote, .blockquote, div.blockquote, [class*=blockquote]) {
    padding: 0.5rem 1rem;
    border-width: 0 0 0 0.3rem;
    background: rgba(var(--light-block-bg), 0.4);
}
 
#page-options-container {
    font-family: var(--ui-font);
}
 
#footer {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    box-sizing: border-box;
    justify-content: flex-end;
    margin-top: 0.5rem;
    border: unset;
}
 
#license-area {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    padding: 0.5rem;
    justify-content: flex-end;
}
 
#license-area a {
    color: rgb(var(--global-pale-color));
}
 
@media only screen and (max-width: 1024px) {
  #container-wrap {
    perspective-origin: 49.5% 5rem;
  }
 
  #container {
    display: flex;
  }
 
  #header {
    min-width: var(--sidebar-width);
    grid-template-columns: var(--header-ui-size) 1fr auto auto;
    grid-template-rows: var(--header-ui-size) auto auto;
    top: 0;
    width: initial;
    position: static;
  }
 
  #content-wrap {
    display: block;
    margin: 0;
  }
 
  #login-status {
    position: relative;
    backdrop-filter: unset;
  }
 
  #search-top-box {
    position: static;
    backdrop-filter: unset;
  }
 
  #login-status #account-options {
    left: initial;
    right: 0;
  }
 
  #top-bar > div > ul {
    flex-direction: row;
    margin-right: auto;
  }
 
  #top-bar > div > ul > li {
    flex-basis: min-content;
  }
 
  #top-bar > div > ul > li > a {
    justify-content: center;
    padding: 0;
  }
 
  #top-bar > div > ul > :is(li, li:last-of-type) > ul {
    top: 100%;
    left: 0;
    width: auto;
    flex-direction: column;
  }
 
  #top-bar > div > ul > li:last-of-type > ul {
    left: initial;
    right: 0;
  }
 
  #top-bar > div > ul > li > ul > li {
    width: 100%;
    flex-grow: 1;
  }
}
 
@media only screen and (max-width: 768px) {
    #top-bar > div > ul > :is(li, li:last-of-type) > ul {
        flex-direction: row;
    }
    #top-bar > div > ul > li > ul > li {
        width: 50%;
    }
}

关闭

至上主义

真理隐于几何之间

创伤是一个由 Liurd 基于至上主义制作的美学主题版式，由Ueis搬运到本站。
什么？你说为什么没搬至上主义？拜托，一个代码能用就不要动它了。

可以被引用于任意页面。要在页面上引用这个版式，请在页面某处加入以下两行代码（都要加！！！）：

[[include :cas-wiki-cn:theme:trauma]]

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

Fold

Table of Contents

示例

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

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

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

折叠 - 点击以展开

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

此为分页（tab view）。

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

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

一条分割线

嵌套引用块

[[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"]]

较深的背景。

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

[[footnoteblock]]

页眉和横幅字体为 Nixie One / 思源宋体。

标题和用户界面字体为 Outfit / 思源黑体。

正文字体为 Atkinson Hyperlegible / 思源黑体。

等宽字体为 PT Mono / 思源宋体。

预定义

创伤内置了一些已经做好的预设，可以通过在引入时修改参数来改变其外观。

注意：本版式与至上主义的绝大多数预设不兼容！

预设： 灰色。

引用方式：直接引入版式。

预设： 阵雨。

引用方式： |rainy=true

预设： 明黄。

引用方式： |yellow=true

预设： 深蓝。⁹

引用方式： |blue=true

预设： 极简。

引用方式： |minimal=true

搬运版式

中华异学会

格异丶治学丶融会

示例

著作信息

著作信息

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

标题字体为 Sulphur Point / 思源黑体。

预定义

自定义

示例

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

标题和用户界面字体为 Outfit / 思源黑体。

预定义

示例

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

标题和用户界面字体为 Outfit / 思源黑体。

预定义