Hub ĐÊM XUỐNG

Hub ĐÊM XUỐNG
Byㅤ Suzu-HitsujiSuzu-Hitsuji
Published on 15 Sep 2022 16:03
đánh giá: +7+–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;
        pointer-events: auto;
}
 
@media not all and (max-width: 767px) {
 
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }
 
    #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-x: hidden;
        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á: +7+–x

Hub ĐÊM XUỐNG

Canon Hub » Hub ĐÊM XUỐNG

Có lẽ một ngày nào đó ánh sáng sẽ quay lại nơi đây. Và chúng ta sẽ có một cuộc đời dư dả hạnh phúc. Nhưng vẫn chưa phải hôm nay đâu. Hôm nay, ánh trăng đỏ máu tại nơi bầu trời phản chiếu xuống vịnh. Tại nơi cuồng loạn này, không có chỗ cho ánh dương.

Tiếng còi ca hai thổi lên và tiếng chuông giữa trưa bắt đầu vang lên. Người người bắt đầu đổ ào ra phố.

Chòm Sao Của Nữ Vương ầm ầm băng qua những tảng đá trên con phố ngoài căn hộ này, xô đẩy những con người đang đi trên đường kia.

Những người đeo trên mình chiếc huy hiệu rực rỡ của thành phố Dezmond, Thủ đô của Vương Quốc Xerophyllia. Bạn đóng rèm cửa lại rồi nhìn đi qua chỗ khác. Rồi ngay lập tức, họ đã đến để điều tra về vụ án mạng đầy ghê sợ của hôm qua.

Khi đang khám phá căn hộ tối tăm đó, hình ảnh nạn nhân của vụ ẩu đả hôm qua vẫn tràn đầy tâm trí bạn. Liệu người đó đã sống trong môi trường tệ hại như này ư? Cứ ngày ngày đấu tranh với màn đêm bên trong vậy ư? Có lẽ người đó đã không phải hét lên trước khi con quái vật xé xác mình rồi.

Rồi nó tấn công bạn. Ôm lấy màn đêm là cách duy nhất để sống sót tại chốn đô thị đẫm máu này. Bạn chắc chắn như vậy.

Móng vuốt biến thành dao găm khi cảnh binh đập uỳnh uỳnh vào cửa. Tóc bắt đầu mọc ra từ người bạn. Một tiếng rắc kinh hoàng vang lên từ căn hộ gần như trống rỗng khi bộ xương của bạn phát triển và bắt đầu lệch ra. Đôi mắt ố vàng của bạn nhìn vào nạn nhân của tối qua, và bạn tựa người vào khung cửa. Và bạn nhận ra một sự thật đầy phũ phàng.

Ngay tại đây. Và ngay lúc này. Và có lẽ là lúc nào cũng thế?

Ai rồi cũng sẽ chết đi trong màn đêm thôi.

TÂM SỰ KHÔNG?

ĐÊM XUỐNG là gì?

ĐÊM XUỐNG là một canon mang phong cách gothic được đặt bối cảnh từ thời Victoria, lấy cảm hứng từ vài tác phẩm nổi tiếng như Bloodborne và Fallen London. Canon này diễn ra tại vương quốc của Xerophylla, là một quốc gia tương đương hoặc nhỉnh hơn Anh.

Đây là một vũ trụ khác, nơi Tổ Chức là một cơ quan quản lý. Thống trị Vương Quốc Xerophylla sau Trận Chiến Arcane Thứ Nhất, là một cuộc chiến đưa các thế lực siêu nhiên ra mắt trước công chúng.

Nhiều thập kỉ trôi qua sau Trận Arcane thứ nhất, Tổ Chức càng càng tự tin, có năng lực hơn và trở nên rất kiêu ngạo. Họ đã tạo ra một loại vũ khí có thể đánh bại cả thần linh. Mục tiêu của họ? Là Yvith, nữ thần của màn đêm.

Chiến đấu thất bại. Yvith đã nhấn chìm thế giới trong màn đêm vĩnh cửu với cơn thịnh nộ ngập tràn. Các xác sống là sinh vật của màn đêm tràn ngập xung quanh và Tổ Chức cũng bặt vô âm tín.

Giờ chẳng còn lựa chọn nào khác nữa, đành phải ôm lấy màn đêm thôi.

Bạn Muốn Đóng Góp?

Nếu muốn viết bài cho ĐÊM XUỐNG, tôi đề xuất bạn nên đọc trước vài bài trong canon đã! Nhằm làm quen với văn phong và cách thiết lập trước. Nếu cần người góp ý cho ý tưởng của bạn, hãy liên hệ MoreMuffinsMoreMuffins hoặc tham gia sever discord của ĐÊM XUỐNG.

‡ Giấy Phép / Ghi Công
_cc_licenseboxhubđêm-xuống
sửa đổi trang: 31, chỉnh sửa lần cuối: 05 Mar 2023 06:50
Chỉnh sửa Đánh giá (+7) Tag Bình luận (1) Lịch sử Tệp In Công cụ trang + Lựa chọn
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