SCP-4031

SCP-4031
Tác giả: King of Chronicle
Đăng vào 27 Mar 2022 14:23

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):

• RSO Component — Rounderhouse

Personal styling themes (which are visual overhauls):

• Magnus Web Format — DrMagnus
• Flopstyle CSS — Lt Flops
• Blankstyle CSS — HarryBlank
• Placestyle CSS — Placeholder McD
• Jakstyle — JakdragonX

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

#page-content .collapsible-block { 
    position: relative;
    padding: 0.5em;
    margin: 0.5em;
    box-shadow: 2px 1.5px 1px rgba(176,16,0,0.7), 0 0 0px 1px lightgrey;
    overflow-wrap: break-word;
}
 
.collapsible-block-unfolded{
    color: black;
    overflow-wrap: break-word;
 
}
 
.collapsible-block-unfolded-link {
    text-align:center;
}
 
.collapsible-block-folded {
    text-align: center;
    color: dimgrey;
}
 
.collapsible-block-link {
    font-weight: bold;
    color: dimgrey;
    text-align: center;
}
 
.addendumbox {
    padding: .01em 16px;
    margin-bottom: 16px;
    margin-top: 16px;
    padding-bottom: 1em;
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
 
.material-box {
    padding: .01em 16px;
    margin-bottom: 16px;
    margin-top: 16px;
    padding-bottom: 1em;
    border: 1px lightgrey solid;
    box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.16);
}
 
.material-box blockquote {
    border: 1px double #999;
}
 
.wiki-content-table {
    width: 100%;
}
 
.addendumbox blockquote {
    border: 1px double #999;
}
 
.addendumtitle {
   opacity: 0.8;
   margin-bottom: 10px;
   color: #b01;
}
 
.maintitle {
   margin-bottom: 10px;
   color: black;
}
 
.scp-header {
    text-align: center;
    font-size:x-large;
    color:#b01;
}
 
.addenda-header {
    width: 100%;
    border-bottom: 2px black solid;
    color: black;
}
 
.scp-info {
    display:flex;
    justify-content:space-between;
    font-size:large;
}
 
.scp-info-box {
    display:flex; 
    justify-content:space-between;
}
 
.object-info {
    color:black;
    align-self: flex-end;
    font-size: large;
}
 
.title-style {
    opacity: 0.8;
    margin-bottom: 10px;
    color: #b01;
    font-size: large;
    text-decoration: underline;
    font-weight: bold;
}
 
.update-div-empty {
    text-align: right;
    font-size: x-small;
    color: lightgrey;
}
 
.update-div {
    text-align: right;
    font-size: x-small;
}
 
.computed {
    border: 1px black solid;
    width: 50%;
    display: inline-block;
text-align: left;
    padding: 3px;
}
.computed:before {
    content:"Computed Code";
    font-weight: bold;
border-bottom: solid 1px black;
width: 100%;
}
.rawcode {
    border: black solid 1px;
    width: 50%;
    display: inline-block;
text-align: left;
    padding: 3px;
}
.rawcode:before{
    content:"Raw Code";
    text-align: center;
    font-weight: bold;
border-bottom: solid 1px black;
width: 100%;
}
.codebox {
    display: inline-block;
    width: 100%;
    text-align: center;
}
.yui-navset .yui-nav .selected a em,  .yui-navset .yui-nav a em{
        padding: 0.25em .75em; 
        top: 0px;
        margin-bottom: 0px;
}
.yui-navset .yui-nav .selected a {
     background: gray;
}
.yui-navset .yui-nav .selected {
       margin: 0px;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover, .yui-navset .yui-nav .selected a {
         background: gray;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background: gainsboro;
    text-decoration: none;
}
.yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a {
background-color: none;
background-image: none;
}
.yui-navset .yui-nav a {
background: none;
}
.yui-navset .yui-nav li{
margin: 0px;
}
 
#page-content .licensebox .collapsible-block {
    position: unset;
    padding: unset;
    margin: unset;
    box-shadow: unset;
}
 
.licensebox .collapsible-block-unfolded{
    color: inherit;
}
 
.licensebox .collapsible-block-unfolded-link {
    text-align: left;
}
 
.licensebox .collapsible-block-folded {
    text-align: left;
    color: inherit;
}
 
.licensebox .collapsible-block-link {
    color: inherit;
    text-align: left;
}

▷ Show Code ◁

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
 
