/* 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: -20em;
width: 17.75em;
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;
}
}
}
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.
.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; }
Vítejte u nového vydání čtvrtročních novinek české větve SCP Nadace! Jedná se o nepravidelný měsíčník, kde se ponoříme hluboko do událostí v komunitě, na stránce a v administraci. Hurá na to!
Tuto edici celou připravil prakticky sám Steven Choroš. <3
Nové články
Stejně jako i v létě, přibyly na naši wiki pouze 4 autorské články.
Senterai vstal z mrtvých (HÁLELŮJA) a mimo jiné napsal v září i jeden příběh s názvem Měl jsem se vrátit.
Pan 
Utylike zahrál tentokrát na vtipnou notu a napsal SCP-003-CS-J. Asi měl chuť na sýr.
Lyppiatt vzal psaní úplně z jiného konce a nenapsal ani příběh ani SCP, ale návod O literárním přemýšlení obecném a v SCP.
A 
Steven Choros přispěl na wiki jedním delším SCP článkem: SCP-037-CS
Nejlépe hodnocený Článek
O literárním přemýšlení obecném a v SCP — od Lyppiatt
Budeme považovat za nesporné, že jsme-li nuceni podřídit příběh formátu, bude z příběhu ubráno, jeho kompletnost bude narušena či osekána tak, aby vyhovovala zadání.
Překlady
Přestože spisovatelé a čtenáři spí, překladatelé stále žijí a jsou aktivní.
Kvůli nešikovnému úrazu a následné nemožnosti běhat po venku, sedl Senterai k wikidotu a překládal jako o život. V září přeložil SCP-618, SCP-3041, SCP-3064, SCP-3932, SCP-3457, SCP-3556, SCP-4309, SCP-5371, SCP-6005, SCP-4099, SCP-4004, SCP-2004. V říjnu to byl však jen jeden článek SCP-3021, asi proto, že už se Senty ze svého úrazu udravoval a v listopadu už zase utíkal od počítače dotknout se trávy.
Překladatel veterán 
AtlasCZ vypracoval SCP-7013, SCP-6204 a Nevysvětlený artefakt #6980.
Uživatel 
AwareStep si ukousl veliké sousto v překladu Nové Doby a jeho první části.
DrCheems překládal poměrně hojně; SCP-233, SCP-6263, SCP-6400, ale nejen to. Také pracuje na dlouhodobém překladu Antimemetické divize a v listopadu přeložil jeden k tomu náležející příběh Tvůj Poslední První Den. Také překládal i do kánonu Pitch Haven SCP-1530, SCP-2746 a SCP-2999.
Protože Utylike pracuje v současné době na něčem velmi dlouhém, neměl moc času na jiné překlady, a tak přeložil jenom Funk Zlaté hordy.
Paní 
Miss_Martins přeložila v listopadu SCP-296, SCP-423 a SCP-583.
Nováček 
neTo42 přeložil SCP-472 a SCP-262.
A Steven Choros překládal stejně jako v létě na Poutníkovu Knihovnu a přispěl článkem Západ nad hledíky.
Nejlépe hodnocený Překlad
SCP-6263 — od DrCheems
Díky za důkazy, Willie! Já věděl, že mě v tom nenecháš.
S lítostí oznamujeme všem členům České větve SCP-Nadace, že místo v Radě O5 navždy opustil (nebo si dal jen dlouhou přestávku) náš drahý překladatel, spisovatel a vrchní technik pan 
chamik. Odešel 12. září v osm hodin večer.
A teď něco veselejšího.
22. září jsme oslavili třetí rok oficializace naší drahé České větve SCP Nadace. Ptáte se, jak jsme to oslavili?
Utylike mi řekl, ať se nezmiňuji o SCP soutěži, avšak já beru jako povinnost samozvaného žurnalisty Utyho neuposlechnout. Soutěž opravdu byla, v pořadí osmá, téma "Z druhé strany". Byla zahájena právě na den oficializace a původně bylo v plánu nechat velice brzký termín uzavření. Když jsme však viděli, že do ní nikdo nepřispívá, termín ukončení jsme oddalovali a oddalovali… Tato soutěž nebyla dosud uzavřena a slouží jako připomínka toho, že jsme my admini přecenili aktivitu členů na stránce. Proto doporučuji vám čtenářům novinek přečíst si vstupy do této soutěže. Jsou tam jenom dva, a i když jsou delší, věřím, že vám nezaberou dlouho. Odkaz na soutěžní stránku naleznete zde.
A teď ještě něco více veselejšího.
27. září jsme mezi členy vedení přivítali nového člena. Je jím DrCheems a chopil se jednak práce vrchního technika na místo Kubíka (chamik), ale také i rolemastera, kterého dlouhou dobu dělal pan 
Hajgrando, který odstoupil v létě. Navíc pro přiřazování rolí naprogramoval speciální systém, který je mnohem efektivnější, než tabulka v Excelu.
A to je všechno, milí čtenáři. Pokud jsem na něco zapomněl, nebojte se mě kontaktovat na discordu nebo mi napsat do skoukromých zpráv na wikidotu. Bylo mi ctí se znovu zhostit této práce.
Většinou se tady dává odkaz na novinky z anglické větve, jenže já je nemůžu najít. ;-;
- váš Steven Choroš
Novinky z května navždy zapomenuty.
