TẾT TƯNG BỪNG - MỪNG TỔ CHỨC

▷ Show Code ◁
đánh giá: +21+–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; }

đánh giá: +21+–x

□ Điểm 21-VN - Phân Khu Linh Thể Học - ▣ King Pigeon ▣


23:00 - 31/12/2022

Anh đưa đôi mắt thẫn thờ nhìn lên trên chiếc bàn đầy ắp các cuộc luận văn hay dự án kể lể về những chi tiêu hay những đồ án mới từ những nghiên cứu viên trẻ cần anh bắt tay vào đánh giá nhưng anh chỉ ngồi đây, trên chiếc ghế đẩu đã kêu lên cọt kẹt mỗi khi anh ngả tấm lưng ra đằng sau và thở dài đầy não nề.

“Tao ghét làm thứ công việc này, mọi thứ đang dần trở nên tồn đọng và tao chưa bắt tay làm gì cả.” anh nói bằng một tông giọng trầm đều nhuốm một màu mệt mỏi hướng tới người đối diện chiếc bàn đang ung dung táy máy với món đồ trên tay.

“Tao biết, mày đã trở nên quá già và thèm khát lại những chuyến phiêu lưu thời trẻ nhưng bạn tôi ơi, nhìn xem một năm đã qua rồi sao lại ủ dột thế. Bộ Tổ Chức bạc đãi với một phó quản lý như vậy sao?” Một giọng hoàn toàn đối lập với tông giọng của vị nghiên cứu viên đang chết chìm trong đống công văn kia, nó tràn ngập sự hi vọng vào những điều tốt đẹp bằng những âm giọng cao.

“Tổ Chức đang thay đổi Nam à, mọi thứ đang trở nên khác quá xa so với những gì tao từng biết. Ý tao là, tao đã không còn nhận ra đó là nơi mà tao từng làm việc nữa.”

Vị thiếu niên trẻ hay ít ra là trông như thiếu niên trẻ, tên Nam nhướn cặp mắt… lên nhìn với vẻ mặt đầy thích thú như vừa tìm ra được thứ đồ chơi mới.

“Thay đổi á? Ý mày là thay đổi điều gì cơ cả Hưng? Như kiểu mày thay đổi từ nhà mày sang nhà của Ya Ya gì đó á hả?”

Nam vẫn tiếp tục trêu đùa vì anh biết rằng bạn của anh hay nói cách khác là vị nghiên cứu viên độ chừng 20 tuổi nhưng lại mang phong thái 70 kia đang dần tới giới hạn của cơ thể sau một đống những công việc mà hắn ôm đồm khiến việc hắn nhấc được cái thân ra khỏi cái ghế kia cũng là một kì thích chứ nói gì tới việc với khẩu súng ở gần cửa mà nã vào anh.

“Là Yostina và tụi tao vẫn chưa chính thức hẹn hò nên làm ơn ngậm cái mồm mày vào.” Lúc này vị nghiên cứu viên đang gục trên tấm bàn kia mới từ từ ngẩng mặt lên lộ ra đôi mắt cùng với quầng thâm đậm minh chứng cho sự mất ngủ cả tuần này của anh.

Hưng không nhớ là mình đã làm bạn với Nam như thế nào, chỉ biết là hai người gặp nhau ở một hiện tượng vi phạm quản thúc đã tàn phá một cả một ngôi làng, điều kì lạ là thuốc lú không hề có tác dụng với Nam dù cho Tổ Chức đã phải sử dụng cả trăm loại khác nhau, cuối cùng để bảo đảm sự bí mật của mình, Tổ Chức quyết định thu nạp Nam vào làm nghiên cứu viên cấp thấp dưới sự chỉ đạo của Hưng nhưng giờ đây, anh đang cảm thấy hối hận vì việc đồng ý vội khi nghĩ mình sẽ có được chân sai vặt vì nhìn xem, hắn đang chọc tức anh bằng cái giọng éo éo của mình.

“Thôi được rồi, vậy sự thay đổi đó là gì nè.” Nam không giấu được sự tò mò khỏi giọng điệu của mình nhưng trái ngược với sự hứng khởi của Nam thì nghiên cứu viên Hưng lại gục mặt xuống bàn và tiếp tục nói bằng thứ giọng chậm chậm của mình.

“Quá nhiều thành viên mới đã tham gia Tổ Chức và khiến nó ngày càng trở nên tồi tệ hơn, còn những người cũ thì ngày càng ít đi, không mất mạng ở nhiệm vụ thì cũng nghỉ việc vì một lý do quái quỷ nào đó.”

“Điều đó tốt chứ sao? Ý tao là vụ thêm nhiều nghiên cứu viên mới ấy.”

“Nhưng tao không thích, tao dần không cảm nhận được niềm vui khi làm việc ở Tổ Chức nữa, nó trở nên quá ồn ào và những nghiên cứu viên trẻ thì cứ thích làm quá về một vấn đề nào đó lên.” Anh thở dài thêm một lần nữa, anh đã dần không đếm được số lần thở dài của chính trong ngày này nữa rồi.

“Tao đã chứng kiến tất cả Nam à, mọi thứ. Những con người tao từng quen trở nên nóng nảy hay bị kéo vào những rắc rối do nghiên cứu viên mới gây ra, một số người không dần rời bỏ Tổ Chức thì cũng mất mạng vì những sai lầm."

Nói đoạn, anh thở dài não nề rồi lại cúi mặt xuống mặt bàn.

“Ngay cả chính tao cũng đã từng nộp đơn xin nghỉ việc rồi đấy. Tao ước gì bản thân được quay lại thời mới vào khi mà mọi thứ vẫn còn mới ấy chứ không phải là một nơi tràn ngập những sự tiêu cực như nơi này. Tao không biết mọi người có đang thật sự coi trọng tao hay không khi giao cho tao cái chức vụ quái quỷ này?” chút khiển trách lẫn trong những lời nói của anh.

