简远 版式
2021年1月30日
修订 21
评分
38
↑ 38
↓ 0
支持率
100%
总票数 38
Wilson 95% 下界
90.8%
在相同票数下更稳健的支持率估计
争议指数
0.000
评分趋势
按周聚合 加载图表中...
最近修订
1 / 8
最近投票
1 / 4
2025-08-07
2025-07-20
2025-07-11
2025-06-22
2025-02-25
2025-01-04
2024-12-12
2024-09-03
2024-09-03
2024-09-03
相关页面
暂无推荐
页面源码
[[iftags +版式]]
[[>]]
**评分：**
[[module Rate]]
[[/>]]
[[>]]
**评分模块与著作信息模块：**
[[/>]]
[[include :scp-wiki-cn:credit:start]]
页面信息
[[include :scp-wiki-cn:credit:more]]
更多页面信息
[[include :scp-wiki-cn:credit:end]]
这是由 [[*user EstrellaYoshte]] 制作的美学版式，与任何设定、系列、或相关组织均无关联。
在你的作品开头添加如下语法以应用此版式：
> @@[[include :scp-wiki-cn:theme:simple-yonder]]@@
开启本版式的**超级模式**：
> @@[[include :scp-wiki-cn:theme:simple-yonder xmode=a]]@@
+ 示例
[[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme%3Asimple-yonder/logo.png|caption=标志|width=200px]]
可通过五个连字符“@@-----@@”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
-----
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
[[collapsible show="+ 标题" hide="- 标题"]]
+ 1 级标题
++ 2 级标题
+++ 3 级标题
++++ 4 级标题
+++++ 5 级标题
++++++ 6 级标题
[[/collapsible]]
@@ @@
[[tabview]]
[[tab 分页]]
此为分页（tab view）。
[[/tab]]
[[tab 分页]]
看，这有更多文字。
多么精巧绝伦。
[[/tab]]
[[tab 长 Tab]]
这是一个长的 tab，它有很多文字。[[footnote]]这是一个脚注。[[/footnote]]
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[/tabview]]
> 这是一个引用块，在一行字的起始处加上“> ”来创建。
>
> 更多文字
> -----
> 一条分割线
>
>> 嵌套引用块
||~ 这是 ||~ 表格 ||
||你应该老早 || 就知道怎么 ||
||||做这个了吧 ||
@@ @@
------
@@ @@
[[div style="border: solid 2px #ededed; padding: 0.5rem; margin: 4px;"]]
++++ [[span style="color: black"]]超级模式加入了：[[/span]]
[[image https://scpsandboxcn.wikidot.com/local--files/ambersight/simple-yonder-sample.jpg]]
- 引用了[[[component:toggle-sidebar|切换侧边栏]]]
- 优化了移动端显示时的图像边距
- 将编辑字体改为 Fira Code
- 脚注优化——最大宽度为 420px，不再会//（因点到脚注而跳转）//
- 鼠标悬浮时用户头像不再放大
- 新版标签显示
[[div style="padding: .01em 16px;margin-bottom: 16px;margin-top: 16px;padding-bottom: 0.6em;border: 1px #bbbbbb solid;box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.16);"]]
{{@@[[div class="material-box"]]@@}}
[[/div]]
[[/div]]
@@ @@
[[=]]
++++ 页眉字体为 Jost / 黑体。
正文字体为 Open Sans。
@@ @@
{{等宽字为 Fira Code / 幼圆。}}
[[/=]]
@@@@
@@@@
[[footnoteblock]]
-----
+++ 源代码：
[[code type="css"]]
/*
Simple Yonder Theme
[2020 Wikidot Theme]
By EstrellaYoshte
Based on:
Sigma-9 Theme by Aelanna and Dr Devan
Anderson Robotics Theme by Croquembouche
Minimal Theme by stormbreath
Word Processing Theme by stormbreath
Flopstyle CSS by Lt Flops
*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap);
@import url('https://scp-wiki.wdfiles.com/local--files/theme%3Asimple-yonder/jost.css');
:root {
--themeColor: #7E2520;
--accentColor: #E01F1F;
--whiteColor: #FBFBFB;
--borderColor: #C4C4C4;
}
body {
color: #000000;
font-family: 'Open Sans', sans-serif;
font-size: 0.925rem;
background-color: var(--whiteColor);
}
.code pre, .code p, .code, tt{ /* ---- Code by Croquembouche ---- */
font-family: "Fira Code", '幼圆', monospace;
}
.page-source{
font-family: "Fira Code", '幼圆', monospace;
}
a {
color: var(--accentColor);
}
a:visited {
color: var(--themeColor);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--themeColor);
font-family: 'jostregular';
font-weight: bold;
}
#page-title {
color: var(--themeColor);
font-family: 'jostregular';
font-weight: bold;
font-size: 2.4em;
border-color: var(--borderColor);
}
/* ---- HEADER ---- */
div#container-wrap{
background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Asimple-yonder/bg3.png');
background-size: auto;
background-repeat: repeat-x;
}
div#header {
background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Asimple-yonder/logo.png');
background-size: 7.3rem;
background-position: 3px 29px;
}
@media (max-width: 767px) and (min-width: 480px) {
div#header {
background-size: 6rem;
background-position: -4px 44px;
}
}
@media (max-width: 479px) {
div#header {
background-size: 4.6rem;
background-position: -3px 58px;
}
}
#account-topbutton {
border-width: 0;
}
#login-status,
#login-status a {
color: var(--whiteColor);
font-weight: bold;
}
#login-status ul a,
#login-status ul a:hover {
color: var(--themeColor);
}
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
border: none;
background: #282828;
box-shadow: none;
border-radius: 2px;
color: #f4f4f4;
}
#search-top-box input.empty {
color: var(--borderColor);
}
div#header h1 a span {
font-family: 'jostregular', sans-serif;
font-weight: bold;
color: #f4f4f4;
text-shadow: 0px 0px 0px #000;
}
div#header h2 span {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: #f4f4f4;
padding: 17px 0;
text-shadow: none;
white-space: pre;
}
/* ---- TOP BAR ---- */
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
color: var(--themeColor);
}
#top-bar ul li ul {
border-color: var(--borderColor);
box-shadow: none;
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
background: #f4f4f4;
}
/* ---- SIDE BAR ---- */
#side-bar, #interwiki {
background-color: var(--whiteColor);
}
#side-bar .side-block.media > * {
display: flex;
justify-content: space-evenly;
}
:is(#side-bar, #interwiki) .side-block,
#side-bar .side-block:is(.resources,.media) {
border: none;
border-radius: 0;
box-shadow: none;
background: transparent !important;
padding: 0;
}
:is(#side-bar,#interwiki) .heading {
border: none;
color: #282828;
font-size: 1.325em;
padding: 0.25rem 0;
border-top: 0.05rem solid var(--borderColor);
margin: 1.25rem 0 0.325rem;
font-weight: normal;
}
:is(#side-bar, #interwiki) div.menu-item {
margin-inline-start: 0.75rem;
}
:is(#side-bar, #interwiki) .menu-item img { display: none; }
:is(#side-bar, #interwiki) a {
color: var(--accentColor);
}
#top-bar div.open-menu a {
border-radius: 0;
box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.2), 0px 3px 10px 0 rgba(0, 0, 0, 0.19);
color: var(--themeColor);
border: none;
}
@media (max-width: 767px) {
#main-content {
padding: 0;
margin: 0 5%;
border-left: none;
}
#page-title {
margin-top: 0.7em;
}
#side-bar {
left: -19em;
}
#side-bar:target {
border: none;
box-shadow: 1px 0 5px 0 rgba(0,0,0,0.2);
}
#side-bar .close-menu {
transition: width 0.5s ease-in-out 0.1s,
opacity 1s ease-in-out 0s;
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
background: rgba(0,0,0,0.3);
background-position: 19em 50%;
z-index: -1;
opacity: 0;
pointer-events: none;
}
#side-bar:target .close-menu {
width: calc(100% - 17em);
right: 0;
left: auto;
opacity: 1;
pointer-events: auto;
}
#side-bar .heading {
padding-left: 1em;
margin-inline: -1em;
}
}
/* ---- TABS ---- */
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
font-family: 'jostregular', sans-serif;
border-color: var(--themeColor); /* color between tab list and content */
}
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
background: var(--whiteColor); /* tab background */
border-color: transparent;
color: black;
transition: 0.125s;
}
.yui-navset .yui-nav a em {
background: #f4f4f4;
box-shadow: none;
border-color: var(--whiteColor);
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
font-weight: bold;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
background: var(--whiteColor); /* selected tab background */
color: var(--themeColor);
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
background: var(--whiteColor);
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
border-color: transparent;
box-shadow: 0px 1px 2px 0.5px rgba(0,0,0,0.5);
background: var(--whiteColor);
}
.yui-navset .yui-content {
background: var(--whiteColor); /* content background color */
}
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
border: solid 1px var(--borderColor);
border-top-width: 0;
}
.yui-navset-left .yui-content {
border-left-color: #b7a9a9; /* different border color */
}
/* ---- INFO BAR ---- */
body{
--barColour: var(--themeColor);
}
.info-container .collapsible-block-content .wiki-content-table{
width: 100%;
}
/* ---- INFO PANE ---- */
#page-content .creditRate{
margin: unset;
margin-bottom: 8px;
}
#page-content .rate-box-with-credit-button {
background-color: var(--whiteColor);
border: solid 1px var(--whiteColor);
box-shadow: none;
border-radius: 0;
}
#page-content .rate-box-with-credit-button .fa-info {
border: none;
color: var(--themeColor);
}
#page-content .rate-box-with-credit-button .fa-info:hover {
background: var(--whiteColor);
color: var(--accentColor);
}
.rate-box-with-credit-button .cancel {
border: solid 1px var(--whiteColor);
}
.modalbox {
background: var(--whiteColor);
border: none;
box-shadow: none;
border-radius: 0;
}
iframe.close-credits {
top: 1.25em;
right: 1.5em;
transform: scale(1.5, 1.25);
}
.page-rate-widget-box {
box-shadow: none;margin-right: 0;
font-family: 'jostregular', sans-serif;
font-size: 1.125em;
}
.page-rate-widget-box .rate-points {
background-color: var(--whiteColor) !important;
color: var(--themeColor);
border: solid 1px var(--whiteColor);
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
background-color: var(--whiteColor);
border-top: solid 1px var(--whiteColor);
border-bottom: solid 1px var(--whiteColor);
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
background: transparent;
color: var(--themeColor);
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
background: var(--whiteColor);
color: var(--accentColor);
}
.page-rate-widget-box .cancel {
background: transparent;
background-color: var(--whiteColor);
border: solid 1px var(--whiteColor);
}
.page-rate-widget-box .cancel a {
color: var(--themeColor);
}
.page-rate-widget-box .cancel a:hover {
background: var(--whiteColor);
color: var(--accentColor);
}
/* ---- PAGE ELEMENTS ---- */
#page-content .wiki-content-table tr th {
border: solid 1px var(--borderColor);
background-color: #f4f4f4;
/* set border for table title */
}
#page-content .wiki-content-table tr td {
border: solid 1px var(--borderColor);
/* set border for table content */
}
blockquote,
div.blockquote,
#toc,
.code {
background-color: #f4f4f4;
border: solid 1px var(--borderColor);
}
.scp-image-block {
border: solid 1px var(--borderColor);
box-shadow: none;
box-sizing: border-box;
}
.scp-image-block .scp-image-caption {
background-color: #f4f4f4;
border-top: solid 1px var(--borderColor);
color: black;
}
hr {
background-color: var(--borderColor);
margin: 1.5rem 0;
}
.hovertip {
border-color: var(--borderColor)!important;
}
#main-content .page-tags span {
max-width: 100%;
}
/* ---- FOOTER ---- */
#footer { background: transparent; }
#footer a { color: var(--themeColor); }
/* ---- LICENSE AREA ---- */
#license-area {
border-top: 0.05rem solid var(--borderColor);
padding: .425rem;
font-size: .775em;
background: var(--themeColor);
color: var(--whiteColor);
}
#license-area a {
color: inherit;
font-weight: bold;
}
[[/code]]
[[/iftags]]
[[module CSS]]
@import url('https://scp-wiki-cn.wdfiles.com/local--code/theme%3Asimple-yonder/1');
[[/module]]
[[div_]]
[[include :scp-wiki-cn:component:interwiki-style
| priority=1
| type=sidebar
| theme=https://scp-wiki-cn.wdfiles.com/local--code/theme%3Asimple-yonder/1
]]
[[/div]]
>[[ift{$xmode}gs -版式]]
>[[iftags]]
[[div style="display: none;"]]
[[include :scp-wiki:component:toggle-sidebar]]
[[/div]]
[[module CSS]]
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
div#side-bar { background-color: var(--whiteColor); }
/*-- in-page stuff --*/
#page-title {
text-align: center;
}
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source {
font-family: 'Fira Code', monospace;
font-size: 98%;
}
.scp-image-block.block-left { margin-left: 0; }
.scp-image-block.block-right { margin-right: 0; }
@media (max-width: 540px) {
.scp-image-block.block-left, .scp-image-block.block-right {
float: none; clear: both; margin-left: auto; margin-right: auto;
}
}
.avatar-hover { display: none !important; }
.hovertip { max-width: 420px; }
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
display: none;
}
/*-- fancy collapsible, derived from monkatraz bhl collapsible --*/
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
background: #7E2520;
padding-top: 0.3rem;
padding-bottom: 0.24rem;
padding-left: 1rem;
padding-right: 1rem;
width: min-content;
white-space: nowrap;
overflow: hidden;
margin:auto; /*-- center --*/
}
#page-content .collapsible-block-link {
color: #f4f4f4;
font-family: 'Fira Code', monospace;
font-weight: bold;
font-size: 96%;
}
#page-content .collapsible-block-link:hover {
text-decoration: none
}
#page-content .collapsible-block-content {
border-top: solid 0.24rem #7E2520;
border-bottom: solid 0.24rem #7E2520;
}
#page-content .collapsible-block-folded .collapsible-block-link::before {
content: "▷ ";
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
content: "▽ ";
}
/*-- Toggle Sidebar styling --*/
div#side-bar {
width: 17rem;
border-right: solid 1px #d9d9d9;
box-sizing: border-box;
overflow-x: hidden;
}
/* ---- YUI TAB CUSTOMIZATION ----*/
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
box-shadow: none;
}
.yui-navset .yui-nav a, /* ---- Link Modifier ---- */
.yui-navset .yui-navset-top .yui-nav a {
border: unset;
background-color: #f4f4f4;
box-shadow: none;
}
.yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
.yui-navset .yui-navset-top .yui-nav li {
position: relative;
display: flex;
flex-grow: 2;
max-width: 100%;
margin: 0;
padding: 0;
}
.yui-navset .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset-bottom .yui-nav li a{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.yui-navset .yui-nav li em{
border: unset;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus{
background-color: #f4f4f4;
}
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em{
padding: .35em .75em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
display: flex;
flex-grow: 2;
max-width: 100%;
align-items: center;
justify-content: center;
}
.yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected {
margin: 0;
}
/*-- tab slide --*/
.yui-navset .yui-content > div {
display: block;
top: 0;
overflow: hidden;
transform-origin: 0 0;
}
#page-content .yui-navset .yui-content > div[style*="none"] {
display: block !important;
flex: 0;
max-height: 0;
padding: 0 0.5em;
border-width: 0;
/* The following transition affects the one that DISAPPEARS */
transition: padding 0s linear 0.5s,
border-width 0s linear 0.5s,
flex 0.5s cubic-bezier(.18,.51,.54,.9) 0s;
animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
#page-content .yui-navset .yui-content > div[style*="block"] {
display: block !important;
flex: 1;
max-height: 9999rem;
/* The following transition affects the one that APPEARS */
transition: padding 0s linear 0.5s,
border-width 0s linear 0.5s,
flex 0.5s cubic-bezier(.18,.51,.54,.9) 0.5s;
animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
@keyframes tab-disappear {
0% { max-height: 9999rem; }
1% { max-height: 100vh; }
100% { max-height: 0; }
}
@keyframes tab-appear {
0% { max-height: 0; }
99% { max-height: 100vh; }
100% { max-height: 9999rem; }
}
/*-- custom div box borrowed from magnus --*/
.material-box {
padding: .01em 16px;
padding-bottom: 0.6em;
margin-bottom: 16px;
margin-top: 16px;
border: 1px var(--borderColor) solid;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.16);
}
/*-- tags --*/
#main-content .page-tags a {
height: 0.8125rem;
line-height: 0.8125rem;
font-size: 0.6875rem;
background-color: #282828;
color: #f4f4f4;
border-radius: 0rem;
margin: .25rem .2rem; .5rem .2rem;
padding: 0.225rem 0.35rem 0.225rem 1.025rem;
--notchSize: 0.5rem;
clip-path:
polygon(
0% var(--notchSize),
var(--notchSize) 0%,
100% 0%,
100% 100%,
calc(100% - var(--notchSize)) 100%,
var(--notchSize) 100%,
0% calc(100% - var(--notchSize))
);
}
#main-content .page-tags a:hover {
background-color: #E53C35;
text-decoration: none;
}
#main-content .page-tags a::before {
content: "⬤";
color: var(--whiteColor);
font-size: 5.8px;
float: left;
position: relative;
left: -0.6rem;
width: 0;
height: 0;
}
.page-tags span {
border-top: 0.05rem solid var(--borderColor);
}
[[/module]]
>[[/iftags]]
>[[/ift{$xmode}gs]]