Chôn Vùi Ánh Sáng
Chôn Vùi Ánh Sáng
Byㅤ Suzu-HitsujiSuzu-Hitsuji
Published on 28 Sep 2022 14:51
đánh giá: +3+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á: +3+x

Chôn Vùi Ánh Sáng

Canon Hub » NIGHTFALL Hub » Chôn Vùi Ánh Sáng

Gã không nghĩ rằng hắn có thể vào được nhà. Song chính hắn cũng rất ngạc nhiên.

Cố loạng choạng đi thật nhanh qua trang viên của mình, tên Quý Tộc đang dùng tay phải nắm chặt cánh tay trái đang chảy máu kia. Gã ta có thể cảm nhận được hương vị ngọt ngào của thứ nước vàng đang nhỏ xuống nền nhà lát gạch đẹp đẽ một thời của gã, gần như không thể kiềm chế nổi cảm giác muốn húp cạn hết một hơi. Đã rất lâu gã không có cái gì bỏ bụng. Nếu không có cái ý thức về sự đau đớn của cơ thể mà gã đang phải quằn quại chống lại này, thì phần "con" đã lấn át đi cái phần "người" luôn rồi. Nhưng giờ làm gì có lựa chọn đâu. Gã không thể để người đàn ông kia đuổi kịp được.

Gã đã nghĩ rằng cứ để người hầu của mình chốt cửa lại là xong. Đã nghĩ rằng có lẽ những biểu tượng ma thuật đã khắc lên người với nỗi đau không tả nỗi sẽ giữ chân được gã chỉ trong vài giây ngắn ngủi. Nhưng khi bước lên chiếc cầu thang ọp ẹp trước mắt, không có lấy một đường thẳng, và gã nhận ra rằng lẽ ra phải biết rồi mới đúng. Gã đúng là thật ngu khi nghĩ rằng mấy việc đơn giản đó sẽ giúp gã có thể yên bình chống lại hắn ta.

Nhưng có lẽ — chỉ là có lẽ thôi — người đàn ông kia sẽ bị lạc trong mê cung đã được tên Quý Tộc xây trong nhà gã để đề phòng có ma cà rồng đến. Thứ mê cung bí ẩn với số sảnh và hành lang vô hạn, thậm chí còn đủ để người ta phát điên, dù Mặt Trời vẫn chưa lặn, nhưng gã cũng không chắc người đàn ông đó có phải người hay không nữa. Vị Quý Tộc không thể làm ngơ được những câu chuyện về gã, dù biết thừa rằng đó chỉ là mấy câu chuyện truyền thuyết do dân tạo ra để cố hiểu về trận đại hồng thuỷ đã giáng lên người họ.

Hắn sắp tới rồi, Quý Tộc thốt lên khi đang nhăn mặt cố với lấy tay nắm cửa phòng ngủ. Giờ gã mệt tới nỗi cố làm thế cũng như không, nhưng vẫn cứ mím môi nhíu mày, hất mái tóc đen dài xơ xác sang một bên và tiếp tục. Một bước, chỉ cần một bước nữa thôi, là hắn sẽ được an toàn. Gã rú lên một tiếng như động vật rồi ngã gục xuống nền đất lạnh giá, như một thường dân, dù đang mặc trên người trang phục của hoàng gia. Nhưng giờ sự sỉ nhục đó còn nghĩa lí chi — giờ gã đã ở bên trong thiên đường của mình rồi. Hắn ta sẽ không thể bắt được gã khi đang ở đây. Gã cười toe toét, để lộ ra hàm răng thối rữa khi đang bò về phía bàn rượu của mình, gã ta thắng rồi.

"Tao chờ mày mãi," một giọng nói ồm ồm lạnh lùng phát ra, hắn đang ngồi vắt chéo chân ở đó. Nếu trái tim của tên Quý Tộc vẫn còn đập thì nó sẽ ngừng một nhịp luôn mất.

Hình dáng của người đàn ông kia đúng như hắn nghĩ — dáng người cao gầy, mặc quần áo tối màu, đội một cái mũ to màu đen và đeo lên chiếc mặt nạ của bóng đêm. Thắt lưng có đeo hai khẩu súng đã được nạp đạn, có thể lôi ra sử dụng bất cứ lúc nào. Trên tay có cầm một con dao, hắn chơi đùa với nó, cứ xoay qua xoay lại trên các đầu ngón tay như thể đang chơi đồ chơi vậy. Thậm chí hắn còn không thèm nhìn vào gã Quý Tộc — mà thay vào đó, đôi mắt ẩn giấu dưới mái tóc đen hôi hám đến gần như không thể thấy được đang tập trung nhìn vào con dao, cẩn thận di chuyển nó bằng ngón tay. Hắn nhếch mép.

