Tản Bộ Trên Không
Tản Bộ Trên Không
Byㅤ Suzu-HitsujiSuzu-Hitsuji
Published on 29 Sep 2022 14:11
đá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

HIỆN TẠI


Một danh sách về những thứ sẽ đến.

Một cây gậy gỗ gụ đã bị hóa đá, được đẽo lên từ chi của một cái xác tại Vườn Bách Thảo Iberia, thuộc quyền sở hữu của Sở Bảo Tồn. Một món nợ từ một người bạn, một món nợ có thể chịu được sự căng thẳng chất dồn lên kia.

Một bộ lông mượt mà trở nên sẫm màu vì bụi than và bồ hóng. Đủ dài để khiến cô vấp ngã, một thiết kế được thiết kế chìm một cách đầy tinh tế với một niềm vui táo bạo cho việc bay lượn.

Một chiếc nón lá, được làm bằng tay chỉ trong ba mươi phút. Cũng chẳng có gì đặc biệt. Nhưng tất nhiên rồi, những điều nhỏ bé còn có thể là cả thế giới với người khác cơ mà. Từ việc thực hiện các nghi lễ xấu xa, hối lỗi, lệch lạc tình dục và tà giáo.

Cái tên cô đã giữ lấy của bộ ba, trong một bến cảng đầy an toàn, PHÙ THủY.



TRONG cHU kì tRƯỚC


Một niềm hi vọng chưa được đáp lại.

Cô thở dài bên ánh nến rồi làm tắt ngọn lửa. Bức màn dày đặc của màn đêm lùi lại và mắt cô trở nên linh hoạt như mèo vậy, cô có thể phân biệt những đường nét giống người chị em của mình, một thứ tình cảm được vun đắp trong cô nhi viện rồi được gửi tới một tu viện nào đó. Tiếng ngáy nhẹ kia gợi cho cô hình ảnh những con chiên ngoan đạo, đáng kính, toàn những con người hoàn toàn xa lạ đối với cô.

Em muốn ngủ.

Ừ. Chúa cũng cần điều đó mà.

Nhưng tại sao em lại không ngủ được?

Cô quấn chặt chăn, cuộn mình dưới ánh trăng đó. Nó thoải mái đến đáng thương, gây một chút khó chịu trên làn da trắng nõn của cô. Nhưng cô lại quấn chặt hơn nữa, hi vọng nó sẽ khiến cô quên đi mấy thứ vụn vặt như thế. Cô là đứa con của Chúa. Không hơn. Không kém.

Cô quấn sâu hơn vào tấm vải và lún sâu hơn vào giường. Cô lẩm bẩm một bài hát ru, hầu hết các từ đều rất sáo rỗng, cố bắt chước thứ âm điệu xa lạ, xa xôi. Cô cố nhớ lại, một bài hát của người mẹ chưa từng được ai an ủi đang cố an ủi một đứa bé đang khóc lóc giữa buổi làm. Một gương mặt đã bị lãng quên từ lâu lắm rồi.


Soạt.


Một âm thanh khác khiến những ăn xin phải chú ý đến, khiến cô cảnh giác với cảm giác sợ sệt. Một mảnh vải mềm đến bất thường, gần như chẳng thể nhìn thấy va vào sắt và làm nổ tung bê tông. Từ trên cao, bên ngoài cửa sổ. Bên ngoài á?


Cạch.


Cô hất chăn ra và đứng lên phần tựa đầu của giường, vừa đủ cao để nhìn ra chiếc cửa sổ hình vòm kia. Cô cố đứng vững bám vào song sắt lạnh lẽo và ghi lại những dấu ấn trên mái nhà đơn sơ bị chia cắt kia. Đã bị nhuốm đen, gần như không thể thấy, nó lờ mờ ở trên mái nhà, như con mèo vồ lấy bồ chi hương vậy.


Soạt.

Cạch.


Cảm giác như được an ủi. Con bướm đêm nhỏ sẽ cuộn mình lại khi hạ cánh như bong bóng trong cốc rượu sẫm màu vậy, trước khi vỡ tung, chúng trở lại với ánh vinh quang của ban ngày và xuất hiện lên bầu trời nốt một lần cuối.


Soạt.

Cạch.


Soạt.

Cạch.


Cô mơ hồ nghĩ rằng mình không nên đứng thêm nữa, không lại tụt huyết áp mất. Cô thả song sắt ra rồi ngáp một cái.


Soạt.

Cạch.

Soạt.

Cạch.


Cô lại ngã xuống giường và ước gì mình có thể nằm như thế mãi.


Soạt.

RẮC🗲






































Sụp.

Soạt.















Rắc.


Tiếng bước chân vang vọng trên nền gạch và đã bị ngắn đi bởi mỏm đá, như phần nhô ra bên ngoài vậy, quá tình cờ.

Khi hai chị em đang thở, có một âm thanh khác len lỏi vào màn đêm, nó bị khống chế, lần này nghe nó xa lạ, trầm hơn.

Như để ngăn mình cố soi mói, cô ngừng thở, ngưng chuyển động, mong tim cô ngừng đập luôn cho nhanh. Thêm một cái rồi lại bớt một cái.

Cô nhắm tịt mắt lại.






























Neophyte, lại đây.















An toàn rồi. Nên cứ nhìn đi, không hại gì đâu.

Không ai dám cựa quậy. Giọng nói run rẩy hòa vào chính nó, chói tai, tan vỡ, nhưng chẳng ai để ý cả. Không một ai, trừ người nói. Chỉ có một cái tên duy nhất thôi.

Phù Thủy! Hỏa ngục! Cám dỗ!

Ma thuật.















Vô tư lên nào, quá giờ ngủ rồi mà.

