Ông đã đi quanh co một dặm
Ông đã đi quanh co một dặm
Byㅤ Suzu-HitsujiSuzu-Hitsuji
Published on 25 Sep 2022 16:31
đá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;
    }
    }
}

đánh giá: +1+x

Ông đã đi quanh co một dặm.

Một cơ thể treo trên sợi dây ngắn là thứ khiến tôi mãi mãi không thể bị lãng quên. Khoảnh khắc bao tải màu đỏ thẫm trùm lên đầu tôi, cảm giác lại yên bình đến lạ kì. Đám đông la hét những lời buộc tội, hầu hết toàn bộ đều là sự thật, nhưng giờ đây họ có vẻ cũng im lặng hơn rồi.

"Thằng chó giật xác" "Súc vật trộm mộ nhà thờ." "Rác rưởi đào mả."

Nếu là vì khoa học thì mấy thứ đó quan trọng chi. Tại Trường Đại Học Yarsborough đã có một mục ghi rằng "Ông Cimmerian - 65". Chẳng ai thèm quan tâm cái xác 65 tuổi kia đã cống hiến thêm những gì cho khoa học, thậm chí còn nhiều hơn cả những thứ đầy khôn ngoan tôi đã làm suốt đời này.

Rồi một ngày không xa, những kẻ đang la ó gào thét kia sẽ được cứu nhờ kiến thức tôi đã tìm ra. Tôi đứng đó, đứng dưới ánh trăng hồng đầy sự an ủi kia.

Phần dưới của tôi rơi xuống. Sợi quanh quấn quanh cổ căng ra, có tiếng rắc, một cơn đau xẹt qua rồi không còn gì nữa. Nơi đây lại có thêm một nạn nhân rồi.

Nhưng thành phố Dezmond này thường không hay vứt bỏ những thứ giá trị đâu.

Một tia ý thức lóe lên, kèm theo một nỗi đau không tưởng. Rồi mọi thứ lại tĩnh lặng. Với một nỗi kinh hoàng và ngạc nhiên, tôi rơi vào trạng thái như đang mơ vậy. Vài lúc tôi đã phải vật lộn để thở. Rồi tôi thấy, thấy hình bóng của những khuôn mặt người đầy mơ hồ đang nhìn xuống tôi. Rồi không còn gì nữa. Cứ thế mà trở thành dĩ vãng. Mãi mãi.

Trong giây phút nhận thức ngắn ngủi kia, tôi đã tưởng rằng đây là cái giá phải trả cho cuộc đời đầy tội lỗi này.

Rồi một đêm, tôi đã thức dậy khỏi sự dĩ vãng kia lúc nào không hay. Tôi bị trói vào bàn, người lộ thiên dưới mưa. Tôi có thể cảm thấy được có dòng điện vừa chạy xẹt qua cơ thể. Sét lại đánh vào tôi thêm lần nữa khi tôi phá đi những thứ đang ràng buộc tôi lại. Ngươi tôi bốc lên mùi hôi của thịt cháy, formaldehyde và không khí bị ion hóa. Nhưng tôi vẫn sống. Tôi đã trở nên thật mạnh mẽ.

Mỗi tội. Đây không phải tay tôi. Kính không có nhưng tầm nhìn lại rất rõ ràng, nên đây cũng không phải mắt của tôi. Chỉ có duy nhất ý thức là thuộc về tôi mà thôi.

Tôi nhảy khỏi bục. Rơi tự do gần 80 feet nhưng thay vì xương tôi vỡ tan, thứ vỡ lại là đá sỏi. Không ai truy đuổi nhưng tôi vẫn cứ chạy, chạy trong màn đêm tĩnh mịch. Tôi thấy mình đang ở trong một con hẻm xa lạ, mưa cũng dần vơi.

Lần đầu tiên, tôi thấy hình ảnh bản thân phản chiếu lại từ vũng nước đục đỏ ngầu như máu trên mặt đất. Một vết sẹo lớn trên da đầu, kéo dài qua mũi rồi xuống đến tận cổ. Phần da bên trái mặt có vẻ sáng hơn các phần khác với một con mặt màu đỏ hoe. Mắt kia còn màu hạt dẻ, vừa lạ mà cũng vừa quen.

Tôi xé toạc phần vải ở ngực. Nó xé ra, vón thành từng cục và tôi sắp thấy được da mình rồi. Tất cả, đều chằng chịt vết khâu và sẹo.

