SCP-4420

SCP-4420
Tác giả: SCPFoundationVietnam
Đăng vào 10 May 2021 01:46

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

/* 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-x: hidden;
        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;
    }
    }
}

▷ 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-4420
Tác giả: Lt Flops
Xuất bản vào ngày 20 tháng Tám 2018

> Phiên bản Audio <

 

SCP-4420: Khát Vọng của Củ Khoai Tây
Tác giả: Lt Flops
Xuất bản vào ngày 20 tháng Tám 2018

Bài viết này nằm trong canon Phong Thần.

---

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

---

{$comments2}

C.H.T.G.

{$doesthisfixthebug}

HIỆN TÀI LIỆU LƯU TRỮ

SCP-4420

MÃ VẬT THỂ: SCP-4420	CẤP 2/4420
PHÂN LOẠI QUẢN THÚC: euclid	GIỚI HẠN

PHÂN LOẠI QUY MÔ: keneq

---

SCP-4420. Ảnh được chụp cách dị thể 50 mét.

---

Quy trình Quản thúc Đặc biệt: SCP-4420 được quản thúc cách Khu-82 một khoảng cách 150 m bên trong một chiều không gian vi lượng nhân tạo, chứa trong Buồng Quản thúc Tạm thời #819. Các nhà nghiên cứu đã cài đặt một Máy Ổn Định Địa Hình Scranton-Marlowe (STMS) để bảo toàn sự ổn định về không gian trong buồng chứa.

---

Mô tả: SCP-4420 là một củ khoai tây Idaho đỏ với khối lượng hiện tại là 400,000,000 kg và kích thước bề ngoài 150 x 65 x 55 (m). SCP-4420 thể hiện những đặc tính hủy hoại sau:

1. SCP-4420 hồi phục lại 5% diện tích do lượng nước bay hơi 2 lần mỗi tuần bằng cách sản sinh ra vật chất khoai tây cứng. Trong khi quá trình này diễn ra, nước uống của một người dân bất kì thuộc bang Idaho chuyển hóa thành một thức uống khoai tây giàu tinh bột. Người uống nhận được khả năng giao tiếp với khoai tây trong khoảng 3 đến 10 tiếng sau khi uống.
2. Khi SCP-4420 tiếp xúc với tia phóng xạ ánh sáng, SCP-4420 sẽ sản sinh ra một lượng vật chất khoai tây bất kì. Vật chất mới liên quan tới khoai tây theo nhiều khái niệm, trực tiếp hoặc gián tiếp. Vật chất mới phát triển cùng với SCP-4420, liên quan tới nhau theo một số cách bí truyền đi quá hiểu biết về nông nghiệp của con người. Một số dạng vật chất bao gồm:
   • Bất cứ 1 trong 5,000 loài khoai tây được trồng khắp thế giới.¹
   • Một số dạng đồ ăn đã chế biến từ khoai như khoai tây nghiền, khoai thái lát, khoai tây chiên, bim bim khoai, hay sa lát khoai.
   • Quán quân Nhảy Bao Bố Giải Trẻ hạt Idaho năm 1996, Michelle Brown, 6 tuổi.
   • Một loài Dế Jerusalem (Có tên gọi thông tục là Bọ Khoai Tây) được làm bằng khoai lang. Những thực thể đã xâm chiếm 8% diện tích của SCP-4420 vào thời điểm hiện tại.
   • Sự buồn chán lan truyền khắp 25% nhân sự trong bán kính 5 km.
3. SCP-4420 miễn nhiễm với sự thối rữa. SCP-4420 hút lại tất cả cơ thể hữu cơ không mong muốn gần như ngay lập tức và thay thế chúng bằng vật chất khoai tây tươi sống.
4. SCP-4420 tiêu thụ tất cả đồ ăn và rác thải hữu cơ trong phạm vi 20m. Vật chất hữu cơ đi vào khu vực này sẽ biến thành một bướu khoai tây với khối lượng tương tự và dịch chuyển tức thời vào bên trong SCP-4420. Vật chất hữu cơ SCP-4420 có thể tiêu thụ bao gồm những động vật nhỏ khối lượng lên tới 5 kg.

Vào thời điểm tài liệu này được viết, SCP-4420 đã phát triển được 22 năm.

---

Footnotes

1. Bao gồm các loại khoai tây dị thường khác như SCP-3342.

---

CẬP NHẬT

---

I. 10 tháng Năm 2019

Các nghiên cứu viên thực địa phát hiện dung dịch ngoại lai nhiễm một lượng huyễn thuật trong nguồn nước ngầm địa phương. Cơ Quan Chỉ Huy Tác Chiến của Điểm-82 triển khai Chỉ thị 3731-Ov91, yêu cầu quy trình phong tỏa hoàn toàn và tiêu hủy chất lỏng nói trên. Nhân viên an ninh coi quy trình thành công trong vòng một giờ.

Do địa điểm quản thúc dị thể, tuy nhiên, SCP-4420 vẫn chưa được kiểm tra.

Vào 21:51, SCP-4420 hấp thụ các chất lỏng huyễn thuật và trở nên có tri thức trong vòng 32 giờ. Trong khoảng thời gian này, dị thể sở hữu khả năng điều khiển các khối thông tin. Điều này dẫn đến sự phân tán của 362 tin nhắn riêng biệt được gửi tới những nghiên cứu viên trong khu.

Chuỗi tin nhắn hiển thị như sau.

bạn thấy tôi không

nhìn tôi đi, pls

tui bự

nhìn tôi nè

bạn nghĩ tôi có đẹp không

tôi nhìn như thế này thật sao

không thể nào

hình hài của tôi trong mắt bạn như này sao ☹️

bạn không thể nhìn tôi trong bộ dạng này

tôi không đủ tốt đúng không

không đủ tốt cho bạn

làm sao tôi đủ tốt cho bạn được

để tôi yên

tôi là một con quái vật

xin lỗi vì hình hài của tôi như thế này

---

II. 12 tháng Năm 2019

Vào 05:51 AM, 12/5/2013, SCP-4420 ngừng mọi quá trình phát triển dị thường và bắt đầu phân hủy nhanh chóng.

SCP-4420 được tái phân loại thành NEUTRALIZED.

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

Trích dẫn:

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

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

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ệp: tater-tot.png
Tên: Mr. Red Potato.jpg
Tác giả: Tequask
Giấy phép: Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)
Nguồn ảnh: Wikimedia Commons
Ghi chú: Edit bởi Gekkoguy.

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