Tema Inkblot (Tema do Estúdio Waldon)

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; }

O

Tema

Inkblot

Um tema para críticas.
Feito por CroquemboucheCroquembouche.
Leitura de 5 minutos.
⭐⭐⭐★★

pancakes.png
avaliação: 0+–x

Esta página é algumas coisas:

  1. A fonte do Tema Inkblot.
  2. Um guia para escrever para o Estúdio Waldon.
  3. Uma demonstração de como o tema se aprece em um contexto de formato textual longo.

O Tema Inkblot é feito para críticas dos restaurantes Ambrose, escritas pelo Estúdio Waldon, que é um sub-GdI dos restaurantes Ambrose, eu acho. Mas você pode usá-lo para qualquer coisa.

As instruções de uso estão abaixo do preâmbulo.

+ Só copiar e colar isso

Se você estiver usando o tema junto com o componente da Barra Lateral Desativável do Sigma-9:

+ Instruções extras especificamente para a Barra Lateral Desativável

Preâmbulo

Dentro do universo, o Estúdio Waldon substitui o 'Guia Michelin online, desenvolvido pela Dark Web'1 no meu headcanon porque não gosto muito da ideia de ser processado pelo verdadeiro Guia Michelin por violação de propriedade intelectual.

O formato Ambrose, atualmente, está prestando um desserviço a si mesmo. Muitos artigos dos Restaurantes Ambrose consistem em um conjunto de itens de menu não relacionados seguidos por um conjunto de críticas sem relação. Isso é uma abordagem de espingarda2 — isso é chato, não há um fio narrativo a seguir, não há nada para chamar sua atenção. Ele incentiva seus leitores a ficarem desinteressados. Listas repelem a atenção. Mesmo se você fizer uma lista bem e exceder essas restrições, por que se limitar para começo de conversa?

Isso é uma pena, porque o formato dos Restaurantes Ambrose promete tanto. As críticas, se entrelaçadas, podem contar uma história interconectada. O menu é uma ideia fantástica — nenhum outro formato de GdI incentiva esse tipo de criatividade! Era isso que o formato Ambrose era para ser originalmente.3 Mas é difícil pensar em todos os pequenos detalhes que tornam esse formato mágico e muito mais fácil criar algo que parece correto, mas não é.

O Estúdio Waldon é uma visão diferente do formato dos Restaurantes Ambrose. O Estúdio Waldon pega uma coisa e segue com ela — uma crítica complexa e profunda de uma única coisa e de todos os seus aspectos. Um tópico para se concentrar. Sem distrações. Isso significa que em um formato Ambrose escrito pelo Estúdio Waldon, você verá apenas uma crítica. Há menos partes móveis para atrapalhar a escrita de uma boa história, enquanto ainda permanece aberto para o mesmo nível de criatividade visual.

O Estúdio Waldon não possui uma página central porque acabei de inventá-lo, então acho que isso vai ter que servir. O Estúdio Waldon é uma pequena equipe de críticos — talvez dez pessoas, no máximo — tentando abrir caminho na indústria de avaliações (tentando e falhando, mas eles nunca irão admitir). Sua organização é relaxa e sem hierarquia forte. Eles se concentram em críticas de alta qualidade de coisas de alta qualidade. Eles apreciam profundamente os pequenos detalhes, muitas vezes à custa dos maiores — tal como não perceber que o restaurante em que eles acabaram de entrar é na verdade uma armadilha anômala mortal. Para esse efeito, um tema de uma crítica do Estúdio Waldon pode ser o conflito entre algo óbvio para o leitor e o próprio crítico dentro do universo sendo totalmente alheio a esse algo.

Mas ei, isso é apenas um tema. Você pode fazer o que quiser.

Uso

Há alguns passos para usar este tema:

  1. Adicionar o tema.
  2. Configurar o tema.
  3. Fazer o cabeçalho especial.

Adicionando o tema

Para adicionar este tema a uma página, cole o seguinte código nela, preferencialmente próximo ao topo da página juntamente com qualquer outro CSS.

[[include :scp-pt-br:theme:inkblot]]

[[module CSS]]
:root {
--inkblot-accent: transparent;
--header-title: "ESTÚDIO WALDON";
--header-subtitle: "connaisseurs do desconhecido";
}
[[/module]]

(Você pode fazer uma div com um formato parecido com a da acima adicionando a classe inksplot a ela.)

Configurando o tema

Para configurar o tema, altere os valores das três variáveis CSS.

O —inkblot-accent determina a cor das bolhas pequenas e outras coisas da página. Se você não incluir esta variável ou não alterá-la do código acima, a cor padrão é 'transparent', o que significa que essas bolhas e coisas estão invisíveis.

Eu tenho um pedido: por favor não use a mesma cor de accent usada por outro artigo Inkblot. Este tema usa a cor 'coral', então essa já está ocupada. Escolha uma cor nova. Não vai ter muitas páginas usando este tema, então não essa deve ser uma escolha difícil.

(Você pode ver quais página usam este tema indo para o fundo da página, abrindo 'Opções', e então clicando 'Voltar Links'.)

Tente escolher uma cor sobre a qual você consiga ver texto preto. Se você tiver que escolher uma cor escura, se certifique de ajusta a cor da fonte dos botões de avaliação para que eles fiquem visíveis, e você mesmo pode descobrir como fazer o cabeçalho Inkblot funcionar com ela.

