clown

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

项目编号：SCP-CN-XXXX

项目等级：Keter

特殊收容措施：

自20██/12/██起，对SCP-CN-XXXX-1发起任何出于非收容目的的交互行为被严格禁止，违规者可立刻处决。，目前唯一允许的 收容目的的交互行为仅包括 SCP-CN-XXXX-2程序。

SCP-CN-XXXX-1目前覆盖范围已包含整个水明湖公园¹，水明湖公园目前已被以维护名义无限期对外封锁。若存在游客或其他无关人员闯入封锁区域且遭遇SCP-CN-XXXX-1的情况，需利用改造后的公园广播系统，引导其正确完成SCP-CN-XXXX-2程序。

若其拒绝完成SCP-CN-XXXX-2程序，或因其他不可抗力无法正常进行，则可调用距离该人员距离最近的战术无人机对其直接处决²值得注意的是，该政策同样适用于基金会人员。³

SITE-CN-Y的唯一核心目标已变更为保障SCP-CN-XXXX-2程序的顺利实施。

处于相对友善状态的SCP-CN-XXXX-1，二维码已编辑

描述：
SCP-CN-XXXX 是对于20██/11/██开始，出现在xx市，水明湖公园的异常人性个体及其异常性质的总称

SCP-CN-XXXX-1为一穿着小丑制服⁴人形个体，身高约210cm，具有严重不协调的四肢比例。⁵

其脖颈处悬挂一支付宝二维码，任何尝试移动该二维码的行为已被严格禁止。

SCP-CN-XXXX-1的异常性质为，其会以某个特定位置为中心，划定为其的活动区域⁶，在该区域中，其将以若干秒⁷为周期的间隔，在活动范围内以瞬间移动方式随机游走。

在其移动间隔期间，若SCP-CN-XXXX-1视线范围⁸内存在人类个体，其将会改变行为模式，主动移动至该人类面前，并礼貌请求人类与其进行合影。

面对SCP-CN-XXXX-1的合影请求，人员需做出的一系列流程被称作SCP-CN-XXXX-2程序。人员需要与SCP-CN-XXXX-1进行至少一张照片的合影。⁹，随后使用手机支付宝，扫描SCP-CN-XXXX-1携带的支付宝二维码，进行一笔数额不固定的¹⁰的转账，该数字由SCP-CN-XXXX-1自行拟定。¹¹

若无差错完成SCP-CN-XXXX-2程序，SCP-CN-XXXX-1将离开。

任何拒绝完成SCP-CN-XXXX-2程序，或因客观条件无法进行的情况，包括但不限于直接拒绝SCP-CN-XXXX-2，摄像设备无法正常使用，或因诸多原因（网络，银行卡状态）导致的转账失败，¹²则SCP-CN-XXXX-1将开启为期15s的等待，随后杀死该人员。

未完成SCP-CN-XXXX-2程序将导致SCP-CN-XXXX-1行为模式的显著改变。其活动区域范围，活动频率与转账金额增大。该增长幅度为指数增长，意味着若不加控制，SCP-CN-XXXX-1存在扩散全球甚至发展为K级情景的隐患。

值得注意的是SCP-CN-XXXX-1行为存在一定程度的以24小时为周期的额度，意味着若顺利进行足够次数的SCP-CN-XXXX-2程序，SCP-CN-XXXX-1将会在该周期内处于静默状态，不会继续移动或者尝试与人类交互，该机制目前是对SCP-CN-XXXX收容的唯一已知有效手段。

考虑到SCP-CN-XXXX的潜在巨大危险性，目前，全体SITE-CN-Y人员的第一工作任务即为尽一切可能进行SCP-CN-XXXX-2程序，以保证在最短时间内消耗SCP-CN-XXXX-1于当前周期的额度。

SCP-CN-XXXX是我职业生涯中遭遇的最为棘手的异常。
之前的异常相比都是小打小闹，和这个可能毁灭世界的存在相比。

但我坚信，无论是过去还是将来，基金会不会被异常打倒。

整个SITE-CN-Y将会在此团结一心，暂时搁置其他异常其他工作，全身心处理SCP-CN-XXXX。

我知道，这个异常很危险。
但我相信，选择加入基金会的诸位，绝不是什么贪生怕死之人。
控制，收容，保护。

SITE-CN-Y 站点主管 朱██

¹³

> 朱主管领导有方啊，能发动这么多员工舍生忘死的前去收容这么危险的异常！
> 您过誉了，是他们自己踊跃参与。
> 啊？你是怎么做到的？可以分享一下经验吗。
> 是他们自己有干劲啦。如果硬要说我有什么作用的话，可能是我激情澎湃的动员鼓舞了他们吧！
> 给我说实话。
> ……
> 那小丑脖子上挂的不是收款码。
> ……?
> 是付款码。
> 一个一直有效的付款码。
> 我告诉他们，扫出来的钱都算绩效。
> …………
> 6

^141516
17

脚注

1. 约110公顷

2. 无需获得额外许可，无人机权限向全部人员开放。

3. 若该人员为D级人员，其负责人会被进行追责。情节严重者可处决

4. 同款小丑服饰的生产厂商已被证实与该异常无关联

5. 景区里好多这种小丑，我前几年去的时候总是追着我拍照要钱，烦死了。

6. 当前该区域与水明湖公园几乎重叠

7. 目前为30s

8. 约20m

9. 手机或其他摄影设备均可

10. 当前范围在0.05-10000.00人民币

11. 这家伙搞得财务部最近压力很大

12. 有几个家伙因为银行卡异常导致玩脱了，太冤了

13. 妙笔生花，妙笔生花！保存下草稿，准备上传了！

14. 操我怎么把这一段加上去的？

15. MD好像删不掉了

16. 烷基八氮了，这下整个基金会都会看到了。

17. 什么叫O5 uv了我的文档？