离歌

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

“前厅是一个不可及之地，是一个幻象。繁华是幻象、文化是幻象，就连那里来的人都痴傻傻地追寻这个幻象。”一篇在无垠城市里后二代的作家留下的短篇小说里如是写着，读起来像是前厅的那些诗歌。

我总是幻想着在前厅生活。小时候读前厅，总是以为后室是暂时居住的地方，而前厅才是那所有人的归处。后来又听老师讲到前厅的各种文化与故事，着实有趣，也着实难懂。特别希望自己能回到前厅，看一看那无际的草原，或是那繁丽的城市。只可惜，随着年纪的增长，人是会逐渐低眉顺眼的。小时候回到前厅的梦想，等到高中毕业时已经在琢磨着到哪个宜居层级就业了。自此以后，我的生活中盘旋的也无非是眼前的柴米油盐与鸡毛蒜皮了。而所谓遥远的梦想生活也再无心提及了。

当时还年轻，一个人来到这个陌生的城市，还没有认识君成和曦。我有点忧郁，自怨自艾，我的游手好闲造成了我的颓废。不喜欢人声鼎沸的聚落，那里有太多吵闹。我起得很早，八点左右，独自一人在雪地里散步，这是当时我生活中最喜爱的事情了。

我几乎每天都来这里散散步，不知道在想些什么。看看枝头挂满的雪，沿着别人的足迹试图完全重合地行走，聆听着飞舞的雪散入天穹，享受着林间独特的静谧。除我以外，还有一个四十多岁的中年人同样徘徊，他的衣着有一种敬忌者的特殊意味，黑色的风衣，镶金但杖身朴素的手掌，以及锃亮的皮鞋。

他总是带着一种难以言喻的严肃，沉默，因此我着实有些不由自主地远离他，反倒是更加好奇起来了。我于是就躲在无数松针后注视着他，亦步亦趋。

直到一天下午，他漫步到了一处河边。河对岸是无边的白雪草原，远处星落着无数连绵不断的雪山，山坳里的草原被重重怀抱着，雪落千山，不见人踪。这里是M.E.G还没有开发的一处地界，着实不常有人来。他在周围缓缓踱着，似乎搜寻着什么意图过河，但最后也只能矗在河岸眺望远方。

我被他的气场吸引住了。一个中年男人，穿越茂密的树林，为了来到一个河边，然后久久停留。他大抵是以为周围已经没有人了，就开始做一些奇怪的事情。或是莫名地爽朗大笑，或是长吟几句我听不太懂的话。接着他疯狂地沿着河岸跑，衣袍飞扬而略显狼狈，雪地上点出他的足迹。

他疯了吧。

但他忽然又停下，用黑袍裹着手向太阳拱了拱手，坐在雪地里，默默唱起了一首歌。

歌词我没听个真切，意义也不懂，声音也沉闷。催眠似的，没有所谓的抑扬高下，使人如同置身于茫茫原野一般，前不见山，后不见人，只有过了一程又一程的新绿。

直到太阳落山，随即他又严肃地继续散步。

自此，我一直跟着他，无时不刻注意着，我很想和他搭上几句话。

他说他愿意和我一起散步，于是我们便从公园那本已经很荒芜的地方向更远处走去。穿过树林，穿过白雪，穿过太阳最后的余晖，知道光已经消失，只剩一轮半死不活的红日悬在苍穹尽头，隐在藏青之后。

“这些曲子是艺术，人类的艺术，是艺术中的王，你明白吗？”他自顾自地絮叨着，“自从进入了后室，歌曲也就绝迹了。”

他真诚地注视着我，可能是我的疑惑过于显眼，于是他让我看到了一场终身难忘的表演。

他先向我拱拱手，又扭捏地转向夕阳，同样弯腰。然后利索地挺直腰杆，放声开来。如同一个迟钝的人在迟钝地叙说着他迟钝的故事，歌声偶有转折，却转不出那昏红的落日。他的声音如同一个嘎吱嘎吱的老旧木偶，并非发音不准，而是那种腔调的悲哀。

“意义是很悲哀的，孤独者自我放逐在茫茫草原之上，不论人们如何呼喊，他依旧执着追寻着他自己也不知道应该如何达到的东西。或是理想，或是遗憾，或是一个不可忘却的人。你听到他在哭吗？朋友。”

我看着他，一种难以言喻的悲怆将我的心弄得乱糟糟，我看到一个可悲可笑的幻影，那是另一个时代人们留下的眼泪。这里，晚霞始终暗淡血红，天青青地如同要下雨，一个背影长存在草原上。

夕阳落山了，他也停住了，他转头看向我，眼里氤氲。随即又重新看向夕阳离开的方向……

之后，我再也没有见过他。

---

+ 作者信息

谁来陪Aprilguiltyincubus注视太阳落山？

---

本文附属于我的Level C-1515，主角是层级故事里中的小雅
我的作者页

---