Sở Thích
đánh giá: +2+x
Sở Thích
Byㅤ Suzu-HitsujiSuzu-Hitsuji
Published on 29 Sep 2022 00:54
đá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;
    }
    }
}

Sở Thích


Tôi thích xé nhỏ mọi thứ từ một thành mười rồi thành nhiều nữa. Và tôi đề xuất làm thế vì nó sẽ khiến công việc dễ hơn rất nhiều. Bạn đã nghe bao giờ chưa? Có thể. Chắc là không. Vậy thì để tôi chỉ cho.

Cứ nghĩ rằng mình đang làm một cú triple jump ấy. Tuy trong điều kiện hiện tại của bạn thì có hơi khó nhưng chắc chắn kiểu gì bạn cũng xoay sở được thôi. Chỉ cần có trí tưởng tượng phòng phú là được. Triple jump, y như cái tên, nhảy ba lần trên không trung, lần sau nhảy cao hơn lần trước, nhỉ? Mọi người sẽ xây dựng và tạo ra động lực cho bạn, cho đến khi bạn bay lên không trung, nhảy qua các toa tàu tùy ý. Và nếu có bị bắt gặp thì họ sẽ nghĩ bạn là chú chim của màn đêm.

Giờ thì hãy nghĩ rằng mình đang nhảy xa. Hãy tưởng tượng mình đang chạy thật nhanh trên các mái nhà và tăng tốc lên. Nhanh đến hầu như chẳng thấy gì, chỉ nghe được tiếng "cách cách" dưới chân và tiếng tim đập. Ừa, tuy đây không phải đường đua Olympic nhưng nó cũng vui mà. Chẳng có gì ngoài một chút sợ hãi để có được gót chân lò xo đâu. Rồi bạn đã đến được ranh giới. Xong bạn trượt chân xoay ba trăm tám chục vòng rồi ngã gãy cổ.

Xin lỗi. Tôi không kìm được.

Bạn đã tới được rồi: ranh giới, và bạn nhảy vọt qua như con ếch có cánh vậy. Mưa ghen gió hờn với bạn vì như thế – người lợp mái cũng vậy, nhưng bạn có thể lờ nó đi mà – rồi bạn tiếp đất. Và bạn đang ở phía bên kia, rất vinh dự luôn. Chắc chắc kiểu gì cũng sẽ nhận được huy chương vàng vì màn trình diễn vừa nãy. Hiểu ý tôi chứ?

Được rồi. Để nói theo cách khác vậy.

Nghĩ về tòa nhà đi. Có quán rượu đối diện chỗ bạn nè- ấu dè, đúng nơi chúng ta lần đầu gặp nhau. Tự hỏi đã bao lâu từ lúc đó rồi nhỉ? Vài tiếng à? Hình như thế.

Mà biết gì chưa, tôi từng tản bộ trên quán rượu đó một lần rồi đó. Vui cực. Ánh đèn nhấp nháy rồi lắc lư theo một nhịp điệu tự tưởng tượng ra, tạo thành những bóng đen đang nhảy múa ngoài phố. Mà tôi còn chả có bóng cơ. Vì má tôi bảo là tôi sinh ra từ đó. Nó khiến công việc dễ dàng hơn.

À đúng rồi, tôi đã nói rồi nhể. Quán rượu được xây từ gỗ với gạch, được xếp đan xen với nhau. Nếu rút một cái ra là xác định sập hết luôn nên bắt đầu từ cái nhỏ thôi. Nếu muốn xây quán rượu thì làm sao xây mái trước được, phải bắt đầu từ mấy cái nhỏ nhặt trước đã. Khi còn bé tôi còn tưởng họ xây hết một mạch luôn cơ; do chưa từng được xem xây nhà.

Hiểu chửa? Chưa á? Vậy thì ví dụ từ kinh nghiệm của tôi này.

Cười luôn là bước đầu tiên. Khi đi du lịch một mình ấy, len lỏi giữa mấy cái cột đèn và mặt trăng sau lưng, cái đầu tiên phát ra sẽ luôn là tiếng cười – vì nó dễ nghe nhất. Mà biết không? Người ta nói rằng nó rất dễ lan truyền đó. Tôi nhớ là mọi người đã nói thế. Mà nghĩ lại cũng thấy hài, tôi còn nghĩ nó như một căn bệnh ấy – do nó khiến mặt của mọi người tạo ra âm thanh như nôn khan ấy. Và nó lây lan khi bạn ở gần người khác.

Tôi đã từng thấy có người chết vì cười.

Nhớ là đừng bao giờ tin vào từ "mặc dù" nhá. Vì nếu nó là thật thì chắc tôi có kháng thể của nó luôn rồi. Cơ hội béo bở luôn.

Bước tiếp theo là-

À thôi, vừa nghĩ ra cái này. Tôi muốn thử gì đó. Để khiến bạn cười. Tôi muốn thử xem nó có lây được không.

Nào. Không ở bên nhau cả đêm được đâu.

Chưa muốn cười hả? Vậy để tôi trước nhá. Haha. Hahahahahaha.

Đừng làm quả mặt như thế chứ.


Bước tiếp theo.

Một nụ cười. Thế thôi. Chẳng có gì hơn. Có thể cười nhếch mép – hoặc cười toe toét cũng được, miễn sao là tôi thích. Tôi đã có đọc ở đâu đó là mấy con săn mồi hay nghiến răng trước khi tấn công – nên thỉnh thoảng tôi cũng có nghĩ về điều đó. Xong tôi trèo xuống như con nhện đang lặng lẽ cắt đứt sợi tơ vậy. Tôi lộn xuống sân thượng, nhảy xuống ống thoát nước rồi lộn nhào qua bệ cửa sổ, như thể mình là nghệ nhân nhào lộn còn mái nhà ở Dezmond là cả cái rạp xiếc của tôi ấy. Tôi mỉm cười lớn hết cỡ luôn.


