殴鲨专员Solstice的殴打荣誉录（LORDXVNV的作者页）
殴鲨专员Solstice的殴打荣誉录（LORDXVNV的作者页）
By: Esperanza_CaiEsperanza_Cai
Published on 19 Jan 2022 16:14
rating: +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;
    }
    }
}

殴鲨专员Solstice的殴打荣誉录（LORDXVNV的作者页）
作者：LORDXVNVLORDXVNV
发表于2021年8月27日

请在下方访问我的殴打项目荣誉录。根据我自己的计算，我的工作已经导致了超过803,420,609条自然出现的软骨鱼实体的被殴打。

不幸的是，中心似乎受到了某种超宇宙污染。

就个人而言，我觉得要怪我堂弟偷了我的认证信息，然后把他的一堆同人小说传到了我的工作电脑上。

若有需要，我自愿为他申请软骨鱼化和殴打。

主站人事档案

LORDXVNVLORDXVNV

共27篇

SCP

SCP-6987
主站评分：+163；{$note}
最新评论： yq1829 于 06 Feb 2022 05:12
最新编辑： ashausesall 于 21 Dec 2021 15:02


. ‡ Licensing / Citation ‡ Hide Licensing / Citation Cite this page as: For more information, see Licensing Guide. Licensing Disclosures For more information about on-wiki content,...
标签： k级情景 meta scp sheldon-katz 交换 全球超自然联盟 机密分级 预测性



scp-6987
主站评分：+163
{$note}
等待翻译…

SCP-6572
主站评分：+145；{$note}
最新评论： Dr I Foster 于 21 Jan 2022 15:29
最新编辑： Esperanza_Cai 于 23 Nov 2021 06:14


LORDXVNV SCP-6572 by...
标签： mc&d scp 无效化 未收容 武器



SCP-6572
主站评分：+145
{$note}
等待翻译…

SCP-1337-EX
主站评分：+74
{$note}
等待翻译…

故事

最适合学习黑暗力量的 5 所大学！第 1 名竟然是它！
主站评分：+132；{$note}
最新评论： Aster_Mochi 于 19 Mar 2022 03:35
最新编辑： W Asriel 于 04 Apr 2022 05:34


+ Show component code - Hide component code + Show component code - Hide component code 自从 SCP...
标签： icsut wettle博士 值守43 故事 曝光 破碎之神教会 魔法学院 鹿学院



top-5-colleges
主站评分：+132
{$note}
等待翻译…

CCK级“版权侵权诉讼”情景
主站评分：+98；{$note}
最新评论： ReEd1327 于 17 Mar 2022 16:04
最新编辑： hoah2333 于 05 Oct 2021 07:37


+ Show component code - Hide component code + Show component code - Hide component code “阿瓦达索命！”达斯·维达一边喊着一边扑向至尊魔戒，同时躲开了FSS（基金会太空星舰/Foundation Space Starship）企业号的瑞克·桑切斯博士用音速起子向他发射的葬火射线。...
标签： clef博士 crossover项目 故事



cck-class-copyright-infringement-lawsuit-scenario
主站评分：+98
{$note}
等待翻译…

冰蛛安魂曲
主站评分：+80；{$note}
最新评论： hoah2333 于 02 Dec 2021 18:47
最新编辑： hoah2333 于 02 Dec 2021 18:46


+ Show component code - Hide component code LORDXVNV 冰蛛安魂曲 作者：LORDXVNV LORDXVNV 的作者页 这算不上是什么葬礼，但又比大多数蜘蛛所能得到的待遇要好：SCP-548，它的看护人称它为冰蛛，第一次这么称呼是嘲弄，而最后一次则变成了亲切，它死了。 Chelsea Elliott 博士与 Zyn...
标签： elliott博士 zyn-kiryu 故事 重生计划



requiem-for-ice-spider
主站评分：+80
{$note}
等待翻译…

Life Can Be A Surprise
主站评分：+50
{$note}
等待翻译…

叛乱者，集结
主站评分：+47；{$note}
最新评论： wisdom01 于 13 Jan 2022 21:48
最新编辑： ahshow 于 21 Apr 2022 02:30


