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; }
여행자는 공동묘지의 녹슨 철문으로 다가갔다. 대개 문 가까이 매달아두는 가스등은 모조리 부서지고, 피처럼 새빨간 보름달빛만이 길을 비추었다.
어쩌다 여기로 왔지? 그 질문을 여행자는 곱씹었다. 왜 나는 이 죽어가는 세상을 떠돌지? 뭘 찾아다니려고 그러지? 대답을 찾을 방법은 없었다. 그러나 여행자는 다시 발을 옮겼다. 느껴졌기 때문이다. 무언가의 부름… 누군가의 부름이. 마치 저 높이 계신 누군가 이끌어주듯이.
여행자는 느적느적 길을 따라가며 묘지를 가로질렀다. 길가에 줄줄이 보이는 묘비들을 덩굴이 에워싸며 빛이 나는 하얀 꽃을 피웠다. 묘지에 주민이라고는 죽은 자와 그 기억밖에 없을 텐데 여행자에게 멀리서 콧노래 소리가 희미하게 들려왔다.
여행자가 소리가 나는 곳으로 가까이 가 보니, 노래를 부르던 자가 누구인지 보였다. 어떤 여자가 복면을 쓰고 묘비 앞에 무릎을 꿇은 채로 평온하게 노래를 흥얼거렸다. 얄따란 하얀 천을 망토 삼아 걸치고 복면 삼은 천조각에 피를 흠뻑 묻힌 채로, 여자는 창백하고 앙상한 한 손을 뻗어 무덤을 어루만졌다.
그러자 땅에서 덩굴줄기가 불쑥 솟아나와 묘비를 친친 감싸고, 다른 덩굴에도 달렸던 빛나는 하얀 꽃이 활짝 피어났다. 여자는 고개를 꾸벅 숙이고 잠시 가만히 앉아 있다가 다음 묘지로 발을 옮겼다.
콧노래 소리를 이으며.
여행자가 여자에게 다가갔다. 벌써 자기를 눈치챘다 싶었지만, 여자는 나쁜 뜻은 없는 듯했다. 대신에 여자는 인사 삼아 여행자를 복면을 뚫고 나오는 눈길로 빤히 쳐다보다가 다시 자기 일로 돌아갔다.
"저기요." 여행자가 말했다.
침묵. 그러다, 연약한 목소리가 나직이 흘러나왔다.
"방랑자? 이런 곳에서?" 여자가 여행자를 바라보듯이 하며 말했다.
여행자가 무기를 땅바닥에 내려놓고 여자의 곁에 앉아서 말했다. "이런 데 있으면 위험해요. 죽지 않은 자들 한복판을 기어다니면."
"…그게 무슨 문제라고." 여자가 다른 묘비에 손을 올려놓자 더 많은 덩굴과 꽃이 마치 손바닥에서 튀어나오듯 사르르 피어났다. 꽃들은 부드럽고 여렸다. 산들바람 한 줄기만 살랑 지나쳐도 꽃잎이 떨어져나갈 듯했다. 그러나 덩굴에서 피어난 이 꽃들은 한편 가시로 덮여 있었다. 여자가 다시 고개를 숙이면서 나직이 말했다. "이들은 다시 걷기를 바라지 않아."
그리고는 굳은 미소를 띤 채로 여행자에게 고개를 돌렸다.
"방랑자, 당신은 누구야?"
여행자가 대답했다. "이름 없습니다. 그쪽은 어떤 분이죠?"
"내 이름은 바네사Vanessa. 중앙 제로퓔라Xerophylla 출신이지."
여행자가 흠칫했다. 이곳은 도시 중앙에서 한참은 걸어야지 나오는 곳인데. 여행자가 바네사를 바라보고 물었다.
"왜 이런 곳에 계시죠?"
바네사가 나직이 말했다. "그저 마지막 인사를 보낼 뿐이야." 한 줄기 슬픔이 목소리에서 묻어났다.
바네사가 일어나 옷에 묻은 흙먼지를 털어내고는 발치의 묘비를 가리켰다. "제이콥 레온하르트JACOB LEONHARDT"라고 새겨져 있었다.
"여기 잠든 레온하르트 씨는 일카나Ilcana 사람이야. 일카나는 여기서 북쪽으로 조금만 걸어가면 나오지. 몇십 년 전에 죽었어… 아내와 두 딸, 일가족과 함께." 바네사가 말을 잠시 멈추고, 생각에 잠긴 듯 고개를 기울였다. "레온하르트 가족처럼 세상에 기억해줄 자가 아무도 남지 않은 사람들이 있어. 전쟁이 끝난 후에."
바네사가 고개를 돌려 여행자를 바라봤다. "방랑자, 그때 너도 살아 있었나? 1차 신비 전쟁 때?"
여행자가 말했다. "제가 잘 모르는 시기군요."
"수십 년 전 일이야. 제로퓔라는 일카나 북부인들과 일전을 벌였지. 누군가 그런 의견을 내놓았어… 마녀들을 격리해다 쓰자. 마녀의 지식과 신비 능력을 활용해 북부인들을 이기자. 어린 마녀들이 가족과 이별해서 제로퓔라 군대에 들어가 훈련을 받았어. 군인들과 함께 최전선을 지켰지."
바네사가 다시 말을 멈추었다가, 크게 숨을 한 번 쉬고 말을 이었다.
"내가… 그 마녀였어. 마녀 여왕 사랄린Saralynn의 첫째 자식, 제로퓔라 최강의 마녀."
바네사가 다른 무덤으로 걸어가 묘비에 손을 살며시 올려놓었다.
"전쟁은 단지 사흘 밤이 걸렸어. 역사에서 가장 짧은 전쟁이겠지. 북부인들은 수적으로도 화력으로도 열세였어. 제로퓔라 군대는 수도까지 빠르게 치고 나갔어. 지나간 자리에 파괴와 죽음만을 남기며."
바네사가 다시 여행자를 돌아봤다. "그때의… 학살… 그 누구도 받아들이지 못했어. 마녀들도 군인들도. 하지만 떠밀려 나아갔지. 일카나의 수도까지."
"수도를 포위했을 때 나는 한 가지를 배웠어. 거기서 숨을 거둔 어머니의 시신을 들고 눈물이 그렁그렁하던 꼬마 아이를 보았지. 아이들을 어떻게든 지키려고 분투하던 어머니를 보았고. 어떤 가족이 운명 앞에 놓이고서도 맨 마지막 순간까지 서로 끌어안은 모습을 보았어."
바네사가 묘비 위를 손으로 쓸었다. 침통한 표정이 얼굴에 떠올랐다.
"북부인은 나쁜 사람이 아니었어. 지도자가 말한 대로 냉혈한 악마들이 아니야."
땅에서 덩굴이 솟아오르고, 하얀 꽃이 묘를 가득 덮었다.
"그들도 가족이 있으며 친구가 있고, 기쁨과 슬픔과 공감을 알았어. 그들도 사람이야." 목이 멘 목소리가 흘러나왔다. "지도자는 우리가 어둠을 물리치는 빛이라고 말했지. 자신을 지킬 줄 모르는 사람들을 우리가 지킨다고. 거짓말이었어. 모두 다."
"내가 수천 명을 죽었어. 그 거짓말 때문에."
바네사가 묘지 위로 피어난 수많은 빛나는 하얀 꽃들을 가리켰다.
"이곳은 모두가 묻힌 자리야. 내가 죽인 무고한 모든 사람들이. 여기 피운 꽃들은 이들의 영혼을 편안히 달래줄 거야. 마지막 해질녘이 지난 이 세상에서."
바네사가 다음 묘지로 걸어가려다, 돌연 비틀거리며 몸이 기울어졌다. 그리고 땅바닥에 쓰러졌다.
"괜찮아요?" 여행자가 달려와 바네사를 붙들었다.
망토가 걷히고 바네사의 몸뚱이가 드러났다. 빼빼 말라 있었다. 며칠간 아무것도 먹지 못한 모양새였다.
"괜찮아 방랑자, 내-"
바네사가 기침을 내뱉었다. 시퍼런 피가 하얀 옷으로 주르륵 쏟아졌다.
"제가 도와드릴게요, 치유사에게 데려갈 수 있어요. 음식이 필요하면 제가-"
바네사가 말을 잘랐다. "굳이 그러지 마, 방랑자. 이게 내가 받는 벌이야."
여행자에게 바네사가 손을 뻗었다. 산바닥에서 하얀 꽃 한 송이가 피어났다.
"내 삶도 얼마 남지 않았어. 이 꽃을 저 묘지에 올려 줘. 저들이 안식을 취하도록."
여행자가 꽃을 들고 묘지에 올려놓았다. 그리고는 공동묘지를 둘러보았다. 모든 묘지들이 하나같이 하얀 빛을 밝게 비추고 있었다.
방금 여행자가 놓은 꽃도 똑같은 하얀 빛을 비추었다.
"방랑자." 바네사가 힘겹게 말하며 위를 올려다봤다.
"하나만 더 부탁할게. 별이 보고 싶어… 마지막으로."
바네사는 움직일 기력을 내지 못했다. 여행자는 바네사의 눈을 가린 피 묻은 천조각을 벗겼다. 눈이 밝은 파란빛으로 빛났다. 바네사는 밤하늘에 뜬 수만 개 별들을 바라보았다. 몇 년 동안 보지 못했던 광경을.
눈이 천천히 감기면서, 바네사는 웃음기를 머금었다.
