| 釣魚評議会 |
Byㅤ  Witherite |
| Published on 01 May 2022 01:45 |
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: -20em;
width: 17.75em;
height: 100%;
margin: 0;
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;
}
}
}
エマは退屈していた。
彼女は溜息を漏らし、穏やかに揺れ動くウキを目で追っていた。ウキはさざ波が通り過ぎるたび浮き沈み、波は彼女や他の人が何時間も座っているいくらか年季の入った釣り船にそっと打ち付けていた。
エマは同僚になるはずの人たちを思い起こし、あたりを見まわした。その人たちも釣り竿に乗りかかり、背を丸めて座っていた。エマのものと似たウキが十数ほど船のまわりでプカプカとしていた。ときおりすり足やせきが聞こえ不気味な沈黙を破るばかりだった。
エマは帽子を深くかぶり、ここに来ることになってしまった下手な決断について考えた。
エマは、サイト-184の異常美術・工芸品部門への異動を受け入れたとき、他の財団スタッフとの交流活動に参加するよう勧められた — 「彼らがあなたと知り合い、あなたが違う施設の文化に慣れるための方法です」と、財団キャリア相談センターのいつも陽気な女性は彼女に言っていた。
そのような活動のなかでも彼女が楽しみにしていたものは一握りしかなく、その一つは部門で年一回開かれる「ファクト・オブ・フィクション」イベントだった。写真、レプリカ、ときおり本物のアーティファクトが展示され、選抜の職員がそのオブジェクトの起源、異常性質、使用法について、物語や説明 — そのうち1つだけが真実だ — を伝えるのだ。参加者は正しいと思ったものを選び、そして祝宴の後に、一番の正解者が発表された。
だがそのイベントはまだ数か月も先のことであり、それで彼女は — その時点において — 最もいい選択肢に思えるもので妥協した。それは、釣魚評議会との小旅行だった。
実のところ、エマは以前に何度か釣りに行ったことがある。彼女は釣り竿を持っていなかったが、それは問題ではなかった — 正直なところ、彼女は借りた釣り竿を使うことはめったになかった。彼女にとって釣りとは、友人たちと船の上で飲み、くつろぎ、日光浴やおしゃべりを楽しむ口実としてするものだった。彼女の最も好きな釣りの思い出では、魚はほとんど重要ではなく、しかし彼女の当時の破局や祖母の死を彼女を昔も今も心から大切にしている人たちと深く話し合えたことがとても重要であった。
釣魚評議会ではそのようなことはなかった。カレンダーの予定を受け取ったとき、エマはこのことがはっきりわかった。彼女にとっては、午前6:30は朝食にはあまりにも早すぎ、ましてや船着き場まで足を運ぶのはなおさらだった。
2つ目にわかったことは、彼女があまりにも準備不足であることだった。カーボンファイバーの釣り竿やモノグラムのついたタックルボックスが見え、集まった人たちの取り組みが伝わってきた。彼女は親しみやすそうな人がいないか見まわし、責任者らしき中年の男性に目が留まった。適した装備が足りない理由に彼女が最近再配置されたことを伝えると、彼女は近くの人たちから横目で見られた。その男性は待機している船の操舵室にある物入れをざっと見ると、年季が入り使い古された釣り道具の取り合わせを持ってきて、それを彼女に押し付けた。エマが感謝をつぶやくと同時に、彼は集団にこう伝えた。「これでいいでしょう。さらに問題がなければ皆さん船に乗ってください。明かりを無駄にしたくはないでしょう」
彼らが無駄にしてしまう明かりとは何なのか、エマはよくわからなかった。太陽は水平線の上でいまだ頂点に向かい登っていたからだ。
その後、長い静かな旅路が続き、船はゆっくりと進み、そして止まった。錨が海底に降ろされガチャガチャと鳴り、そして釣り糸が照り返す海原の青に投げ入れられシュッという音の合奏が響いた。
彼女は他の釣り人たちと歓談し知り合う機会を望んだが、沈黙が場を支配していた。彼女は何度か勇気を出して近くの人に話しかけたが、そっけない反応で答えられ、船全体からにらまれてしまった。他の誰も会話する目的で来たわけではないと、彼女はすぐに理解した。
そのときから、何事もないまま数時間が経った。
エマは変わらない日の思い出に没入し、釣り竿のわずかな引きを見逃すところだった。彼女は姿勢をただして驚き、朝の間のアドレナリンが血管を駆け抜け危うく船から飛び出しそうになった。彼女は手でハンドルを握りリールを巻き始めると、何か引っ張って彼女に抵抗するものを感じた。
エマの後ろでは他の釣り人たちが振り向き注目していた。
彼女はそれに気づかず、その注意は完全に、全くもって、魚に向けられていた。彼女は生き生きとし、意志と機知の戦いに巻き込まれ、何としても勝とうとし、魚が彼女に無駄な格闘をするたび弱まっていくのを感じ — そして釣り糸はたるんだ。
魚は再び自由になり、彼女自身は疲れ果て胸が高鳴った。エマは席に座り込み、太陽を仰いだ。
しばらくして彼女が船の周りを見まわしたとき、そこはまるで何も変わっていないようだった。彼女は溜息をつき、釣り糸を巻き切り、再び向こうに投げ入れた。
残りの日中の時間は長いようには思えなかった。船のエンジンがかけられ、釣り人たちは最後の釣り糸を引き寄せた。少しばかりの獲物が船に組み込まれた生け簀のなかを泳いでいた。釣れた人たちは、時間をかけてそれぞれのウロコの付いたはためく魚の重さを計り写真を撮ったあと、それらを海に放り戻した。
帰りの船はゆったりとしたもので、エマは船の穏やかな揺れにリラックスしていた。彼女が船着き場に下りたとき、ある人 — 若い女性が、手を伸ばしほほ笑み、エマもほほ笑んだ。
「うまくやりましたね、なかなか大変だったでしょう」彼女はエマと雑談を続けながら、地上の感覚を取り戻した。
「思っていたものと違っていたならごめんなさい。ここのたくさんいる年寄りたちはかなり釣りにうるさくて。知り合いになればいい人たちなんですよ」
「もし来たければ、実は私たちの何人かは一緒にご飯を食べる予定なんです。私はサラです、ところで。サラ・コラートです」
エマはその申し出のあまりの魅力と、サラが心から受け入れようとしていることに驚いた。
2人は印象的な建物に向かって一緒に歩きながら、雑談をした。そうするなか、エマは6:30に起きるのは毎回はお断りだが、たまにならばそんなに悪くはないのかもしれないと思うようになった。
