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; }
註冊代號:Site-ZH-04
收容分級:Pending
特殊收容措施:基金會正在調查Site-ZH-04的建立過程以及其原先功能,其相關資訊依照保密協議進行封存。在SCiPNET資料庫內安置過濾系統以確保該站點的資訊遮蔽能夠持續,知曉Site-ZH-04之存在的人員需對其進行靶向記憶刪除。
所有存放在Site-ZH-04內部的資料都需保存於RAISA部門之加密型資料庫內,以供後續的活動觀察以及推導可能。
描述:基金會繁中分部站點Site-ZH-04,其地理位置在臺灣███縣的██████山脈帶上。有關該站點的實際功能以及建立日期皆未記載至基金會資料庫內,且Site-ZH-04是否真正附屬基金會的名義下所建造仍然未知,目前基金會所知曉的資訊有:
- Site-ZH-04的主要功能疑似跟逆模因研究相關,屬於單一功能性站點。
- Site-ZH-04原本可能具有相當完整的站點設施規劃,但推測因相關資源的分配明顯不均導致未規劃完成,該站點仍未被基金會正式編入正規站點設施內。
- 目前仍未發現任何活物在Site-ZH-04內部活動,尤其是可能的相關人員或是其駐紮人員在內。
- 基金會在Site-ZH-04內部未搜索到相關領域的研究設備以及其資料,所有的資訊記述可能仍未被完全查清真偽。
SCiPNET資料庫內只搜索到一則有些微提及Site-ZH-04的相符資料,該則資料被記述在《基金會設施簡章》上:
Site-ZH-04與逆模因部門相關,因其性質而鮮少為ZH分部人員所知。
上述資料記述的真實性仍有待釐清,但這似乎引起了基金會的單方面質疑:
- 逆模因部門:目前基金會繁中分部的逆模因站點以Site-ZH-12用作主要研究設施,且在此之前基金會工程部門並未實質登記相關站點的建設要求,以及在Site-ZH-04內部未發現其實質上的建設批准證書,三垣指揮部正在全面審查相關資料的搜索是否有著明顯缺失。
- 相關人員:基金會在和多個工程部門以及高層人員溝通後,並未發現有關Site-ZH-04的文書記述資料以及對該站點具熟悉或印象之人員。且在發現Site-ZH-04的存在後,SCiPNET資料庫內部的人員檔案數量有著明顯缺失的跡象。
試圖追溯原先的撰寫者均以失敗告終,其IP網絡位置被確認是Site-ZH-04的地理位置。RAISA部門正在調查其背後可能的前後原因,本文件隨後被迅速建立並採取同步更新。
描述更新:使用三維掃描儀對Site-ZH-04內部進行空間推斷後,發現其構造與基金會常規性設施相符,隨後進入該站點內部探索的實質計劃已獲得三垣指揮部書面批准;在倫理委員會以及Site-ZH-02的討論下指派D級專業人員進行本次探索。
Site-ZH-04首次探索記錄
目前僅在該站點內的流動大廳以及B1-B3區域進行探索,往更深樓層的搜索計劃目前正交由三垣指揮部以及HMCL-ZH進行審議。
Site-ZH-04的內部構造如下所示:
1F區域具備基金會通常站點的人員流動功能以及外界偽裝特征,並以向外界提供住宿服務作為主要的功能掩飾。大廳內的相關設備以及其空間構造均與一般商業旅館相同,但未發現該站點內人員的活動跡象或是其記錄留存。
B1區域被推斷是Site-ZH-04內部的主要活動點,但因其通用走廊表現出非歐幾里得空間的性質並持續向內部延伸。更深入的探索計劃被視為具高度風險性,派遣人員僅在相鄰區域進行探索活動。未發現該站點內人員的活動跡象。
B2區域疑似留有該站內人員的先前活動跡象,派遣人員在內部餐桌發現未消耗完的食物以及使用過的塑膠餐具,但同樣在餐廳內部未目擊到其它活物。
B3區域的結構空間處於未構建完畢的狀態,其牆壁以及地板皆出現水泥鋪設外露的情形。該區域內空無一物且未設置照明用設備。派遣人員在該處反覆檢查周邊環境狀況,確認沒有任何物件留存後向指揮部請求撤離,該項請求已通過。
本次探索計劃在到達B3區域後便已停止,所有的回傳影像以及資訊記述將交由RAISA部門進一步分析比對。
補充:RAISA部門在SCiPNET資料庫內查獲到數則未被基金會所攔截的通訊要求,其發送端位置在被比對後被確認是Site-ZH-04的實際地理位置。這些通訊要求皆與設施內部的異常突破事項有關,但其來源的真實性目前無法進行考究。
RAISA部門在本次事件過後發生一次大規模資料外洩事件,多位通訊人員檔案均出現遺失情況且後續無法經由一般程序進行回溯。
目前仍未知曉基金會是如何得知Site-ZH-04的實際存在。
SCiPNET系統通知:根據《基金會通訊協定》所述,您所查閱的文件內容受到一異常效應影響,導致該內容或是其資訊記述含有單一或多種潛在性危害元素。您目前的存儲位址已被記錄及資訊安全管理部門所記錄,將派遣附近的維安人員進行隔離協助。