| SCP-6982 |
By:  MemeMelon |
| Published on 12 Nov 2023 08:46 |
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; }
State your name for the record.
記録のため、あなたの名前を述べてください。
A birthday party. Fifth, maybe? Seventh?
誕生日パーティー。五歳の頃だったか？それとも七歳だったか？
A kid sat alone. It was her birthday, yet no one cared. She listened to the laughter around her.
子供が一人座っていた。彼女の誕生日だというのに、誰も構いやしなかった。彼女は、周りの笑い声を聞いていた。
She knew they were just here for the cake.
彼女は、彼らがケーキを食べる為だけにここにいることを知っていた。
Jayden Carver.
ジェードゥン・カーヴァーです。
How did you find out about the Foundation?
どのようにして財団の存在を知ったのですか？
I just… know.
ただ…知っているんです。
The ball flew by. She turned her head, but she stayed where she was. She never really liked sports.
ボールが飛んだ。彼女は頭の向きを変えるも、今いる場所から動かなかった。彼女はスポーツが全く好きではなかった。
They screamed at her to go. It didn't matter.
彼らが彼女を誘おうと叫んだ。そんなことはどうでも良かった。
You just know?
ただ知っている、と？
I just know. What more is there to say?
ただ知っているんです。これ以上何を言う必要が？
Alright, moving on. What made you come here?
分かりました、話を続けます。なぜここに来たのですか？
"Nora?"
"ノラ？"
The kids around her snickered. She rubbed her eyes. "Huh?"
彼女の周りの子供達はクスクスと笑った。彼女は眼をこすった。「えぇ？」
I think… I was supposed to.
多分…来るべきだったんです。
Elaborate.
もっと詳しくお願いします。
It has to do with the knowledge. I…
A loud bang.
She had dropped her textbook.
彼女の教科書が落ちた。
You what?
Screaming. Disappointment.
Bad grades.
A promise.
I don't… know what I was saying.
A friend.
Someone who wouldn't leave.
Okay, what's going on?
A secret.
A horrible secret.
My memories?
A ritual.
儀式。
A sickness.
病。
A gun.
銃。
It's not right, though. I've been seeing…
You mentioned my memories yesterday. What'd you mean?
昨日私の記憶について言及していましたね。いったいどういう意味なのでしょうか？
I don't… I don't remember what I said.
何を…何を言ったのか覚えていません。
Cheering. Congratulations.
She could barely hear them over the static. They were happy for her, but…
Is this a branch?
After I asked what was going on?
Screaming.
An argument right as she tried to speak. She sat at the table, but it didn't mean anything.
She opened her mouth, but no words came out.
A secret left forever untold.
Are you always this… spacey?
いつもあなたはこんな…
Not before. My condition's been getting worse.
Your condition?
I see memories. Not voluntarily.
The animal froze, eyes wide.
She slammed on the brakes.
Glass flying through the air.
A sharp pain.
It was too late to make amends.
Shit. How much did you see?
You won't like the answer no matter what I say.
Just- let's keep this between us.
How well do you remember the memories you see?
Depends. Some really stick with me, but others… I forget.
Alright, uh, do you know anything about this?
分かりました、あー、これについて何か知っていることは？
Item #: SCP-6982
アイテム番号: SCP-6982
Object Class: Uncontained
オブジェクトクラス: Uncontained
Special Containment Procedures: N/A
特別収容プロトコル: N/A
Description: SCP-6982 is a silver bowl. Human subjects observing SCP-6982 from above will perceive a series of images reflected inside of it.
説明: SCP-6982は銀色のボウルです。SCP-6982を上空から観察した被験者は内部に反射された一連の画像を知覚します。
Images are as follows:
画像は以下の通りです:
- A bottle of beer.
- A black car.
- A small child, approximated to be 4-6 years of age.
- A forest.
- A shovel.
- ビール瓶。
- 黒い車。
- 4-6歳と推定される小さな子供。
- 森。
- シャベル。
Your, uh… I don't… think so.
Fair enough.
分かりました。
More time.
As she disappeared under the surface, she wished for more time.
Look, I've seen your timelines.
What?
I've seen your futures, and you never tell anyone. You always die wishing you could've said something.
Said something…
She grabbed her shovel.
It was time to dig up the past.
