Cuộc Gọi Từ Nhà
Cuộc Gọi Từ Nhà
Byㅤ Suzu-HitsujiSuzu-Hitsuji
Published on 03 Oct 2022 03:00
đá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

Những cơn gió lạnh của cõi Xerophylla thổi qua thị trấn này, vị linh mục khụy gối xuống và đập tay mạnh vào nhà thờ. Tay hắn ta nắm chặt lại, lẩm bẩm cầu nguyện. Đây— và những người dân trong thị trấn cũng sẽ nói thế— là một cảnh tượng rất lạ lùng, vì nhiều năm thờ phụng vị Chúa Tể này, hắn cũng chẳng bao giờ cầu nguyện một cách nghiêm túc và xác tín thế này. Nhưng khi nghe thấy tiếng của những người bị nhiễm bệnh cứ đi đi lại lại từ phía sau cánh cửa thì hắn cũng chỉ có thể làm mọi thứ có thể mà thôi.

Cầu nguyện xong, vị linh mục nhanh chóng đứng dậy và rón rén đi về phía cánh cửa để kiểm tra xem cửa đã khóa chưa để đề phòng việc "có người nhiễm bệnh đột nhập vào chỗ hắn". Ôi trời, những con người bị nhiễm đó, cơ thể họ đã thủng lỗ chỗ từ trên xuống dưới với những vết mụn nhọn chứa đầy mủ vàng sẽ vỡ ra khi chạm nhẹ vào, giọng hét cầu cứu của họ nghe thảm thiết và tan vỡ— những linh hồn tội nghiệp. Trong đầu linh mục chỉ tràn đầy rất nhiều suy nghĩ khi hắn đang kéo khóa cửa, thứ mật ngọt trào ra cổ họng khi hắn rời xa khỏi cánh cửa, thỏa mãn với sự chắc chắn của nó.

"Nhìn thấy một người đang cảnh giác đúng là hay ghê…"

Vị linh mục quay người lại để đón chào người vừa nói câu đó trong căn phòng tưởng chừng chẳng có ai ngoài gã này.

"A-Ai đấy?" Linh mục lắp bắp hỏi, khó chịu đưa tay chống lưng vào cái cọc sau lưng hắn.

Hư vô khúc khích cười, cây gậy vàng gõ xuống đất khi nó đang len lỏi trong màn đêm, âm thanh vang vọng trong phòng, không hề trong tầm nhìn của vị linh mục. "Thưa Cha, đừng sợ. Con có thể cam đoan rằng con không hề có hại."

Vị linh mục gật đầu, miệng khô lại như đống bụi phủ lên bàn thờ vậy. Hắn không biết chắc rằng mình nên làm gì; hắn biết nếu hỏi hư vô về sự xuất hiện kì lạ của nó thì cũng chẳng giúp ích gì nhưng hắn lại rất muốn biết tại sao nó lại đến nhà nguyện của hắn. Tại sao nó lại rẽ vào lề đường để tiến vào ngôi nhà của vị Chúa Tể nhân lành này?

"Thưa quý ngài…" Hắn nuốt nước bọt, giọng run run như vỡ ra, hầu như không thể nghe thấy âm thanh của hư vô bước đi trong bóng tối… nó dễ dàng dễ có thể liên tưởng đến một người đàn ông, cả cơ thể đều phủ một màu bóng và trắng ngà khi tiến về phía hắn, chiếc túi màu da sẫm nhẹ nhàng lắc lư bên hông.

Hư vô— à không— vị Tiến Sĩ nhẹ nhàng nghiêng đầu sang một bên khi tiến thêm bước nữa. "Con đảm vào với người rằng con tự đến đây vì một nhiệm vụ quan trọng. Con đến đây để làm những gì đúng đắn với vị Chúa Tể của người lẫn Chúa Tể của cả trái đất này, một Vị Thần của chính cha. Chỉ có Chúa Tể của cha mới có thể đặt dấu chấm hết cho tai họa, cho thứ bệnh dịch này, để cứu giúp con người, để hỗ trợ vị thần chết nhân hậu kia… nên hãy đừng từ chối chuyến viếng thăm từ thị trấn nhỏ của người."

