Tema Inkblot (Tema do Estúdio Waldon)
avaliação: 0+x

O que isto é

Um monte de 'melhorias' de CSS variadas que eu, CroquemboucheCroquembouche, uso em um monte de páginas porque eu acho que as faz mais fáceis de lidar.

As mudanças que este componente faz são um monte de modificações realmente triviais para facilitar a experiência de escrita e para tornar a documentação de componentes/temas um pouco mais fácil (o que eu faço muito). Não muda nada sobre a página visualmente para o leitor — as mudanças são para o escritor.

Eu não esperaria que traduções de artigos que usem este componente também usem este componente, a menos que o tradutor goste e queira usá-lo de qualquer maneira.

Este componente provavelmente não conflitará com outros componentes ou temas, e mesmo se o fizer, provavelmente não importará muito.

Uso

Em qualquer wiki:

[[include :scp-pt-br:component:croqstyle]]

Este componente é feito para ser usado em outros componentes. Ao usar em outro componente, certifique-se de colocar isto dentro do bloco [[iftags do componente, para que usuários do seu componente não sejam forçados a também usar Croqstyle.

Componentes relacionados

Outros componentes de estilo pessoal (que mudam só algumas coisas):

Temas de estilo pessoal (que são revisões visuais):

Mudanças CSS

Notas de rodapé de tamanho razoável

Impede que notas de rodapé tenham um milhão de quilômetros de comprimento, para que você possa lê-los.

.hovertip { max-width: 400px; }

Edição/código monoespaçado

Deixa a caixa de texto de edição monoespaçada, e também muda todo o texto monoespaçado para Fira Code, a fonte de monoespaço obviamente superior.

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

Fundos de teletipo

Adiciona um fundo cinza claro a elementos <tt> ({{texto}}), para que fragmentos de código se destaquem mais.

tt {
  background-color: var(--amostrar-algumacoisa-bhl-sla-vou-consertar-depois, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

Sem mais caras grandes

Impede que fotos grandes apareçam quando você passar o cursor sobre a imagem do avatar de alguém, porque são estúpidas e muito irritantes e é possível apenas clicar nelas se você quiser ver a versão grande.

.avatar-hover { display: none !important; }

Quebra quebra

Qualquer texto dentro de um div com classe nobreak tem quebra de linha acontecendo entre cada letra.

.nobreak { word-break: break-all; }

Cores de código

Acrescenta as cores de código do meu terminal como variáveis. Talvez eu mude isto para um tema de terminal mas comum como Monokai ou algo eventualmente, mas por enquanto é só o meu tema pessoal, que é derivado de Tomorrow Night Eighties.

Também, adicionar a classe .terminal a um bloco de código falso como [[div class="code terminal"]] lhe dá uma aparência meio pseudo-terminal com um fundo preto. Não funciona com [[code]], porque o Wikidot insere um monte de realce de sintaxe que não é possível mudar sem um monte de CSS. Use-a somente para fragmentos de código sem [[code]].

Ferramenta rápida para colorir um exemplo de uso de componente Wikidot 'padrão' com as vars acima: 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;
}

Modo depuração

Desenhe linhas em volta de qualquer coisa dentro de .debug-mode. A cor das linhas é vermelha mas se submete à variável CSS --debug-colour.

Você também pode adicionar div.debug-info.over e div.debug-info.under dentro de um elemento para anotar as caixas de depuração — porém você precisará certificar-se de deixar espaço vertical suficiente para que a anotação não sobreponha a coisa em cima ou embaixo dela.

…assim!

.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.

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


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.

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