Không, tôi nghĩ ra tên ổng trước khi xem Breaking Bad

Không, tôi nghĩ ra tên ổng trước khi xem Breaking Bad
By: Welpermander
Published on 16 Jun 2022 15:22

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: -18rem;
        width: 15.25rem;
        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 BANNER ---- */
 #header,
 div#header{
     background-image: none;
}
 
 #header::before{
     position: absolute;
     width: 100%;
     height: 100%;
     content: "";
 
     background-image: var(--lgurl);
     background-position: center top;
     background-repeat: no-repeat;
     background-size: auto 9em;
     opacity: .33;
}
 
 #header h1,
 #header h2{
     float: none;
     margin-left: 0;
 
     text-align: center;
}
 
 #header h1 span,
 #header h2 span{
   /* Hide the Existing Text */
     display: none;
}
 
 #header h1 a::before,
 #header h2::before{
   /* Style the New Text */
     font-family: "Montserrat", "Arial", sans-serif;
     text-shadow: none;
}
 
 #header h1 a::before{
     position: relative;
     bottom: .15em;
 
     color: var(--titleColor);
 
     font-size: 115%;
     font-weight: 700;
}
 
 #header h2::before{
     position: relative;
     top: .1em;
 
     color: var(--subtitleColor);
 
     font-size: 130%;
     font-weight: 600;
}
 
 #header h1 a::before{
   /* Set the New Text's Content From Variable */
     content: var(--header-title, "SCP FOUNDATION");
}
 
 #header h2::before{
     content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT");
}
 
/* ---- SEARCH ---- */
 #search-top-box{
     top: 1em;
     right: 0;
}
 
 #search-top-box-form input.button{
     margin-right: 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: 100%;
}
 
/* ---- TOP BAR ---- */
 #top-bar{
     right: 0;
     display: flex;
     justify-content: center;
}
 
 #top-bar ul li ul{
     border-bottom: 1px solid hsl(0, 0%, 40%);
     box-shadow: none;
}
 
/* ---- LOGIN ---- */
 #login-status{
     top: 1.1em;
     right: initial;
 
     color: hsl(0, 0%, 87%);
}
 
 #account-topbutton{
     border-color: hsl(0, 0%, 87%);
 
     font-size: 100%;
}
 
/* ---- PAGE TITLE ---- */
 .meta-title,
 #page-title{
     text-align: center;
}
 
/* ---- BREADCRUMBS ---- */
 .pseudocrumbs,
 #breadcrumbs{
     text-align: center;
}
 
/* ---- MOBILE DISPLAY ---- */
 @media (max-width: 767px){
     #search-top-box{
          top: 1.85em;
          width: unset;
    }
 
     .mobile-top-bar{
          position: relative;
          left: 0;
          display: flex;
          justify-content: center;
    }
 
     #login-status{
          top: 0;
          right: 0;
    }
 
     #header .printuser{
          font-size: 0;
    }
 
     #header .printuser img.small{
          margin: 0;
 
          transform: translate(6px, 4px);
    }
 
     #my-account{
          display: none;
    }
 
     #account-topbutton{
          margin-left: 2px;
    }
}

Thông Tin

---

Muốn nghe chút nhạc không?

---

THÔNG TIN KHÁI QUÁT VỀ GIÁM ĐỐC WELLMAN

Tên Đầy Đủ: Cái tên được biến đổi từ user name của tôi Welpermander Paul Alexander Wellman

Chức Vụ: Giám Đốc, Nói thế thôi chứ tôi chẳng biết gì về văn học cả Phòng Ban Văn Học.

Điểm Công Tác: Hehe Điểm của Bou. Điểm-29-VN

Cấp Độ Quyền Hạn An Ninh: Vì Level 5 sẽ thành O5 mất. Không ai muốn sẹp-insợt nghiêm túc của họ "bá" đến vậy cả. Level 4

Giới Tính: Sêm irl.Nam

Ngày Tháng Năm Sinh: Ổn nhất.22/5/1974

Chiều Cao: Tin hay không thì tùy.171 cm

Cân Nặng: Nhưng đây là những "thông số lý tưởng" mà tôi muốn bản thân mình có.78 kg

Tuổi: Tôi phải nghĩ mãi mới tìm ra tuổi cho phù hợp với dòng thời gian của gia đình Wellman.47

Học Vị: Tiến sĩ Văn Học, Thạc sĩ Ngôn Ngữ Học.

Mô Tả: Giám Đốc Paul Wellman là một người dễ tính và hay đùa. Dù ông thường tỏ ra nghiêm túc và không biểu lộ cảm xúc trong hầu hết tình huống, điều này khiến cho những người mới gặp nghĩ ông là người khó gần.

