TOP |
---|
By: |
Published on 26 Apr 2021 01:41 |
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.
…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; }

Accurate Depiction of Top.
Top, the code thief, the CSS snatcher, the HTML burglar, who is this person?
Honestly, good question.
me topdownunder. me top. me jude/judith/violetta. i am she.
If for whatever you need to contact me, you can find me on:
- Discord
- jud#5726
- Tumblr
- IRC
- Top, but I usually only go on IRC for #site17
- Wikidot DM
wip
SCPs
🐀
SCP-5723
"Welcome to The Clubhouse"
I like the idea I put out with Frankfort Animation. I would love to further flesh that out and use them more.
🌱
SCP-6776
"Reclamation"
This was my entry for 6k and, honestly? My favourite thing I've written on the wiki. I definitely put the most effort into this one, and I want to believe it shows. It was a bit rushed for time towards the end (not the last one posted tho!), but it turned out pretty complete. I feel like I got more than enough crit on it, and it's polished enough.
I hope to reference this SCP a lot more in the future. I feel like there's still a lot more I could explore with it.
🦍
SCP-6170
"A Tale Of a God, and The Chaos Surrounding His Demise"
My entry for Memecon 2021, done alongside
TALES
My first post on this site. I wrote it a year or so before I posted it on the main wiki, and it was supposed to be longer, with a late friend of mine having planned to add her sections to the tale. However, that never came to be. Instead, I decided to post this onto the wiki, if only in her memory.
One thing I'd like to note is that there was gonna be a fourth section with Aces & Eights. Thank my lack of motivation and the rule of three for the lack of cowboys.
This was my entry for the Creck Fection Contest, and it somehow won. I wrote it in about 2 hours, and my only feedback on it was my partner (jokingly) saying it was awful. Despite being a coldpost, it's currently my most upvoted article. Then again, it was April Fool's, so… 6776 beat it. Party at my house.
OTHER
Wowza, an essay!
I honestly didn't necessarily plan for this to be a thing, I guess? I started working on it, mostly just for myself and some friends. But, out on a whim, I sent it to MAST to get reviewed. Lt Flops came on to help, as a lot of it was based on her old work, and we got it polished, approved, and posted. As of writing, it's still evolving in its format and structure, and I'm still open to any recommendations on how to improve it!
🔩
FORMAT SCREW HUB
COLLAB
Like the essay above this, I didn't plan on making this, like, at all. I ended up getting wrapped up in it when
yeah i know that's not proper grammar but fuck you
If I ever get banned/die/go inactive for more than 2 years, then the ownership of my articles will go as follows:
- All co-authored pages will go to their respective collaborators, obviously.
- Everything else goes to the community. do what you want w/ it
- Anything written in a canon goes to the creator of that canon. If that person(s) isn't active anymore, then the articles go to the community or something.
Title | Rating | Comments | Created | Last Edit |
---|---|---|---|---|
A Semi-Comprehensive List of Foundation Departments | 204 | 37 | 06 May 2021 02:06 | 30 Nov 2023 14:41 |
ion X bumaro forevurr | 99 | 23 | 01 Apr 2021 16:19 | 22 Nov 2023 18:35 |
SCP-359 | 95 | 24 | 29 Sep 2021 01:14 | 08 Oct 2022 18:50 |
SCP-6776 | 88 | 9 | 01 Jun 2021 00:41 | 20 Nov 2023 14:17 |
SCP-6875 | 63 | 14 | 29 May 2022 15:27 | 20 Aug 2022 01:49 |
Something Beautiful | 61 | 5 | 27 Mar 2021 19:01 | 23 Jul 2022 07:42 |
War Machine | 48 | 6 | 14 Feb 2022 17:49 | 31 Jul 2023 15:23 |
SCP-6821 | 46 | 12 | 28 Feb 2022 17:31 | 03 Oct 2022 20:17 |
SCP-6170-A Extended Log | 28 | 5 | 03 Sep 2021 00:39 | 24 Jul 2023 18:51 |
It's Good to Touch the Green, Green Grass of Home | 23 | 3 | 29 Dec 2021 04:50 | 02 May 2022 22:40 |
SCP-5723 | 23 | 13 | 25 Apr 2021 00:26 | 01 Oct 2022 18:39 |
Providence | 20 | 2 | 28 Apr 2022 16:36 | 06 May 2022 01:44 |
Title | Rating | Comments | Created | Last Edit |
---|---|---|---|---|
SCP-6821-2 | 0 | 0 | 28 Feb 2022 17:30 | 28 Feb 2022 17:31 |
Scp 6821 1 | 0 | 0 | 28 Feb 2022 17:29 | 28 Feb 2022 17:31 |
Components Tech | 0 | 0 | 07 Nov 2021 15:14 | 26 Aug 2022 05:53 |
Components Sigma | 0 | 0 | 07 Nov 2021 15:14 | 07 Nov 2021 15:25 |
Components BHL | 0 | 0 | 07 Nov 2021 15:13 | 06 Jun 2022 05:05 |

