狐步舞 版式 
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
        pointer-events: auto;
}
 
@media not all and (max-width: 767px) {
 
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }
 
    #top-bar .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
 
        scrollbar-width: thin;
    }
 
    #side-bar:target {
        left: 0;
    }
    #side-bar:focus-within:not(:target) {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 19.75em;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }
    #side-bar:not(:target) .close-menu { display: none; }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @supports (-moz-appearance:none) {
    #top-bar .open-menu a {
        pointer-events: none;
    }
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
    }
 
    /* This pseudo-element is meant to overlay the regular sidebar button
    so the fixed positioning (top, left, right and/or bottom) has to match */
 
    #side-bar .close-menu::before {
        content: "";
        position: fixed;
        z-index: 5;
        display: block;
 
        top: 0.5em;
        left: 0.5em;
 
        border: 0.2em solid transparent;
        width: 30px;
        height: 30px;
        font-size: 30px;
        line-height: 0.9em;
 
        pointer-events: all;
        cursor: pointer;
    }
    #side-bar:focus-within {
        left: 0;
    }
    #side-bar:focus-within .close-menu::before {
        pointer-events: none;
    }
    }
}
fxtrt.png

狐步舞

Liryn

我 作者页 / 推特

项目 告诫 / 元基金会 / 玄武岩

为即将到来
而做好准备


为未来而生的版式

fxtrt-canada.svgontologonew2.pngBig87.pngfxtrt-vanguard_logo.webpSite-184.svgfxtrt-hybrasil_lightmode.pngfxtrt-nightfall_lightmode.png

在任意 Sigma-9 页面中：

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

这是什么？

狐步舞是一个美学 Sigma-9 版式，设计以模仿玄武岩即将到来的大型更新的外观与感觉——将现代的平面设计与 Sigma-9 出现前那古怪的早期网页舒适性相混合。

此版式可以被看作是给想在半路就尝鲜玄武岩新外观的人准备的过渡版式。

狐步舞基于大量的前置版式开发，最明显的有空白风格以及半影。本版式配备有亮色与暗色模式的支持；可以无缝切换到另一篇文章。

1 变体

1.1 值守 43

[[include :scp-wiki-cn:theme:foxtrot canada=a]]


canada_light.png
canada_dark.png

1.2 S&C 塑料

[[include :scp-wiki-cn:theme:foxtrot slothspit=a]]


slothspit_light.png
slothspit_dark.png

1.3 120 站档案馆

[[include :scp-wiki-cn:theme:foxtrot poland=a]]


poland_light.png
poland_dark.png

1.4 先锋

[[include :scp-wiki-cn:theme:foxtrot vanguard=a]]


vanguard_light.png
vanguard_dark.png

+ 展开附加变体

1.12 暗色模式

若需应用暗色模式，仅需添加 dark=a 修改器。多个修改器以 | 分割，如下所示：

[[include :scp-wiki-cn:theme:foxtrot dark=a|threshold=a]]

2 自定义

2.1 变量

以下为用于控制此版式各方面的 CSS 变量。

+ 基础
+ 颜色
+ 字体

3 元素

3.1 Div

由此版式包含或修改的 div 块。

[[div class="blockquote"]]

[[div class="modal"]]

[[div class="jotting"]]

[[div class="paper"]]

[[div class="notation"]]

3.2 着色

许多元素都可以通过将其包裹在一个类为 tableX 的 div 内而着色。

table1 对应着绿色，
table2 对应着蓝色，
table3 对应着黄色，
table4 对应着橙色
table5 对应着红色
而 table6 对应着紫色。

这一系统设计以与异常分类系统中的颜色组相关联；每一种颜色都表示不同的安保许可等级。

普通表格
这里是文本
这里是文本
这里是文本
带有 table2 类的表格
这里是文本
这里是文本
这里是文本
带有 table5 类的表格
这里是文本
这里是文本
这里是文本

普通引用块

带有 table1 类的引用块

带有 table3 类的引用块

3.3 附加

一点额外提示。

  • 折叠在此版式中被大量修改，可以通过被包裹在类为 default-col 的 div 内将其还原至其原来的外观。
+ 展开
+ 展开

  • 几乎所有元素都可以通过被包裹在类为 round 的 div 内从而变成圆角。

原引用块

圆角引用块

  • 应用 hidetitle=a 设置可以移除页面标题。
  • 应用 wide=a 设置可以扩展页面的宽度——不过这可能会损坏现有的侧边框（sidebox，本版式内置支持此扩展）。

+ 展开源代码

版式
页面版本: 13, 最后编辑于: 24 Feb 2023 11:58
编辑 评分 (+12) 标签 讨论 (2) 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License