Tiểu sử: Paul Wellman sinh ra tại Colorado, Mỹ, trong một gia đình với cả cha lẫn mẹ đều là nhân sự của Tổ Chức. Dưới sự điều hướng của cả hai, ông tham gia vào Tổ Chức vào năm 1994 và công tác tại Điểm-18 trong 4 năm dưới chức vụ nghiên cứu viên cấp thấp. Vào năm 1998, ông kết hôn với Đặng Thị Linh¹và chuyển công tác đến Vào năm 2000, cặp vợ chồng đã có được một cặp song sinh khác trứng. Họ đặt tên cho hai chị em là Minh Phương và Hoàng Phong. Cả hai sau này đều tham gia vào Tổ Chức qua Dự án Bình Minh. Cả hai hiện đang có chức vụ lần lượt là nghiên cứu viên cấp thấp của Phòng ban Siêu việt học và nghiên cứu viên cấp thấp của Phân khu lan truyền nhận thức . Điểm-29-VN, Việt Nam. Vào năm 2014, ông được thăng chức lên Giám Đốc của Phòng ban Văn học.

---

IT'S FOURTH WALL BREAKIN' TIME

ĐÓNG GÓP CHO WIKI

Dịch Thuật

SCP

Tên SờCờPờ	Đánh Giá	Bình Luận	Ngày Đăng
Đề Xuất của Nagiros	+11	1	15 May 2023 17:11
SCP-6416	+5	1	09 May 2023 15:56
SCP-5861	+5	1	04 May 2023 17:51
SCP-6747	+16	1	04 May 2023 11:32
GÁNH NẶNG ≡ CHỚ PHÁ CUỘC VUI	+12	1	27 Apr 2023 13:48
SCP-7967	+6	1	05 Feb 2023 14:48
SCP-6689	+13	1	27 Nov 2022 18:22
SCP-5492	+4	1	15 Oct 2022 14:16
Đề Xuất Meta Ike	+11	1	28 Sep 2022 16:34
SCP-6036	+4	1	17 Sep 2022 15:24
SCP-6699	+21	1	12 Aug 2022 09:30
SCP-423	+5	1	05 Jul 2022 15:40
SCP-6456	+14	1	02 Jul 2022 01:26
SCP-5576	+4	1	16 Mar 2022 14:26
SCP-6766	+4	4	12 Mar 2022 02:59
SCP-6989	+6	1	06 Mar 2022 15:23
SCP-6186	+6	1	05 Mar 2022 14:28
SCP-6501	+6	1	16 Feb 2022 15:32
SCP-4423	+7	1	09 Oct 2021 05:18

Ngoại Truyện

Tên Ngoài Truyện	Đánh Giá	Bình Luận	Ngày Đăng
HẬU KIẾP CHUYỂN XÀ /// Tổ Chức Hóa Chúa Thiên	+9	1	22 Apr 2023 14:14

Tài Liệu GoI

Tên Tài Liệu GỏI	Đánh Giá	Bình Luận	Ngày Đăng
Xà Duyên \\\ NHÂN CHỨNG	+9	1	23 Apr 2023 15:35

Khác

Nêm	Đánh Giá	Bình Luận	Ngày Đăng
khoảng trắng (HUB)	+9	1	21 Apr 2023 07:19

Sáng Tác

ÉT XI PI

Soon

NGOẠY TRUỴN

TẾT TƯNG BỪNG - MỪNG TỔ CHỨC

With King Pigeon, Irina Bougainvillea, KirQ, Tutel,KH Nam, Nya Piece, Welpermander (tên này viết tệ), Dept, BaDang, Rigball và MI SA.

TẾT

Bình luận: tba

Fun Fact: Tôi trộm cái format này từ Lamentte nhưng giờ mới nhận ra mình không biết cách lồng collapsible trong collapsible.

ded

---

Gỏi

Late

Về Bản Thân

Bạn Muốn Biết Thêm Về Tôi Sao?

Hơi đáng lo ngại nhỉ.Tôi Còn Chẳng Biết Mình Là Ai cơ Mà

I have this tho

Về Bản Thân 2: Pataphysic Boogaloo

---

Vì việc này có vẻ hơi khó quá, và cũng vì tôi hơi lười, nên hay là bạn hãy nói cho tôi biết tôi là người như thế nào, hoặc viết bất cứ thứ gì mà bạn muốn.

mẫu:

> **Tiêu đề lời nói**
>  Lời nói
> @@[[*user tài khoản của bạn]]@@
> @@ @@

Ví dụ
Á à, mày trộm code từ WPthai và Azborn đúng không?
Welpermander

ĐỐT NÓ ĐI
CHÁY! NƠI NÀY PHẢI CHÁY!!
Dept

Xin chào
Có vẻ ông đang làm rất tốt nhiệm vụ của mình nhỉ. Còn tôi thì thất bại, tehe. Ông biết đấy, có lẽ tôi đã luôn là kẻ thất bại.
Azborn

Đính Chính
Ông đang không trộm code của tôi đâu, đó là code của KH Nam. Hehe.
WPthai

Vàng Đen
Bán cũng lắm tiền đây!
Pearl Quan

tIÊU ĐỀ LỜI NÓI
Hêh, ngươi bật cAPSLOCK khi ghi tiêu đề phải không
Jasian_Nguyen

Chú thích

1. Một nghiên cứu viên cấp cao của Phân Khu Ứng Dụng Trí Tuệ Nhân Tạo. Có đóng góp lớn đến Dự án Phát triển Công Nghệ Dự Đoán Lời Nói.