What this is
A bunch of miscellaneous CSS 'improvements' that I,
Croquembouche, 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.
.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; }
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
/* Centered Header Sigma-9
* [2021 Wikidot Component]
* By Lt Flops (CC BY-SA 3.0)
* Forked from:
* Penumbra Theme by EstrellaYoshte
* Also based on:
* Centered Header BHL by Woedenaz
**/
/* ---- VARS ---- */
:root{
--titleColor: hsl(0, 0%, 95%);
--subtitleColor: hsl(60, 62%, 85%);
--lgurl: url(https://scp-wiki.wdfiles.com/local--files/component%3Acentered-header-sigma-9/logo.svg);
}
/* ---- SITE HEADER ---- */
div#header{
background-image: none;
}
#header::before{
position: absolute;
width: 100%;
height: 100%;
top: .45rem;
left: 0;
content: " ";
background-image: var(--lgurl);
background-position: center top;
background-repeat: no-repeat;
background-size: auto 8rem;
opacity: .35;
pointer-events: none;
z-index: -1;
}
#header h1,
#header h2{
float: none;
margin-left: 0;
text-align: center;
}
/* Move the Subtitle Down a Smidge */
#header h2{
margin-top: .45rem;
}
/* Hide the Existing Text */
#header h1 span,
#header h2 span{
display: none;
font-size: 0;
}
/* Style the New Text */
#header h1 a::before,
#header h2::before{
font-family: "Montserrat", "Arial", sans-serif;
text-shadow: none;
}
#header h1 a::before{
position: relative;
bottom: .15em;
color: var(--titleColor);
}
#header h2::before{
position: relative;
bottom: .3em;
color: var(--subtitleColor);
}
/* Set the New Text's Content From Variable */
#header h1 a::before{
content: var(--header-title, "SCP FOUNDATION");
font-size: 115%;
font-weight: bold;
}
#header h2::before{
content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT");
font-size: 130%;
font-weight: 600;
}
/* ---- LOGIN ---- */
#login-status{
top: .5rem;
left: 0;
right: initial;
z-index: 1;
}
/* ---- SEARCH ---- */
#search-top-box{
top: .5rem;
right: 0;
}
#search-top-box-input{
border-radius: 0;
}
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus{
border-radius: 0;
box-shadow: none;
font-size: unset;
}
/* ---- TOP BAR ---- */
#top-bar{
display: flex;
justify-content: center;
right: 0;
}
#top-bar ul li ul{
box-shadow: none;
overflow: hidden;
}
/* ---- PAGE TITLE ---- */
.meta-title,
#page-title{
text-align: center;
}
/* ---- BREADCRUMBS ---- */
.pseudocrumbs,
#breadcrumbs{
text-align: center;
}
/* ---- MOBILE DISPLAY ---- */
@media (max-width: 767px){
#login-status{
left: 5.15rem;
z-index: 20;
}
#search-top-box{
width: unset;
}
.mobile-top-bar{
position: relative;
display: flex;
justify-content: center;
left: 0;
}
}
SCP-4420 |
Tác giả: Lt Flops |
Xuất bản vào ngày 20 tháng Tám 2018 |
SCP-4420: Khát Vọng của Củ Khoai Tây
Tác giả: Lt Flops
Xuất bản vào ngày 20 tháng Tám 2018
Bài viết này nằm trong canon Phong Thần.
MÃ VẬT THỂ: SCP-4420 |
CẤP 2/4420 |
PHÂN LOẠI QUẢN THÚC: euclid |
GIỚI HẠN |
SCP-4420. Ảnh được chụp cách dị thể 50 mét.
Quy trình Quản thúc Đặc biệt: SCP-4420 được quản thúc cách Khu-82 một khoảng cách 150 m bên trong một chiều không gian vi lượng nhân tạo, chứa trong Buồng Quản thúc Tạm thời #819. Các nhà nghiên cứu đã cài đặt một Máy Ổn Định Địa Hình Scranton-Marlowe (STMS) để bảo toàn sự ổn định về không gian trong buồng chứa.
Mô tả: SCP-4420 là một củ khoai tây Idaho đỏ với khối lượng hiện tại là 400,000,000 kg và kích thước bề ngoài 150 x 65 x 55 (m). SCP-4420 thể hiện những đặc tính hủy hoại sau:
- SCP-4420 hồi phục lại 5% diện tích do lượng nước bay hơi 2 lần mỗi tuần bằng cách sản sinh ra vật chất khoai tây cứng. Trong khi quá trình này diễn ra, nước uống của một người dân bất kì thuộc bang Idaho chuyển hóa thành một thức uống khoai tây giàu tinh bột. Người uống nhận được khả năng giao tiếp với khoai tây trong khoảng 3 đến 10 tiếng sau khi uống.
- Khi SCP-4420 tiếp xúc với tia phóng xạ ánh sáng, SCP-4420 sẽ sản sinh ra một lượng vật chất khoai tây bất kì. Vật chất mới liên quan tới khoai tây theo nhiều khái niệm, trực tiếp hoặc gián tiếp. Vật chất mới phát triển cùng với SCP-4420, liên quan tới nhau theo một số cách bí truyền đi quá hiểu biết về nông nghiệp của con người. Một số dạng vật chất bao gồm:
- Bất cứ 1 trong 5,000 loài khoai tây được trồng khắp thế giới.
- Một số dạng đồ ăn đã chế biến từ khoai như khoai tây nghiền, khoai thái lát, khoai tây chiên, bim bim khoai, hay sa lát khoai.
- Quán quân Nhảy Bao Bố Giải Trẻ hạt Idaho năm 1996, Michelle Brown, 6 tuổi.
- Một loài Dế Jerusalem (Có tên gọi thông tục là Bọ Khoai Tây) được làm bằng khoai lang. Những thực thể đã xâm chiếm 8% diện tích của SCP-4420 vào thời điểm hiện tại.
- Sự buồn chán lan truyền khắp 25% nhân sự trong bán kính 5 km.
- SCP-4420 miễn nhiễm với sự thối rữa. SCP-4420 hút lại tất cả cơ thể hữu cơ không mong muốn gần như ngay lập tức và thay thế chúng bằng vật chất khoai tây tươi sống.
- SCP-4420 tiêu thụ tất cả đồ ăn và rác thải hữu cơ trong phạm vi 20m. Vật chất hữu cơ đi vào khu vực này sẽ biến thành một bướu khoai tây với khối lượng tương tự và dịch chuyển tức thời vào bên trong SCP-4420. Vật chất hữu cơ SCP-4420 có thể tiêu thụ bao gồm những động vật nhỏ khối lượng lên tới 5 kg.
Vào thời điểm tài liệu này được viết, SCP-4420 đã phát triển được 22 năm.
CẬP NHẬT
I. 10 tháng Năm 2019
Các nghiên cứu viên thực địa phát hiện dung dịch ngoại lai nhiễm một lượng huyễn thuật trong nguồn nước ngầm địa phương. Cơ Quan Chỉ Huy Tác Chiến của Điểm-82 triển khai Chỉ thị 3731-Ov91, yêu cầu quy trình phong tỏa hoàn toàn và tiêu hủy chất lỏng nói trên. Nhân viên an ninh coi quy trình thành công trong vòng một giờ.
Do địa điểm quản thúc dị thể, tuy nhiên, SCP-4420 vẫn chưa được kiểm tra.
Vào 21:51, SCP-4420 hấp thụ các chất lỏng huyễn thuật và trở nên có tri thức trong vòng 32 giờ. Trong khoảng thời gian này, dị thể sở hữu khả năng điều khiển các khối thông tin. Điều này dẫn đến sự phân tán của 362 tin nhắn riêng biệt được gửi tới những nghiên cứu viên trong khu.
Chuỗi tin nhắn hiển thị như sau.
bạn nghĩ tôi có đẹp không
tôi nhìn như thế này thật sao
hình hài của tôi trong mắt bạn như này sao ☹️
bạn không thể nhìn tôi trong bộ dạng này
tôi không đủ tốt đúng không
làm sao tôi đủ tốt cho bạn được
xin lỗi vì hình hài của tôi như thế này
II. 12 tháng Năm 2019
Vào 05:51 AM, 12/5/2013, SCP-4420 ngừng mọi quá trình phát triển dị thường và bắt đầu phân hủy nhanh chóng.
SCP-4420 được tái phân loại thành NEUTRALIZED.