“Thôi nào, mày đã từng vui tới phát điên khi nhận cái ghế phó quản lý này mà, có còn nhớ lúc mà mày khoe với tao rằng sư phụ mày đã đề cử mày lên chức cao hơn không? Mày đã gần như nhảy khỏi lầu hai vì quá vui sướng.”

“Tao nhớ nhưng cũng chính người đó đã gửi tao 300 trang chỉnh sửa về hồ sơ mà tao nộp cho bả khiến tao muốn sập luôn đấy.”

“Nhưng điều đó chẳng phải là sư phụ mày đang kỳ vọng vào mày sao?”

Hưng ngẩng mặt lên nhìn chằm chằm vào Nam hồi lâu như thể đang cố gắng tiêu cho hết đống thông tin này. Anh mở đôi mắt không thể tin được vào người bạn suốt ngày kể cho anh nghe về những đối tượng mà hắn tán tỉnh mà không thể tìm ra được chuyện nào thú vị khác nhưng Nam vẫn chưa dừng lại.

“Hay mày còn nhớ lúc mà mày nộp hồ sơ của lũ ma quỷ dưới nước không? Chính tên giám đốc mà mày hay nói là khó tính đã phải thức đêm ngồi sửa lại cho mày để mà nộp lên Tổ Chức.”

“Tao nhớ.” Hưng nhẹ giọng nhưng đang nhớ lại những kỉ niệm ấy, anh chưa bao giờ hòa hợp với tên giám đốc có sở thích quái lạ và đầy khó tính của điểm 21-VN nhưng anh cũng chưa bao giờ có thể tìm ra được một lỗi sai nào trong cách làm việc với tên đó.

“Mọi thứ rồi sẽ phải đi tiếp Hưng à, những gì mà những người đi trước trao cho mày thì cũng là lúc mày phải hướng dẫn lại cho những người mới. Mày đã từng phạm rất nhiều lỗi mặc dù giờ mày vẫn vậy nhưng cũng đã từng có nhiều người kiên nhẫn giúp đỡ mày mà? Mày chỉ đang bám víu kỉ niệm của quá khứ mà thôi nếu như vậy thì có khác nào mày đang phủ định những hi vọng từ những tiền bối khác không?”

Sau một khoảng thời gian im lặng thì cuối cùng Hưng cũng mở miệng nhưng giọng điệu lúc này đã khác, nó trở nên cao hơn và trong sáng hơn so với giọng điệu lúc đầu.

“Tao nghĩ là mày nói đúng, suy cho cùng tao vẫn chỉ là một đứa trẻ to xác.”

“Và một thằng khốn.”

“Là một con bồ câu nữa.”

“Một con bồ câu chết tiệt.”

“Thôi nào, Nam à tao nghĩ đã đến lúc mày tham gia chính thức vào Tổ Chức rồi đấy, tin tao đi mày có thể tham gia vào làm đội đặc nhiệm hay làm gì đ…”

“Đéo, tao biết mày đang gợi ý cho tao chỗ chết nên là quên việc đó đi.” Nói rồi Nam đứng dậy, cầm áo khoác mà anh mắc ở cửa rồi đi ra khỏi phòng không quên nói vọng vào.

“Đừng có thêm tao vào danh sách dự tiệc của tổ chức, hôm đấy tao bận vận động thân dưới với mấy anh và chị rồi."

“Đồ ăn tạp.” Hưng rủa thầm trong miệng sau khi cánh cửa phòng đóng lại. Hưng uể oải đi ra khỏi chỗ ngồi của mình và không ngừng lẩm bẩm những thứ mà chỉ mình anh

“Chết tiệt, mình đang dần lơ là trong công tác và cảm thấy Tổ Chức thật khốn nạn hay dần mất chất nhưng mình vẫn không thể ngừng yêu cái nơi này.”

Anh nhớ lại những gì mà Nam nói rồi bước tới bên cửa sổ nơi đặt một chiếc điện thoại cổ màu đen với những lớp bụi đã bám thành mảng trên nó.

“Chà, đã đến lúc gặp mặt lại và cám ơn lũ cấp trên chết tiệt rồi." Nói rồi anh nhấn một dãy số kỳ lạ và một âm giọng từ chiếc điện thoại thông báo cho anh về cuộc gọi đã được thực hiện đúng cách anh yêu cầu.

“Bạn đang sử dụng đường dây khẩn cấp chỉ được dùng trong tình trạng đặc biệt tới mọi nhân sự cấp cao ở chi nhánh Việt Nam, xin vui lòng gửi tin nhắn sau tiếng beep.”

“A xin chào lũ chết tiệt, mật danh bồ câu dễ thương siêu cute của mọi người đây…”

Và rồi tiếng chuông điện thoại vang lên…

□ Điểm-75-VN □
□ Châu Nam Cực □
□ Nhà Riêng, [KHÔNG RÕ ĐỊA CHỈ] □
□  Đơn Vị Nghiên Cứu Và Ứng Dụng Thứ Cấp - Điểm-07-VN □
□ Điểm-12-VN □
□ Điểm-29-VN □
□ Cảng hàng không quốc tế Nội Bài □
□ Điểm-41-VN □
□ Điểm-54 □
□ Unknown □ 
□ Điểm-21-VN□ 
‡ Giấy Phép / Ghi Công
giám-đốc-vũ-quỳnh-thưtruyện-vnđồng-tác-giảđời-thườngấm-lòng
sửa đổi trang: 25, chỉnh sửa lần cuối: 27 Nov 2023 00:06
Chỉnh sửa Đánh giá (+21) Tag Bình luận (13) 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