居中页眉 Sigma-9

注意


此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。

未经组件作者或工作人员允许，请勿修改此页的内容。

评分: +3+–x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.

Usage

On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

Personal styling themes (which are visual overhauls):

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }

作者：
Lt FlopsLt Flops

衍生自：
半影 版式 作者：EstrellaYoshteEstrellaYoshte

图像归属：
“logo.svg” 作者：WoedenazWoedenaz
采用 CC BY-SA 3.0 授权许可。

如何使用：
点击此处

这是什么？

这是一个给 Sigma-9 引入新的页眉设计的组件。其衍生自EstrellaYoshteEstrellaYoshte制作的半影版式。

我推荐你与切换侧边栏一同使用本组件。

本组件与黑色标记笔不兼容。可在此找到居中页眉黑标版。

如何使用

若需使用该组件，请将以下格式黏贴至你页面得到顶部。若你的页面使用了自定义 Sigma-9 版式，请将以下格式黏贴至自定义版式后方：

[[include :scp-wiki-cn:component:centered-header-sigma-9]]

你可以你更换你认为合适的 header-title（页眉标题）、header-subtitle（页眉副标题）、titleColor（页眉标题颜色）、subtitleColor（页眉副标题颜色）以及页眉标志。只需黏贴一下格式到 include 的后方，并更改相应的样式：

[[module CSS]]
:root{
--header-title: "标题";
--header-subtitle: "副标题";
--titleColor: 标题颜色;
--subtitleColor: 副标题颜色;
--lgurl: url(此处放链接);
}
[[/module]]

默认的 header-title 与 header-subtitle 字体为 Montserrat.

如果你希望保留你页面中的原始 header-title 字体，那么可以添加以下代码：

#header h1 a::before{
font-family: unset;
}

如果你希望保留你页面中的原始 header-subtitle 字体，那么可以添加以下代码：

#header h2::before{
font-family: unset;
}

默认的 titleColor 为
 hsl(0, 0%, 95%)。
默认的 subtitleColor 为
 hsl(60, 62%, 85%)。

如果你希望保留原始标题颜色，那么可以完全省略这两个字段。

你亦可以选择没有标志：

:root{
--lgurl: none;
}

因为该组件使用了不同的方式设计页眉，标志组件（比如 SCP 的骄傲 样版、骄傲标记笔以及 Calibri 的超酷变体 SCP 标志）无法如预期般在此处运作。如果你确实希望使用其中一个链接页面中的标志，请查看其“文件”部分，然后直接放上想要的标志图片链接。

[可选] 快速访问切换侧边栏：

[[include :scp-wiki:component:toggle-sidebar]]

源代码

▷ 显示代码 ◁
样版
页面版本: 1, 最后编辑于: 27 Nov 2021 09:18
编辑 评分 (+3) 标签 讨论 (1) 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License