版式：复古

我们回到了20世纪！
标志看起来……好奇怪，不是吗？这个版式专注于堆叠文本和文字框的阴影，创造3D效果，就像1950s - 1970s时代老式的复古设计。

主要的灵感来源是老式的墙纸、50年代的小饭馆、经典的自动点歌机、库尔伙伴《Spirit of the Boogie》的专辑封面、《汽车总动员》里Flo的Flo's V8咖啡店，以及Doja Cat的封面艺术《Say So》。

我从自己的盲光版式里偷了一些代码（而盲光的代码又是从我的版式集团里偷的，集团的代码则是从 TrailmixNCocoa的M.E.G.版式那里偷的），也有一部分代码受到了 VivamusLudio的启发。我决定为这段特殊的时期再做一个版式。

想要在你的页面引入该版式，在任意位置插入以下代码：

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

示例

哦是的Baby，这就是复古。

你可以通过四个连字符“----”创造一条分割线，分割整个——嗯，这条分割线似乎有点不一样。它不仅仅是两条线，中间还有些别的东西。

哈，因为这是一条复古分割线。如果你对普通的分割线感到厌倦，不如试试这个：

[[div class="retro-hr"]]
----
[[/div]]

它可以给你一个漂亮俏皮的分割线。技术上讲，调整分割线的外观并不是CSS的特性，所以我不推荐你在任何div框里使用这种分割线（除非你想在分割线的中间看到一团奶油一样的长方形）。那么，不使用图片来达到这种分割线效果的办法就只剩下“:after”了，因此这种分割线在一些旧的浏览器上可能会失效。我警告过你了。

在一行字前放一到六个“+”就能制造一个标题。我不建议你再把一个标题加粗了，因为他们已经够粗了。但如果你真的想这么做，没准也行。但是看着效果不太好。

标题

噢，评分已经出炉了！
10/10 ——比简·奥斯丁的小说更好的爱情故事。
5星 ——这个版式就像威灵顿牛排一样精致。
10/10 ——连猩猩都会爱上

这是一个引用块，在每一行的前面加上“> ”就能创建。

它是立体的。

更多长方形吗，先生？

不如再来点儿？

呜呜	呜呜
我现在在	妈妈的车里
救我出去

天空是蔚蓝色¹
你知道吗？每一条航空定律都声明，数学就是数学。
有人草草写下了这些。
噢 BABY IT'S MORBIN' TIME 冲冲冲。
我好嫉妒她们为什么那么丰满。
舞会舞会舞会。
啊哈，despacito。
特拉维斯•斯科特的麦当劳午餐^着火了？
后室炸鸡_{等下我怎么变小了}
我不存在。
紫Sans永生。

引用块和其他框：

[[div class="yblock"]]

[[/div]]

[[div class="pblock"]]

[[/div]]

[[div class="bblock"]]

[[/div]]

[[div class="yquote"]]

[[/div]]

[[div class="pquote"]]

[[/div]]

[[div class="bquote"]]

[[/div]]

[[div class="border-block"]]

[[/div]]

特殊div

老实说，我想破了脑袋也想不到你们怎么能用上这东西。

不找零。Cope + Seethe + Cry About It + L + Ratio

饿了没有？

版头字体是Lemon/站酷快乐体
标题字体是Lobster/站酷快乐体
条目标题字体是Grand Hotel/智勇手书体
正文字体是Urbanist/黑体
等宽字体是Life Savers/思源宋体
菜单的标题字体是Fugaz One/创客贴金刚体
食品种类字体是Atomic Age/站酷快乐体
食品名字字体是创客贴金刚体
食物价格字体是Poiret One
俏皮分割线的字体是Monoton

看看CSS

关闭CSS

@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap');
 
@import url("https://fonts.googleapis.com/css2?family=Lemon&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Monoton&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Grand+Hotel&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Atomic+Age&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poiret+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Life+Savers&display=swap");
 
