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: WelpermanderWelpermander
Published on 16 Jun 2022 15:22
đánh giá: +14+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; }
/* 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;
}
 
@media (min-width: 768px) {
 
    #top-bar .mobile-top-bar {
        display: block;
    }
 
    #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;
    }
    }
}

đánh giá: +14+x

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 WelpermanderWelpermander 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ị Linh1và 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



Về Bản Thân


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


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?
WelpermanderWelpermander

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

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.
AzbornAzborn

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

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

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


Nếu không có ngoại lệ được nêu, nội dung của trang này được xuất bản dưới giấy phép Creative Commons Attribution-ShareAlike 3.0 License