Kính Màu
Kính Màu
Byㅤ Suzu-HitsujiSuzu-Hitsuji
Published on 24 Sep 2022 16:01
đánh giá: +2+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á: +2+x


glass.png

"Người lạ, tin tốt này."

Cái xác khô của một người đàn ông được quấn vào phần còn sót lại của chiếc váy bà bầu đã bắt chuyện với ngài Filia. Một thứ gì đó đột ngột phá tan sự im lặng kia khiến ngài ấy giật mình, ngài ấy chộp lấy thanh kiếm rồi lại thôi.

Có vẻ người đàn ông kia đang ngồi dựa vào ghế, dáng vẻ như chểt luôn rồi vậy. Mắt ông ta trong như thủy tinh, trông chẳng khác gì đôi mắt vô hồn, u ám của búp bê. Người ông ta co rúm lại, da căng lên đến lộ cả xương rồi rũ xuống, nhìn chẳng khác gì tấm khăn trải giường được treo trên sào phơi vậy. Ông cứ thuyết phục bản thân rằng Ngài Filia sẽ chỉ đi qua ông ta thôi.

"Thấy thích không?"

Ngài Filia nhìn về phía cửa sổ kính màu sau lưng, nhìn nó rất trang trọng, tới nỗi khó chịu. Ngài suy ngẫm, suy ngẫm về thời gian con người đã bỏ ra để tạo ra nó, khi ấy thời gian trôi như chậm lại vậy, tác phẩm này đã phải có biết bao nhiêu mạng người làm ra. Ngài gật đầu.

"Tốt, tốt lắm."

Giọng ông khản đặc, cồn cào trong lòng vì thứ bệnh tật đáng lo ngại kia. Rồi đột nhiên, ông ta ho dữ dội, đến khạc ra cả máu. Xong ông thở dốc, như thế sắp không còn được thở nữa, ông vuốt ve và ôm chặt lấy lồng ngực trong vô vọng.

Đầu ông già gục xuống, người nghiêng sang một bên. Rồi vai ông chạm đất, tiếng xương vỡ vang vọng trên nền đất đá, kèm theo đó là một sự im lặng tới đáng ngờ.

Giờ thì, ông đã thực sự ra đi.


death.png

Công việc của Ngài Filia là theo dõi cái chết.

Việc này đã dẫn ngài tới nơi biên giới của thế gian, nơi tro bụi phủ đầy lên những thành tựu của nhân loại. Một nơi mà con đường trên Trái Đất đã thu hẹp lại, mang theo một mùi ẩm mốc và phát triển quá đà kia. Nơi có sự hiện diện của các lữ khách nhưng lại không có lấy một thương gia.

Hôm nay thật tĩnh lặng làm sao. Ngài nhận ra rằng, nhà thờ đã cai trị hòa bình. Niềm đam mê du lịch cũng đã phải nhường chỗ cho giáo lý rồi ngài bắt đầu thấy những kí ức về Thánh Lễ trong ngày Chủ Nhật, nơi mà hàng ngàn người chắp tay lại, vang vọng nơi đó là bài đồng ca của trẻ em, được chỉ dẫn bởi một người trông nom đầy khắc kỉ.

Ngài nghĩ rằng. Chết đi tại nhà thờ là không còn gì bằng rồi.

Nhưng tất nhiên là ngài vẫn còn việc phải làm. Đâu thể cứ trông chờ vào việc Chúa sẽ làm hết hộ mình chứ. Chúng ta phải tự kiếm được tiền, lương thực bằng toàn bộ sức mạnh của Ngài ấy. Ngài Filia phải chuẩn bị cái xác và vài cái khác nữa.

Ngài Filia lấy ra một cái chai nhỏ, có chứa hỗn hợp bao gồm nước thánh, bạc và các kim loại đã được chọn lọc. Khi bắt đầu trộn thứ này, ngài đã giữ lại một ít để đề phòng, vì ngài không chắc rằng một thứ tiện lợi như thế sẽ thực sự tồn tại. Một vài cuộc thử nghiệm ngắn với một mảnh da của ma cà rồng, thịt thối rữa đã bị cứng và mảnh lông bị cháy của người sói. Ngài say sưa với kết quả đang diễn ra.

