基金會週刊 第063期



評分: +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; }

近期新聞

人事異動通知

版主NocturnalTNocturnalTEmptyName723EmptyName723因個人事務與規劃將轉為非活躍工作人員。

Frederica BernkastelFrederica BernkastelPao MianPao Mian將依照意願與適性分配加入工作人員團隊,負責翻譯索引表格管理與儲備志工。

本次更動的工作略為繁多,相關事務還請各位依照工作人員的指揮行動,如有未盡事宜請多海涵,有任何意見也能前往聯絡工作人員提出,感謝大家。


SCP越南語分部正式成立

代號為vn的SCP越南語分部已經正式的從認證非官方轉為了SCP官方分部的一份子,成為了國際分部的一份子!


INT論壇通知服務登場

CroquemboucheCroquembouche 所製作的Forum notifications正式開放了,這個方便的小功能將內部所登錄的網站訊息定期的傳送到您的信箱或wikidot的站內信箱中,更多訊息與詳細說明請見INT介紹頁


網站圖片資訊

由於近期圖片網址的更換,可能有些許頁面的圖片無法正常顯示。
若您發現了發故障的的頁面,歡迎動手修復,如果您不確定正確的修復方式,也歡迎在下方留言,工作人員將盡速的處理。


2021萬聖月

老掉牙鬼故事2Trick or Treat大家喜愛的萬聖節非官方活動展開,這次多加開了藝術創作的投稿項目,歡迎大家共襄盛舉。


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

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

本周原創作品

SCP-ZH-068

SCP-ZH-068的項目檔案現保存於SCP基金會繁中分部的資料庫中,支援項目的字型現已著手進行開發,並將於2024年完成,尋找項目對應字體的研究現已終止計畫但仍可經所處站點主管及研究部主任同意後著手進行,重現項目的研究則無限期停止。
 
作者 Sigtina

SCP-ZH-049

。當前基金會仍未知曉SCP-ZH-049-Prime所具備的異常效應或是其外觀描述,但是根據時間異常部門的文件內容所述,SCP-ZH-049-Prime將會在未來的某一個時間點內突破現有階段的收容程序,並會反覆試圖掙脫SCP-ZH-049所製造出的因果循環。
 
作者 Pao Mian

對向列車的狂奔人影

其實剛剛打到一半就按錯發出去了 第二天我放學搭車回家就沒看到人影了所以我就以為是我看錯
今天的車又有停下來交會列車我就想起這件事 結果又看到那個人影了 所以才想問看看有沒有人看到
 
作者 BalesBomb

本周翻譯作品

SCP-5056

實驗與事故數據表明,它可以感知到其他實體,但卻選擇了忽略。SCP-5056-A的行為與SCP-5056-B的情感需求相悖。當他休息時,它會揭開其瘡疤,並發出噪音與尖叫,當他絕望時,它就會與之進行不愉快的談話。
 
作者 HarryBlank
譯者 Frederica Bernkastel

SCP-6131

SCP-6131應用客觀精確的術語提及,仿佛它是個客觀明確的事物一般。SCP-6131應被放入一個盒子中,因為SCP-6131可以被放入一個盒子中。SCP-6131已被控制,SCP-6131正被收容,SCP-6131將被保護。
 
作者 DarkStuffpastarasta1
譯者 Frederica Bernkastel

推薦故事系列中心頁

威斯康辛州斯洛斯皮特裡的謠傳開始成真,而這時有一段新的故事正要進城。Site-87第二陰暗的十月成為一盞閃耀明亮的聚光燈,照亮由人物主導推動的一齣齣恐怖喜劇。
 
作者 EstrellaYoshte
譯者 EmptyName723

SCP-5646

Dougherty: 那亞利桑那州呢?肯定會記得這個的。
Halliburton: 嗯?關於它啊?那是個爲旅行劃上句點的好方法。那天天氣很好。我們還去了看漩渦,順帶一提我覺得它很有可能是個異常。你應該要抽個時間去看看它。
 
