Than Hồng
Than Hồng
Byㅤ Suzu-HitsujiSuzu-Hitsuji
Published on 18 Sep 2022 09:03
đá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;
    }
    }
}

Than Hồng

đánh giá: +3+x

Trong khung cảnh tối tăm của những cây bạch dương đầy trang nghiêm, ngồi đó là một đàn ông đã từng là Magnus Kinslow — ẩn nửa mình dưới ánh sáng phát ra của ngọn lửa trong đêm tối — chứng kiến sự lụi tàn của một thế giới khác đang diễn ra ngay trước mắt.

Ông được biết đến với rất nhiều chức danh: nhà giả kim, thầy bói, huyền thuật sư, rồi thời gian trôi qua, mọi người đã nhẹ nhàng khiến ông trở thành một vai trò ai cũng đang tìm kiếm. Một tay buôn tri thức, ông du hành, đi đây đi đó, cả hiện tại lẫn mãi về sau, đem theo bên mình vô số kiến thức bí truyền đã được ông tích luỹ từ đời nào, cung cấp dịch vụ trao đổi hàng hoá. Trong thị trường nơi tràn ngập những lời xì xào huyền bí, ông sẽ mua lại lời tán dương của những nhà tiên tri và kẻ điên, mua lại từ những kẻ đã thấy được một vết nứt mãi mãi tồn tại, từ những kẻ thấy được những gì hiện hữu hoặc không. Tham khảo chéo và phỏng đoán, ông xâu chuỗi các câu trả lời ngày càng chất chồng đó để trả lời câu hỏi đã đeo bám ông bấy lâu nay.

Ông tìm kiếm tri thức, và tự vẽ ra kinh nghiệm cho bản thân từ dòng mực. Những thứ còn lại, ông ném nó vào lửa, đốt cháy hết như thể muốn xóa mờ đêm đen.

Công việc hiện hữu ngay trước mắt, nằm ngay trong tay ông, lấy được từ một giao dịch. Đó là tấm da mỏng manh nhưng cũng rất bền, không thể cháy. Là hành động từ kinh tế và không chút hào phóng gì ở đây.

Về sau, màn đêm sẽ mãi chỉ là một thứ bóng tối, và khi bao lí tưởng cạn kiệt dần, con người sẽ là thứ bị đốt cháy ở đây.

Ông đã từng phải cam chịu trước những thương vụ trước kia rồi; công việc của ông đều tràn ngập bàn tay đang cố nắm lấy tri thức và sự tham lam của những kẻ có bộ não đói khát. Ông ngày càng ngóng chờ sự phản bội, sự chia li, và cả lời ngụy tạo dối trá. Để luôn đi trước họ một bước, để vượt qua số phận đầy hẩm hiu này, thì phải vượt qua thử thách — một thử thách, ông tự nhắc bản thân. Thử thách là một trong những thứ ông mãi khắc ghi trong tim. Đó là một mục đích đã được ban xuống cho ông, được ban xuống cho một cơ thể tàn tạ, lạnh lẽo đã chết đi vì treo cổ và mất máu. Mục đích ấy đã cứu lấy ông — Nó bén rễ, phát triển rất nhanh, nó hàn gắn lại những mảnh vỡ của cơ thể lẫn linh hồn ông bằng vàng ròng.

Nó cộng hưởng với thứ tiềm năng và sức mạnh, với lời cầu xin đầy quyết đoán trong ông: để nắm giữ những thứ còn sót lại, hoặc là để ghi chép lại những mất mát của nó.

Và giờ đây, nó đã tìm thấy ông, thêm một lần nữa. Nhưng lần này là do ông tự mang nó đi.

Ông đã đánh giá quá thấp tham vọng của họ, quyết định đầy dữ dội khi đó đã xây lên tòa tháp Babylon của Tổ Chức. Nếu biết họ sẽ làm thế, thì ông sẽ không bao giờ đưa họ thứ để giúp họ làm được điều đó rồi; không phải vì cái giá cho nguồn tri thức ấy, thậm chí là trả thế giới còn không đủ.

Ông ngồi xuống nơi bóng tối bao trùm, đưa ra một lời tuyên bố đầy hiển nhiên — tiếng khóc than của tử thần — vang vọng khắp tâm trí ông và nhiều người khác:

Thần là Cái Chết,

Thần là Báo Nhân.

Cái chết còn đây,

Và Thần đã Chết.



Ông đứng dậy rồi thở dài một tiếng, dập tắt đốm lửa để màn đêm nuốt chửng lấy mình trong vòng tay của một kẻ si tình đầy ghen tức. Có vài thứ sẽ đơn giản hơn nhiều nếu làm trong bóng tối.

Ông tập trung. Hai tay cố nắm lấy mục đích và quyết tâm, ông gập tay lại và nó đã biến thành một lưỡi dao. Quyết tâm này đã tạo ra một lưỡi dao vô thực đầy thân quen, đến từ một chiều không gian được định hình nhờ mục đích và suy nghĩ. Lưỡi dao này còn có thể được mài dũa bằng hi vọng, khi có đôi bàn tay đầy điêu luyện đã trải qua quá trình luyện tập sử dụng, nó sẽ chém đôi được cả nguyên tử, và biến nó thành hư vô.

