Scp 7090 Offset 0
Scp 7090 Offset 0
By: Flips_0122Flips_0122
Published on 29 Oct 2022 01:29

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

star.png

SCP-7090 endoscopic image capture./SCP-7090の内視鏡による撮影画像。

Item #: SCP-7090

アイテム番号: SCP-7090

Object Class: Euclid

オブジェクトクラス: Euclid

Special Containment Procedures: SCP-7090 is to be housed according to standard protocols for potentially radioactive humanoids. Periodic medical examination is permitted for the purpose of data collection.

特別収容プロトコル: SCP-7090は潜在的放射性ヒト型実体に対する標準プロトコルに則って収容されます。データ収集の目的で、定期的な健康診断が許可されています。

Description: SCP-7090 is a 27 year old human female whose cranial cavity contains an object resembling a miniature star.

説明: SCP-7090は頭蓋腔の内部に小型の恒星に類似した物体が存在する27歳の人間女性です。

The anomaly was discovered when SCP-7090 presented itself to a medical facility suffering symptoms of a mild thalamic stroke. Initial imaging results were assumed to be due to malfunctioning equipment. When further imaging sessions1 returned abnormal results, physicians began to discuss investigative surgery. By this time, a Foundation plant had become aware of the situation and SCP-7090 was taken into Foundation custody with facility personnel amnesticized as appropriate.

SCP-7090は本人が軽度の視床梗塞の症状を訴えて医療機関に来院した際に発見されました。最初に行われた画像撮影の結果は機材の誤作動によるものと判断されました。以降の画像化セッション2においても異常な結果が出力された時点で、医師陣は検査手術の検討を開始しました。この時点までに財団の諜報員が状況を察知し、SCP-7090は財団に拘留され、医療機関の職員には必要に応じて記憶処理が施されました。

The Foundation's own medical imaging returned similar abnormal results; as such, the decision was made to proceed with surgery. At first, SCP-7090's skull appeared to contain a featureless black void. However, endoscopy revealed a small but intense source of broad-spectrum electromagnetic radiation3, located slightly toward the front of the cranium. No evidence of this radiation was detectable from outside the cranial cavity, including from outside the surgical aperture.

財団が保有する医用イメージングにおいても、同様の異常な結果が出力されました。したがって、手術を進めるという決断がなされました。当初、SCP-7090の頭蓋骨の内部には単調な黒色の空間が存在しているように思われました。しかし、内視鏡検査によって、頭蓋のやや前寄りに小規模ながら非常に強い広帯域の電磁放射線源4が確認されました。開頭style="display: none;"]]

Scp 7090 Offset 0
By: Flips_0122Flips_0122
Published on 29 Oct 2022 01:29

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

[[/div]]
star.png

SCP-7090 endoscopic image capture./SCP-7090の内視鏡による撮影画像。

Item #: SCP-7090

アイテム番号: SCP-7090

Object Class: Euclid

オブジェクトクラス: Euclid

Special Containment Procedures: SCP-7090 is to be housed according to standard protocols for potentially radioactive humanoids. Periodic medical examination is permitted for the purpose of data collection.

特別収容プロトコル: SCP-7090は潜在的放射性ヒト型実体に対する標準プロトコルに則って収容されます。データ収集の目的で、定期的な健康診断が許可されています。

Description: SCP-7090 is a 27 year old human female whose cranial cavity contains an object resembling a miniature star.

説明: SCP-7090は頭蓋腔の内部に小型の恒星に類似した物体が存在する27歳の人間女性です。

The anomaly was discovered when SCP-7090 presented itself to a medical facility suffering symptoms of a mild thalamic stroke. Initial imaging results were assumed to be due to malfunctioning equipment. When further imaging sessions5 returned abnormal results, physicians began to discuss investigative surgery. By this time, a Foundation plant had become aware of the situation and SCP-7090 was taken into Foundation custody with facility personnel amnesticized as appropriate.

SCP-7090は本人が軽度の視床梗塞の症状を訴えて医療機関に来院した際に発見されました。最初に行われた画像撮影の結果は機材の誤作動によるものと判断されました。以降の画像化セッション6においても異常な結果が出力された時点で、医師陣は検査手術の検討を開始しました。この時点までに財団の諜報員が状況を察知し、SCP-7090は財団に拘留され、医療機関の職員には必要に応じて記憶処理が施されました。

The Foundation's own medical imaging returned similar abnormal results; as such, the decision was made to proceed with surgery. At first, SCP-7090's skull appeared to contain a featureless black void. However, endoscopy revealed a small but intense source of broad-spectrum electromagnetic radiation7, located slightly toward the front of the cranium. No evidence of this radiation was detectable from outside the cranial cavity, including from outside the surgical aperture.

財団が保有する医用イメージングにおいても、同様の異常な結果が出力されました。したがって、手術を進めるという決断がなされました。当初、SCP-7090の頭蓋骨の内部には単調な黒色の空間が存在しているように思われました。しかし、内視鏡検査によって、頭蓋のやや前寄りに小規模ながら非常に強い広帯域の電磁放射線源8が確認されました。開頭手術による開口部の外部を含め、頭蓋腔外部においてこの放射線の兆候は検出できませんでした。

After subsequent investigations confirmed no further anomalous properties, SCP-7090 was moved to its current containment location for long-term monitoring.

その後の調査でそれ以上の異常性が確認されなかったため、SCP-7090は長期観察のために現在の収容地点に移されました。







特に明記しない限り、このページのコンテンツは次のライセンスの下にあります: Creative Commons Attribution-ShareAlike 3.0 License