平行 版式


评分: +84+x

parallel-theme-logo.svg
parallel-theme-logo-zh.svg

2.0.0

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

信息

平行是为 SCP-CN 维基制作的 CSS 主题,是玄武岩项目基础版式基岩的深度修改版本,便于 Dr HormressDr Hormress 二次开发使用,提供一个具有工作感的视觉外观和多个预制配色方案。平行的最初目的并不是直接被引入,不过的确任何用户可以这么做。

平行从基岩引用了大量代码,不过为确保稳定性,维护者现已取消此主题早期版本的“外部依附式”设计方案,转而将其与基岩相互嵌入以便独立开发。你可以在这里看到它在 Github 上的小小占位符——当然还有平行的 Github 仓库

版式插件

平行组件是专为改变平行版式的方方面面而制作的组件,一般情况下无法脱离平行使用。

经典版头

[[include :scp-wiki-cn:component:parallel-classic-header]]

版式预设

与玄武岩相类似,可在你的 [[include]] 语法中添加预设来小规模修改平行的配色方案。

这些配色预设主要用于二次设计时提供一个方便的风格化基板,也可用于单独引用。点击以下预设图标可以切换此页面的预览状态,并切换所展示的 [[include]] 语法示例。

[[include :scp-wiki-cn:parallel]]

基本元素示例

这是引用块


嵌套引用

basalt_scp_logo-for_lightmode.svg

插图方块。

可通过至少四个连字符“----1创建水平分割线。若它未被放在其他部件(诸如引用块)中,则会左右延伸贯穿页面。

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

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题
6 级标题

这是分页(Tab View)。

这是 表格
它的使用方法 一句话讲不完
而且单元格不能跨行,这很可恶

工具类

与 Tailwind CSS 的设计理念相类似,平行提供的基本排版元素包含一系列工具类;不过它们并不像 Tailwind CSS 那样基本完全独立,我们也没有一个脚本用于生成几乎可以代替任何内联样式的各种工具类。平行的大部分工具类针对 blockquote 类设计,需要提前引入,而主要排版元素都是 div.blockquote 元素的变体。平行 2.0 版本基本完全重新设计了这些类的使用,不过旧版类名仍然予以支持。以下只给出现版本的标准参考。

示例

你可以使用和 HTML 语法类似的 [[div class="类名"]] 语法来创建具有类的 div 元素,不要忘了用 [[/div]] 包裹住 div 的内容。

[[div class="blockquote 工具类1 工具类2"]]

[[div class="blockquote round-l bwidth-base bcolor-undertone shadow-thick"]]

[[div class="blockquote bg-pri b-l bwidth-base bcolor-overtone w-625"]]

通用

少部分处理块级样式和大部分仅处理文本样式的工具类是通用的。以下是一个列表。

文本对齐
用于调整元素内文本的对齐方式
t-left 文本左对齐
t-center 文本中间对齐
t-right 文本右对齐
t-justify 文本两端对齐
溢出处理
用于元素内存在溢出时进行处理
scroll-x 元素内超宽时添加滚动条

引用块

宽度控制
用于调整引用块的宽度,宽度使用公式 页面内容总宽度 * 相对系数 计算
w-125 相对系数 = 0.125
w-25 相对系数 = 0.25
w-375 相对系数 = 0.375
w-50 相对系数 = 0.50
w-625 相对系数 = 0.625
w-75 相对系数 = 0.75
w-875 相对系数 = 0.875
w-full 相对系数 = 1
边框
用于调整引用块的边框。引用块默认有与背景颜色相同的边框,工具类 b 仅供特殊情况使用
b-n 引用块不存在边框
b 引用块存在边框
b-l 左边框
b-r 右边框
b-lr 左右边框
b-t 上边框
b-b 下边框
b-tb 上下边框
边框宽度
用于调整引用块边框的宽度
bwidth-base 边框宽度为 --base-border-width
bwidth-thin 边框宽度为 --thin-border-width
边框颜色
用于调整引用块边框的颜色
bcolor-pri 边框颜色为 --basalt-primary-color
bcolor-sec 边框颜色为 --basalt-secondary-color
bcolor-ter 边框颜色为 --basalt-tertiary-color
bcolor-overtone 边框颜色为 --basalt-overtone
bcolor-undertone 边框颜色为 --basalt-undertone
bcolor-dark 边框颜色为 --basalt-dark-element-color
bcolor-darker 边框颜色为 --basalt-darker-element-color
圆角
用于调整引用块的边缘圆角,四角将同时变化,暂时无法分别应用到特定的角
round 圆角尺寸为 --base-border-radius
round-s 较小的圆角
round-m 中等的圆角
round-l 较大的圆角
阴影
用于调整引用块的阴影,若为暗色主题,阴影会变为发光
shadow 一般的阴影
shadow-thin 较轻的阴影
shadow-thick 较重的阴影
背景颜色
用于调整引用块的背景颜色
bg-pri 背景颜色为 --basalt-primary-color
bg-sec 背景颜色为 --basalt-secondary-color
bg-ter 背景颜色为 --basalt-tertiary-color
bg-overtone 背景颜色为 --basalt-overtone
bg-undertone 背景颜色为 --basalt-undertone
bg-dark 背景颜色为 --basalt-dark-element-color
bg-darker 背景颜色为 --basalt-darker-element-color
bg-alter 背景颜色为 --basalt-alternate-color,透明度 0.075
文本颜色
color-light 亮色文本