/* Centered Header Sigma-9
 * [2021 Wikidot Component]
 * By Lt Flops (CC BY-SA 3.0)
 * Forked from:
   * Penumbra Theme by EstrellaYoshte
 * Also based on:
   * Centered Header BHL by Woedenaz
**/
 
/* ---- VARS ---- */
 :root{
     --titleColor: hsl(0, 0%, 95%);
     --subtitleColor: hsl(60, 62%, 85%);
     --lgurl: url(https://scp-wiki.wdfiles.com/local--files/component%3Acentered-header-sigma-9/logo.svg);
}
 
/* ---- SITE HEADER ---- */
 div#header{
     background-image: none;
}
 #header::before{
     position: absolute;
     width: 100%;
     height: 100%;
     top: .45rem;
     left: 0;
     content: " ";
 
     background-image: var(--lgurl);
     background-position: center top;
     background-repeat: no-repeat;
     background-size: auto 8rem;
 
     opacity: .35;
     pointer-events: none;
     z-index: -1;
}
 #header h1,
 #header h2{
     float: none;
     margin-left: 0;
 
     text-align: center;
}
 
/* Move the Subtitle Down a Smidge */
 #header h2{
     margin-top: .45rem;
}
 
/* Hide the Existing Text */
 #header h1 span,
 #header h2 span{
     display: none;
 
     font-size: 0;
}
 
/* Style the New Text */
 #header h1 a::before,
 #header h2::before{
     font-family: "Montserrat", "Arial", sans-serif;
     text-shadow: none;
}
 #header h1 a::before{
     position: relative;
     bottom: .15em;
 
     color: var(--titleColor);
}
 #header h2::before{
     position: relative;
     bottom: .3em;
 
     color: var(--subtitleColor);
}
 
/* Set the New Text's Content From Variable */
 #header h1 a::before{
     content: var(--header-title, "SCP FOUNDATION");
 
     font-size: 115%;
     font-weight: bold;
}
 #header h2::before{
     content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT");
 
     font-size: 130%;
     font-weight: 600;
}
 
/* ---- LOGIN ---- */
 #login-status{
     top: .5rem;
     left: 0;
     right: initial;
 
     z-index: 1;
}
 
/* ---- SEARCH ---- */
 #search-top-box{
     top: .5rem;
     right: 0;
}
 #search-top-box-input{
     border-radius: 0;
}
 #search-top-box-input,
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-form input[type=submit],
 #search-top-box-form input[type=submit]:hover,
 #search-top-box-form input[type=submit]:focus{
     border-radius: 0;
     box-shadow: none;
 
     font-size: unset;
}
 
/* ---- TOP BAR ---- */
 #top-bar{
     display: flex;
     justify-content: center;
     right: 0;
}
 #top-bar ul li ul{
     box-shadow: none;
 
     overflow: hidden;
}
 
/* ---- PAGE TITLE ---- */
 .meta-title,
 #page-title{
     text-align: center;
}
 
/* ---- BREADCRUMBS ---- */
 .pseudocrumbs,
 #breadcrumbs{
     text-align: center;
}
 
/* ---- MOBILE DISPLAY ---- */
 @media (max-width: 767px){
     #login-status{
         left: 5.15rem;
 
         z-index: 20;
    }
     #search-top-box{
         width: unset;
    }
     .mobile-top-bar{
         position: relative;
         display: flex;
         justify-content: center;
         left: 0;
    }
}

SCP-4031
Tác giả: Lt Flops
Đăng tải vào ngày 27/11/2018

« Bản Âm thanh »

 

SCP-4031: Cứu Rỗi Người Mất Trí Nhớ
Tác Giả: Lt Flops
Đăng vào ngày 27/11/2018

Được viết trong vòng chưa tới 3 tiếng trong Thử Thách Đầu Tiên Của Bright.

---

▸ Tác phẩm khác cùng tác giả ◂

---

{$comments2}

C.H.T.G.

{$doesthisfixthebug}

THÔNG BÁO TỪ BAN QUẢN LÝ HỒ SƠ VÀ BẢO MẬT THÔNG TIN

---

Tệp tài liệu dưới đây được tìm thấy trong một buồng thí nghiệm bỏ hoang tại Cánh Nghiên Cứu Điểm-82.

— Alexis Rose, Trưởng Phòng Ban Số Hóa

SCP-4031

Báo Cáo Vật Thể Dị Thường