Tiếp theo. Bước thứ ba. Đang để ý không? Tốt.

Khi tiếp đất, đôi ủng của tôi trượt trên đống đá cuội. Rồi tôi bước đi như một lên lừa đảo quái đản vậy. Gót chân thép của tôi ngoan ngoãn lại; trở nên im lặng như tôi muốn. Vào lúc đó, họ vẫn đang cười. Tôi muốn nói gì đó ngắn gọn để thu hút sự chú ý từ họ. Kiểu cho phép tôi thể hiện sức sáng tạo của mình ấy? Tôi biết là điều tôi nghĩ ra cho bạn cũng không phải tốt nhất hay gì. Nhưng biết nói gì giờ? Tôi là một con linh cẩu thích pha trò. Tôi nghĩ mình cũng thuộc dạng biết sáng tạo đấy. Ấy không- không phải Shakespeare đây. Mà giống Tennyson hơn. Mà bạn có biết Kraken không? Thôi kệ đi.

Rồi họ lú hết cả lên. Vài người đã nghĩ rằng họ sẽ nhận ra tôi – nhưng làm gì có, nhưng họ cũng nghe thấy tên của tôi thoang thoảng trong lời thì thầm tại đây tại đó. Hoặc là khi tìm thấy thức ăn thừa của tôi trong bản tin sáng hôm sau.

Mấy người bợm rượu nghĩ chúng ta là bạn. Nó còn khiến mọi thứ tệ hơn.

Dưới ánh trăng, trong những con hẻm chật hẹp, những gì tôi nghe được là tiếng hét mơ hồ. Các loại côn trùng thì tụ thập dưới ánh đền lồng. Chúng là kẻ duy nhất nhìn thấy mọi thứ, nhưng cũng chẳng thể nói được gì.

Mà biết gì không, hai người đầu tiên song hành với nhau nghe rất tuyệt đấy. Cười phá lên? Tuyệt thật. Một nụ cười? Cũng rất đẹp, tôi rất thích nhìn thấy những chiếc răng sâu của bạn. Nhưng nếu làm nốt bước ba thì sao? Mọi người sẽ hoảng sợ. Theo tôi thì nó sẽ làm tăng hương vị đó. Nếu không có ba bước này thì làm sao có nổi một bữa ăn trọn vẹn được. Rồi đã có người hỏi ý kiến tôi thêm lần nữa.

Một nụ cười, một tiếng cười, một tiếng hét thoang thoảng mơ hồ kia. Rất đẹp. Vừa nói xong, tiếng chuông Nhà Thờ cũng vang lên.

Một. Hai. Ba.

Hửm. Tôi nghĩ sẽ sớm thôi, do bạn cũng chẳng ở đây lâu mà.


Bước tiếp theo – cũng là bước cuối cùng. Tôi đã giải thích chưa nhỉ? Bạn cũng ở đây rồi. Nên chắc hẳn cũng biết rồi ấy. Biết rằng tôi đang nói gì, nhưng bạn còn chả nói được cái gì! Nên nếu đồng ý thì gật đầu đi.

Mừng vì chúng ta đã đến với sự thấu hiểu.


Bước cuối nào. Hở? Bạn nghĩ là chỉ có ba bước thôi hả?

Tôi đưa họ về nhà.

Ừ, bạn không phải người đầu tiên đây.

Tôi đưa họ về nhà rồi làm cho họ bữa tối. Tôi đọc cho họ nghe. Nói chuyện với họ. Săn sóc họ khi chẳng còn ai khác làm thế nữa. Rồi sau một thời gian thì tôi cũng bắt đầu chán họ. Nên bạn chỉ có thể nói rất nhiều điều trước khi kịp nhớ lại thôi. Một khuôn mặt mới sẽ khiến lời nói của người đó thay đổi mà. Hiểu đúng không.

Và chuyện gì đã xảy ra với những người kia ư?

Tôi thích xé nhỏ mọi thứ từ một thành mười rồi thành nhiều nữa. Vì bạn biết đấy… nó sẽ khiến mọi thứ đơn giản hơn. Nhưng tôi không muốn nói to cái này ra đâu. Người ta hiểu nhầm mất.


Tôi thường không hay đưa ra lời khuyên cho người khác lắm.

Vì tôi là một người lắng nghe. Nên hầu hết những thứ tôi nói ra đều từ miệng người khác ấy mà. Nhiều khi tôi cũng áp tai vào một bức tường rỗng rồi lắng nghe chúng nhiều ngày liền. Tôi cẩn thận lắm đấy. Bạn nghĩ tôi là chuột ư. Muốn biết tôi đã nghe được gì à? Xin lỗi, tôi không nói được.

Đôi khi tôi nghe được những thứ người khác không muốn nghe. Tôi có thể nghe thấy tiếng màn đêm trước khi cơn mưa nặng hạt rơi xuống. Có thể nghe thấy âm thanh không khí dần trở lạnh. Tôi có thể nghe thấy nụ cười. Nghe thấy nụ cười chuyển sang cau có. Tôi có thể ngửi, ngửi thấy một sự lo lắng đang hiện hữu trong đôi mắt của họ.

Món ăn yêu thích của tôi là những thứ có đôi mắt xám. Vì tôi có thể giả đò rằng đôi mắt xám của họ đang phản chiếu lại sắc xám của thành phố và bầu trời; những con đường rải sỏi và thánh đường xây lên từ đá. Thậm chí tôi còn giả đò tốt tới nỗi khiến nó thành sự thật, rồi một ngày nào đó, công sức của tôi cũng sẽ được đền đáp.



Bạn không hiểu tôi đang nói gì đúng khô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