Algo Belo
Algo Belo
Author: L200L200
Published on 30 Jun 2021 13:16
/* 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;
    }
}
 
}
avaliação: 0+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; }
avaliação: 0+x

O homem emaciado rastejava para fora de seu buraco no chão. Pela primeira vez no que podem ter sido eras, o homem sentia o calor do Sol em sua pele pálida. Debaixo de seus dedos ossudos, ele sentia o pasto macio acariciando suas mãos. Em meio à grama, o homem sentia outra coisa.

O homem pegou o algo, puxando-o do chão. Ele sentia, cheirava, lambia, curioso para saber o que poderia ser. Seus lábios rachados lentamente começaram a formar um sorriso quando ele percebeu o que segurava.

Era um lírio.

Embora seus olhos tivessem parado de funcionar há muito tempo, ele sabia o que estava ao seu redor. Um campo de flores, cobrindo cada centímetro de terra, até onde a vista alcançava. Seus pulmões se moveram pela primeira vez em anos e ele soltou uma fraca risada, lágrimas umedecendo seus lábios secos e opacos. Ele sabia o que isso significava.

Ele sabia, sem sombra de dúvida, que ele fora redimido.


Enquanto pássaros brancos voavam acima, um grupo de cientistas se movia nervosamente. Eles entraram na Ala Keter, segurando firmemente seus cartões-chave. Eles haviam recebido ordens, direto da mesa do Supervisor. Eles não tinham certeza se queriam cumpri-las, mas ordens são ordens.

Eles chegaram à câmara de contenção e entraram na sala de observação. Alguns deles começaram a orar, enquanto outros apenas sorriam nervosamente. Três deles pegaram suas chaves, inseriram-nas no painel e as viraram.

Quando o ácido começou a drenar, alguns pesquisadores começaram a rir e outros começaram a chorar. Assim que o resto do ácido saiu da sala, os homens giraram as chaves uma segunda vez. Os homens observavam enquanto as portas da câmara, conectando-a ao mundo externo, começavam a deixar a luz entrar. 682 lentamente levantou-se do chão, despertado pela luz do sol. Ele passou pela abertura, para o mundo mais amplo. Alguns dos pesquisadores deixaram a sala de observação e entraram na velha cela de 682, curiosos para ver o que o velho réptil faria.

O reptiliano olhou em volta por um momento, encarando os belos pássaros acima. No momento, os pesquisadores estavam prendendo a respiração, com medo de que esse monstro fosse pular e tirar as pombas do céu. Em vez disso, ele olhou de volta para baixo, antes de se jogar em um canteiro de flores e soltar um suspiro pesado. Ele parecia…

Satisfeito.


Em um mundo sem morte

Era uma noite de sábado. Não era um dia especial, ou um ano especial falando nisso. Para muitos, era apenas mais um ano, outra década em um pandemônio sem fim.

Isso - O tédio sem fim à vista, a monotonia de uma vida sem morte - tudo isso mudou quando as flores começaram a desabrochar. Os corpos robóticos do Anderson ofereciam um pouco de escape de tudo, mas isso? Sabendo que, em apenas 24 horas, toda a dor acabaria? Era uma bênção lá de cima.

A Fundação olhou profundamente em seus registros, tendo há muito descartado CODINOME: Lily como uma possibilidade. As pombas que eles haviam preparado para isso estavam muito velhas, seus músculos tendo atrofiado centenas de anos atrás. Festas ocorriam desenfreadamente pelas instalações da organização, seus funcionários muito feliz com sua destruição.

O mesmo podia ser dito para o resto do mundo. Festivais eram realizados em todo o mundo, e muitos se preparavam para o fim. Eles preparavam seus itens pessoais, vestiam seus ternos e vestidos favoritos e o que você quiser. Noticiários realizavam concursos de apostas nacionais, com milhões de participantes especulando como o fim chegaria. Pela primeira vez em séculos, o mundo estava feliz, e eles definitivamente mostravam isso.

O mundo se foi não com um gemido, mas com um estrondo.

Salvo indicação em contrário, o conteúdo desta página é licenciado sob Creative Commons Attribution-ShareAlike 3.0 License