"L-Làm thế nào…?" đến cả lũ ma cà rồng chỉ có thoát ra và đầu hàng chỉ trong vài giây sau. Gã khạc máu ra bàn, làm bẩn tay của người đàn ông. Hoặc đó cũng chỉ là ảo giác được sinh ra bởi trí óc kiệt quệ của gã ta nhưng tên Quý Tộc vẫn có thể chắc chắn rằng, gã đã nhìn thấy một tia khát vọng trong đôi mắt xám của người đàn ông kia khi máu rơi xuống bàn.

Hắn chỉ cười toe toét ở đó rồi nghiêng đầu. "Thì tao có lối đi riêng ấy mà."

"Nhưng, ta—" người kia cố nói và đưa tay về phía người đàn ông.

Phản ứng gần như xuẩt hiện ngay lập tức. Vào lần thứ hai tên Quý Tộc cố vươn người về phía trước, người đàn ông kia đã đâm dao vào tay gã, đâm xuyên làn da mỏng manh xám xịt, và ghim xuống bàn. Gã ma cà rồng cố kêu lên, rồi máu bắt đầu chảy ra từ miệng. Mắt hắn hóa dại rồi.

"Suỵt, suỵt," gã thợ săn mỉa mai nói, cầm lấy ly rượu vang cạnh tay Quý Tộc và nhấp một ngụm. Hắn nhăn mặt vì vị chua của rượu. "Không cần phải khóc. Chỉ một tí nữa thôi."

"Tao… Tao sẽ gi-iết mày, sẽ giiếc TRẾC m-mày—!" Nạn nhân tóm lấy ngực hắn, cố khiến hắn khó thở để bị sặc nước. Gã ho ra thứ nước màu vàng rồi nhận ra đến cả mong muốn đơn giản đó cũng chẳng hoàn thành được. "Tao, tao có động mình rấc-Nạngh, TAO—"

Hắn lơ gã ta, rút gì đó ra từ trong túi. Khi hắn ném thứ đó vào ly, Quý Tộc nhận ra thứ bột đó trông như bột phép trộn với heroin vậy. Gã thầm cầu nguyện cho vị thần hắn thờ phụng từ sâu trong đáy lòng một cách vô định.

"Ấy, đừng có hiểu nhầm nhá," người kia trả lời rồi hốc cạn ly. Lần này, hắn gật gù tán thưởng cho mùi vị vừa được pha trộn kia. "Nhưng tôi nghi là họ sẽ đến đây đúng lúc lắm đấy. Hoặc là vẫn còn sống, hoặc gì đó." Hắn gõ vũ khí lên bàn.

Một bước đi rất im lặng, im lặng tới nỗi không thể nhận ra người đàn ông đang tới gần, hắn bóp mặt Quý Tộc bằng bàn tay lạnh giá và cưỡng chế gã ma cà rồng uống thứ đã từng là rượu kia. Lúc đầu, gã cố phản kháng. Khao khát phản kháng mãnh liệt tới nỗi mọi tế bào cơ thể đều kêu gào từ chối, dù biết rằng nó sẽ chỉ khiến gã tận số nhanh hơn thôi. Nhưng khi lưỡi đã nếm được hương vị phi thực của chất bột đó, hắn cũng chẳng thể phản kháng được nữa rồi. Gã nuốt, cảm thấy chất độc đang tràn ngập cơ thể, sinh mạng, tâm trí lẫn tâm hồn. Tầm nhìn gã mờ dần.

"Đây rồi," thợ săn lại móc mỉa, lùi lại khi gã Quý Tộc ngã oạch xuống sàn, cố tìm đường giải thoát trong tuyệt vọng. "Đã bảo là sẽ đơn giản lắm rồi mà."

Gã biết, biết rằng mình đã đánh giá thấp người đàn ông kia rồi, nhưng vẫn còn cơ hội. Ở dưới kia, vài tên lính của gã vẫn còn sống. Và có lẽ — nhưng cũng chỉ là có lẽ — ai đó sẽ nghe thấy tiếng gào rú thống khổ của gã Quý Tộc và cố gắng truy tìm và giết chết người đàn ông. Tuy không chắc chắn và gần như bất khả, nhưng gã vẫn phải cố thôi. Chỉ cần thêm vài giây nữa là đủ rồi.

