基金會週刊 第070期



評分: +2+x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, 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.

…like this!

.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; }

 

近期新聞

聖夜相守再一夜

第三次的聖夜相守活動開始啦!

報名截止至12/11,想參加繁中經典活動絕對不要錯過!


用戶推薦列表與推薦故事系列翻譯募集中

徵求與我們共同完成用戶推薦列表推薦故事系列的翻譯
儘管我們一直不停的推出新的翻譯,但仍有許多精彩的文章在等待著我們。希望能徵求與我們一起完成翻譯朋友。

本周原創作品

SCP-ZH-701 - 掠食性降雨

據觀察,同一杯雨水樣本中吸收較多醣類的SCP-ZH-701會互相聚集,最終可能形成肉眼難以見到的微小水珠脫離液面向上飛行。結合雲層中也能發現SCP-ZH-701樣本的事實來看,這些水珠很可能最終會飄回高空——對流層頂或者甚至平流層的高度。
 
作者 vomiter

項目企劃書 2017-47:《健康的代價》

很不幸的是,這句話可能是真的,至少我與身邊的藝術家便是此句話的實例。但也是因為對世界異於常人的感知,以及異於常人的表現手法,我們才被稱為了藝術家——甚至是「異術家」。
那藝術家變得「健康」之後,他的創作還能繼續引起共鳴、受人喜愛嗎?
 
作者 AbyssDream

SCP-ZH-352 - 絕命六龜葡萄

在一陣混亂下,方玉倩研究員將陳美鳳博士救走,Hilde特工透過走廊上的幫浦系統對辦公室內噴灑方研究員取得的機油,並且對該空間拋擲一土製爆裂物。在該空間內的反叛軍成員抵達門口前,三名員工合力將出口處用金屬板卡死,但仍有一名反叛軍成員逃出,將Hilde特工壓倒在地,雙方搏鬥。多名反叛軍成員的咆哮聲在房間內響起。
 
作者 SamScript

本周翻譯作品

SCP-201 - 空蕩蕩的世界

轉移到這一「平行世界」的受試者稱他們一開始十分驚喜且好奇,但隨後不久就開始感到非常強烈的孤寂與恐懼。這些感覺的強度有個體差異,但也與消失的時間長短有關。受試者會在轉移結束過後重回我們的世界,他們此時可能會感受到劇烈震撼,其中位於都市區的人更是如此。
 
作者 Dr Gears
譯者 vomiter

SCP-200 - 繭

它在20██年██月██日退入自己的繭中,研究員目前仍無法解釋為何一個小孩可以製造出足以包覆自身的絲線。超音波無法在繭內偵測到任何固體物質。然而,採集自繭體內部液體的DNA檢驗結果則與該名幼童完全一致。上述證據似乎說明該幼童已經[已刪除資料]。
 
作者 underthered
譯者 vomiter

關注組織半完整列表

我們注意到,多數基金會職員對我們數據庫中所收錄的大量「關注組織」 —— 這類別中包括了我們的敵人、盟友、對手與前身 —— 備感困惑。儘管當中有部分已經有據可查,但我們遭遇的許多小型關注組織卻僅有甚少的數據。本列表的存在,便是為了那些更鮮為人知的組織提供一分全面指南。
 
作者 Jerden、匿名
譯者 Frederica Bernkastel

SCP-1011

在階段一時,受試者(指定為SCP-1011-1)將會開始表現高昂的士氣及極高的滿意度,且自願工作更長的工時、以及放更多心力在他們的任務上;隨著本階段影響的提升,SCP-1011-1會停止從事工作、睡眠及滿足基本生理需求以外的活動。
 
作者 VAElynx
譯者 Pseudopoet

SCP-324 - 長青的弔唁者

SCP-324的發現地點是新罕布夏州鄉村地區一座「自然」(無棺木且無保存設施)墓園。墓園管理人,德克蘭 · █████先生會固定將SCP-324移植到最近死者的埋葬地點,並邀請家庭成員一同分享SCP-324-1,以此要求收取高額費用。
 
作者 Mulciber
譯者 vomiter

SCP-320 - 希格斯場加速度操縱子

SCP-320在加速期間,它對周遭物質與空間的引力效應連同自身質量都會隨著加速度增加而指數增長。理論物理當中,弦理論雖然較能準確預測上述的效應但依然無法給予完整的解釋。
 
作者 FritzWillie
譯者 vomiter

本周藝術作品

o1A9Jia.jpg

Elizabeth神化時裝概念原型

Elizabeth神化時裝概念原型

 
繪者 k1s10r0db00nek1s10r0db00ne

EkYA8PE.jpeg

S之死

S之死

 
繪者 Mang GwanMang Gwan

KsWbkam.jpeg

S之死

本周焦點成員

本周注目翻譯

avatar.php?userid=5415046&timestamp=1637938045

vomiter

更多vomiter的作品

本周注目原創

avatar.php?userid=5435485&timestamp=1638549195

SamScript

更多SamScript的作品

編輯部資訊

連結

加入編輯部

這份周刊才剛起步,非常歡迎任何人加入一起編輯。讓我們共同記錄繁中基金會的路程。
漫畫與專欄作品熱烈徵求中,歡迎前來#周刊編輯部投稿!
加入#周刊編輯部

除非特別註明,本頁內容採用以下授權方式: Creative Commons Attribution-ShareAlike 3.0 License