Mã vật thể: SCP-4031

Phân loại: Euclid

---

Quy Trình Quản Thúc Đặc Biệt:

N/A

---

Mô tả:

SCP-4031 là một tác nhân gây mất trí nhớ phản ứng nhanh và tác động mạnh không rõ nguồn gốc, thành phần và số lượng.

Các đối tượng sẽ trải qua các triệu chứng như mất trí nhớ ngắn hạn, rối loạn phân ly và dư vị chua ở trong miệng nếu các đối tượng nằm ở trong phạm vi ảnh hưởng của tác nhân qua thị giác, xúc giác, khứu giác, vị giác, thính giác và lan truyền nhận thức. Sử dụng tác nhân sẽ dẫn đến việc nghe thấy một giọng nói thuộc về nam giới. Trong suốt quá trình thẩm vấn, các đối tượng bị phơi nhiễm không thể chứng minh sự tồn tại của giọng nói ấy.

Phụ Lục Đính Kèm

Bản Ghi Thử Nghiệm:

Sau đây là một loạt các tương tác chưa được xác minh với SCP-4031. Các tương tác này vẫn chưa được ghi lại tại thời gian thực; không rõ (các) đối tượng nào đã ghi lại các tương tác này tại các khu vực văn bản. Những nguyên liệu bao gồm các cá nhân khác nhau, vật thể, và cả các khái niệm. Kết quả bao gồm các mức độ thu hồi dựa trên khái niệm.

Nguyên Liệu	Kết Quả Thử Nghiệm
Bánh Nướng Rhubarb Dâu Tây	Bị Lãng Quên.
Bánh nướng	N/A
Kích Thích Vị Giác	N/A
Lưỡi	Bị Lãng Quên.
Cấu Trúc Làm Từ Thịt, Không Rõ Nguồn Gốc	Tiêu Thụ.
Mất Máu	Bị Lãng Quên.
Mất Máu	N/A
Máu	N/A
Máu	Đối Tượng Tử Vong.
Thử Nghiệm Mới	Bị Thu Hồi
Máu	Bị Thu Hồi.
Bút Chì Phòng Thí Nghiệm	Bị Lãng Quên.
D-5549	Bị Lãng Quên.
D-5549	N/A
Nghiên Cứu Viên Sơ Cấp Ortega	Bị Lãng Quên.
Nghiên Cứu Viên Sơ Cấp Ortega	N/A
Nghiên Cứu Viên Smalls	N/A
Ts. Westrin	Bị Lãng Quên.
Ts. Westrin	N/A
Trưởng Dự Án Xiulan	Bị Lãng Quên.
Giọng Nói	N/A

---

Báo cáo điều tra:

Thuốc ký ức Cấp-W¹ đã được cấp cho các nghiên cứu viên nhằm mục đích tiến hành khám xét SCP-4031. Nhân sự đã phát hiện ra một đối tượng nam giới không xác định nằm trên sàn nhà và đã tử vong. Đối tượng ở trong tình trạng tiều tụy và mang các vết cắt trên cơ thể, gãy xương đòn bên trái và mất máu trong khoang miệng.

Đáng chú ý nhất, đối tượng bị chấn thương sọ não.

---

Footnotes

1. Thuốc ký ức: Một loại chất được dùng với mục đích tăng cường ngắn hạn khả năng duy trì ký ức của người sử dụng.

‡ Giấy Phép / Ghi Công

Trích dẫn:

"SCP-4031" bởi Lt Flops, từ Wiki SCP.
Nguồn: http://www.scp-wiki.wikidot.com/scp-4031.

Dịch bởi King of Chronicle, từ Wiki SCP-VN.
Nguồn bản dịch: http://scp-vn.wikidot.com/scp-4031.

Xuất bản dưới giấy phép CC-BY-SA

Để biết thêm thông tin, xem Hướng Dẫn Giấy Phép.
Hiện Giấy Phép

Tên tệp: raisa-body_bg.png
Tác giả: Croquembouche
Giấy phép: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
Nguồn: Image

Tên tệp: raisa-logo100.png
Tác giả: TSATPWTCOTTTADC
Giấy phép: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
Nguồn: Image
Ghi chú: Tạo bởi TSATPWTCOTTTADC với từ hình ảnh của Open Game Art.

Để biết thêm thông tin về nội dung trên wiki, ghé thăm Danh Sách Giấy Phép.