Khoan đã.

Hỏa ngục!












Sự quyết tâm.

Cô là phủ thủy đúng không?





























Cưng đã vượt qua bao chu kì rồi?

Tôi… chịu.

Chà, lanh thật đấy. Chị đây có thể ngố ngố tí như này không nhể?















Soạt. Rắc.

Cô từ từ đứng dậy, lo lắng im lặng, tai đỏ bừng lên vì xấu hổ. Cô thò đầu ra, lần này cứ lảng tránh đứng vững trên mỏm đá. Đôi mắt cô liếc theo một đường cong, một cái bóng hăng hái lướt qua ở bên trái.

Phần lưng lộ ra một nửa, với chiếc nón lá rất hợp với chiếc áo choàng để lộ khuôn mặt nhợt nhạt hình trái xoan. Chiếc mặt nạ gần như đối xứng được chạm khắc từ đá cẩm thạch, môi mím lại, má phồng lên trông rất lạ, có mờ ánh màu đào. Một nửa bị che khuất bởi những đường cong mềm mại và gần như không thể thấy, đôi mắt lấp lánh với chiều sâu tựa vĩnh hằng, một sự vô thường của vật chất.

Phù thủy cúi xuống, cúi người về phía trước để nhìn cô rõ hơn.

Úi cha. Đang sợ hả?

Cô choáng váng lắc đầu.







Đáng lưu lại đấy. Chất lượng xịn nhất từng gặp luôn.

Từ chối!

Tôi không phải phù thủy.

Phủ thủy nghiêng đầu rồi tựa vào cột. Cô ta nở một nụ cười đăm chiêu, trêu chọc, và đẩy ngụ ý ám chỉ cho một thứ còn khôn ngoan sáng suốt hơn thế, một miếng mồi cứ thế lắc lư khó hiểu trước chân ngã.









Tôi ngăn em đi ra được không?

Phù thủy không thể vào thánh đường.

Sao mà quên được chứ? Thì đúng là không vào được mà. Nên chỉ muốn mời cái này thôi.

Nhưng mà…





Nên chị đây đề xuất một phương án khác được không nhỉ?









Đừng có đùa.

Như thế nào cơ?

Áo choàng của cô khẽ quấn lại như miếng gỗ rỗng không đang nứt ra vậy, tiếng tách tách từ tĩnh điện của phốt pho, những thứ lạ kì đến đáng sợ rồi một bàn tay đưa ra. Trên đó có một nửa đồng xu dính phấn, móng tay không trầy không mờ gì cả, nhưng rất tôn nghiêm và rất có phẩm giá. Nó nằm ngoài song sắt, không hề bị bẻ ra, tay khum lại một chút. Vẫn nằm trong tầm với.

Hai người sẽ giao phó bản thân cho tôi chứ?




Cân nhắc chứ?

Tội đồ!

Đồ trẻ con, nóng nảy, vô ơn!




Sao ngươi dám — !

Khi cô đưa tay ra, gạch lẫn kim loại bắt đầu bị đẩy ra, bác bỏ đi mọi định luật vật lý. Như thứ nở ra sau khi ném đá xuống mặt hồ vậy, chúng tạo thành một cánh cổng tại nơi đã từng là bức tường và bao vây phù thủy lại. Tay vẫn còn, nó biến thành chỗ dựa để cô bước ra, đầu tiên là những viên gạch rồi ngừng hẳn.

Cô nhìn chằm chằm vào thứ đã rơi xuống rồi nhìn vào vị phù thủy đang gật đầu với cô.

Như một điệu waltz, cô phù thủy nhẹ nhàng đưa bàn tay kia ra cho cô, từng bước nhẹ nhàng, đột ngột. Một tay đang giữ đầu cô lại, còn tay kia thì cứ lơ lửng cạnh cô mà bước, bước, bước bước đi, theo giai điệu của dàn nhạc pneuma. Cô đang ngắm nhìn lễ hội hóa trang của mình như một đám mây vậy, cứ nhẹ nhàng đu đưa khi phù thủy chỉ lối cho cô tiến về phía trước.

Bước, bước rồi lại bước.

Cô nín thở rồi thừa cơ hít một hơi thật sâu, một tiếng cười khúc khích phát ra từ con người đó. Đó là niềm vui của sự thành công và thách thức, ở trên cao, cô có thể thấy được lũ quạ đang nhàn rỗi theo dõi cô từ phía dưới, ẩn sâu trong ánh đèn mờ kia là một thế giới xa lạ mà cô chưa từng hay biết.

Điệu nhảy đưa họ đi qua tiệm bánh, quán trọ và tòa thị chính. Một con đường vòng cung trải dài tại sân trong, từ đây có thể thấy được mọi thứ ở cái thị trấn bé nhỏ này. Những con hẻm ngoằn ngoèo, những cây cầu và con kênh, những cái giếng hoang và những bức tường một. Rồi cuối cùng, hai người trèo về tu viện, nghỉ ngơi tại tháp chuông, nơi cao nhất của cả thị trấn.




















Hết hơi.




Mệt chưa?

Rồi.

Tránh né tình cảm của người khác chính là ma thuật của em đấy cưng.

Ồ.



















Rồi chuyện gì sẽ xảy ra với tôi?















Thì cứ là chính mình thôi. Chị đây cũng chỉ biết một con đường duy nhất cho cô gái đặc biệt này đấy. Nếu muốn theo ngành học thuật thì thành phủ thủy thử xem?















Chị sẽ đưa em đi chứ?

Miễn sao tôn trọng chị mày là được.

Được.






















Tên chị là gì?

Hecate.

Nghe bất kính thế!















































Chắc chưa?

Chắc.






























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