钓鱼议会 中心页
钓鱼议会 中心页
作者 Esperanza_CaiEsperanza_Cai
发布于 12 Oct 2022 06:18
评分: +10+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;
    }
    }
}

Fish-half.jpg

钓鱼议会 - 顶级

钓鱼议会 中心页
作者 DodoDevilDodoDevil
发布于 2022年4月20日

钓鱼议会 中心页

一个人可能用一条吃过一个国王的蛆虫来钓鱼,

再去吃那条吃过这条虫的

鱼。1

嗨Emma,

谢谢你送来的海报艺术作品!但当我把它完全放到页面上时,文字一直动来动去,我只能把最底下的部分裁掉了。但在博客上看着很好!

很高兴可以多了解一些你在艺术与人工制品的状况。

感谢,

Greg Albsernester,


造船部,造船技师
Site-184


Fishing-S.jpg

嗨Greg,

很高兴你喜欢它!

你知道拼贴画只是我的一个爱好吧,是吗?而不是我在A&A的正职?

Emma


Ps. 你该不会把它公开托管了吧,是吗?

伟大钓鱼传奇:

除非另有注明,作者DodoDevilDodoDevil

  • 钓鱼议会
    • Emma把帽子向下拉了拉,想着到底是哪一系列糟糕的决定把她带到了这里。
  • 更大的鱼
    • “你是说你要和一条鲸鱼说话,但你要我帮忙是因为你不会用俄语跟它聊天?”他满腹狐疑地问。
  • 联动剧集
    • “不用担心,”他回答道,“已经把邀请函都送出去了!”
  • 鱼跃水出
    • Site-120历史悠久。你可以从它墙上的砖块和砂浆中读到这一点。它浸透了传说与创伤,回应并反射着这个不停变化的世界。

钓鱼故事:

钓鱼旅行:

当日捕获:


渔具箱:

这是什么 & 如何上船!


钓鱼议会,表面上看,是一群来自Site-184的员工,他们两周举行一次钓鱼旅行。

然而,这也有关基金会人员在空闲时间,工作之余会做的事情。对基金会不同的员工而言,规律的日复一日的保护和研究异常的工作只是他们生活的一部分。钓鱼议会给我们一个机会,探索这些人在与他们的工作空间毗邻的空间中形成的日常生活片段——而钓鱼本身则完全是可选项。

要不就是这样,要不也就是一帮朋友跑去钓鱼,你想怎样就怎样,我猜。


目前,这个系列被分为四组:

  • “伟大钓鱼传奇:”一个连续的故事系列,关注特定的一群人和一条鲸鱼。我对这个系列有些规划,但我也一直欢迎建议/其他人加入。
  • “钓鱼故事:”一篇完的和Site-184(和/或其他地方!)的钓鱼议会有关的故事。
  • “钓鱼旅行:”钓鱼议会成员在全世界其他基金会站点的经历。
  • “当日捕获:”与钓鱼议会有关的SCP。

钓鱼故事钓鱼旅行的部分都是完全向所有人开放的!而如果你有有关的SCP或者自己的钓鱼议会故事的想法,听着超级酷,务必让我看看!

并不需要钓鱼相关知识!如果你想写一点有关钓鱼议会的东西,尽管去吧。俗话说得好,海中何处不是鱼!2


除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License