Dòng Nước Thô Bạo
đánh giá: +1+x
Dòng Nước Thô Bạo
Byㅤ Suzu-HitsujiSuzu-Hitsuji
Published on 26 Sep 2022 16:00
đánh giá: +1+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;
    }
    }
}

Một cơn gió biển lạnh tới thấu xương thổi vào Cape Sealicast, một phố chài nhỏ tại bờ biển Xerophylla. Ánh trăng đỏ rực ấy sáng lấp lánh trên từng cơn sóng, soi sáng cho thị trấn mục nát kia. Mùi thối rữa đầy thân quen đọng lại và lan tỏa khắp nơi. Gỗ mốc cót két và kêu lên khi làn gió lạnh thổi qua từng con phố, bãi rác và đống dụng cụ vứt ngổn ngang sau bức tường mục nát đó. Trong miệng của những tâm hồn nghèo khổ đang vất vơ vất vưởng nơi thành thị đều cảm thấy một vị mặn đắng chát.

Tiếng của một cơn sóng ẩm ướt ào ạt va vào tấm ván ép vang lên khắp thị trấn khi cư dân của nó đang lảo đảo chạy về phía quảng trường. Vị thị thưởng, kiêm Thuyền Trưởng Vĩ Đại của cả trấn đang chờ đợi để bắt đầu bài giảng đạo của mình. Ông ta khảo sát lượng người tham gia trong khi dân làng tập trung vào quảng trường. Ông ta bước lên bục, Mặt Trăng Đỏ Thẫm ngự trị trên cao, ông hắng giọng, giơ cánh tay phủ đầy vảy lên và bắt đầu thuyết giáo.

Vị thị trưởng áy náy nói "Hỡi những công dân ưu tú của Sealicast, ta có một tin tốt đây! Dự án vĩ đại của chúng ta sắp hoàn thành rồi! Chẳng bao lâu nữa, chúng ta đã có thể lên đường ca tụng Chúa Tể và truyền bá về vương quốc đầy vinh quang của người lên mặt đất!" Từ phía đám đông, tràng pháo tay reo hò hân hoan vang lên, những tiếng động tạo ra từ những sinh vật không phải con người kêu ọc ọc như người chết đuối vậy. "Ngày mai chúng ta sẽ căng buồm để đến với một tầm cao mới và Deliverance đầy vĩ đại đó sẽ là thánh khí cho Chúa Tể của chúng ta!"

Kinh hoàng hơn nữa, những tiếng thét đầy ám ảnh nổ ra. Thậm chí một vài cư dân còn đang cầu nguyện cho vị tà thần Uh'eog ot Mgepog, Chúa Tể Vực Sâu. Ánh Trăng Đỏ Thẫm vẫn ngự trị trên trời cao, vẫn ở đó khi buổi lễ kỉ niệm đầy náo nhiệt tiếp diễn.


Vài tuần sau, công cuộc chuẩn bị cho hành trình của Deliverance đã hoàn tất. Đến cả bản thân con tàu này đã là thứ vĩ đại nhất từng xuất hiện trên biển cả rồi. Dài tầm năm trăm mét và cao hơn một trăm mét, con tàu này được ghép nối bởi thứ ma thuật đã được ban cho các cư dân của Sealicast nhờ khế ước với Uh'eog ot Mgepog. Thứ năng lượng kì lạ dâng trào qua khe hở phát ra một ánh sáng xanh lam nhạt, đủ mạnh mẽ để thách thức Ánh Trăng Đỏ Thẫm kia. Đó là kiệt tác của họ, là một thứ ân huệ đầy thiêng liêng sẽ giúp họ đến với một tầm cao mới và báo thù cái vùng đất cằn cỗi kia. Tấm gỗ cứng cáp sẽ không bao giờ hỏng để phi hành đoàn ngã xuống.

Trên tấm gỗ có khắc lên hoạt tiết hình xúc tu và chữ rune, phép thuật đã gắn kết chúng lại với nhau. Không có một viên đá hay thứ kim loại nào có thể làm hỏng thân tàu, gần như là bất khả chiến bại. Những thiết kế uốn éo vặn xoắn kì lạ kia dường như có cả ý thức riêng. Mũi tàu được trang trí bằng hình ảnh đầy sống động của Uh'eog ot Mgepog, để tôn thờ vị thần đó. Phần trang trí là thứ duy nhất hé lộ cho các tín đồ về vị thần sa ngã kia, một khối xúc tu đang quằn quại, bao quanh một con mắt khổng lồ như mắt bạch tuộc. Con mắt của họa tiết trang trí cũng phát sáng với thứ năng lượng kì lạ như kim khí thánh vậy. Nó cũng biết di chuyển, biết cách thăm dò độ sâu để tìm ra Vương Quốc Vực Thẳm.