+ Show component code - Hide component code + Show component code - Hide component code LORDXVNV 叛乱者，集结 作者：LORDXVNV LORDXVNV的作者页 黑皇后 外面有的是更好的世界，但是Alyx Chao却被困在了这一个。...
标签： chaz-ambrose dado faeowynn-wilson icky isabel-v jude-kriyot mc&d vincent-anderson 交换艺术 全球超自然联盟 故事 破碎之神教会 芝加哥鬼灵 观谬维基 黑皇后



ecce-insurgo
主站评分：+47
{$note}
等待翻译…

泥泞的天
主站评分：+47；{$note}
最新评论： Esperanza_Cai 于 20 Mar 2022 06:19
最新编辑： Esperanza_Cai 于 18 Mar 2022 15:17


LORDXVNV 泥泞的天 by LORDXVNV LORDXVNV的作者页 kenneth2332 2020/10/30 （星期五） 03:14:15 #92315237 我第一次见到泥泞的天空应该是...
标签： creepypasta 故事 梦魇节 观谬维基



muddy-skies
主站评分：+47
{$note}
等待翻译…

Man on a Mission
主站评分：+39
{$note}
等待翻译…

喵喵，Asheworth君
主站评分：+36；{$note}
最新评论： vxeov 于 08 Apr 2022 14:46
最新编辑： XannyWarhol 于 08 Apr 2022 23:16


设定中心 无悔之道 中心页 喵喵，Asheworth君 20/04/2025 埃斯特堡，波兰 “所以你到底是干什么的？”Daniel Asheworth说，忍住了想抓挠自己的大猫耳的冲动。他的眼睛一直盯着前方埃斯特堡熙熙攘攘却又崎岖不平的街道。他和他新分配的队友要追捕一个相对无害的本质促动精灵Fae，并在先锋组织下为他们提供住处和保护。 “嗯，哦，这个，那啥 ”Cole...
标签： 120站档案馆 asheworth博士 埃斯特堡 故事 无悔之道



Miau Miau, Asheworth-kun
主站评分：+36
{$note}
等待翻译…

奶酪已复活
主站评分：+32；{$note}
最新评论： Voltaire804 于 20 Oct 2021 07:04
最新编辑： Esperanza_Cai 于 17 Oct 2021 12:57


...
标签： 天演末世论 故事



cheesus
主站评分：+32
{$note}
等待翻译…

但从未有树。
主站评分：+29；{$note}
最新评论： Baby Bat 于 07 Nov 2021 17:18
最新编辑： (user deleted) 于 07 Nov 2021 07:42


+ Show component code - Hide component code + Show component code - Hide component code 在无边无际的星海间，基金会的探测器渐行渐远。 经过了外星太阳与外星海渡，经过了外星棕熊与外星蜂蝴—— 但从未有树。 在每一个世界，那些被蓝色充满，那里的植物丰富或只占极少数，...
标签： 故事 诗歌



but-never-trees
主站评分：+29
{$note}
等待翻译…

WE LIVE IN A SOCIETY
主站评分：+27
{$note}
等待翻译…

Ghost Signal
主站评分：+24
{$note}
等待翻译…

Deus Volt!
主站评分：+23
{$note}
等待翻译…

Teamwork
主站评分：+17
{$note}
等待翻译…

GoI格式

SPC-6500：极微之道
主站评分：+80；{$note}
最新评论： Voltaire804 于 06 Dec 2021 11:16
最新编辑： Esperanza_Cai 于 15 Jan 2022 16:52


.
标签： goi格式 reynders博士 互动性 打鲨鱼中心 无悔之道



spc-6500
主站评分：+80
{$note}
等待翻译…

SPC-1981: RONALD REAGAN SHARKED UP WHILE TALKING
主站评分：+74
{$note}
等待翻译…

SPC-1258: CERULEAN GLOVE
主站评分：+56
{$note}
等待翻译…

SPC-179: GLORIOUS BEACON
主站评分：+55
{$note}
等待翻译…

The Milkssiah
主站评分：+41
{$note}
等待翻译…

SPC-105: WORLD IRIS
主站评分：+37
{$note}
等待翻译…

1 Staar Cuttt 2 5
主站评分：+33
{$note}
等待翻译…

SPC-CN-985: FIST CONTACT
主站评分：+20
{$note}
等待翻译…

作者
page revision: 3, last edited: 18 Mar 2022 13:53
Edit Rate (+1) Tags Discuss History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License