Boxercrat Solstice's Punchfolio (LORDXVNV's auth. pg.)
Boxercrat Solstice's Punchfolio (LORDXVNV's auth. pg.)
Author: LORDXVNVLORDXVNV
Published on 27 Aug 2021 02:40
/* 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;
    }
 
     #top-bar .close-menu {
        margin-left: 19.75em;
        opacity: 0;
    }
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
}
 
@supports selector(:focus-within) {
 
@media (min-width: 768px) {
    #top-bar .open-menu a {
        pointer-events: none;
    }
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
        z-index: -1;
    }
 
    /* 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;
    }
}
 
}
rating: +17+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; }
rating: +17+x

Please see below for my project punchfolio. By my own reckoning, my work has led to the pugilification of over 803,420,609 naturally occurring Selachian Entities.

Unfortunately, the Centre seems to be suffering from some extra-universal contamination.

Personally, I blame my cousin for stealing my credentials and dumping his fanfiction on my work laptop.

If need be, I volunteer him for selachification and pugilation.

Reviews!

"every time i read anything lord has written its the most cursed shit ive ever seen and also somehow compelling writing"
stephlynchstephlynch

"u know what lord youre officially the coolest author in my eyes tbh"
stephlynchstephlynch, again. The context is embarrassing so don't google my username.

"spc fucking sucks but you do it incredibly well"
RallistonRalliston

"Every time I saw it plugged I rolled my eyes and said nah because the title looked boring and I am not boring so we wouldn’t have been a good couple but I just read it and it’s so funny please everyone go read this garbage and +1 it"
PedagonPedagon, on CCK-class "Copyright Infringement Lawsuit" Scenario

"I hope to someday rip your intestines from those ears of yours for making me read that utterly deranged series of paragraphs"
JakdragonXJakdragonX, on Deus Volt!

"you were already crazy before"
AftokratorAftokrator

"sharks are good"
Lt FlopsLt Flops, current most prolific Shark Punching Center author

"Cheese man infringes copyright."
NebulousStarNebulousStar

"Do you want one more quote for your author page?"
Grigori KarpinGrigori Karpin

SCPs

(Random)


SCP-6572


Rating: +111
Comments: 29
+/- : +124/-13
Last Comment: LORDXVNV (09 Oct 2021 12:57)
Last Edit: LORDXVNV (04 Oct 2021 16:24)

Tales

(Random)


CCK-class "Copyright Infringement Lawsuit" Scenario


Rating: +60
Comments: 32
+/- : +73/-13
Last Comment: Naepic (19 Oct 2021 13:25)
Last Edit: LORDXVNV (26 Sep 2021 04:17)

Cheese Is Risen


Rating: +26
Comments: 9
+/- : +29/-3
Last Comment: Jack Waltz (10 Sep 2021 02:05)
Last Edit: LORDXVNV (24 Sep 2021 02:22)

Deus Volt!


Rating: +22
Comments: 5
+/- : +31/-9
Last Comment: Ogilvy (27 Apr 2017 12:43)
Last Edit: LORDXVNV (26 Sep 2021 04:29)

WE LIVE IN A SOCIETY


Rating: +20
Comments: 15
+/- : +26/-6
Last Comment: GreenGolem (20 Oct 2021 16:59)
Last Edit: LemonBee12 (20 Oct 2021 09:10)

GoI Formats

(Random)


SPC-1981: RONALD REAGAN SHARKED UP WHILE TALKING


Rating: +66
Comments: 25
+/- : +73/-7
Last Comment: sirpudding (13 May 2017 06:01)
Last Edit: LORDXVNV (04 Oct 2021 16:25)

SPC-1258: CERULEAN GLOVE


Rating: +50
Comments: 19
+/- : +52/-2
Last Comment: LORDXVNV (27 Aug 2021 13:55)
Last Edit: LORDXVNV (04 Oct 2021 16:26)

The Milkssiah


Rating: +35
Comments: 6
+/- : +38/-3
Last Comment: stephlynch (21 Sep 2021 17:11)
Last Edit: LORDXVNV (04 Oct 2021 16:27)

1 Staar Cuttt 2 5


Rating: +25
Comments: 8
+/- : +26/-1
Last Comment: LemonBee12 (27 Sep 2021 15:17)
Last Edit: LORDXVNV (27 Sep 2021 14:49)

SPC-179: GLORIOUS BEACON


Rating: +21
Comments: 4
+/- : +24/-3
Last Comment: EmperorRaccoon (27 Aug 2021 15:48)
Last Edit: LORDXVNV (04 Oct 2021 16:28)

SPC-CN-985: FIST CONTACT


Rating: +16
Comments: 2
+/- : +17/-1
Last Comment: EmperorRaccoon (06 Sep 2021 17:36)
Last Edit: LORDXVNV (04 Oct 2021 16:29)

Others

(Random)


Boxercrat Solstice's Punchfolio (LORDXVNV's auth. pg.)


Rating: +17
Comments: 4
+/- : +17/-0
Last Comment: Kothardarastrix (11 Sep 2021 18:05)
Last Edit: LORDXVNV (18 Oct 2021 21:40)

More By LORDXVNV


Rating: +0
Comments: 0
+/- : +0/-0
Last Comment: ()
Last Edit: LORDXVNV (26 Sep 2021 04:06)

SCP-6447 (feat. A lot of people)


Rating: +26
Comments: 23
+/- : +39/-13
Last Comment: EmperorRaccoon (04 Oct 2021 18:13)
Last Edit: Jack Waltz (19 Oct 2021 05:31)

SCP-6301 (feat. Grigori Karpin and GremlinGroup)


Rating: +41
Comments: 9
+/- : +46/-5
Last Comment: GremlinWC (11 Oct 2021 23:26)
Last Edit: Naepic (13 Oct 2021 14:59)

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License