雨停之时

版式 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: "Backrooms";
 
    --banner-title: "BACKROOMS";
    --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.8rem, calc(0.4rem + 0.8vw), 1.2rem);
    --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: 24em;
    max-width: max-content;
    min-width: auto;
    flex-direction: row;
    flex-wrap: wrap;
}
 
#top-bar > div > ul > li > ul > li {
    width: 10em;
    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%;
    }
}

落雨城的远舟，载着彩虹

生存难度：

等级 死区

• 不安全
• 未勘探完全
• 环境危害

眼前这座熟悉的城市与你的记忆相比，似乎被建设得更加完善。曾经对于它的印象似乎不好，但这里的美好使你又想起来这座城市更早的模样，有几分与现在相像。

雨渐渐落下，柔和的雨声带你走入某家餐厅，曾经你很喜欢在这里与朋友交流。时隔多年当你再坐上那张长满青苔的椅子，你的朋友们，那些遇见过的人，他们似乎又在你面前。再往下走，你走到了记忆中破败的广场。微风吹过，用来装饰地板的玻璃被换新，你感觉这里很陌生，它不应该是完好无损的。

走入黑暗后，你在落雨城什么都没找到，你怀疑自己是否走错了，是在前进还是在后退？晨曦未同往日——撕开密布的乌云，你不希望被遗忘，这里，这片地方更是。

这里承载着你的所有，渐渐走远。但你想把它拉回来。

破碎后的世界

这是雪地中唯一可见的树，在寒冷雪天里依旧顽强地站着。我不认为自己是这棵树，我可以是树枝上的那片雪花、那根树枝同时还可以是这片雪地，但我不可能是这棵树。

破碎的世界……

我慢慢走近了这棵树，触碰了它，它似乎死了……我靠在并不坚固的树干上，睡着了。我认为它会醒过来的，会比我早，比白雪更早。

你走上用沥青铺的路，这条路似乎是你离开城市的路。那天没有人理解你为什么要这样干，却还是目送你离开了。这次回来，你很开心，天空降下更大的雨，打湿了你喜欢的长发。

答案在哪里呢？

你赶快找到了避雨的地方，那是25号线的地铁站。电动扶梯已经坏掉了，你只能慢慢走下去，但楼梯的长度似乎与你记忆中的不同。
些许，你到了站台，平时会提着行李在这里等车，直到的掉入黄色迷宫之前。

答案在哪里呢？

今天的地铁似乎不会来了，可广播却仍播报着列车到站的广播，你冲门后空旷的轨道跳下。

幽闭的隧道

我小时候有幽闭恐惧症，但后来不克服也不行了。

我初入后室时，很怀念前室的生活，也很怀念曾经的朋友，但为了生存，我不得已去克服各种思念，各种困难。

轨道的尽头似乎有一个站台？

顺着轨道走出站地铁，你看到原先的城市。你似乎没有注意到轨道尽头是城市的怪异，继续往前走去。大雨渐渐变小了，而且正在变慢，地板也在变得透明。
这很奇怪。你却还未觉得怪异可怖，你继续往港口跑去，感觉答案就在眼睛，你马上就要回家找到真正的自我了。在港口，你忽然发觉了，认不出这是哪。强烈的绝望忽从四面八方袭来，猛地要将你撕成碎片。
你感觉地板有些站不稳，赶紧往前跑，希望在绝望到来前登上船。船就在眼前，那个承载着你所有的孤舟就停泊此处顶你登上。纵身向小船跃去，你将自己的全部同记忆带向远方。你很希望回家，如果没有那场意外的话，都本该如此的。

确实有东西从四面八方袭来，不过很可惜，那是滞留的雨滴，不是绝望感。

雨滴如将你撕成了碎片的幻想，所有的不幸却刚好发生在你离希望之船仅有半步的地方。

当你身上最后的残骸掉下后，装载着那些碎肉的船正慢慢地驶离落雨之城。

一切本该如此。


远舟轻轻的离开了落雨之城，你的碎肉仍然在鲜活的跳动
你忍受了许久这种无法适应的痛苦，它们每时每刻都在撕裂自己的灵魂
终于，远舟撞上了什么东西……?
痛苦逐渐消逝，碎肉逐渐拼凑在一起，成为了一具没有灵魂的肉体
你什么都不记得了……不……不……
转身望去，那是你熟悉的城市，或者说……又一座落雨城。
这是你第几次轮回了？

实体：

一切本该如此

基地，前哨站与社区：

一切本该如此

入口与出口：

入口：

一切本该如此

出口：

一切本该如此

一切本该如此

本文作者：XRHX23
由Sakiko_1YuCong获得授权并修改后进行发布
PS：本文为Fandom Level ZH 395:"雨停之时"