Cột buồm rất lớn, lớn đến nỗi tưởng như có thể xuyên thủng cả bầu trời tối tăm và cánh buồm rộng tới nỗi có thể hoàn toàn che phủ vài ngôi nhà. Cũng có những mái chèo lớn không cần phải có ai ra sức chèo vì chúng là xúc tu đang sống. Được Uh'eog ot Mgepog tạo ra và được người trao tặng sự sống, nên nếu cơn gió làm hủy hoại Deliverance, mái chèo sẽ sống lại và kéo theo con tàu vĩ đại này trên biển khơi. Boong chính của tàu bị những cây lao to lớn nhấn chìm, từng chiếc đều cứng cáp và lớn hơn cả thân cây sồi vững chắc nhất. Chính những thứ này sẽ ca tụng Chúa Tể Uh'eog ot Mgepog vĩ đại, chúng sẽ xé toạc thân thể thần thánh của người và đưa người lên bằng Deliverance!


Những cư dân không phải con người có hình dạng giống cá của Cape Sealicast, với lớp da phủ đầy vảy cá, chân có màng và cổ họng có mang đã đến được bờ biển đất liền. Với những công cuộc chuẩn bị đã hoàn thàn, họ sẽ leo lên Deliverance và bắt đầu cuộc Hành hương đến nơi vương quốc của Chúa Tể. Rất nhiều thứ được đưa lên tàu. Lương thực, vũ khí để đối đầu với cơn ác mộng biển khơi và rất nhiều thứ khác đã được các thủy thủ háo hức mang lên tàu. Gần một nửa thị trấn đã điều khiển con tàu bị nguyền rủa kia. Những người phải lên bờ và chờ đợi đã rất thất vọng, nhưng họ chắc chắn rằng mình sẽ thấy được sự quyền năng của vị chúa tể khi người trỗi dậy thôi.

Thuyền viên và các thủy thủ chất đồ đạc lên tàu, cứ thế từng giờ từng giờ trôi qua. Chuẩn bị xong, con tàu đi về phía Vương Quốc Vực Thẳm, vùng đất của Uh'eog ot Mgepog vĩ đại. Thị trưởng giờ đang là thuyền trưởng của Deliverance, chỉ đường dẫn lỗi cho thuyền viên vượt qua vùng biển đầy khắc nghiệt. Sao nhiều tuần lang bạt, cuối cùng họ đã đến được đích và cắm những cây lao khổng lồ xuống dưới nước. Uh'eog ot Mgepog đã được đưa lên thuyền, sẵn sàng bành trướng Vương Quốc của người lên đất liền rồi!


Nhưng một thảm kịch đã xảy ra! Cape Sealicast giờ chỉ như đống sỏi đá bị nổ tung, liên tục bị sóng biển dạt vào. Còn lại vài người sống sót nằm la liệt dưới đất, tâm trí bị hủy hoại vì hình dáng thực sự của vị chúa tể họ thờ phụng. Đến cả Deliverance vĩ đại cũng đã bị phá hủy, chỉ còn sót lại vài mảnh ván.

Sự trỗi dậy của Uh'eog ot Mgepog chỉ đem lại sự hủy diệt và cuồng dại, chứ không phải là thứ đỉnh cao mà những người thờ phụng hi vọng! Một lượng lớn xúc tu và vẻ mặt đau khổ của sinh vật từ biển sâu đang hoành hành khắp đất liền. Sự cuồng dại đã đem lại sự kinh hoàng của vực sâu cho những kẻ xui xẻo kia và khi nó trỗi dậy, chỉ còn sự hủy diệt đang tồn tại nơi đây thôi!

Vương Quốc khủng khiếp của hắn đã bành trướng khắp mặt đất. Với những hang động rất lớn, hệ thực vật của biển sâu và mạch phun magma mọc lên khắp nơi và xui xẻo thay, chúng đã phải chịu đựng thứ sức mạnh khủng khiếp của nó! Nước phun ra từ hang động, sự quái dị của vực sâu cũng bị cuốn trôi theo đó. Những con cá vây chân và bạch tuộc khổng lồ cứ thế bơi trên mặt đất! Và trận lũ kia đã cuốn chúng về lại với biển cả và để lại một sự tàn phá còn kinh khủng hơn khi nó xuất hiện. Toàn bộ thị trấn đã bị lũ lụt cuốn trôi, những người còn sống sót đã bị quái thú ăn thịt và cứ thế, Chúa Tể Uh'eog ot Mgepog đã nghiền nát mọi vết tích của nhân loại như một cơn bão lớn vậy.

Đúng là không thể ngăn cản được mà, cơn thịnh nộ vẫn còn vương vấn trong vài tháng và vẫn chưa có dấu hiệu kết thúc, một con đường rộng lớn đã được tạo ra đi xuyên qua các vùng đất đã bị tàn phá. Và cuối cùng, Uh'eog ot Mgepog đã đi tới một cùng biển khác, đến bờ biển đối diện Xerophylla và quyết định nhấn chìm mọi thứ xuống vực sâu. Ở đó, nó sẽ lại được vui vẻ thêm lần nữa, lại được chuẩn bị hủy hoại một phố chài ngu si nào đó nữa.

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