Mùi Sợ Hãi

Mùi Sợ Hãi
Bởi RigballRigball
Đăng vào 09 Jul 2022 09:42
đánh giá: +7+–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) {
 
    .mobile-top-bar {
        display: block;
    }
 
    .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!important;
        position: fixed;
        top: 0;
        left: -19em;
        width: 17em;
        height: 100%;
        overflow-y: auto;
        z-index: 10;
        padding: 0.3em 0.675em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.5s ease-in-out;
    }
 
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        z-index: 10;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    .close-menu {
        margin-left: 19em;
        opacity: 0;
    }
}

đánh giá: +7+–x

Điểm-41-VN, 2 giờ sáng, 13/01/20XX

Trời vẫn còn chưa sáng. Mọi ngóc ngách của Điểm được bao phủ bởi một màu đen hoắm của màn đêm sâu thẳm. Bóng tối xưa nay vẫn là một tên khổng lồ to xác mà nhân loại phải kiêng dè. Hắn chỉ nhìn chằm chằm vào con người, nhưng lại có một uy lực kinh khủng khiếp, khiến kẻ nào rơi vào vòng tay hắn đều phải đặt cược số mạng vào may mắn. Nhưng đâu ai biết, Tổ Chức lại là bạn bè thân thiết với tên bất hảo này. Nếu người ta có câu "Như hình với bóng", thì Tổ Chức lại là những thứ kinh khủng ẩn sâu trong lớp "bóng" đó. Những thứ mà một khi đã xổng ra ngoài, hậu quả sẽ rất khủng khiếp.

Trên bàn làm việc trong văn phòng Giám đốc, một gã đàn ông gầy gò, da nhăn nheo đang lục lọi như một con chuột trong bếp. Tổ Chức có thể có gián điệp ở khắp mọi nơi, nhưng họ cũng không phải là những kẻ duy nhất có ý tưởng như vậy. Nếu nói nơi đây chỉ có một "con sâu" thì là đang nói quá.

"Được rồi, thẩm quyền Cấp 4, xem nào…" Gã đàn ông lẩm bẩm trong khi đang ngồi bấm thiết bị cầm tay của mình. Đây là công sức nhiều tháng trời luồn lách vào trong hàng ngũ Tổ Chức, chắc chắn hắn phải moi được thông tin gì đó. Hắn không thể để thời gian đó trở thành công cốc được.

"Dừng lại được rồi đấy, con trai." Một giọng nam trầm cất lên sau cánh cửa vừa bật mở ra. Ánh sáng mờ của đèn pin mà đối tượng kia đem theo chỉ đủ làm lóe lên một phần cơ thể ông ta, nhưng lại soi rõ bộ dạng lén lút của gã. Gã có thể ngửi thấy một mùi khói thuốc lá nồng nặc, nhưng chẳng hề nhìn thấy một dấu hiệu nào của một điếu thuốc từ phía đối phương.

Cách

Tiếng súng lên đạn. Tất nhiên rồi, phải là một khẩu súng. Hắn biết nếu hắn chết ở đây thì chỉ có thể là do nhận thức độc trong hồ sơ mà hắn cố truy cập, hoặc bằng họng súng của ai đó phát hiện ra hành động bí mật của hắn. Nhưng sao lại là tên đó, trong bao người chứ?

"Tôi cũng không ngờ lại là cậu đâu, Huỳnh ạ. Cậu là một nhân viên tốt, đã giúp đỡ tôi rất nhiều trong thời gian dài làm việc tại đây. Cậu thân thiện với mọi người xung quanh, kể cả những dị thể. Tôi đã từng nghĩ cái nơi quái quỷ này sẽ khiến con người lương thiện như cậu phải bỏ việc sau một tháng cơ. Giờ thì tôi hiểu sao cậu gắn bó với nó đến thế rồi." Người đàn ông cầm đèn pin nói với một giọng thất vọng. Những năm tháng làm việc tại Điểm-41-VN thực sự sẽ khiến cho những con người bình thường phát ốm, tiếng la hét của "chúng" sẽ khiến họ phải nôn thốc tháo mỗi lần thực hiện nhiệm vụ, những con quái vật mà người ta trấn an con họ rằng chúng không tồn tại dưới giường đều hiện diện nơi đây, những phương thức quản thúc mà khiến những tổ chức nhân đạo phải vào cuộc nếu họ phát hiện ra…

"Ông và lũ thượng cấp là đồ thú vật, chốn khốn nạn này làm tôi ghê tởm hơn bất cứ tên mọt sách nào từng xin chuyển công tác. Những hành động ghê tởm dưới danh nghĩa "bảo vệ" đó, tôi khinh!" Gã đàn ông kia như ở bước đường cùng, buông ra những lời cay nghiệt cuối cùng trước khi đón nhận số phận không thể trốn thoát của mình.

"Vậy là đến lúc đó rồi à… thôi được, coi như đây là quà chia tay đi." Người kia nói rồi ném một thứ gì đó như một tập tài liệu lên trên bàn làm việc.

Gã đàn ông cầm vội thứ vừa được ném ra trước mặt.

"Sao lại cho tôi biết cái này?" Gã đàn ông thắc mắc.

"Biết sao tôi phát hiện ra cậu không? Cậu quá vâng lời. Cậu chỉ hoạt động theo những gì mà cậu nghĩ người ta muốn cậu làm. Đúng, ở nơi khác thì cậu có thể dễ dàng moi móc thông tin, còn ở đây ư?" Giám đốc Bale ngừng một lúc. Tiếng bóp cò cất lên.

"Pằng!" Ông cất tiếng súng nổ bằng miệng.

"Tôi sẽ không chiều theo ý cậu đâu. Đưa hắn đi, Dave."

tác-giả
sửa đổi trang: 36, chỉnh sửa lần cuối: 04 Jan 2023 15:22
Chỉnh sửa Đánh giá (+7) Tag Bình luận (0) Lịch sử Tệp In Công cụ trang + Lựa chọn
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