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; }
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
#top-bar .open-menu a {
position: fixed;
top: 0.5em;
left: 0.5em;
z-index: 5;
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;
pointer-events: auto;
}
@media not all and (max-width: 767px) {
#top-bar .mobile-top-bar {
display: block;
pointer-events: none;
}
#top-bar .mobile-top-bar li {
display: none;
}
#main-content {
max-width: 708px;
margin: 0 auto;
padding: 0;
transition: max-width 0.2s ease-in-out;
}
#side-bar {
display: block;
position: fixed;
top: 0;
left: -18rem;
width: 15.25rem;
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
z-index: 10;
padding: 1em 1em 0 1em;
background-color: rgba(0,0,0,0.1);
transition: left 0.4s ease-in-out;
scrollbar-width: thin;
}
#side-bar:target {
left: 0;
}
#side-bar:focus-within:not(:target) {
left: 0;
}
#side-bar:target .close-menu {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin-left: 19.75em;
opacity: 0;
z-index: -1;
visibility: visible;
}
#side-bar:not(:target) .close-menu { display: none; }
#top-bar .open-menu a:hover {
text-decoration: none;
}
/* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
@supports (-moz-appearance:none) {
#top-bar .open-menu a {
pointer-events: none;
}
#side-bar:not(:target) .close-menu {
display: block;
pointer-events: none;
user-select: none;
}
/* This pseudo-element is meant to overlay the regular sidebar button
so the fixed positioning (top, left, right and/or bottom) has to match */
#side-bar .close-menu::before {
content: "";
position: fixed;
z-index: 5;
display: block;
top: 0.5em;
left: 0.5em;
border: 0.2em solid transparent;
width: 30px;
height: 30px;
font-size: 30px;
line-height: 0.9em;
pointer-events: all;
cursor: pointer;
}
#side-bar:focus-within {
left: 0;
}
#side-bar:focus-within .close-menu::before {
pointer-events: none;
}
}
}
Mã vật thể: SCP-7148
Phân loại: Keter
Quy trình Quản thúc Đặc biệt: Nhiều ốc đảo sẽ được thiết lập và duy trì xung quanh Lưỡi liềm Màu mỡ, với thức ăn và nước uống được dự trữ dành cho những người bị lạc do dị tính của SCP-7148. Những thiết bị thu thập thông tin như máy quay, micrô, máy dò bức xạ Akiva, nhiệt kế,v.v., sẽ được thiết lập để giám sát SCP-7148. Việc dị thể xuất hiện trên sa mạc sẽ được giải thích bằng cách phổ biến Câu Chuyện Vỏ Bọc 6F3 (“Người hành hương theo Tôn giáo”).
Mọi vật thể SCP-7148-F do SCP-7148 cung cấp cần bị tịch thu, và sẽ được phân phát trong trường hợp không có dị tính.
Mô tả: SCP-7148 là một người đàn ông Levantine với nhiều vết sẹo trên cơ thể đi lang thang trong vòng bán kính 5km xung quanh và bên trong hoang mạc Negev. Ông ta giao tiếp bằng một phương ngữ không xác định của tiếng Do Thái. Dù vậy, khi một cá nhân giao tiếp trực tiếp với SCP-7148, họ sẽ hiểu những lời nói của ông ta như thể đó là tiếng mẹ đẻ của họ.
Khi một cá nhân bị mất nước hoặc thiếu ăn tiếp xúc với SCP-7148, họ sẽ được cung cấp sữa dê đựng trong một chiếc túi da kèm theo một vật thể hình hạt giống màu trắng bọc trong vải da và gân (từ giờ sẽ được gọi là SCP-7148-FH và SCP-7148-FM). SCP-7148 sẽ trao SCP-7148-FH và -FM cho những cá nhân nó gặp được để đổi lấy bất kỳ vật thể nào, dù nó ưu tiên đổi lấy hạt giống và đất tươi. Từ chối trao đổi sẽ không gây ra bất kỳ hậu quả nào và sẽ vẫn dẫn đến việc dị thể đưa cho đối tượng hai mẫu vật trên.
Xác định niên đại bằng carbon của SCP-7148-FH và -FM cho thấy chúng tồn tại từ cuối Thời kỳ đồ đồng, đồng thời phân tích mức độ phân hủy cho thấy SCP-7148-FH và -FM đủ khả năng để nuôi sống một người trong 40 năm. Phân tích mức độ hạt và năng lượng/dinh dưỡng dị thường của SCP-7148-FH và -FM cho thấy cả hai đều chứa một lượng bức xạ Akiva rất nhỏ và không hề chứa calo.
Phụ lục: Đội Đặc nhiệm Cơ động Dalet-603 (“Cáo Sa Mạc”) đã hết lương thực dự trữ trong một chuyến thám hiểm Hoang mạc Ả Rập. Do cả đội đã nhịn đói trong khoảng thời gian tương đối lâu dài, SCP-7148 đã xuất hiện cách Dalet-603 trong khoảng 5m. Sau khi tiếp cận Đội Đặc nhiệm Cơ động, SCP-7148 đã cho họ một khẩu phần SCP-7148-F, nhưng dị thể nhận ra rằng mình không còn cả SCP-7148-FH và -FM. Ông ta lấy ra một con dao, xẻo ra 1 mét vuông từ da, và lấy ra 1 lít máu từ bản thân trong khi rên rỉ vì đau đớn. Lượng da và máu này đã chuyển hóa thành SCP-7148-FH và SCP-7148-FM. Đội Đặc nhiệm Cơ động Dalet-603 đã nhân cơ hội này để gắn định vị lên SCP-7148, nhằm dễ dàng theo dõi sự xuất hiện của ông ta trong tương lai.
Phụ lục: Dưới đây là bản ghi mới nhất về SCP-7148, sau khi được gắn định vị:
[SCP-7148 được phát hiện gần một ốc đảo sa mạc của Tổ Chức. Dị thể đang mang những khẩu phần SCP-7148-F. Để quan sát SCP-7148 hiệu quả hơn, một máy quay gần hơn đã được chọn.]
[Một cá nhân không xác định, về sau được định danh là công dân Jacob Leibowitz, tiến tới SCP-7148. Cá nhân này có vẻ đang khát nước. Dị thể nhìn thấy cá nhân trên và tiến tới với một khẩu phần SCP-7148-F]
Leibowitz: Cảm ơn vì đồ uống.
[Tiếng lẩm bẩm không nghe rõ từ SCP-7148]
Leibowitz: Hạt giống à? Tôi có một nắm sung đây, vậy có đủ không?
[SCP-7148 gật đầu. Leibowitz mỉm cười]
Leibowitz: Chắc là tôi đã gục giữa hoang mạc rồi nếu như không có anh ở đây. Bảo trọng!
[Leibowitz di chuyển ra khỏi khu vực. SCP-7148 lấy ra một túi chứa đầy các loại hạt giống của các loài cây. Ông ta bốc ra một nắm và vùi chúng xuống đất, sau đó lấy gỗ gần ốc đảo và xây một hàng rào xung quanh chỗ hạt. SCP-7148 ăn những quả sung, nhưng nhanh chóng bị nôn mửa nghiêm trọng.]
[Ở vị trí cách SCP-7148 10km, máy đo gió của Tổ Chức phát hiện một cơn bão cát.]
[Cơn bão cát cách SCP-7148 500m. Dị thể nhận ra cơn bão và bắt đầu đào xuống lớp cát bằng tay không.]
[Cơn bão cát cách SCP-7148 100m. Dị thể đã đào được một cái hố nhỏ để trốn vào. SCP-7148-FH che hố lại.]
[Trong vòng 40 ngày, máy quay không thể ghi nhận thông tin vì cơn bão cát. Micrô gần chiếc hố ghi được tiếng khóc và những tiếng nứt vỡ.]
[SCP-7148 bò ra khỏi cái hố sau khi cơn bão cát tan đi. Những ốc đảo được Tổ Chức tạo ra đã bị vùi trong cát, những hạt giống và hàng rào đã biến mất. SCP-7148 gục xuống nền cát và khóc. Cái hố đã được phát hiện là có SCP-7148-FH và -FM đậy bên trên. Cơ thể SCP-7148 xuất hiện nhiều vết sẹo hơn.]
[Sau khi khóc, SCP-7148 gom tất cả khẩu phần SCP-7148-FH và FM và tiêu thụ chúng. Dị thể tiếp tục bước đi. Micrô gần SCP-7148 ghi nhận được một giọng nói.]
SCP-7148: …איפה נבו…
Lời bạt: Trong thời gian cơn bão cát xảy ra, thiết bị của Tổ Chức đã ghi nhận được cường độ bức xạ Akiva cao bất thường.
