Phía Bên Kia

Phía Bên Kia
Tác giả: Nya PieceNya Piece
Đăng vào 06 Nov 2021 16:24
đánh giá: +6+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: -18rem;
        width: 15.25rem;
        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;
    }
    }
}

/* 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: -18rem;
        width: 15.25rem;
        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;
    }
    }
}

Illac

Phía Bên Kia
Tác giả: Lt FlopsLt Flops
Đăng vào ngày 26 tháng 8 năm 2020
illac-thumbnail.png

.

đánh giá: +6+x

Bốn nghìn năm trước, khi chúng ta chạy trốn khỏi thứ Ánh Sáng Thù Hận trên chiếc phi thuyền cuối cùng còn sót lại của nhân loại, chúng tôi đã có nhiều điều để suy nghĩ. Những suy nghĩ đó bao gồm: những dấu ấn từ giống loài chúng tôi, đã bị thiêu rụi; di nguyện của Tổ Chức; và liệu thế giới mới, tương lai của chúng ta có hứa hẹn không.

Trong số những suy nghĩ đó, có hai khái niệm được chứng minh là có thể kìm hãm tâm trí chúng ta nhiều nhất.

Thứ nhất — chúng tôi tin rằng mình là Năm Mươi Đứa Trẻ Bất Tử của thánh thần.

Tuy nhiên, hy vọng đó đã vụt tắt: Cơ thể chúng tôi đang chết dần. Nhưng không phải do hành động của Ánh Sáng chứa đầy thù hận đó; thực ra, việc tách rời khỏi Trái Đất Nguyên Bản khiến chúng tôi mất đi sự bất tử. Cơ thể chúng tôi già đi, cho đến thế kỷ thứ ba. Các vết thương không bao giờ lành. Các vết trầy xước và sẹo từ các chiến thắng tựa như thua cuộc tồn lại trên làn da lão hóa.

Trong đau đớn, chúng tôi cầu xin sự khoan dung từ Ninurta. Ôi, Hỡi Hộ Vệ. Giúp chúng con vượt qua hành trình này! Hãy xóa tan nỗi đau này khỏi chúng con! Nhưng ngài không cho chúng tôi một dấu hiệu gì cả.

Sau đó chúng tôi thề nguyện sẽ chìm vào giấc ngủ đông. Chúng tôi không hề biết mình sẽ làm gì, một khi thức dậy…

scp_foundation_logo.png

Khi chúng tôi tỉnh dậy ở đích đến của mình, một quãng đường 1.6 tỷ năm ánh sáng, chúng tôi biết về những nỗi bất hạnh mới. Chúng tôi phát hiên rằng mười bốn người trong chúng tôi đã tan biến. Mỗi người trong bọn họ từ chối sống thêm vài năm trong giấc ngủ đông. Họ từ chối trở thành một phần của Ngũ Thập Bất Tử khi nhân loại cần đến. Họ đã chấp nhận để những ham muốn ích kỷ đày đọa linh hồn họ, lang thang vĩnh viễn trong Miền Đất Vĩnh Cửu.

Và thay vì theo đuổi nghĩa vụ của họ — của chúng tôi — chúng tôi tìm thấy xương cốt khô và trơ trọi cua họ nằm ngổn ngang trong một khoang tàu bên dưới.

Và khi chúng ta biết được hành tinh này — hành tinh duy nhất giống Trái Đất trong hai tỷ năm ánh sáng  — không thể kéo dài mạng sống của chúng tôi?

Chúng tôi tin rằng – thứ hai – rằng chúng tôi đã mang theo cái chết bên mình.

Chúng tôi nghĩ rằng hành tinh này, hiếm có đến mức dị thường, tồn tại chỉ để giam cầm chúng tôi. Để hút sạch sức mạnh của chúng tôi – thay vì ngược lại. Và giờ tôi nhận ra tại sao điều đó lại khiến chúng tôi chịu khổ đau…

Một ý niệm độc ác của vũ trụ đã đạt hành tinh này ở đây để sát hại chúng tôi. Để nhử chúng tôi khắp Thiên Hà, và khi chúng tôi không còn bất tử, ra đòn lên chúng tôi. Thứ Ánh Sáng Thù Hận đó có thể làm được điều đó nếu nó bỏ ra hàng niên kỷ — nhưng chỉ chúng ta thôi? Sẽ đến nơi nhanh hơn. Và rơi vào cái bẫy này.

Bên ngoài thân tàu của chúng ta, một gióng vi khuẩn mới nảy mầm,tạo ra lượng O2 dồi dào – chất dộc đối với cơ thể hiện tại của chúng tôi. Chúng tôi không thể hít thở chúng. Chúng tôi nắm giữ các công cụ để phục hồi dân số — thiết bị để tạo nên một sơ đồ cơ thể con người mới và để hàng triệu con người trỗi dậy.Chúng ta sẽ dẫn đầu nhân loại chinh phục Trái Đất một lần nữa.

Chúng tôi có thể…

… Nhưng trái tim của chúng tôi lại nặng trĩu.

Trên bờ vực để cho nền văn minh phát triển một lần nữa, trên Tân Địa Cầu này, chúng tôi biết rằng trong trái tim mình đây chỉ là phù du. Ngay cả khi chúng tôi hoàn thành trách nhiệm cuối cùng của mình; ngay cả khi chúng tôi hoàn thành công việc của mình, ngay cả khi chúng ta sống sót? Ánh Sáng Thù Hận sẽ lại đến đây, và hủy diệt mọi thành quả của chúng tôi.

Vậy thì đây là gì, nếu không phải căn bệnh ung thư? Cái gì làm chậm thủy triều nếu không phải hàng nghìn thế hệ bị lãng phí?

Điều gì sẽ xảy ra nếu… Chúng tôi đơn giản là không tái xây dựng?

Đây là một câu hỏi mà hầu hết chúng tôi đều chạm đến một cách tự nhiên. Hầu hết. Thật không may, một số người trong số chúng tôi vẫn tiếp tục duy trì hy vọng.

Nhưng nếu chúng tôi có thể sửa lại điều đó…

scp_foundation_logo.png

Vào một đêm yên tĩnh - chỉ vài giờ trước khi chúng tôi lên kế hoạch kích hoạt Chiến Dịch Thaumiel, cung cấp năng lượng cho Phiên Bản-2000 và châm ngòi cho nền văn minh nhân loại 2.0 - chúng tôi quyết định sẽ chống lại chúng. Nếu chúng tôi thất bại, ý muốn của họ sẽ được hoàn thành; nếu chúng tôi thành công, chúng ta chắc chắn sẽ chết.

Như ba đối một vậy. Trong 36 người còn lại, 27 người đã đánh mất hy vọng – tôi là một trong số họ. Chín người còn lại – vẫn tràn đầy lạc quan – không hề sợ hãi. Không có tiếng gọi nào trong đêm. Không có cự cãi gì cả. Thay vào đó, trong lúc họ ngủ, chúng tôi để ý những chiếc quan tài ngủ đông phát sáng của họ…

… Với công nghệ của chúng tôi, những thứ đó có thể hoạt động vĩnh viễn – đúng không?

Chúng tôi ép tay và chân của họ vào miệng buồng ngủ đông lạnh giá. Củng cố niêm phong bên ngoài. Đập vỡ các khóa thời gian và bịt kín các buồng bằng vải tẩm nhựa. Khi họ tỉnh dậy trong sợ hãi trong vài giây trước đó, mặt sàn giờ đã trống rỗng.

Nhà Sáng Lập của chúng tôi cũng thế, chìm trong giấc ngủ đông – nhưng chúng tôi sẽ không thả ông ta ra. Ông ta là cơ hội lớn nhất để tái tạo lại nền văn minh của chúng tôi – Tổ Chức của chúng tôi – giữa chúng tôi. Chuyện đó không thể xảy ra được.

Sau đó chúng tôi phá hủy mọi thứ. Đốt hết các tệp dữ liệu, đập phá các kỷ vật thành từng mảnh. Sức mạnh của chúng tôi chống lại sự sống còn - chống lại sự tồn tại tiếp tục của giống loài chúng ta – như sự thèm khát. Không có đường để quay lại đâu.

Đối tượng thử nghiệm của chúng tôi, con bò sát gì đó đó thả mình vào lục địa hoang vắng bên ngoài địa điểm đổ bộ của chúng tôi, sẽ là thứ đầu tiên - và cuối cùng - thức tỉnh trên hành tinh này, và một ngày nào đó, cảm nhận được Ánh Sáng trở lại từ nanh vuốt của không gian và thời gian. Nhưng, chúng tôi sẽ không phải chịu những chỉ thị bi thảm đã chăn dắt chúng tôi đến đây. Nó thôi thúc chúng tôi xây dựng một Tổ Chức mới, để nhân loại có thể lại đắm mình trong một nơi trú ẩn hài hòa dưới ánh nắng mặt trời quen thuộc.

Hành tinh này, nếu nó đơm hoa kết trái như máy tính trên đây phát hiện ra? Thì nó sẽ phát triển mà không có chúng tôi.

Chúng tôi là những người cuối cùng.

Chúng tôi đã mất tất cả. Nền tảng để xây dựng của chúng tôi. Con cháu của chúng tôi. Tương lai của chúng tôi. Ông trời mở đường cho chúng tôi, nhưng chúng tôi lại tìm thấy gian truân, và bây giờ chúng tôi mệt mỏi rồi. Chúng tôi đã thất vọng — sự phản ánh của 14 người đã từ bỏ. Chúng tôi phát mệt vì bị đè nặng bởi sự thất vọng của hàng tỷ người bị mất trước Ánh Sáng Thù Hận.

Nhưng chúng tôi sẽ không để [DỮ LIỆU BỊ XÓA] giành chiến thắng.

Tôi nghĩ rằng, giải pháp để tồn tại vĩnh viễn? Độ Không Tuyệt Đối. Bởi vì, bên trong giấc ngủ đông, cuối cùng chúng ta có thể đạt đến sự sụp đổ thực sự mà các vị thần đã che giấu khỏi chúng ta. Cuối cùng chúng ta có thể chiêm nghiệm về hàng chục nghìn thế hệ đã đưa chúng ta đến đây. Và điều này, kéo dài bởi công nghệ tối tân của chúng tôi, sẽ tồn tại bên dưới lớp đất đá và mục nát.

Cho đến khi entropy chấm dứt vĩnh viễn; họ sẽ được bảo vệ, trong khi các buồng của chúng tôi vẫn bị đóng băng.

Chúng tôi là Con Người, và chúng tôi yên nghỉ ở đây.


đánh giá: +6+x

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