"Con là…" vị linh mục nuốt nước bọt "Một học giả. Hay là một Tiến Sĩ à."

"Đúng rồi đó, Thưa Cha."

"Ta hiểu rồi." Vị linh mục nuốt ực một cái trước khi nhìn xuống tay người kia, gần như đúng hệt dự đoán, cây gậy đột ngột biến thành một cặp móng vuốt cực kì sắc nhọn khi hắn ta đi vòng quanh Tiến Sĩ, tay nắm chặt lại thành một hình tròn như bóng. "Vậy thì ta khá chắc là con có thể tìm thấy dịch vụ con cần ở chỗ khác, tiến sĩ ạ."

"Thưa Cha…" Tiến Sĩ gọi, mở túi ra, nó kêu lên vài tiếng lách cách, "Con e là cả hai ta đều biết điều nãy cha nói là sai rồi."

"T-Tiến Sĩ," linh mục thì thầm, "Ta không biết con đang nói gì."

"Đừng giả ngơ nữa, Cha ạ," vị Tiến Sĩ thở dài, mở ra cái nắp của chiếc lọ màu xanh lá cây nhạt từ trong túi, thứ bên trong nó đập vào lớp kính dày của ống xi lanh, "Con thề là con có thể cảm nhận được nó mà…"

"Con thể không thể cứ tin—" "Con tin."

Thứ mật đó nằm trong cổ họng người đàn ông khi gã ta loạng choạng quay lại, lòng bàn tay cứ bám chặt lấy ngực. Vị Tiến sĩ không nghĩ rằng gã ta có thể bị nhiễm bệnh— sao mà nhiễm được chứ? Tại cái nơi thần thánh trú ngụ này? Tiến Sĩ cứ tưởng tượng như thế, cứ tự trấn an mình như vậy.

"Cha…" Tiến Sĩ thở dài, "Cứ bình tĩnh đi, con nhắc lại này, con không hề có hại, chỉ là con muốn chữa khỏi căn bệnh mà người đang thấy ám ảnh về thôi."

"Con sẽ không chữa được cái gì cho cha đâu!" Linh mục hét lên, giọng khàn đi vì sợ hãi. "Con, con mới là cái người đang giả ngơ ở đây đấy, thưa quý ngài," hắn nói, vung tay đuổi Tiến Sĩ Quái Thú kia đi và bắt đầu tìm đến cửa bên văn phòng hắn—

Trước khi linh mục kịp phản ứng, vị Tiến Sĩ kia đã chặn hắn lại, bàn tay đeo găng của nó ôm lấy cổ hắn và nhắc bổng hắn lên quá đầu gã khi Tiến Sĩ ép chặt hắn vào tường. Nó cúi đầu, ấn nhẹ cây gậy vào bụng linh mục, kéo áo hắn lên và… và… và linh mục cố gắng kiềm chế cơn buồn nôn của mình. Da hắn bắt đầu nổi lên những vết mụn nhọn mọng nước, bên ngoài mọc đầy nấm mốc và máu nơi Tiến Sĩ rê cây gậy qua. Hắn cảm thấy như có ai đang cấy những cây ma tầm nóng đỏ vào lồng ngực mình vậy, hắn cảm thấy cơn bệnh đang lan tỏa khắp cơ thể, cùng với một cơn đau tại cổ tay bị nắm chặt kia. Linh mục ngẹn ngào, đôi mắt ngấn nước nhìn vào đôi mắt trũng sâu của Tiến Sĩ.

"Con… thực sự xin lỗi, thưa Cha…"

Linh mục hét lên một tiếng nghẹn ngào khi cảm thấy có một thanh kim loại đang cắm sâu vào cổ họng hắn, máu và mật nhẹ nhàng tuôn ra từ bộ hàm mền nhũn của mình. Hắn đã ngừng cử động rồi, tên Tiến Sĩ kia cũng đã để hắn ngã xuống khi sự yên lặng lại nhấn chìm nhà thờ thêm một lần nữa.

"Ngủ ngon."


Rất cảm ơn LAN 2D, MoreMuffins, Mandu, DaisyBelle, CuBard, và Lady Chrysanthemum.

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