:root {
   --theme-base: "black-highlighter";
   --theme-id: "Retro";
   --theme-name: "Retro Theme";
 
   --logo-image: url("");
   --header-title: "The Backrooms";
   --header-subtitle: "24/7 营业";
 
    --body-font: 'Urbanist', sans-serif;
    --header-font: 'Lemon', 'ZCOOL KuaiLe';
    --title-font: 'Lobster', 'ZCOOL KuaiLe';
    --mono-font: 'Life Savers', 'Noto Serif SC';
    --top-font: 'Grand Hotel', 'ShouShuti';
    --additional-font: 'Monoton', monospace;
    --diner-font: 'Fugaz One', CKTKingKong;
    --item-font: 'Atomic Age', 'ZCOOL KuaiLe';
    --price-font: 'Poiret One', sans-serif;
    --food-font: CKTKingKong, sans-serif;
 
   --white-monochrome:  230, 189, 171;
   --text-white-monochrome: 193,121,63;
   --pale-gray-monochrome: 76, 184, 180;
   --light-gray-monochrome: 220, 116, 86;
   --gray-monochrome: 234, 96, 37;
   --black-monochrome: 158, 81, 37;
   --bright-accent: 108, 33, 11;
   --medium-accent: 21, 109, 130;
   --dark-accent: 232, 131, 87;
   --pale-accent: 215,160,210;
   --alt-accent: 235, 129, 69;
   --vibrant-orange: 237,121,70;
   --retro-blue: 25,77,114;
   --muted-yellow: 253,172,59;
   --muted-orange: 229,120,30;
   --retro-white: 255,250,245;
 
   --swatch-topmenu-border-color: 159, 44, 9;
   --swatch-headerh1-color: 246, 164, 182;
   --swatch-headerh2-color: 246, 164, 182;
 
   --rating-module-button-plus-color: var(--retro-blue);
   --rating-module-button-negative-color: var(--retro-blue);
 
   --rating-module-text-color: var(--retro-blue);
   --rating-module-text-hover-color: var(--retro-blue);
 
   --link-color: 253, 109, 76;
   --hover-link-color: 240, 144, 122;
   --visited-link-color: 213,131,83;
 
   --background-gradient-distance: 0rem;
 
   --gradient-header: linear-gradient(to top,
      rgba(var(--medium-accent)) 0%,
      rgba(var(--medium-accent), 0.90) 0%
   );
   --diagonal-stripes: linear-gradient(transparent 0);
}
 
#side-bar .side-block div a img {
   filter: grayscale(100%);
}
 
#skrollr-body {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("http://backrooms-wiki.wikidot.com/local--files/theme:retro/header");
    background-repeat: repeat-1;
    background-size:  inherit;
    background-blend-mode: soft-light;
    background-color: rgba(218, 88, 33, 0.5);
}
 
#container {
   background-image: radial-gradient(circle, rgb(var(--dark-accent), 0.05) 50%, transparent 0);
   background-size: 0.25em 0.25em;
   background-repeat: repeat;
   background-attachment: fixed;
}
 
#top-bar div.mobile-top-bar > ul > li > a,
#top-bar div.top-bar > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > ul > li > a,
#top-bar div.top-bar > ul > li > ul > li > a {
   color: white;
}
 
div#page-options-bottom-2 > a, div#page-options-bottom > a {
   border-radius: 0em;
   -moz-border-radius: 0em;
   border: none;
}
 
div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover {
   border: none;
}
 
#header, #top-bar {
   background-attachment: scroll;
}
 
#header {
   background-image: none;
}
 
#header::before {
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
   background-size: auto 16rem;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0.4;
}
 
#header h1, #header h1 a {
   position: absolute;
   top: 0.19em;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: left;
   z-index: 0;
   font-size: 2em;
}
 
#header h2, #header h2 span, #header h2 span::before {
   position: absolute;
   top: 1.65rem;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: left;
   font-size: 1.25em;
}
 
.yui-navset .yui-nav a {
   color: rgb(var(--retro-blue)) !important;
}
 
