SCP科技 主题版式

评分模块：

著作信息：

著作信息

---

此版式由Dr Hormress创作。

鸣谢：Etinjat，他的“破碎的世界”版式给了我启发；Jochoi和hoah2333，为版式提供了有用的评价；Woedenaz，创作了黑色标记笔版式；以及Dr Hormress，他花费许多时间创作了“SCP科技”Logo与“SCP科技”主题版式。

由于wikidot的代码块@import越来越不稳定，此版式的所有代码均存放在Dr Hormress的沙盒页。

---

---

使用方法

注意：这是一个基于黑色标记笔的主题版式。若你想使用此版式，你还需要导入黑色标记笔版式。点击这里了解更多。

这是一个由Dr Hormress设计的美学版式，意图构造一个科技公司/赛博朋克霓虹灯的阅读感受。甚至解决了黑标侧栏长链接溢出问题！

在你的作品开头添加如下语法以应用此版式：（你不需要再次引用黑色标记笔版式，因为它已经被包含在模块中。）

[[include :scp-wiki-cn:theme:scp-technic]]

主题颜色

Lightblue--bright-accent(173, 216, 230)

Midnightblue--dark-accent(25, 25, 112)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

(Unnamed grey)--pale-accent(212, 212, 212)

(Unnamed blue)--sidebar-links-text(155, 192, 200)

Darkblue--link-color(150,150,150)

{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}

{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

示例

SCP科技 标志。

可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。

---

标题可通过在一行字起始处输入1至6个加号“+”来创建

+ 标题

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

分页

此为分页（tab view）。

分页背后的代码已经过调整，故可以显示过渡。点击另一个tab来观看华丽顺畅的效果。

分页

看，这有更多文字。

多么精巧绝伦。

长Tab

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

空tab

空tab

空tab

空tab

空tab

空tab

这是一个引用块，在一行字的起始处加上“> ”来创建。

更多文字

---

一条分割线

嵌套引用块

这是	表格
你应该老早	就知道怎么
做这个了吧

---

+ CODES

@import url("https://fonts.font.im/css?family=Faster+One");
 
/* 
====目录====
基本变量 - Variables
顶栏菜单 - Top Bar
侧栏菜单 - Side Bar
正文部分 - Main Content
杂项 - Others
*/
 
/* --VARIABLES-- */
 
:root {
 
    /* Fonts (Original) */
 
    --body-font: proxima-nova, "Freight Sans", "Noto Sans SC", sans-serif;
    --header-font: "Poppins", "Noto Sans SC", sans-serif;
    --title-font: "Poppins", "Noto Sans SC", sans-serif;
    --mono-font: "Space Mono", "Andale Mono", "Courier New", Courier, "Noto Sans SC", monospace;
 
    /* Fonts (Technic) */
 
    --header-font: "Faster One", sans-serif;
 
    /* Standard Colors */
 
    /* --white-monochrome: 173, 216, 230; */
    --pale-accent: 212, 212, 212;
    /* --bright-accent: 192, 192, 192;
    --medium-accent: 119, 119, 119; */
    --medium-accent: var(--bright-accent);
    --bright-accent: 173, 216, 230;
    --dark-accent: 25, 25, 112;
    --swatch-topmenu-border-color: 173, 216, 230;
    --swatch-topmenu-bg-color: 25, 25, 112;
    --sidebar-links-text: 155, 192, 200;
    --link-color: 0, 0, 139;
 
    /* Gradients */
 
    --gradient-header: linear-gradient(to top, black, darkblue);
    --gradient-sidemenu-header: linear-gradient(to bottom, transparent, transparent);
}
 
/* --TOP BAR-- */
 
/* Logo */
 
#header {
    background-image: url("http://ah-sandbox.wikidot.com/local--files/theme:scp-technic/techlogo.svg");
    background-position: left .75rem top 1.1875rem;
    background-size: 5.375rem;
    opacity: 1;
}
 
/* Header */
 
#header h1 a::before {
    content: "SCP TECHNIC";
    font-weight: 400;
    color: lightblue;
}
 
#header h2 span::before {
    content: "reSearch, Create, Promote";
    font-style: italic;
    font-weight: 700;
    color: lightblue;
}
 
#search-top-box {
    display: none !important;
}
 
/* SVG Background */
 
div#container-wrap {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='40' viewBox='0 0 50 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%230f0505' fill-opacity='0.1'%3E%3Cpath d='M40 10L36.67 0h-2.11l3.33 10H20l-2.28 6.84L12.11 0H10l6.67 20H10l-2.28 6.84L2.11 10 5.44 0h-2.1L0 10l6.67 20-3.34 10h2.11l2.28-6.84L10 40h20l2.28-6.84L34.56 40h2.1l-3.33-10H40l2.28-6.84L47.89 40H50l-6.67-20L50 0h-2.1l-5.62 16.84L40 10zm1.23 10l-2.28-6.84L34 28h4.56l2.67-8zm-10.67 8l-2-6h-9.12l2 6h9.12zm-12.84-4.84L12.77 38h15.79l2.67-8H20l-2.28-6.84zM18.77 20H30l2.28 6.84L37.23 12H21.44l-2.67 8zm-7.33 2H16l-4.95 14.84L8.77 30l2.67-8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: var(--final-header-height-on-desktop);
    background-repeat: repeat-x;
}
 
/* Topbar Menu */
 
#top-bar ul li a {
    background-color: var(--dark-accent);
}
 
/* --SIDE BAR-- */
 
#side-bar {
    background-color: midnightblue !important;
    background-image: none !important;
    overflow-x: hidden;
}
 
#side-bar * {
    max-width: 100% !important;
}
 
#side-bar .heading {
    background-color: midnightblue !important;
    border: inset 2px lightblue !important;
}
 
#side-bar .side-block {
    background-color: midnightblue !important;
    border: outset 2px midnightblue !important;
}
 
#side-bar .menu-item a {
    border: solid 2px transparent;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    max-width: 100% !important;
}
 
#side-bar .menu-item a:hover {
    border: solid 2px rgb(var(--sidebar-links-text)) !important;
    color: lightblue !important;
}
 
#side-bar div.menu-item > a:first-of-type:last-of-type {
    /* box-sizing: border-box !important;
    line-height: 140% !important; */
    width: calc(100% - 1em - 4px);
}