Tôi gục xuống tòa nhà gần đó và bật khóc. Ở thế giới bên kia không có phán quyết hay phần thưởng gì sất. Mà chỉ có sự dĩ vãng mà thôi. Nỗi đau mà tôi đang cảm nhận, hoàn toàn là của thứ sinh vật mang tên con người. Các nhà khoa học đã cố ghép nối tôi lại. Tôi nhận ra điều đó, người đàn ông với nụ cười nham hiểm bước vào con ngõ.

Có lẽ tôi đã thành miếng mồi béo bở của lũ giật ví rồi. Người đó cầm dao rất tự tin. Một bàn tay đã trải qua tôi luyện. Tôi đã từng chiến đấu với hắn ở một con rãnh rồi.

Nhưng Cimmerian đã quá yếu để chiến đấu rồi.

Aaaa. Tôi nhận ra rồi. Đến cả ý thức này còn chẳng phải của tôi nữa.

Tên giật ví bắt đầu tiếp cận thôi. Tôi cứ đứng đó mà nhìn vào hắn ta. Khi đang soi xét tôi, tôi còn thấy được sự sợ hãi đang hiện diện trong đôi mắt hắn ta. Trước khi hắn kịp ngẫm nghĩ về quyết định sai lầm đó, tôi di chuyển nhanh như chớp. Đập đầu hắn vào một bức tường ẩm.

Tôi nhìn xuống và nhận ra, hắn đã đâm tôi rồi. Nếu nói về tiêu chuẩn thì là ngay dưới dung xương sườn, ngay vào tim. Một đòn chí mạng. Tôi rút con dao ra.

Ước gì tôi có thể thấy được cảnh tôi nằm trên đống đá cuội rồi mất máu đến chết, nhưng chỉ có máu chảy ra từ người đàn ông đã chết trước mặt khi hắn từ từ trượt xuống rồi ngã nhào thôi.

Vết thương lành lại ngay lập tức. Nhưng sẹo vẫn còn, song lỗ thủng tại tim đã được bịt kín lại rồi.

Tôi đắn đo một lúc. Xong rồi tôi vác người đàn ông này lên vai và nhảy qua mái nhà để tới Yarsborough. Trường này trả giá cho xác bọn trộm cắp này cao lắm. Một thông tin khác đã được thêm vào mục của tôi. Tôi đã tin rằng đó chỉ là một trò đùa mà thôi, nhưng tôi cứ để nó thế mà không bàn luận gì. Thậm chí tôi còn thuyết phục cổ cho tôi mượn vài bộ quần áo và giường để ngủ qua đêm.

Còi thổi vào sáng hôm sau đã đưa tôi về thế giới này. Tiền công đủ trả cho một bữa ăn. Thậm chí một vị bác sĩ tốt bụng ở Yarsborough còn cho tôi thuê căn phòng bí mật tại tháp đồng hồ Yarsborough. Nó không phải của cô ta nên không cho thuê được, mà cũng chả ai thèm dùng cả. Nên tôi đi và đến đó trong bí mật.

Sự tò mò nổi lên. Tôi đã quay về nơi mình được tạo ra nhưng chỉ tìm thấy những tòa nhà đã bị thiêu thành đống đổ nát. Tên người sở hữu không có trong hồ sơ công khai. Có lẽ đây là sự đền tội của tôi cho một ai đó bị hoang tưởng nhẹ. Hoặc có thể là một người bạn đã làm thế để cứu tôi thoát chết.

Hoặc tôi sẽ mãi mãi chẳng biết được ai và tại sao họ làm thế.

Giờ tôi đang nghỉ ngơi trên đỉnh tháp đồng hồ Yarsborough. Một chiếc chuông đen đã xỉn màu với vài vết nứt đã thành bạn của tôi. Đã có ai đó ghép nó lại như thế này, nhưng nó cũng chẳng thể vang lên nữa rồi. Khá hợp với tôi đấy chứ.

Vị bác sĩ tốt bụng kia kể rằng có rất nhiều vụ án mạng trong trường đại học. Những sinh vật của màn đêm hoặc cái gì đó đã xé xác con người thành từng mảnh chỉ trong một thời gian ngắn.

Đám trộm cướp sẽ trả tiền cho tôi. Thi thoảng bọn trộm mộ cũng sẽ mua tôi đồ ăn. Nhưng không biết là xác ma cà rồng giá bao tiền nhỉ? Người sói thì sao?

Chắc là tối nay sẽ săn vài con quái vậy.

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