Ông đã chém chỉ xong một khắc. Cắt bỏ màn đêm, cắt cả sự trống rỗng ấy, mở ra một nơi có khả năng sẽ thật đẫm máu, rồi đi qua nó. Vết rạch hình thành, từ "bên đây" chém sang "bên kia", thứ vật chất không thể sẻ chia kia vội vã lấp đầy khoảng trống đáng sợ từ hư vô, kết nối hai thế giới lại với nhau: một cầu nối được tạo ra từ vết chém của thứ vật chất sinh ra từ suy nghĩ. Nếu ông chọn đi sang đó, thì chẳng khác nào ông đang chốn chạy cả.

Và ông quyết định ở lại cái thế giới chết tiệt này. Ông đã nói ra lời thề với cây cỏ, thậm chí còn để chúng làm chứng cho bản thân.

Ông sẽ cố không để mặc những người đó bị tuyệt diệt với kết cục đã lờ mờ hiện ra trước mắt, sẽ không để những nạn nhân bị lạc lối trong màn đêm vĩnh bởi cơn thịnh nộ của thần linh đã bị tổn thương.

Song ông không lại không thể một mình đảm nhiệm hết tất cả.

Ông bước qua bên kia, từ nơi có màn đêm tối tăm nhất đến tới nơi ánh sáng chói lòa phát ra từ ánh đèn huỳnh quang.


Fire3.png

CẢNH QUAY AN NINH TỪ ĐIỂM-73


Lời Tựa: Bản ghi sau đây sẽ trình bày chi tiết diễn biến về các sự kiện liên quan tới vụ vi phạm quản thúc và ăn trộm SCP-529, được diễn ra vào ngày 28/04/2021.

Cảnh quay này được ghi lại bởi camera giám sát được đặt trong văn phòng và hành lang tiếp giáp với văn phòng của Ts. Hannah Montaire.


03:42: Ts. Montaire đang trong văn phòng nộp các giấy tờ hồ sơ. Khi đó SCP-529 đang ngồi trên bệ cửa sổ đang vồ lấy món đồ chơi cho mèo đang treo lơ lửng được cấp phép sử dụng bởi Quy Trình Quản Thúc Đặc Biệt liên quan.

03:45: Một sự biến dạng không gian xuất hiện ngay bên ngoài văn phòng của Ts. Montaire, cô dường như không hề để ý đến chuyện này. Sự biến dạng này mở rộng, tạo thành một lỗ hổng trên hành lang, chỉ có thể thấy được từ phía đối diện văn phòng. Khu vực bên ngoài lỗ hỏng đi vào tâm điểm của máy quay nhưng khó xác định được hình dạng cụ thể vì quá tối.

03:46: Một bóng hình người mặc trang phục cũ dính đầy bùn đi qua lỗ hổng và tiến vào cơ sở của Tổ Chức. Mặt đã bị che khuất một phần bởi mũ trùm đầu từ áo choàng. Bóng hình đó mở cửa văn phòng Ts. Montaire ra và ghi lại được đoạn hội thoại sau:

Ts. Montaire: Tôi— ớ, ông là ai?

Bóng Người Không Xác Định: Không cần phải hoảng loạn, không nhớ là bé nó lại có bạn đấy. Giờ thì, nhóc ơi, ngươi đâu rồi? Đến lúc phải đi rồi đấy.

Ts. Montaire nhấn nút báo động dưới bàn, Nhân Viên Anh Ninh của Điểm đã được cử đến vị trí của cô.

Ts. Montaire: Giờ tôi không hiểu chuyện gì đang xảy ra nữa, nhưng sao không thử ngồi xuống đây nói chuyện tí xem. Tôi chắc chắn rằng chúng tôi có thể giải quyết được vụ này.

Bóng Người Không Xác Định: Tôi e là không được rồi, giờ chỉ còn một lúc nữa thôi. A! Nhóc đây rồi, mon couer. Lại đây, tốt nhất là nên đi sớm thôi.

SCP-529: Meo.

Bóng Người Không Xác Định: Chà, nhóc này có vẻ thích cô đấy, có vẻ bọn tôi đã chọn đúng chỗ rồi. Nào, giờ thì đi với ta đi nhóc.

03:48: SCP-529 nhảy xuống từ bệ cửa sổ và đi về phía bóng người và cọ vào chân kẻ đó. Kẻ đó khom lưng xuống và bế SCP-529 lên rồi ôm nó bằng một tay rồi rời khỏi văn phòng. Nhân viên anh ninh của Điểm đã bao vây và yêu cầu bóng hình đó dừng lại. Khi kẻ đó tiếp tục bước đi, một trong các Nhân Viên An Ninh đã cố bắn vũ khí gây sốc điện vào mục tiêu: viên đạn được bắn bay lơ lửng trong không trung cách hình bóng vài bước khi đang đi qua lỗ hổng cùng với SCP-529, và đột ngột đóng lại sau khi chúng bước qua.




Man-sun.png

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