此影之源

版式 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: "SCP 基金会";
 
    --banner-title: "FOUNDATION";
    --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.8em, calc(0.4rem + 0.8vw), 1em);
    --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: 32em;
    max-width: max-content;
    min-width: auto;
    flex-direction: row;
    flex-wrap: wrap;
}
 
#top-bar > div > ul > li > ul > li {
    width: 50%;
    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%;
    }
}

时间的印记真的不可磨灭吗？

呵，你见过时间的印记吗？

没有，它总是捉摸不透啊！

可我见过，所有人都见过！


后世的每一个错误，前朝都犯过……可时间留下了印记，他们却不记住啊！

---

余幼时，尝见祖父于中宵独坐，目注庭中老槐，不言不动。
烛火将熄未熄，其影投于粉壁，竟有二，一为常人状，另一则佝偻蜷缩，似负无形重物。
问之，不言。
翌晨，祖父殁。
此事余藏心底数载，未敢告人。非惧人疑，实惧己亦见之。
然今岁秋深，月晦之夜，余独坐书斋校勘旧籍，忽觉壁间灯火微颤。
抬眼时，见己影犹在，而其后复有一影，其纤细如童，却佝偻如翁，缓缓自余足下攀援而上。
余惊起，灯遂灭。
黑暗中，有声，不似人，亦不似兽，倒似一扇尘封之门自内推开的叹息。

---

后检祖父遗箧，得旧册一帙，题曰《影录》。纸已脆如蝶翅，触之即碎。

其文曰：

“吾族自洪武间负此影。一甲子，影生二。此非鬼，非妖，乃历世所积之事，前人欲改而未改之过，欲止而未止之恶。彼等无口无形，不能言，不能执。然彼等能附于人之影中，日日观人之旧错，至死不渝。”

读至此，脊背生寒。
复翻一页，字迹潦草，似仓促所书：

“吾尝以为，记史可警后人。然史册愈厚，覆辙愈繁。今乃悟：人非不知前车之鉴，乃自以为与前人不同。此念一起，鉴即碎矣。”

是夜，无心就寝。燃烛七支，环坐于中，以观诸影。
初观无异状。子时，东壁烛焰忽青，余影自地而起，如渍水自纸面渗出，渐次凝成人形。
余始见其面目。

那是一张极模糊的脸，好似千万人之面叠加而成。然而我认得它，上下五千年中的每一个人都认得它，它是史书中重蹈前朝之错时，此世黎民百姓受天地之苦的面容，是那被时间遗忘的人们留下的最后一瞥。
它向我走来，步履蹒跚，就像背负着看不见的城垣。
不觉间，喉咙已哽咽住……

*

*

*

*

*

*

它走到我面前，以它那无形的指尖轻轻触碰我的额头，刹那间，万景涌入脑海……

是它所蕴藏着的，是它身躯中微不足道但足以象征所有的……

在脑中那片无尽的海洋里……

我见到咸阳城中，项羽焚秦宫，而儒生拱手曰：“暴秦当灭，吾辈何过？”

见到党锢之祸，宦官当权，清流皆赴死，可士人叹曰：“吾辈守正，何惧阉竖。”

见到永嘉之祸，百官被屠，衣冠南渡，而门阀宴饮，笑曰：“胡马未至此地。”

见到安史之乱，潼关失守，朝廷百官争曰：“皆杨妃之罪也。”

见到靖康之耻，帝后以下皆被执，宗室贵戚三千余人押解北上，而朝臣书曰：“主昏臣奸，非我之咎。”

见到扬州十日，嘉定三屠，积尸如山，流水为之赤，士绅记曰：“天数如此，无可奈何。”

那么多悲催的史事啊！是多少英魂所葬身之处呐！这些……皆是历史的遗憾。


每一个画面结束，总有声音道：“吾已知之，必谨记前朝之过错，绝不重蹈！”
然每一幕之后，必有下一幕……

余欲哭，而目中无泪。盖泪已为此千百年来万千死者流尽矣……

---

次日晨，妻谓余曰：“汝近日神色恍惚，夜半常自语。”
余问：“吾说何言？”
妻迟疑片刻，答曰：“汝反复说‘这一次必然不同……’”
余默然，盖余已悟些许：所谓教训，从未被真正习得。人所能做的，不过是于重复之间，换一句自欺之辞而已。

窗外，余影之中，那佝偻之物似又长大了一分。今夜，不知它会否开口，若开口，余知其将说何语……

它说：“你与从前那些人，并无不同。”
余不能辩，盖因其言为史，而史者，从未改也。

·

·

·

·

·

他们记得……又好似不记得……真是悲催的世界啊……

-

-

世人皆知错误之处不可取，可重蹈之错又是为何呢？

·

·

·

·

·

“我们从历史中得到的唯一的教训就是我们从没有从历史中得到过教训。”

——黑格尔