版式 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/n2QIoY5r1F.svg);
    --extra-bg-2: url(https://imagebed.pro/images/Liurd/n2QIoY5r1F.svg);
    --extra-bg-3: url(https://imagebed.pro/images/Liurd/n2QIoY5r1F.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%;
    }
}

一些人 中心页

---

话说，在广阔无垠、神秘莫测、无奇不有……的后室中，有这样一些人。

他们只是一些普通的人而已，按自己的习惯与性格，日复一日地生活着。

但他们又不普通，或许是机缘巧合，又或许是命中注定，总之，他们在这广阔的后室里相遇了。



而有一样东西，它被这些人所热爱着，也将这些人联系着，这些人们用它记录下自己生活的点滴，抒发自己心中的情感，或悲或喜，或孤单或喧闹，这样东西始终陪伴着他们，走过日出日落，四季更替。



猜到了吗？这样东西便是：文学。

那么，欢迎来到：一些人。

一些人的故事

---

江南好
“江南好，江南好。我该如何不忆江南？”

---

灯光、雪，以及烟火气
“涮羊肉就得蘸麻酱。”

更多故事正在被书写……

一些人的相貌

---

齐向坚_{by 19road songlin}
年少时便从前厅的家乡切入了后室。 二十岁出头时在后室有了一份稳定的工作，在工作中与徐臻父亲成为好友。后面又与与沈一岚结识。前厅生活时一些不好的经历给他留下了心理问题，后室的环境又将其不断放大。他始终尝试克服却终究不成，最终选择自我了结。

沈一岚_{by 19road songlin}
生在前厅，却因种种原因对前厅的生活感到厌烦。二十四岁从前厅切入后室，机缘巧合下遇见了齐向坚，有诸多相似之处的二人成为好友。热衷于文学与美术创作。

徐臻_{by 19road songlin}
后室原住民。八岁时父母葬身火灾，他被托付给齐向坚与沈一岚。一个活泼且幽默的男孩，总能给身边人带来温暖。
　　
陆秋云_{by 19road songlin}
后室原住民。幼年时不知为何被家庭遗弃。幸运地遇到沈一岚，成为第二个被她和齐向坚收养的孩子。与徐臻几乎如同亲姐弟。性格略显古怪。

更多相貌亟待被发掘……

一些人的疑问

---

这是什么？

一些人设定，其创作重点在于后室中普通人的生活。我们寻找那些在平常生活中不平常的片段，然后，我们将它们串连起来，以此表达我们想表达的情感。

在该设定中进行创作时，我该选择什么样的内容？

想象自己是后室中的一个普通人，想象自己会遇到什么新奇的事情，会引发你什么样的感想，然后写下来，仅此而已。

在该设定中进行创作时，我该选择什么样的形式？

目前而言，我们最建议的形式是采用散文的文体，以第一人称视角去创作。这样最利于抒发情感。当然，记叙类文体和第三人称视角也是被允许的。只要能写得好，来者不拒！但无论如何，一些人系列只允许故事类型的作品，请注意这一点（其实艺作也是可以的）。

这个设定有专属版式吗？

很遗憾目前没有。我们建议使用创伤版式。当然如果你能找到其他更合适的版式也可以用！

一些人与工作如此，以及后室民风考有何区别？

首先，只有一些人是设定，工作如此和后室民风考都是文章系列。
从写作重点来说，一些人重点在于生活，工作如此重点在于工作，后室民风考重点在于民俗。
从文体来说，一些人以散文为主，工作如此以记叙文为主，后室民风考以说明文为主。
从表达方式来说，一些人重在抒情，工作如此重在记叙，后室民风考重在说明。

一些人设定可以和其他设定兼容吗？

很遗憾，目前一些人设定几乎无法和任何设定兼容。但我们很乐意看到有人能突破这一界限。

某位作者在其文章里塑造了一个特别好的角色，请问我可以在我的文章里写到这个角色吗？

当然可以！但在此之前，请确保你对这个角色的人设足够了解。倘若你实在拿不准，那就去问问创作出这个角色的作者吧！

一些人的源头

---

发起者
19road songlin

中心页代发者
Dawn Future

参与者
19road songlin