"T… Tại sao…?" Gã lại khạc ra máu, khạc ra sàn nhà quý giá của gã. Gã có thể cảm thấy huyết mạch của mình đang dần ngừng đập.

Người đàn ông đến gần hơn, đã theo kịp gã ma cà rồng chỉ bằng ba bước chân. Khi đang cố chuyển động, gã có thể cảm thấy người đang ông kia đang chạm lấy khẩu súng được dắt ở thắt lưng hắn. Nhưng gã cũng cảm thấy có gì đó khác nhiều hơn — một sự khó chịu mơ hồ và co giật của tay khi chạm vào tay cầm kim loại. Nếu tên Quý Tộc vẫn có thể nhìn thì hắn sẽ nhận ra.

"Thế giới này thật thối nát làm sao," hắn gằn giọng với tay kia, quay về phía tấm kính màu đỏ, là cửa sổ duy nhất bên trong. Bằng tia sáng đỏ gần như không thể nhận ra là Ánh Trăng, gã Quý Tộc có thể thấy được các bộ phận trên khuôn mặt người đàn ông. Hồn như trên mây, có một biểu hiện ngóng chờ đầy khó hiểu. "Thối rữa từ cốt lõi bên trong. Mấy cái thứ như bọn mày chính là bọn đã giáng Màn Đêm xuống bọn tao. À đúng đấy, là thế đấy, tao nhớ hết mà," hắn thốt lên và để ý sự ngạc nhiên hiện rõ trên đôi mắt gần như sắp chết của tên Quý Tộc. "Hồi thế giới còn rất tươi đẹp và không có mấy thứ thối tha như bọn mày, khi tao vẫn có thể đắm mình dưới ánh sáng Mặt Trời."

Người đàn ông ngừng lại một chút, đưa bàn tay đang đeo găng của mình về phía trước, nắm lấy thứ vô hình nào đó ở phía xa. Sau một hồi, hắn nhìn vào lòng bàn tay trắng được bao phủ bởi hình ngôi sao năm cánh và các công việc huyền bí rồi ném nó đi, để lộ một bàn tay nhợt nhạt thiếu dinh dưỡng nặng. Giờ người đó đang bị hưng phấn với Andrenaline rồi. "Nên chỉ có một kết luận thôi. Để đem Ban Ngày trở về, bọn tao sẽ phải tiêu diệt… lũ chúng mày," hắn nói với dáng vẻ đầy ghê tởm. "Và tao là một người biết rõ công việc của mình."

Thứ bột đó đã lan tới hệ hô hấp của tên Quý Tộc rồi, nó khiến gã lên cơn co giật. Khi gã ta đang trườn lên trườn xuống nơi gã đã có thể bình tĩnh lại, người đàn ông phớt lờ gã nhưng vẫn có thể cảm thấy có một câu hỏi đang vang vọng trong không khí.

"Hở? Tao là ai ư" Hắn quay lại, nở một nụ cười toe toét. "Tao có nhiều lằm. Người đàn ông này. Thợ săn. Kẻ sinh ra nơi chiến trường. Nhưng như thế vẫn chưa đủ thỏa mãn trí tò mò của mày đúng không?" Hắn lại tiến về phía trước, nạp sáu viên đạn bạc vào nòng súng. "Tầm vài năm trước gì đó, khi Mặt Trời còn tỏa sáng, mọi người có gọi tao bằng một cái tên khác nữa. Daniel… Daniel Asheworth, ừ, là nó đó. Nhưng cái này từ thời xa lắc xa lơ rồi. Nhưng mày vẫn có thể cầu xin lòng thương xót của Daniel đó đấy."

Gã Quý Tộc không nhìn được nữa rồi. Ngọn lửa sinh mệnh đang tắt dần, gã nằm vật ngửa ra rồi đưa bàn tay đang run rẩy về phía ly rượu trên bàn. "Sao… m-m… mà mìay b-biết được?!"

Người đàn ông chỉ cười rồi quay đầu lại. Giờ chẳng còn thứ gì che lại khuôn mặt hắn rồi. Nơi đã từng là bóng đen giờ là hàm răng rất dài được làm sạch bởi cái lưỡi đói khát, còn đôi mắt thì nhìn chằm chằm vào cánh tay đang chảy máu của tên Quý Tộc, nó gần như rời ra luôn rồi. Người đàn ông quay lại về phía nạn nhân và ngồi xổm bên đầu gã. "Nhưng biết người biết ta nó cũng khó ghê ha."

Hắn nhắm và bắn sú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