As outras duas variáveis alteram o texto no cabeçalho.

Fazendo o cabeçalho Inkblot

O Tema Inkblot oculta o título padrão da página, então você precisará criar o seu próprio. Você pode colocar o texto que quiser nele, mas eu imploro, por favor, use o mesmo texto que o título da página real. Por favor.

Você viu um cabeçalho normal do Inkblot no topo da página, então aqui está outro, exceto que agora ele está rotulado e cada elemento HTML apresenta um contorno desenhado ao redor de si.

.inkblot-header

.inkblot-title

Coloque

Qualquer

Texto

que quiser.

.inkblot-info

Esta é a sinopse da crítica.
Escrito por algum otário.
Leitura de 5 minutos.
⭐★★★★

.inkblot-image

pancakes.png

Você pode ver, com sorte, que a parte do cabeçalho que é o título é composta por quatro subseções, cada uma contendo uma ou duas palavras. Eu acho que essa é uma maneira bem legal e visualmente interessante de dividir o título.

A seção de informações deve conter algumas informações sobre a crítica. Minha sugestão — do que é esta crítica? Quem a escreveu? Quanto tempo vai demorar para ler? E quão boa é a coisa que está sendo avaliada?

A imagem pode ser qualquer coisa. Provavelmente é bem normal fazer dela uma foto da pessoa que está fazendo a crítica. Talvez este tema tenha sido feito por panquecas. Eu evitaria fazer dela uma imagem da coisa que está sendo revisada — guarde isso para o artigo propriamente dito.

Esse cabeçalho terá as três seções em uma linha no desktop, mas, no celular, o título terá uma linha só para si, e a seção de informações e a imagem estarão na próxima linha.

Você pode ver como fazer o cabeçalho acima, incluindo as quatro subseções do título, abaixo. Observe que você pode remover uma das seções do título e, em vez disso, haverá apenas um espaço no lugar — foi o que fiz para o título desta página.

[[div class="inkblot-header"]]

[[div class="inkblot-title"]]
[[div class="title-1"]]
Coloque
[[/div]]
[[div class="title-2"]]
**Qualquer**
[[/div]]
[[div class="title-3"]]
Texto
[[/div]]
[[div class="title-4"]]
//que quiser//.
[[/div]]
[[/div]]

[[div class="inkblot-info"]]
Esta é a sinopse da crítica.
Escrito por algum otário.
Leitura de 5 minutos.
⭐★★★★

[[div class="inkblot-image"]]
[[image pancakes.png]]
[[/div]]
[[/div]]
[[/div]]

Observe que usar esse layout de cabeçalho e título apresenta alguns problemas.

  • Você precisa ter cuidado com o tamanho do seu título, ou cuidado ao dividi-lo nas quatro partes. Se ele for muito longo, uma das seções do título pode atravessar para a próxima linha, tornando a leitura confusa. Eu recomendo ter um título curto que possa ser facilmente dividido em quatro segmentos aproximadamente iguais.
  • Se o título foi muito longo ou houver muito tento na seção de informações, eles poderão transbordar ou se sobrepor também. Tente não botar muita coisa.

Você não precisa usar o título estranho em grade, ou a seção de informações, ou ter uma imagem. Você pode adicioná-los e removê-los como quiser. Você nem precisa usar a classe .inkblot-header — tudo o que ela faz é mover o cabeçalho até a metade do lado esquerdo da página no desktop.

Aqui está um exemplo sem o título em grade, sem as informações, sem a imagem e sem .inkblot-header:

Apenas um título normal.

[[div class="inkblot-title"]]
//Apenas// um **título** normal.
[[/div]]

Mas como faço um cardápio. Ambrose?

Aqui está o problema. Este tema pode ter sido feito para críticas dos Restaurantes Ambrose, mas ele não vem com um cardápio Ambrose.

Por que isso?

Acredito firmemente que metade da diversão de escrever um formato Ambrose é fazer seu próprio cardápio. Adoro ver novos designs para cardápios em cada formato Ambrose. Portanto, o ônus é seu — quero ver você usar este tema com seu próprio design de cardápio. Não importa se for terrível! Tudo o que ele precisa ser é algo que você se divirta fazendo.

Se eu colocar um design de cardápio neste tema, não minta para mim e me diga que você não o usaria. Você iria. Eu iria. E, como designer deste tema, posso fazer o que quero.

Se você realmente precisar, você pode copiar um cardápio de outro formato e ajustar um pouco as cores. Mas você sabe que se você fizer isso, eu vou derrubá-lo com toda a força de um único voto negativo e uma crítica leve. Por favor, não faça isso.

Adicionar o cardápio de um restaurante Ambrose com estilo especial qualifica seu artigo como um Formato de GdI para os Restaurantes Ambrose.

Código fonte

Ok, isso é tudo que tenho a dizer. Aqui está o código fonte.

+ Mostrar código fonte

Footnotes
otematraduzido
revisão da página: 8, última edição: 10 May 2023 15:03
Editar Avalie (0) Etiquetas Discutir Histórico Arquivos Impressão Ferramentas do site + Opções
Salvo indicação em contrário, o conteúdo desta página é licenciado sob Creative Commons Attribution-ShareAlike 3.0 License