天街小雨

版式 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%;
    }
}

滴答、滴答

窸窸窣窣的雨声将你唤醒，你睁开了双眼，站起来，揉了揉眼，环顾四周，周围已然不是那条街道的景象。向远方望去，黑暗不再，只剩一片单调朦胧之景——一条绵延向前街道、一片无边无际的天穹、窸窣落下的细雨、以及周围若隐若现的草色。

你还未缓过神来，看着眼前的风景，你似乎别有一番兴致，伸出手，接了几滴雨水，待着朦胧散去，你便开始缓缓向前方走去——尽管，你并不知道你为什么要这么往前走，只是有着一种声音，一种名为“希望”的声音，不断地驱使你向前走着、走着……

你看向周围若隐若现的草坪——或许并非草坪，他似乎有种说不出的美，或是朦胧、亦或是淡雅。这深深吸引了你，你慢慢蹲下，在雨点的敲打下伸出手，手伸进草原的那一刻，就像与草色的朦胧化作一体，也变得朦胧，好似入了一番迷雾之中，你能隐约感受到，那迷雾中，似乎掺杂了一股难以言说的物质，可能是碎片化的景色，也可能是逐渐隐去的意识。雨水落入草坪，像是落入迷雾之中，然后迷雾产生丝丝翻涌的波浪，很快又归于一片平和之中。

你不知道你现在走了多远，周围还是一成不变的景象，周围伴随你的只有单调的雨声，滴滴答答，永远没有停止，望着远方——依然没有尽头，你不知道你还要在这条绵延不断的路上行走多久——或许永远走不完。但你的大脑仍然相信了“希望”，使得你继续向着前方走着。
























但，在后室这片天地，哪有什么希望可言？所谓“希望”，不过只是渺小的幻想罢了

雨还在下着

滴答












几滴雨落下，乍一看，这只是普通的雨水，但你发现——雨中若隐若现地映照着一些图形——小路，草原，这在空无一人的小径上显得格外突兀。你怀疑自己的眼睛出现了幻觉，赶紧揉了揉眼，想再看一看那雨水的样子，可奇怪的是——雨中若隐若现的图形已然消失不见，连一点碎影也没留下。看着眼前消失的雨，你愣住了。“大概是我的幻觉吧”你想，便向前又走去。




































滴答












你在雨中走着，你总觉得这雨有些不对劲，且这种感觉愈发强烈，不仅是因为刚才发生的意象，你的思绪愈发混乱，“以前的事情，怎么……”，一滴滴雨接着洒落下来，带着许多记忆——不只是你的记忆，在你的脑海中一帧帧闪过，尽管他们有的互相矛盾，有的与你的直觉完全像反，但他们存在于那里。“是我记错了，还是……”顿时，你的心里闪过一个可怕的念头。
























滴答……

雨下得越来越大了

雨水模糊了一切——不只是这个层级，还带着那记忆、你的肉体。

你什么也看不清了。

哗啦、哗啦，越来越大的雨声在你耳边躁动起来，你的大脑在这无休无止的雨声中思想变得模糊，雨水不断地敲打着你的身体，一颗颗雨珠洒落在地——他们并没有消失，他们画作碎片，映射在层级之中，你看见了所有碎片，那也是层级的一切，进入这里的每一位流浪者的过往与结局——死亡

雨将希望渐渐冲散

望着那些碎片，你深知自己也会像他们一样奔赴死亡的路程。但是，你仍然想要做些什么，你仍然想改变这结局。可——他们也同你一样，你也同他们一样，总是不服输，抱有这样的幻象，直到最后一刻、所有希望破灭后才醒悟。

希望已然消散

你再也无法忍受，你的理智已经无法控制自己，你不顾脑海中错乱交织的记忆，疯狂地在雨中狂奔着，嘶吼地发出求救声——但没有任何一个人能听到了。呼喊声夹杂着雨声，那些雨点仿佛在提醒你：你不可能逃离这里。但你仍然将那些若有若无的声音抛之脑后。

直到你不再抱着任何一丝希望

你的视线越来越模糊——直到你什么也看不见，直到你筋疲力尽的时候，你停止了奔跑，瘫倒在地上，直到希望消解之时，雨水已然溶解了一切。在临终的最后一刻，你终于看清了草原——那是被消解的、海市蜃楼般的希望的存在，也是他们最终的归宿，此时，你的灵魂也终于得到了解脱……




































但这里记得，曾有人来过，曾有人在这片天地中——前进过

生存难度：生存難度：

等级等級 死区-崩溃

• 天街漫步
• 小雨如酥
• 遥看往昔

---

天街小雨润如酥

作者：hongyeyouwww