.yui-navset .yui-nav .selected a {
   color: rgb(var(--retro-white)) !important;
}
 
.yui-navset .yui-content {
    color: rgb(var(--retro-blue));
    border-color: rgb(var(--retro-blue));
}
 
table.wiki-content-table th {
   background-color: rgb(var(--pale-gray-monochrome));
   color: rgb(var(--retro-blue));
}
 
#login-status {
   color: rgb(var(--bright-accent));
}
 
#login-status a {
   color: rgb(var(--bright-accent));
}
 
#search-top-box input.empty {
   color: rgb(var(--bright-accent));
}
 
a.newpage {
   background: transparent;
   text-decoration: none
}
 
a.newpage {
   color: rgb(var(--alt-accent))
}
 
blockquote {
   background-color: rgb(var(--muted-yellow));
   border: 3px solid rgb(var(--muted-orange));
   box-shadow: rgb(var(--muted-orange)) 1px 1px 0px 0px, rgb(var(--muted-orange)) 2px 2px 0px 0px, rgb(var(--muted-orange)) 3px 3px 0px 0px, rgb(var(--muted-orange)) 4px 4px 0px 0px, rgb(var(--muted-orange)) 5px 5px 0px 0px;
}
 
.border-block {
   background-color: rgb(250, 250, 234);
   color: #e5554c;
   border: 0.35rem solid #e5554c;
   border-radius: 10px;
   padding: 0.01rem 1rem;
}
 
code,
.code {
   background-color: rgb(var(--muted-yellow));
}
 
:root{
  --base-color: rgb(var(--muted-yellow));
  --hover-color: rgb(240,177,87);
  --click-color: rgb(214,140,38);
}
 
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 15px 15px 0px 0px;
    border: 2px solid rgb(var(--muted-orange));
    box-shadow: rgb(var(--muted-orange)) 0px 0px 3px 0px;
    transition: background 0.1s linear;
    background: var(--base-color);
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}
 
#page-content .collapsible-block-link {
    color: white;
    font-weight: bold;
    text-decoration: none;
}
 
#page-content .collapsible-block-link:hover {
    text-decoration: none
}
 
#page-content .collapsible-block-content {
    transition: border-top-color 0.2s linear, border-bottom-color 0.2s linear;
    border-top: solid rgb(var(--muted-orange)) 5px;
    border-top-right-radius: 15px;
    border-bottom: solid rgb(var(--muted-orange)) 3px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
 
#page-content .collapsible-block-folded {
    max-width: 100%;
}
#page-content .collapsible-block-unfolded-link{
    width: min-content;
}
 
#page-content .collapsible-block-folded .collapsible-block-link::before {
    content: "▷";
    border-right: none;
    padding-right: 0rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
    content: "▽";
    border-right: none;
    padding-right: 0rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
 
#page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover {
    background: var(--hover-color);
    max-width: 100%;
}
 
#page-content .collapsible-block-unfolded-link:hover + .collapsible-block-content{
    border-top-color: var(--hover-color);
    border-bottom-color: var(--hover-color);
}
 
#page-content .collapsible-block-unfolded-link:hover + .collapsible-block-content::after {
    background: var(--hover-color);
}
 
#page-content .collapsible-block-folded:active, #page-content .collapsible-block-unfolded-link:active, #page-content .collapsible-block-unfolded-link:active + .collapsible-block-content::after {
    transition: background 0s, max-width 0s;
    background: var(--click-color);
    max-width: 100%;
}
 
#page-content .collapsible-block-unfolded-link:active + .collapsible-block-content {
    transition: border-top-color 0s, border-bottom-color 0s;
    border-top-color: var(--click-color);
    border-bottom-color: var(--click-color);
}
 
#page-content .unfolded-collapse {
    margin-top: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px;
    background: var(--base-color);
    color: white;
    font-weight: bold;
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}
 