🦇BAT🦇
what do i do for this one uh
"swaggy"
-Parad00xx
"The Figure Atop Our Little Hill"
- Beetroot-Chan does not match any existing user name
"fuck i need to make more friends for quotes"
- me
Achievables | Unlocked? |
---|---|
SCPs | |
Write an SCP | 🐀 |
Write 5 SCPs | 🐀 |
Write 10 SCPs | |
Write 25 SCPs | |
Write 50 SCPs | |
Write an SCP tagged as "safe" | 🐀 |
Write an SCP tagged as "euclid" | 🐀 |
Write an SCP tagged as "keter" | |
Write an SCP tagged as "thaumiel" | 🐀 |
Write an SCP tagged as "neutralized" | |
Write an SCP tagged as "explained" | |
Write an SCP tagged as "joke" | |
Write an SCP tagged as "esoteric-class" | 🐀 |
Write an SCP that reaches +50 | 🐀 |
Write an SCP that reaches +100 | |
Write an SCP that reaches +500 | |
Collaborate on an SCP | 🐀 |
Write an SCP-001 Proposal | |
Write an SCP in Series I | 🐀 |
Write an SCP in Series II | |
Write an SCP in Series III | |
Write an SCP in Series IV | |
Write an SCP in Series V | |
Write an SCP in Series VI | 🐀 |
Write an SCP in Series VII | 🐀 |
Write a format screw SCP | |
Rewrite someone else's SCP | 🐀 |
Tales | |
Write a tale | 🐀 |
Write 5 tales | 🐀 |
Write 10 tales | |
Write 15 tales | |
Write a tale that gets to +50 | |
Write a tale that gets to +100 | |
Collaborate on a Tale | |
Write a tale about a Series I SCP | 🐀 |
Write a tale about a Series II SCP | 🐀 |
Write a tale about a Series III SCP | |
Write a tale about a Series IV SCP | |
Write a tale about a Series V SCP | |
Write a tale about a Series VI SCP | |
Write a tale about a Series VII SCP | 🐀 |
Start a tale series | 🐀 |
Finish a tale series | |
Collaborate on a tale | |
Write a Parawatch Tale | |
GoI Formats | |
Write a GoI Format | |
Write 5 GoI Formats | |
Write 10 GoI Formats | |
Write 15 GoI Formats | |
Write a GoI format that gets to +50 | |
Write a GoI format that gets to +100 | |
Collaborate on a GoI Format | |
Write an Alexylva University Format | |
Write an Ambrose Restaurants Format | |
Write an Anderson Robotics Format | |
Write an Arcadia Format | |
Write an AWCY? Format | |
Write a Black Queen Format | |
Write a Chaos Insurgency Format | |
Write a Chicago Spirit Format | |
Write a CotBG Format | |
Write a dado format | |
Write a DEER College Format | |
Write a Dr. Wondertainment Format | |
Write a Facility Dossier | |
Write a Factory Format | |
Write a GOC Format | |
Write a GRU Division "P" Format | |
Write a Herman Fuller's Circus of the Disquieting Format | |
Write a Horizon Initiative Format | |
Write an ICSUT Format | |
Write an IJAMEA Format | |
Write an La Rue Macabre Format | |
Write a Manna Charitable Foundation Format | |
Write an MC&D Format | |
Write a Medicean Academy of the Occult Arts Format | |
Write a "Nobody" Format | |
Write an ORIA Format | |
Write an Oneiroi Collective Format | |
Write a Prometheus Labs, Inc. Format | |
Write a Sarkic Cults Format | |
Write a Serpent's Hand Format | |
Write a Shark Punching Center Format | |
Write a UIU Format | |
Write a Westhead Media article | |
Write a Wilson's Wildlife Solutions Format | |
General | |
Get +100 net upvotes | 🐀 |
Get +200 net upvotes | 🐀 |
Get +500 net upvotes | 🐀 |
Get +1000 net upvotes | |
Get +2000 net upvotes | |
Get +3000 net upvotes | |
Get +4000 net upvotes | |
Get +5000 net upvotes | |
Collaborate on a single article with at least 3 other authors | 🐀 |
Enter a Contest | 🐀 |
Win a Contest | |
Enter an X000 Contest | 🐀 |
Write for a canon | 🐀 |
Write 5 articles for canons | |
Write 10 articles for canons | |
Write for 5 different canons | |
Create a canon | |
Coldpost a successful article | 🐀 |
Write about Pataphysics | |
Write an urban legend | |
Write a temporal anomaly | |
Get a character tag | |
Write an author avatar | 🐀 |
Have someone use a character you created in another article | 🐀 |
Write a sad article | 🐀 |
Write a wholesome article | |
Write a funny article | 🐀 |
Write something dialogue heavy | |
Write a confusing article | |
Write a disturbing article | |
Write about a reoccurring phenomena | |
Write about a one-time event | 🐀 |
Write about the Foundation being cruel | 🐀 |
Write about the Foundation being saviors | |
Write about the Foundation's hands being tied | |
Write a humanoid | 🐀 |
Write a body horror article | |
Write a really long article (3000+ words) | 🐀 |
Write a really short article (<1000 words) | |
Write a really short article (<500 words) | |
Write an article about an object | |
Write an article about insects | |
Write an article about a plant | 🐀 |
Write an article about an animal | 🐀 |
Write an article about something non-corporeal | |
Write an article about the ocean | |
Write an article about space | |
Write an article with a moral dilemma | |
Write an article not set on earth | |
Write an article without a story | |
Write something using ListPages magic | 🐀 |
Write, crit, then post an article within 24 hours | 🐀 |
Write an article that gets a YouTube video made about it | |
Write an article that gets a good YouTube video made about it | |
Write an article that gets covered by TheVolgun | |
Write an article that gets covered by TheeSherm | |
Have fanart made of one of your articles | 🐀 |
Write an article that gets to +50 | 🐀 |
Write an article that gets to +100 | 🐀 |
Write an article that gets to +200 | |
Write an article that gets to +300 | |
Write an article that gets to +400 | |
Write an article that gets to +500 | |
Write an article that gets to +1000 | |
Write an article that gets to +100 in a week | |
Write an article that gets to +200 in a month | |
Write an article that gets in the Top Ten of the Month | |
Write an article that gets to be in the Top Rated of the Month | |
Write an article that gets to be the Top Rated of the Month | |
Get an article featured on the front page | |
Write a Tag Golf article | |
Write an article with the Collaborative tag | 🐀 |
Complete a Writing Challenge | |
Create a new GoI | 🐀 |






