etcetera, etcetera |
---|
By: MontagueETC |
Published on 10 Mar 2022 22:57 |
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; }
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap); /* Centered Header Sigma * [2021 Wikidot Component] * By Lt Flops (CC BY-SA 3.0) * Forked from: * Penumbra Theme by EstrellaYoshte * Also based on: * Centered Header BHL by Woedenaz **/ /* ---- VARS ---- */ :root{ --titleColor: hsl(0, 0%, 95%); --subtitleColor: hsl(60, 62%, 85%); --lgurl: url(https://scp-wiki.wdfiles.com/local--files/component:pride-highlighter/lgbtqp_logo.svg); } /* ---- SITE BANNER ---- */ #header, div#header{ background-image: none; } #header::before{ position: absolute; width: 100%; height: 100%; content: ""; background-image: var(--lgurl); background-position: center top; background-repeat: no-repeat; background-size: auto 9em; opacity: .33; } #header h1, #header h2{ float: none; margin-left: 0; text-align: center; } #header h1 span, #header h2 span{ /* Hide the Existing Text */ display: none; } #header h1 a::before, #header h2::before{ /* Style the New Text */ font-family: "Montserrat", "Arial", sans-serif; text-shadow: none; } #header h1 a::before{ position: relative; bottom: .15em; color: var(--titleColor); font-size: 115%; font-weight: 700; } #header h2::before{ position: relative; top: .1em; color: var(--subtitleColor); font-size: 130%; font-weight: 600; } #header h1 a::before{ /* Set the New Text's Content From Variable */ content: var(--header-title, "SCP FOUNDATION"); } #header h2::before{ content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT"); } /* ---- SEARCH ---- */ #search-top-box{ top: 1em; right: 0; } #search-top-box-form input.button{ margin-right: 0; } #search-top-box-input, #search-top-box-input:hover, #search-top-box-input:focus, #search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus{ border-radius: 0; box-shadow: none; font-size: 100%; } /* ---- TOP BAR ---- */ #top-bar{ right: 0; display: flex; justify-content: center; } #top-bar ul li ul{ border-bottom: 1px solid hsl(0, 0%, 40%); box-shadow: none; } /* ---- LOGIN ---- */ #login-status{ top: 1.1em; right: initial; color: hsl(0, 0%, 87%); } #account-topbutton{ border-color: hsl(0, 0%, 87%); font-size: 100%; } /* ---- PAGE TITLE ---- */ .meta-title, #page-title{ text-align: center; } /* ---- BREADCRUMBS ---- */ .pseudocrumbs, #breadcrumbs{ text-align: center; } /* ---- MOBILE DISPLAY ---- */ @media (max-width: 767px){ #search-top-box{ top: 1.85em; width: unset; } .mobile-top-bar{ position: relative; left: 0; display: flex; justify-content: center; } #login-status{ top: 0; right: 0; } #header .printuser{ font-size: 0; } #header .printuser img.small{ margin: 0; transform: translate(6px, 4px); } #my-account{ display: none; } #account-topbutton{ margin-left: 2px; } }
Howdy! I'm Montague Etcetera,.He/Him & They/Them a writer, digital artist, and game designer with a deep, abiding love for sci-fi & fantasy.
I can be found on various social media sites.
SCP-6462 - The Implicit Door - [+132] |
|
There is naught but dust. Not even blood remains. |
SCP-⌘ - Beneath the Shivering Kingdom - [+363] |
|
WARNING: THE FOLLOWING LIE IS A TRUTH. PLEASE INSERT DISC 2 INTO YOUR CONSOLE. |
|
Department-Con Entry |
SCP-6454 - The Painting That Ate Paris, Texas - [+86] |
|
The air tilts at a sickening angle. The streets are crowded, yet empty. Cold, yet sharp. Up, yet left. |
|
Department-Con Entry |
SCP-6751 - The House That Wasn't There - [+69] |
|
As SCP-6751 does not exist, containment is unnecessary. |
SCP-6607 - Infernal Revenue Service - [+106] |
|
Bottoms up and the devil laughs. |
SCP-7009 - All Roads Lead To Rome - [+157] |
|
The Foundation discovers a fundamental law of reality. Rome is involved. |
|
SCP-7000 Contest Entry |
SCP-7701 - The Conqueror Worm - [+89] |
|
Why does it end here? |
SCP-7408 - Metamorphosis - [+135] |
|
It fucks me up, thinking about what happens to caterpillars. |
SCP-6183 - B L A C K B O X - [+324] |
|
object reference not set to instance of object ; description_6.rtf does not exist |
|
GoblinCon Entry (1st Place Winner) |
|
feat. Billith & Liryn |
SCP-744 - Greater Purpose - [+65] |
|
Are you a company man? |
SCP-7376 - Qayin and Hevel - [+164] |
|
Everyone knows how this story ends. |
SCP-7354 - The Cruor Pool - [+71] |
|
All the flowers bloomed, the day wretched Važjuma descended upon our world. |
|
RemixCon Entry |
SCP-1908 - Mr. Soap - [+62] |
|
Little Misters, big and small. Find them, bind them, collect them all. |
SCP-8200 - The Phantom Sea - [+115] |
|
A ghost is a memory and a memory is a ghost. What happens when the dead forget even themselves? |
|
SCP-8000 Contest Entry |
MontagueETC's Author Page - [+59] |
|
Recursion. |
Unremembered Oceans - [+26] |
|
In Ivy’s dream, the world had been consumed by twin oceans. |
Omnigenesis and the Law of Blades - [+55] |
|
I am not that I am. |
Esterberg (city) — Wikipedia - [+177] |
|
"Tysiąclecie Górne", "SCP-5373", "VNP-5373", and "FP-120" redirect here. |
|
feat. Jasiu06, Jerden, Ralliston, & Zygard |
SCP-6607 Instance Log - [+22] |
|
The processing lines of 181 slaughterhouses were affixed with demonic sigils disguised as health and safety signage. |
MontagueETC's SCiPTEMBER 2022 Art - [+58] |
|
Thirty days of art. |
Four Misconceptions Regarding the Transcendental Clusterminds of the Uppermost Datasphere - [+??] |
|
In a system of absolute honesty, understanding is inevitable. |
|
Picturepalooza Entry (3rd Place Winner) |
|
From the Wanderer's Library |
Who Made You? - [+35] |
|
Who are you really, Charles Gears? |
DR. KONDRAKI CUT UP WHILE THINKING - [+49] |
|
An interval of time passes—an eon, maybe, or a few minutes. |
SCPs .Links to the sources and artists are in the License Box.
Tales/GOIs
The Church of the Scarlet King by Doctor Cimmerian
Crowning the Shivering Kingdom by Free toilet paper
Exploring the SCP Foundation: SCP-6183 - Blackbox by The Exploring Series
Exploring the SCP Foundation: SCP-7376 - Qayin and Hevel by The Exploring Series
Achievement | Description | |
---|---|---|
Certificate Of Attendance | Post an Author Page, add to a Collaborative Log, and participate in an Official SCP Wiki Contest. | |
Draw Me Like One Of Your [REDACTED] | Create an artwork page with a rating of at least +30. | |
Participation Trophy | Write an article rated at least +100 | |
The Medium Is The Message | Author of at least 10 media files (images, audio, videos, etc.) that are used on the wiki. Must be original works released under a version CC-by-SA license compatible with the SCP Wiki. | |
Look Ma! I'm On TV! | Have one of your works be featured on an off-site video, podcast, video game, etc. | |
Level Up! | You've been a member of the SCP Wiki for one calendar year. | |
Skip Tutoring | Have an SCP draft thread you gave feedback on succeed on the main list..It was a Discord thread, but close enough. | |
Winning! | Win an SCP Wiki contest as an individual or part of a team, without being disqualified or otherwise having your entry invalidated. | |
Thousandaire | Entered into any of the X000 contests (i.e. SCP-1000, SCP-2000, SCP-3000, etc.) | |
Extra! Extra! | One of your articles has been featured on the front page. |
MontagueETC's Works |
|
---|---|
SCPs | |
Tales/GoI Formats | |
Other |
Cite this page as:
"etcetera, etcetera" by MontagueETC, from the SCP Wiki. Source: https://scpwiki.com/montagueetc. Licensed under CC-BY-SA.
For information on how to use this component, see the License Box component. To read about licensing policy, see the Licensing Guide.
Filename: 6445-Thumbnail.png
Author: MontagueETC
License: CC BY-SA 3.0
Derivative of:
Name: Sweden road sign: Information signs - Sevärdhet (place of interest).
Author: Transportstyrelsen
License: Public Domain
Source Link: Wikipedia
Filename: 6454-Thumbnail.png
Author: MontagueETC
License: CC BY-SA 3.0
Derivative of:
Filename: Lemonade.jpg
Name: Lemonade, anyone?
Author: Larry W. Lo
License: CC BY-SA 2.0
Source Link: Flickr
Filename: 6462-Thumbnail.png
Author: MontagueETC
License: CC BY-SA 3.0
Derivative of:
Name: Baños de Maria
Author: Hernán Piñera
License: CC BY-SA 2.0
Source Link: Flickr
Filename: IRS_Red.png
Author: Fantem
License: CC BY-SA 3.0
Filename: 6607IL-Thumbnail.png
Author: MontagueETC
License: CC BY-SA 3.0
Derivative of:
Name: Une illustration pour l’article Aguarès dans le Dictionnaire infernal par Collin de Plancy.
Author: Louis Le Breton
License: Public Domain
Source Link: Wikipedia
Filename: 6751-Thumbnail.png
Author: MontagueETC
License: CC BY-SA 3.0
Derivative of:
Name: House with big windows
Author: pnwra
License: CC BY 2.0
Source Link: Flickr
Filename: Esterberg-Thumbnail.png
Author: MontagueETC
License: CC BY-SA 3.0
Derivative of: Esterberg (City) — Wikipedia
Filename: Omnigenesis-Thumbnail.png
Author: MontagueETC
License: CC BY-SA 3.0
Derivative of:
Name: Sword
Author: Louvre Museum
License: CC BY-SA 3.0 FR
Source Link: Wikimedia Commons
Name: Sombrero galaxy
Author: Porter Hall
License: CC BY-SA 2.0
Source Link: Flickr
Filename: 7009-Thumbnail.png
Author: MontagueETC
License: CC BY-SA 3.0
Derivative of:
Name: Dougga Roman Theater
Author: David Stanley
License: CC BY 2.0
Source Link: Flickr
Name: Mars sky at noon PIA01546.jpg
Author: NASA/JPL-Caltech
License: Public Domain
Source Link: Wikimedia Commons
Filename: UO-Thumbnail.png
Author: MontagueETC
License: CC BY-SA 3.0
Derivative of:
Name: Ocean sunset
Author: Magnus Bråth
License: CC BY 2.0
Source Link: Flickr
Filename: SCiPTEMBER-2022-Thumbnail.png
Author: MontagueETC
License: CC BY-SA 3.0
Derivative of:
Name: Zipper Closure Zip To
Author: Momentmal
License: CC0
Source Link: Pixabay
Name: scream
Author: Miguel Torres
License: (CC BY 2.0)
Source Link: Flickr
Filename: FMRTTCOTUD-Thumbail.png
Name: i know you are watching me
Author: Roͬͬ͠͠͡͠͠͠͠͠͠͠͠sͬͬ͠͠͠͠͠͠͠͠͠aͬͬ͠͠͠͠͠͠͠ Menkman
License: CC BY 2.0
Source Link: Flickr
Filename: 7701-Thumbnail.png
Author: MontagueETC
License: CC BY-SA 3.0
Derivative of:
Name: 070920111017
Author: Col Ben
License: CC BY 2.0
Source Link: Flickr
Name: Carnival venice 2015 135
Author: Abxbay
License: CC BY-SA 4.0
Source Link: Wikimedia Commons
Filename: 7408-Thumbnail.png
Author: MontagueETC
License: CC BY-SA 3.0
Derivative of:
Filename: Graphium agamemnon 20131222.jpg
Author: Peellden
License: CC BY-SA 4.0
Source Link: Wikimedia Commons
Name: Profile
Author: Michael Mol
License: CC BY 2.0
Source Link: Flickr
Name: Baseball cap from the Memphis Red Sox
Author: Collection of the Smithsonian National Museum of African American History and Culture
License: Public Domain
Source Link: NMAAHC
Name: Forest
Author: Kamil Porembiński
License: CC BY-SA 2.0
Source Link: Flickr
Filename: blackbox.png
Author: Liryn
License: CC BY-SA 3.0
Filename: 744-Thumbnail.png
Name: Factory
Author: Thomas Berg
License: CC BY-SA 2.0
Source Link: Flickr
Filename: 7376-Thumbnail.png
Name: Victorian Prosthetic Arm
Author: John Lester
License: CC BY 2.0
Source Link: Flickr
Filename: 7354-Thumbnail.png
Name: Mask with two heads
Author: Kevin Hutchinson
License: CC BY 2.0
Source Link: Flickr
Filename: 1908-Thumbnail.png
Name: N/A
Author: Dangerous...Dan
License: CC BY 2.0
Source Link: Flickr
Filename: DKCUWT-Thumbnail.png
Author: MontagueETC
License: CC BY-SA 3.0
Derivative of:
Name: Scissors
Author: Kevin Doncaster
License: CC BY 2.0
Source Link: Flickr
Filename: 8K-Thumbnail.png
Author: MontagueETC
License: CC BY-SA 3.0
Derivative of:
Name: Red Tide at midnight
Author: Mike
License: CC BY-SA 2.0
Source Link: Wikimedia Commons
Fan Art
Filename: Fanart-ZalCryptid-1.jpg
Name: SCP-⌘ - Beneath the Shivering Kingdom
Author: Zal Cryptid
License: CC BY-SA 3.0
Source Link: Zal Cryptid's Art Hub
Filename: Fanart-DodoDevil.jpg
Name: All Roads Lead to Rome
Author: DodoDevil
License: CC BY-SA 3.0
Source Link: DODO'S 7KOLLAGES
Filename: Fanart-WifiFailure-1.jpg
Name: On my way to site-⌘
Author: Wifi Failure
License: CC BY-SA 3.0
Source Link: Twitter
Filename: Fanart-WifiFailure-2.jpg & Fanart-WifiFailure-3.jpg
Name: I placed them all around my room, for ease of access, of course.
Author: Wifi Failure
License: CC BY-SA 3.0
Source Link: Twitter
Filename: Fanart-Sunnyclockwork-1.jpg
Name: SCP-⌘ - Beneath the Shivering Kingdom
Author: SunnyClockwork
License: CC BY-SA 3.0
Source Link: SunnyClockwork's Artwork - Series V - VIII
Filename: Fanart-IDMNS-1.jpg
Author: IDMNS
License: CC BY-SA 3.0
Source Link: N/A
Filename: Fanart-Sunnyclockwork-2.jpg
Name: SCP-6454 - The Painting That Ate Paris, Texas
Author: SunnyClockwork
License: CC BY-SA 3.0
Source Link: SunnyClockwork's Artwork - Series V - VIII
Filename: Fanart-Rhineriver.jpg
Name: Esterberg (City) — Wikipedia
Author: Rhineriver
License: CC BY-SA 3.0
Source Link: Rhineriver's Art Page (Now In Full-Color!)
Filename: Fanart-Jadeitor.jpg
Name: Day 22 - SCP-7701
Author: Jadeitor
License: CC BY-SA 3.0
Source Link: Twitter
Filename: Fanart-IDMNS-2.jpg
Author: IDMNS
License: CC BY-SA 3.0
Source Link: N/A
Filename: Fanart-SouthofAsia3.jpg
Name: SCP-7009 - All Roads Lead to Rome.
Author: SouthofAsia3
License: CC BY-SA 3.0
Source Link: Reddit
Filename: Fanart-rottingraisins.jpg
Name: SCP-7408
Author: rottingraisins
License: CC BY-SA 3.0
Source Link: Tumblr
Filename: Fanart-systemaltoclef.jpg
Name: Doctor Kondraki wakes up.
Author: systemaltoclef
License: CC BY-SA 3.0
Source Link: Tumblr
Filename: Fanart-ZalCryptid-2.jpg
Name: SCP-6183 - B L A C K B O X
Author: Zal Cryptid
License: CC BY-SA 3.0
Source Link: Zal Cryptid's Art Hub
Filename: Fanart-arturite2.jpg
Name: Doctors will literally become a bunch of insects instead of going to therapy.
Author: arturite2
License: CC BY-SA 3.0
Source Link: Tumblr
Filename: Fanart-the-land-of-dreams.jpg
Name: breaking news local disaster of a man is way prettier than he has any right to be more at 8
Author: the-land-of-dreams
License: CC BY-SA 3.0
Source Link: Tumblr
Filename: Fanart-Sunnyclockwork-3.jpg
Name: SCP-7408 - Metamorphosis
Author: SunnyClockwork
License: CC BY-SA 3.0
Source Link: SunnyClockwork's Artwork - Series V - VIII
Filename: Fanart-Salllllty_water.jpg
Name: if he has eyeball replacement, i prefer he has the perfect death stare, like a doll
Author: saltywater
License: CC BY-SA 3.0
Source Link: Twitter
Filename: Fanart-amones.jpg
Name: Metamorphosis
Author: Amones
License: CC BY-SA 3.0
Source Link: Tumblr
Filename: Fanart-Dobek_k.jpg
Name: Qayin and Hevel
Author: Drdobermann
License: CC BY-SA 3.0
Source Link: Drdobermann's Artworks
Filename: Fanart-RuraScarlet.jpg
Author: RuraScarlet
License: CC BY-SA 3.0
Filename: Fanart-ZalCryptid-3.jpg
Name: SCP-7376
Author: Zal Cryptid
License: CC BY-SA 3.0
Source Link: Tumblr
Filename: Fanart-ZalCryptid-4.jpg
Name: SCP-7354
Author: Zal Cryptid
License: CC BY-SA 3.0
Source Link: Tumblr
Filename: Fanart-ZalCryptid-5.jpg
Name: SCP-7408
Author: Zal Cryptid
License: CC BY-SA 3.0
Source Link: Tumblr
Filename: Fanart-ZalCryptid-6.jpg
Name: SCP-6462
Author: Zal Cryptid
License: CC BY-SA 3.0
Source Link: Tumblr
Filename: Fanart-Robisnotadeer.jpg
Name: 7376-A abel
Author: Robisnotadeer
License: CC BY-SA 3.0
Source Link: Twitter
Filename: Fanart-Simple_Mortal64.jpg
Name: :"D
Author: Simple_Mortal64
License: CC BY-SA 3.0
Source Link: Twitter