作者 Billith
譯者 k1s10r0db00ne

SCP-6786

SCP-6786用以表示該容器自身以及其內部的任何事物,該異常一直都被保存於Site-Log(-1)內。
 
作者 TheyCallMeTim
譯者 Pao Mian

本周藝術作品

aw.girl

「祭典、好玩嗎?」

「祭典、好玩嗎?」

 
繪者 rui_takerui_take
搬運 Dr V ValentineDr V Valentine

HjzEE2a.png

某人的夢

某人的夢

 
繪者 relena_xdrelena_xd

Archon.png

Golem的ACS分級圖標 & 部門Logo頁面

Golem的ACS分級圖標 & 部門Logo頁面

 
繪者 GreenGolemGreenGolem
譯者 Pao MianPao Mian

本周焦點成員

迷你專欄 異界探險筆記


許多擁有令人嚮往的檔案作品裏頭除了鋪陳的恰到好處的檔案描述外,還附有了一長篇的探索紀錄或附錄,而這樣的異界遊歷紀錄,紀錄本身不一定要有科學性、專業性的描述,可以根據撰寫者的個性大幅的更改故事的著眼點,這些特性很適合讓創作者拿來利用,你能藉此跳過自己不熟悉的專業領域或留白畫出給讀者自由想像的空間

可以更直接的將情感故事與異世界做結合,甚至是去延伸作為一整個是界線的設定,像大正150的SCP-2061-JP就是一個滿典型的例子。作者讓主角直接地進入了大正150世界的百貨公司之中,比起嚴謹的科學性敘述他更快也更直接地把畫面傳達給讀者,讓讀者知道那是怎麼樣的地區/世界。

所以這種異界探險筆記方式滿推薦給想要開創異世界是一個很不錯的好方法,類似的項目還有SCP-3001 - 紅色現實SCP-342 - 車票之旅等等,大家可以多多的去閱讀感受作者傳遞的世界與構築世界的方式等等。

主講 / vomitervomiter
整理編撰 / Dr V ValentineDr V Valentine


迷你專欄的相關主講主題募集中,你有想知道的創作方向?想更了解的項目?甚至是想跟大家一起談論的主題?都歡迎您透過我們的各大聯絡窗口與我們聯繫。

編輯推薦回顧

本周回顧翻譯

金恩公司紡織廠

他抓住了那個孩子,把孩子的一隻手綁在我工作的那台紡紗機的線軸上。他叫我回去工作──我告訴他這樣我會弄傷那孩子。他告訴我回去工作,如果我不去,他們就會開除我。

一開始,我以為我只會扯斷他的手指。他因為皮膚剝落而嗚咽,那只是小小燒傷。但他意識到他的手不會脫開,而是被拉入機器中,解開然後捲上了線軸。那……沒有血,我無法解釋。就好像他是以布製成的一樣,可是是有一塊有眼睛和鮮血的布。當我拆解到他的嘴部時,他停止了尖叫,但我不能停,因為我如果我停下,他們會扣我薪水。

本周回顧原創

SCP-ZH-193 人與電與鋼之一族

除了智人遺骸墳墓以外,基金會在深入探索後分別發現了兩個集中堆置相似於SCP-ZH-193-B之電晶體主機以及相似於SCP-ZH-193-C之蒸汽機關的集中棄置地。在電晶體主機之集中棄置地裡,數十個黑色的立方體主機彼此相接,並且最終都與一型制明顯不同的球狀主機相接。

該球狀主機使用了未知的惡魔學原理至今仍能持續供電,但電晶體組件與其他立方體主機都一樣被侵蝕風化至無法正常儲存資訊的程度。雖然被雨水沖刷而無法看清,但還是能勉強辨識球狀主機上印有普羅米修斯實驗室的徽章。

編輯部資訊

連結

加入編輯部

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

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