笔记块

div.wiki-note 元素与 note 元素并不包含任何特别的工具类。之所以在本节中特别提出,是因为 div.wiki-note 元素视觉上等价于一个经过样式化的 div.blockquote 元素,用户完全可以用样式化的 div.blockquote 元素取代 div.wiki-note 元素。

[[note]]

[[div class="wiki-note"]]

[[div class="blockquote w-50 b-n bg-alter t-justify"]]

维基内容表格

与先前的例子不同,一般情况下用于 div.table 的工具类并不作用在这个 div 元素上,而是影响其中放置的维基内容表格即 table.wiki-content-table 元素。特别地,用于改变宽度的工具类会作用在 div 元素上,并使其中的表格占满该 div 的宽度。

要使以下属性生效,请提前加入 table 类来声明这是用于处理表格的 div 元素。以下是可用于表格的工具类列表。

溢出处理
用于元素内存在溢出时进行处理
scroll-x 元素内超宽时添加滚动条
宽度控制
用于调整宽度,宽度使用公式 页面内容总宽度 * 相对系数 计算
w-125 相对系数 = 0.125
w-25 相对系数 = 0.25
w-375 相对系数 = 0.375
w-50 相对系数 = 0.50
w-625 相对系数 = 0.625
w-75 相对系数 = 0.75
w-875 相对系数 = 0.875
w-full 相对系数 = 1
特殊样式
用于为表格赋予特殊样式
b-d 使表格线与表头颜色一致强调
b-3 修改为三线表

杂项

平行过去曾加入的杂项修改和组件适配仍然有效,不过部分特性暂时没有继续开发和维护的计划,一些特性未来也可能发生变动。以下列出了这些修改和自定义元素。

目前暂时无法被工具类替代的自定义引用块

[[div class="blockquote title" data-title="示例标题"]]

部分代码移植自流明冲击

[[div class="blockquote title"]]

其实不写标题也可以用。

[[div class="blockquote warning-panel" data-title="通知标题" style="--warning-logo: url("背景图标链接");"]]

你可以替换代码里的链接和标题创建一个警告或通知。

替代标题格式支持(AIM 与 ACS)

将这两个组件的 [[include]] 语法分别放在 [[div class="Parallel-AIM"]][[div class="Parallel-ACS"]] 中,即可启用支持模式。分别提供了特色着色方案和视觉风格修改。

Earthworm 导航

Earthworm 导航在此版式下被修改为更简洁的样式。

致谢

此版式基本是 EstrellaYoshteEstrellaYoshteLirynLirynPlaceholder McDPlaceholder McD 所制作的 基岩版式的再创作。此版式的风格也受到 WoedenazWoedenaz黑色标记笔版式的相当影响,平行目前所使用的 SCP 标志也是基于其版式徽标。

中文分部的 hoah2333hoah2333 在最早期开发思路的起点新贵族提供了不少建设性意见。

以上这些人的贡献对于平行的开发直接影响相当大,当然还有更多为我汇报问题的使用者、各群聊中遇到的朋友。平行版式没有你们不可能走到今天!

project-parallel.svg
除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License