Ngài cẩn thận đặt cái chai lên hộp sọ của người đàn ông, để vào chỗ lõm để chất lỏng đó đọng lại. Từng giọt thấm vào hốc mắt, để lại một cặn muối nhỏ. Không phản ứng. Và thật đáng kinh ngạc làm sao, ông ta hoàn toàn là con người. Và ngài tự hỏi rằng làm thế nào mà ông ta có thể một mình sống sót được lâu đến thế.

Kìm nén sự bất mãn, ngài nhặt cái xác lên và thấy cân nặng của nó không hề cân xứng, đó là dấu hiệu của bệnh tật hoặc bị suy dinh dưỡng. Ngài mang ông ta tới Bệ Thờ Chúa Tể. Chúa biết nhiệm vụ của mình là gì, và chỉ cần giúp đỡ người anh em đồng đạo là đã đủ để chấp nhận rồi.

Và người này đã chết đi thế nào chứ?


truth.png

Con dao lễ trượt trên xương ức, biến bộ da trở nên mong manh như cánh hoa đang nở. Sự tự tin là chìa khóa của công việc khám nghiệm tử thi này và Ngài Filia vốn đã quen với công việc mổ xẻ này từ lâu. Với tầm nhìn không hề bị che chắn bởi khung xương sườn, ngài nắm chắc phần xương to nhất rồi ấn vào trong, bẻ gãy phần tủy giòn giòn. Ngài bỏ xương ra khỏi cơ thể, một mạng lưới xương khớp.

Đầu tiên, là phổi.

Bị nhuốm đen. Teo lại. Xanh xao.

Hậu quả của làm việc trong hầm mỏ. Với tầm vóc hiện tại của ông ta thì cũng khá ngạc nhiên đấy. Chắc là hít phải quá nhiều bụi than đã hủy hoại sức sống của ông này. Mà cũng lạ là tình trạng này ở các thợ mỏ cũng không phổ biến gì cho cam. Đa số toàn chết vì sập mỏ, bị thiêu chết vì bụi than hoặc bị giết vì những con quái vật không hay gặp.

Tay.

Ngài nhận ra một sự khác biệt khi liếc nhìn thấy một sự mềm mại. Bàn tay của ông già này rất mịn, không có vết chai, nếu tính đến nghề nghiệp trước kia của ông ta thì rất kì lạ. Ngài chạm vào lòng bàn tay ông ta, vân tay không có. Da sờ như giấy nhám, đã bị mài phẳng, tinh xảo như một phiến đá trống trơn.

Thú vị đấy. Tại sao nhỉ?

Theo bản năng, ngài véo da và ngửi mùi, đã có sự liên kết rồi. Mùi thoang thoảng như mùi chất khử trùng vậy.


glass2.png

Đúng như ngài nghi ngờ. Một tấm vải nỉ làm từ da cừu. Nước ấm trong bình đồng. Nhiều loại dầu thơm và thảo mộc quý hiếm. Một chiếc bồn tắm gỗ, ẩn giấu trong góc nhà thờ, khuất bóng dưới bộ giàn giáo.

Ông già này đã từng lau cửa số kính màu.

Dù nơi này có nguy hiểm đến mấy thì có vẻ ông này vẫn sẽ không dừng lại, tháo từng mảnh cửa sổ, thận trọng cẩn thận để không làm hỏng kính. Nếu đặt câu hỏi về mục đích của ông thì sẽ dại dột lắm, chỉ là để dành được quyền được lên thiên đàng ở với Chúa thôi. Nhưng có lẽ mục tiêu ông bắt đầu làm việc này không phải là như thế.

Ngài Filia hi vọng đó không phải là nghĩa vụ quên mình .

Sau khi người đàn ông được chôn cất và dựng bia mộ. Ngài Filia nhìn lại nhà thờ nốt lần cuối, rồi đi về phía tây, tiến về phía mặt trăng lặn xuống.


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