| Cá Lớn Trên Trời Xanh |
| Tác giả: (user deleted) |
| Đăng vào 03 Sep 2021 02:25 |
What this is
A bunch of miscellaneous CSS 'improvements' that I, 
Croquembouche, 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.
.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;
}
}
}
| Cá Lớn Trên Trời Xanh |
Tác giả:  KirQ |
| Đăng vào ngày 14 tháng 10 năm 2020 |
“Ông ơi, ông có thể kể chuyện cho cháu nghe được không?”
“Tất nhiên là được, công chúa bé nhỏ của ông. Nhưng hãy chắc rằng con đã chải răng trước khi lên giường.”
“Con làm lâu rồi. Nhìn nè, ông.”
“Ôi răng con như những viên ngọc trai lấp lánh vậy. Được rồi, con muốn nghe câu truyện gì trong tối nay nào?”
“Hãy kể về người bạn thân nhất của ông khi ông còn nhỏ đi ông.”
“Nhưng con đã nghe về ông ấy cả đống lần rồi mà…”
“Đi mà ông, một lần nữa thôi..”
“Được rồi, được rồi. Để xem, chúng ta dừng ở chỗ nào rồi nhỉ? Oh, ông nhớ rồi. Khi ông là một đứa trẻ, ông không có nhiều bạn để chơi cùng. Ông từng lui tới khu rừng và chụp những bức ảnh về cây cối và động vật mỗi ngày. Cánh rừng thật hùng vĩ, có hàng ngàn loài bướm lượn lờ xung quanh và đậu trên người ông. Những chú chim thật đẹp đẽ và rực rỡ, hát vang trên những cái cây cao nhất. Bỗng một ngày, ông thấy ông ấy.”
“Bạn ông á hả?”
“Đúng rồi. Ông ấy đã bị kẹt trên một cái cây, và ông ấy không thể gọi kêu cứu.”
“Tội nghiệp ông ấy. Và rồi chuyện gì xảy ra nữa, ông?”
“Trước tiên, ông đã bị sốc khi nhìn thấy ông ấy. Ý ông là, Tất cả mọi người đều sốc khi thấy những cá mập bay, phải không? Nhưng rồi ông nhận ra ông ấy đã cố gắng giẫy dụa để thoát khỏi đó, Nên ông thu hết can đảm và trèo lên cây đó.”
“Rồi sao nữa, ông?”
“Ông ấy trông rất sợ hãi khi nhìn thấy ông. Nhưng khi ông ấy nhận ra ông đang giúp ông ấy, ông ấy đã bình tĩnh trở lại. Ông ấy khá là nặng so với một đứa trẻ nhưng sau khi cứu được ông ấy ra thì bọn ông đều ổn.”
“Ông ấy trông ra sao vậy, ông?”
“Ông ấy chỉ là một đứa bé cá mập, với làn da xanh đậm trông giống biển cả. Đôi mắt của ông ấy thật đẹp đẽ. Tối tựa màn đêm nhưng lại sáng hơn những bóng đèn. Khi ông cứu ông ấy xuống, ông ấy đã bay vòng vòng ông nhiều lần. Ông đặt tên ông ấy là Alex và ông ấy trông thật hạnh phúc với tên của mình."
"Ông ấy có đói bụng không hả ông?"
"Ồ có chứ. Ông ấy nghiện đồ ăn cho chó, có thể ông ấy là một con cún trong một bộ đồ cá mập. Ông nhớ rằng chiếc đuôi của ông ấy đã bị gãy và ông ấy phải ở lại trong rừng để dưỡng thương nên ông đã mua cho ông ấy rất nhiều đồ ăn và cả đồ chơi mỗi ngày. Khoảng thời gian đó thật đẹp đẽ cho cả hai ông. Nhưng rồi một ngày, một vài thứ đã ập tới."
"Có chuyện gì vậy ông?"
"Vào một ngày, khi ông trở về nhà sau giờ học, ông đã nhìn thấy vài chiếc trực thăng bay trên cánh rừng. Ông biết rằng bọn họ muốn bắt ông ấy nên ông đã chạy nhanh nhất có thể tới nơi trú ẩn của ông ấy. Nhưng khi ông tới nơi, nơi trú ẩn của bọn ông đã bị phá hủy. Họ vẫn đang tìm kiếm ông ấy nên ông biết rằng ông ấy vẫn đang an toàn."
"Ông có biết ông ấy trốn nơi nào không ạ?"
"Yeah, ông biết nơi ông ấy trốn. Đó là một ngọn đồi nhỏ ở cánh rừng nơi bọn ông đã cùng ngắm bầu trời cùng nhau. Ông đã phải trốn cho tới khi màn đêm buông xuống. Khi ông tới, ông ấy đang trốn ở trong trong một bụi rậm. Nhưng khi ông ấy nhìn thấy ông mọi sự sỡ hại đã bị bỏ lại. Ông nhận thức được rằng mình phải cứu ông ấy. Ông phải buông bỏ ông ấy. Như một chú chim, tung đôi cánh tự trong cả bầu trời rộng lớn. Và rồi, khi vì sao rơi xuống từ bầu trời- nhưng hình như nó không phải là một ngôi sao. Đó là mẹ của ông ấy- một con cá mập lớn tráng lệ. Dường như cả dãy ngân hàng đang phủ trên da của bà ấy. Bà ấy đang tìm đứa con của mình, và đó cũng là lý do khiến bọn người kia muốn bắt họ. Ông biết ông ấy phải rời khỏi đây, nên ông đã tặng ông ấy một bịch đồ ăn cho chó, và món đồ chơi ưu thích của ông ấy. Ông ấy không nỡ từ biệt nhưng ông ấy không còn cách nào khác. Ông ấy bay vòng quanh ông lần cuối và trở về bên mẹ ông ấy và bay vào khí quyển. Đó cũng là lần cuối ông thấy ông ấy."
"Ông có biết ông ấy đang ở đâu không ạ?"
"Ông không chắc lắm. Nhưng ông chắc rằng ông ấy đang ở một nơi tuyệt vời. Có thể ông ấy sẽ thành như ông bây giờ, kể những câu truyện trước giờ ngủ cho những đứa trẻ về người bạn cũ trong quá khứ."
"Nghe hay đấy ông há. Thế còn về những người bắt ông ấy thì sao ạ. Họ có tra hỏi ông điều gì không ạ?"
"Và đó sẽ là một câu truyện vào dịp khác, Giờ thì. đã đến lúc ngủ rồi hỡi con khỉ mộng mơ. Chúc cháu có một giấc mơ đẹp."
"Ông cũng thế."
Mô tả dị thể: Một giống cá mập xanh đực (Prionace glauca) có thể bơi xuyên không khí như khi nó ở trong nước.
Ngày Quản Thúc: 16-11-2013
Địa điểm tìm thấy: Miami, Florida
Tình Trạng Hiện Tại: Trong hồ cạn thuộc khuôn viên của Điểm-B14
Ghi Chú: Có thể ăn tất cả mọi thứ như một con cá mập bình thường, nhưng có vẻ thích đồ ăn cho chó hơn. - Ts. Uhlman