#page-content .unfolded-collapse::before {
    content: "▽";
    border-right: none;
    padding-right: 0rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
 
#page-content .unfolded-collapse-border {
    display: block;
    width: 700px;
    border-top: solid var(--base-color) 5px;
}
 
#page-content .center-collapse .collapsible-block-folded, #page-content .center-collapse .collapsible-block-unfolded-link, #page-content .center-collapse .unfolded-collapse{
    margin:auto;
    margin-top: 10px;
}
 
#page-content .addendumfooter{
    display: block;
    border-bottom: solid 3px var(--base-color);
    margin: auto;
    text-align: center;
}
 
#page-content .info-container .collapsible-block {
    counter-increment: none;
}
 
#page-title{
    font-family: var(--top-font);
    border-bottom: 2px double rgb(var(--vibrant-orange));
    text-align: center;
    font-size: 45px;
    text-shadow: .063rem 0.1rem 0.1rem #612f05;
    color: rgb(var(--vibrant-orange));
}
 
#page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link  {
    transition: none;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
    background: var(--barColour);
}
 
#page-content .info-container .collapsible-block-folded::before, #page-content .info-container .collapsible-block-unfolded-link::before  {
    content: "";
    display: none;
}
 
#page-content .info-container .collapsible-block-content {
    border-bottom: none;
    transition: none;
    border-top: none;
}
 
#page-content .info-container .collapsible-block-content::after {
    display: none;
}
 
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded, #page-content .unfolded-collapse{
    line-height: 1.4;
}
 
#page-content .collapsible-block-folded .collapsible-block-link::before, #page-content .collapsible-block-unfolded .collapsible-block-link::before, #page-content .unfolded-collapse::before {
    font-size: 130%;
    margin-left: -0.4em
}
 
.menu-top {
    font-family: var(--diner-font);
    text-align: center;
    font-size: 2.5em;
    transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    -webkit-transform:rotate(-5deg);
    text-shadow: 1px 2px 0px #c62927;
}
 
.border-block hr{
    border-color: #e5554c;
}
 
table.menu td.category {
    width: 100%;
    font-family: var(--item-font);
    font-size: 1.75em;
    font-weight: bold;
    padding: 0.3em 1em 0em 1em;
    border-bottom: 0.25rem solid #e5554c;
}
 
table.menu td.food {
    font-family: var(--food-font);
    padding: 0.1em 0 0.1em 0.4em;
}
 
table.menu td.price {
    font-family: var(--price-font);
    font-weight: bold;
    padding: 0.1em 0 0.1em 0;
}
 
h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-font);
color: #f6869e;
}
 
h1, #header h1 a::before {
text-shadow: -1px 1px #7e0303, 1px -1px #7e0303,
    -1px -1px #7e0303, 1px 1px #7e0303, 2px 2px #7e0303,
    3px 3px #7e0303, 4px 4px #7e0303, 5px 5px #7e0303;
}
 
h2, #header h2 span::before {
text-shadow: -1px 1px #7e0303, 1px -1px #7e0303,
    -1px -1px #7e0303, 1px 1px #7e0303, 2px 2px #7e0303,
    3px 3px #7e0303, 4px 4px #7e0303;
}
 
h3, h4 {
text-shadow: -1px 1px #7e0303, 1px -1px #7e0303,
    -1px -1px #7e0303, 1px 1px #7e0303, 2px 2px #7e0303,
    3px 3px #7e0303;
}
 
h5, h6 {
text-shadow: -1px 1px #7e0303, 1px -1px #7e0303,
    -1px -1px #7e0303, 1px 1px #7e0303, 2px 2px #7e0303;
}
 
hr{
    border-top: 4px double rgb(var(--medium-accent));
    text-align: center;
    background-color: rgba(0, 0, 0, 0);
}
.retro-hr hr:after {
        font-family: var(--additional-font);
    content: '—*O*—';
    display: inline-block;
    position: relative;
    top: -19.5px;
    padding: 0 10px;
    font-size: 24px;
    background: #e6bcaa;
    color: rgb(var(--medium-accent));
}
 
