强制恢复SCP s9版头 组件
这是什么
我Croquembouche用在一大堆页面上的一大堆各种各样的CSS“改进”，因为我觉得这样就能使其更容易处理。
该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点（也就是我经常干的事）。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。
我不期望用了这个组件的文章的翻译版也会用到这个组件，除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。
这个组件可能不会与其它组件或版式冲突，且即使会冲突，也可能不会有什么影响。
用法
在任意维基上：
[[include :scp-wiki:component:croqstyle]]
该组件被设计于与其它组件一同使用，所以-=-是用来隐藏该文档的。在另一个组件内使用时，请确保将该组件放在[[iftags]]块内，这样你的组件的用户就不会强制同样使用 Croq 风格。
相关组件
其它个人自定义组件（只会改变一点点东西）：
个人自定义版式（在视觉上有大的变化）：
CSS修改
大小合理的脚注
不让脚注达到一百万里那么宽，让你能确实地阅读脚注。
.hovertip { max-width: 400px; }
等宽字体编辑/代码
使编辑文本框内字体等宽，且将所有等宽字文本改为Fira Code，也是个明显很优秀的等宽字字体。
@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; }
电传打字机背景
给<tt>元素加上亮灰色的背景（{{文本}}），使得代码片段更为突出。
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; }
不要大脸
禁用悬停于某人的头像的时候出现的大图片，因为这图片又蠢又真的很烦人，想看大头像版本的话直接点击一下就行了。
.avatar-hover { display: none !important; }
碎裂碎裂
任何在带有nobreak类的div中的文本可以在字母间自动换行。
.nobreak { word-break: break-all; }
代码颜色
将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题，但是现在暂时这还是我的个人主题，是从Tomorrow Night Eighties中衍生而来的。
还有，将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中，因为Wikidot嵌入了一大堆语法来使其高亮，不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。
: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中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour。
你还可以将div.debug-info.over与div.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间，让注释不会与其上方或下方的东西重叠。
……就像这样！
.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; }
这是什么？
这是eastleavecn为他的私站制作的一个强制恢复 scp基金会 sigma-9 版头（包含logo，主标题，副标题）的组件。
此组件完全以面向此网站服务为目的制作，在其他网站很难发挥作用，若您执意要用于其他网站，请自行承担可能的失败结果。
在此网站中，利用 _template 页面的功能，实现了在特定标签下会自动启用此组件的不同功能的效果：
你可以给你的页面添加 scp 标签让此组件的默认部分和LOGO恢复部分同时自动启用。
你可以给你的页面同时添加 scp 与 nost 标签来让此组件不会自动启用。
你可以给你的页面同时添加 scp 与 nlrst 标签让此组件的默认部分自动启用，将不会强制恢复LOGO。
此组件并非使用 !important 强制规定优先级，所以在大多数情况下不会影响你的进一步规定，如果你的文章有标题和logo替换，且是自定义sigma-9版式，建议先只使用 scp 标签以确定是否出现问题，若出现问题，再查看并使用上述标签。
使用 scp 作为标记标签仅是因为其为scp项目必须的标签，若您写作的内容并非scp项目，建议不要通过标签的方式来启用此组件而使用 include 的方式，详情如下。
如果页面不会自动启用此组件，例如当页面没有使用 scp 标签的时候，你可以手动启用此组件，来达到强制恢复 scp基金会 sigma-9 版头 的效果，LOGO强制恢复为可选项。
默认状态下，此组件仅会强制恢复主标题和副标题，使用可选项后可实现LOGO的强制恢复。
这个组件只推荐在 Sigma-9 版式下使用，按理来说不支持黑标和玄武岩以及更多大规模版式。如果你在使用此网站作为沙盒并使用此组件时遇到问题，请联系eastleavecn。
如何使用
若需使用该组件，请将以下格式黏贴至你页面得到顶部。若你的页面使用了自定义 Sigma-9 版式，请将以下格式黏贴至自定义版式后方：
[[include :itzadieux:component:s9-header]]
若需使用该组件，同时启用LOGO强制恢复功能，请将以下格式黏贴至你页面得到顶部。若你的页面使用了自定义 Sigma-9 版式，请将以下格式黏贴至自定义版式后方：
[[include :itzadieux:component:s9-header logorst=—]]]
此组件暂不支持标题自定义功能，后续有极小概率制作，主要取决于eastleavecn在使用私站时是否需要这个功能。
如果后续制作这个功能，大概率会单独做一个组件在这个网站发布。
源代码
/* S9 Header
* [2026 Wikidot Component]
* By eastleavecn (CC BY-SA 3.0)
**/
#header {
height: 140px;
position: relative;
z-index: 10;
padding-bottom: 22px; /* FOR MENU */
background: url('https://cdn.scpwiki.com/theme/en/sigma/images/header-logo.svg') 10px 40px no-repeat;
background-size: 100px;
}
#header h1 a {
content: "SCP基金会";
}
#header h1 a::before {
content: "SCP基金会";
}
#header h1 a span{
display: block;
content: "";
visibility: hidden;
}
div#header h2 span {
font-size:0px;
padding: 4px;
}
div#header h2:after {
content: "控制，收容，保护";
}
/*
2011-11-13 Minobe Hiroyuki @ Marguerite Site
www.marguerite.jp/Nihongo/WWW/CSSTips/EmphasizeDots-CSS3.html
Edited for the SCP Foundation by Nanimono_Demonai
*/
.emph {
text-emphasis-style: dot;
-webkit-text-emphasis-style: dot;
}
/* For FireFox */
@-moz-document url-prefix() {
.emph {
/* For the environments which comply with CSS3. */
font-family: monospace;
font-style: normal;
font-weight: normal;
background-repeat: repeat-x;
padding: 0.5em 0 0;
background-color: transparent;
background-clip: padding-box, content-box;
background-size: 1em 1.3em, auto;
}
}
/* For IE10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.emph {
/* For the environments which comply with CSS3. */
font-family: monospace;
font-style: normal;
font-weight: normal;
background-repeat: repeat-x;
padding: 0.5em 0 0;
background-color: transparent;
background-clip: padding-box, content-box;
background-size: 1em 1.3em, auto;
}
}
/* viewport */
@viewport {
width: device-width;
zoom: 1.0;
}
/* IE viewport */
@-ms-viewport {
width: device-width;
zoom: 1.0;
}
/* opera viewport */
@-o-viewport {
width: device-width;
zoom: 1.0;
}
/* chrome viewport - maybe it isn't work... */
@-webkit-viewport {
width: device-width;
zoom: 1.0;
}
/* firefox viewport - maybe it isn't work too... */
@-moz-viewport {
width: device-width;
zoom: 1.0;
}
/* webkit scrollbar */
::-webkit-scrollbar {
width: 9px; /* for vertical scrollbars */
height: 9px; /* for horizontal scrollbars */
border: solid 1px rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
background: rgba(50, 50, 50, 0.3);
}
.page-source {
word-break: break-all;
}
/* Responsive Web Design */
img, embed, video, object, iframe, table {
max-width: 100%;
}
:where(#page-content) div {
max-width: 100%;
}
#edit-page-comments {
width: 100%;
}
/* basic Query for mobile devices */
@media (max-width: 767px) {
.owindow {
min-width: 80%;
max-width: 99%;
}
.modal-body .table, .modal-body .table ~ div {
float: left;
}
.owindow .button-bar {
float: right;
}
.owindow div a.btn-primary {
width: 100%;
float: left;
}
.mobile-top-bar ul li:last-of-type ul {
right: 0;
}
span, a, #action-area td {
word-break: break-all;
}
}
/* Mobile Media Query */
@media (max-width: 479px) {
#search-top-box-input {
width: 5em;
}
#page-content {
font-size: 0.9em;
}
#main-content {
margin: 0;
}
#recent-posts-category {
width: 100%;
}
#header {
max-width: 90%;
}
#side-bar {
width: 80%;
position: relative;
}
.top-bar {
display: none;
}
.mobile-top-bar {
display: block;
padding: 0;
}
.page-options-bottom a {
padding: 0 4px;
}
#header h1 a {
font-size: 100%;
}
blockquote, div.blockquote, div.curved {
margin: 1em 0;
}
.license-area {
font-size: 0.8em;
}
#header {
background-position: 0 5.5em;
background-size: 55px 55px;
}
#header h1, #header h2 {
margin-left: 66px;
}
table.form td, table.form th {
float: left;
}
td.name {
width: 15em;
}
table.form td, table.form th {
padding: 0;
}
#edit-page-title {
max-width: 90%;
}
.content-panel.left-column, .content-panel.right-column {
width: 99%;
float: left;
}
#page-content div, #page-content div table {
clear: both;
}
#page-content div.title {
word-break: keep-all;
}
}
/* Note Media Query */
@media (min-width: 480px) and (max-width: 580px) {
#search-top-box-input {
width: 7em;
}
#main-content {
margin: 0 2em 0 2em;
}
#header {
max-width: 90%;
}
#side-bar {
width: 80%;
position: relative;
}
.top-bar {
display: none;
}
.mobile-top-bar {
display: block;
}
.page-options-bottom a {
padding: 0 5px;
}
#header h1 a {
font-size: 120%;
}
blockquote, div.blockquote, div.curved {
margin: 0.5em;
}
.license-area {
font-size: 0.85em;
}
#header {
background-position: 0.5em 4.5em;
background-size: 66px 66px;
}
#header h1, #header h2 {
margin-left: 80px;
}
#page-content div.title {
word-break: keep-all;
}
td.name {
width: 15em;
}
.content-panel.left-column, .content-panel.right-column {
width: 99%;
float: left;
}
#page-content div, #page-content div table {
clear: both;
}
}
/* Mini Tablet Media Query */
@media (min-width: 581px) and (max-width: 767px) {
#search-top-box-input {
width: 8em;
}
#side-bar {
width: 80%;
position: relative;
}
#main-content {
margin: 0 3em 0 2em;
}
#header {
max-width: 90%;
}
.top-bar {
display: none;
}
.mobile-top-bar {
display: block;
}
.page-options-bottom a {
padding: 0 6px;
}
#header h1 a {
font-size: 140%;
}
.license-area {
font-size: 0.9em;
}
#header {
background-position: 1em 4em;
background-size: 77px 77px;
}
#header h1, #header h2 {
margin-left: 93px;
}
}
/* Tablet Media Query */
@media (min-width: 768px) and (max-width: 979px) {
#main-content {
margin: 0 4em 0 20em;
}
#header, #top-bar, #side-bar {
max-width: 100%;
}
.top-bar li {
margin: 0;
}
#top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a {
width: 110px;
}
.page-options-bottom a {
padding: 0 7px;
}
#header h1 a {
font-size: 160%;
}
.license-area {
font-size: 0.95em;
}
#header {
background-position: 1em 4em;
background-size: 88px 88px;
}
#header h1, #header h2 {
margin-left: 106px;
}
.content-panel.left-column, .content-panel.right-column {
width: 99%;
float: left;
}
#page-content div, #page-content div table {
clear: both;
}
}
/* off-canvas */
.close-menu {
display: none;
}
@media (max-width: 767px) {
.page-history tbody tr td:last-child {
width: 35%;
}
.owindow {
min-width: 80%;
max-width: 99%;
}
.modal-body .table, .modal-body .table ~ div {
float: left;
}
.owindow .button-bar {
float: right;
}
.owindow div .btn-primary {
width: 100%;
float: left;
}
.owindow div .btn-primary ~ div {
width: 100%;
}
.yui-navset {
z-index: 1;
}
#navi-bar, #navi-bar-shadow {
display: none;
}
#top-bar .open-menu a {
position: fixed;
top: 0.5em;
left: 0.5em;
z-index: 15;
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;
}
#top-bar .open-menu a:hover {
text-decoration: none;
-webkit-box-shadow: 0 0 20px 3px rgba(153,153,153,1);
-moz-box-shadow: 0 0 20px 3px rgba(153,153,153,1);
-ms-box-shadow: 0 0 20px 3px rgba(153,153,153,1);
-o-box-shadow: 0 0 20px 3px rgba(153,153,153,1);
box-shadow: 0 0 20px 3px rgba(153,153,153,1);
}
#main-content {
max-width: 90%;
margin: 0 5%;
padding: 0;
-webkit-transition: 0.5s ease-in-out 0.1s;
-moz-transition: 0.5s ease-in-out 0.1s;
-ms-transition: 0.5s ease-in-out 0.1s;
-o-transition: 0.5s ease-in-out 0.1s;
transition: 0.5s ease-in-out 0.1s;
}
#side-bar {
display: block;
position: fixed;
top: 0;
left: -25em;
width: 17em;
height: 100%;
background-color: rgb(184, 134, 134);
overflow-y: auto;
z-index: 10;
padding: 1em 1em 0 1em;
-webkit-transition: left 0.5s ease-in-out 0.1s;
-moz-transition: left 0.5s ease-in-out 0.1s;
-ms-transition: left 0.5s ease-in-out 0.1s;
-o-transition: left 0.5s ease-in-out 0.1s;
transition: left 0.5s ease-in-out 0.1s;
}
#side-bar::after {
content: '';
position: absolute;
top: 0;
width: 0;
height: 100%;
background-color: rgba(0,0,0,0.2);
}
#side-bar:target {
display: block;
left: 0;
width: 17em;
margin: 0;
border: 1px solid #dedede;
z-index: 10;
}
#side-bar:target + #main-content {
left: 0;
}
#side-bar:target .close-menu {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.3) 1px 1px repeat;
z-index: -1;
}
}