.scp-image-block.block-right {
   border: 2px solid #33929b;
   box-shadow: rgb(var(--medium-accent)) 1px 1px 0px 0px, rgb(var(--medium-accent)) 2px 2px 0px 0px, rgb(var(--medium-accent)) 3px 3px 0px 0px, rgb(var(--medium-accent)) 4px 4px 0px 0px, rgb(var(--medium-accent)) 5px 5px 0px 0px;
}
 
.scp-image-caption {
   color: rgb(var(--retro-blue));
}
 
.page-rate-widget-box {
    background: rgb(var(--pale-gray-monochrome));
    border: 2px solid rgb(var(--medium-accent));
    box-shadow: rgb(var(--medium-accent)) 1px 1px 0px 0px, rgb(var(--medium-accent)) 2px 2px 0px 0px, rgb(var(--medium-accent)) 3px 3px 0px 0px, rgb(var(--medium-accent)) 4px 4px 0px 0px, rgb(var(--medium-accent)) 5px 5px 0px 0px;
}
 
.page-rate-widget-box .rate-points,
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown,
.page-rate-widget-box .cancel,
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a {
    color: rgb(var(--retro-blue));
}
 
.yquote, .pquote, .bquote {
    padding: 0.1rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
}
 
.yblock, .pblock, .bblock {
   padding: 0.01rem 1rem;
}
 
.yblock, .yquote {
   background-color: rgb(var(--muted-yellow));
   border: 3px solid rgb(var(--muted-orange));
   box-shadow: rgb(var(--muted-orange)) 1px 1px 0px 0px, rgb(var(--muted-orange)) 2px 2px 0px 0px, rgb(var(--muted-orange)) 3px 3px 0px 0px, rgb(var(--muted-orange)) 4px 4px 0px 0px, rgb(var(--muted-orange)) 5px 5px 0px 0px;
}
 
.pblock, .pquote {
   background-color: rgb(var(--swatch-headerh1-color));
   border: 3px solid #f6869e;
   box-shadow: #f6869e 1px 1px 0px 0px, #f6869e 2px 2px 0px 0px, #f6869e 3px 3px 0px 0px, #f6869e 4px 4px 0px 0px, #f6869e 5px 5px 0px 0px;
   color: #7e0303;
}
 
.bblock, .bquote {
   background-color: rgb(var(--pale-gray-monochrome));
   border: 3px solid rgb(var(--medium-accent));
   box-shadow: rgb(var(--medium-accent)) 1px 1px 0px 0px, rgb(var(--medium-accent)) 2px 2px 0px 0px, rgb(var(--medium-accent)) 3px 3px 0px 0px, rgb(var(--medium-accent)) 4px 4px 0px 0px, rgb(var(--medium-accent)) 5px 5px 0px 0px;
   color: rgb(var(--retro-blue));
}
 
.yquote {
   border-left: 0.85rem solid rgb(var(--muted-orange));
}
 
.pquote {
   border-left: 0.85rem solid #f6869e;
}
 
.bquote {
   border-left: 0.85rem solid rgb(var(--medium-accent));
}
 
.footnotes-footer {
    border: 3px solid #db3920;
    border-left: 0.85rem solid #db3920;
    box-shadow: #db3920 1px 1px 0px 0px, #db3920 2px 2px 0px 0px, #db3920 3px 3px 0px 0px, #db3920 4px 4px 0px 0px, #db3920 5px 5px 0px 0px;
}
 
#account-options{
    background-color: rgb(var(--pale-gray-monochrome));
    border: 3px solid rgb(var(--medium-accent));
    box-shadow: rgb(var(--medium-accent)) 1px 1px 0px 0px, rgb(var(--medium-accent)) 2px 2px 0px 0px, rgb(var(--medium-accent)) 3px 3px 0px 0px;
}
 
#account-options a {
    color: rgb(var(--retro-blue));
}