WikiPStory:Guia de estilo

Esta página define como as páginas da Wiki do PStory Online devem ser escritas e apresentadas. O objetivo é que qualquer pessoa consiga criar uma página nova que pareça parte do mesmo conjunto, sem precisar inventar estilo próprio.

Princípio

Uma página de quest ou sistema é um guia, não um painel. Ela deve acompanhar a mesma ordem em que o jogador vive o conteúdo, alternando naturalmente entre explicação e imagem:

texto → imagem → explicação → objetivo → imagem → próxima etapa

E não:

card → card → selo → card → informação → card

Se uma informação cabe em uma linha de texto, ela não precisa virar componente. O conteúdo produz a maior parte da estética: um bom banner, títulos organizados, parágrafos bem escritos, imagens bem posicionadas e tabelas simples já bastam.

Estrutura de uma página de quest ou sistema

Banner no topo, em largura grande e centralizado.
Requisitos em texto, com rótulos em negrito, uma linha por item. Sem tabela e sem cards.
Recompensas em uma frase, logo abaixo dos requisitos, como resumo.
__TOC__ para o índice nativo.
Sobre o conteúdo — o que é, o contexto e o que o torna diferente.
As etapas, na ordem em que o jogador as cumpre, cada uma com o seu título.
Recompensas detalhadas, em tabela.
Dicas, em lista.
Informações pendentes, quando houver.
Ver também.

Omita o que não se aplicar, mas mantenha a ordem. Os títulos devem descrever a etapa real da quest, não categorias genéricas.

Regras de escrita

Um parágrafo, uma ideia. Não misture história, requisito, objetivo e recompensa no mesmo bloco.
Parágrafos curtos, de duas a quatro linhas.
Negrito para nomes de NPCs, itens, valores e a informação que o jogador precisa reter. Não para frases inteiras.
Avisos entram como '''Atenção:''', '''Observação:''' ou '''Dica:''' no início do parágrafo. Não use caixas coloridas para isso.
Escreva para quem nunca viu o sistema.
Nomes oficiais do jogo ficam em inglês: Champion's Path, Poké Sync, Held.
Não invente mecânicas, valores ou regras. Se a informação não está confirmada, registre-a em "Informações pendentes".

Imagens

O interesse visual da página vem das imagens do jogo, não do CSS.

Capturas de cenário: [[File:Nome.png|center|450px|link=]], seguidas de <div class="pst-legenda">Legenda.</div>.
Painéis e telas de interface: 600px, porque o texto dentro delas precisa ser legível.
Banner do topo: 800px.
Toda imagem precisa de legenda. A legenda explica o que o jogador está vendo; não repete o título da seção.
Nomeie os arquivos com o nome do conteúdo na frente: ChampionsPath_Painel.png.
Evite GIFs grandes. Um GIF de dezenas de megabytes trava a página no celular.

Imagens lado a lado

Quando duas imagens contam a mesma coisa — mapa e NPC, área externa e interna, item e local de uso — use:

<div class="pst-figs">
[[File:A.png|440px|link=]]
[[File:B.png|440px|link=]]
</div>
<div class="pst-legenda">Legenda das duas.</div>

Elas se reorganizam sozinhas em telas estreitas. Não use só para preencher espaço: se uma imagem grande conta melhor a história, prefira uma só.

Imagens que ainda não existem

Deixe o espaço preparado como comentário, para não exibir link quebrado ao jogador:

<!-- Placeholder: gravação da mecânica em execução.
[[File:Nome Da Mecanica.gif|center|600px|link=]] -->

Em células de tabela que aguardam ícone, use [[File:ArquivoExemplo.png|40px|link=]].

Tabelas

Tabela serve para comparar ou listar elementos, não para embrulhar texto corrido. Alterne: texto explicando → tabela centralizada → continuação da explicação.

{| class="wikitable" style="margin:0 auto; text-align:center;"
! Campeão !! Expedition !! Mega Stone
|-
| class="pst-icone" | [[File:ArquivoExemplo.png|40px|link=]]
| Tyranitar || Tyranitarite
|}

Sempre centralizada com margin:0 auto.
Largura natural. Não force 100%: a tabela deve ocupar o que o conteúdo pede.
Coluna de ícone recebe class="pst-icone".
Linha de conteúdo indisponível recebe class="pst-indisponivel".
Em tabelas com muito texto na primeira coluna, use style="text-align:left" nessas células.

Classes disponíveis

Classe	Onde usar
`pst-legenda`	Legenda logo abaixo de uma imagem ou de um par de imagens.
`pst-figs`	Contêiner de imagens lado a lado, responsivo.
`pst-icone`	Célula de tabela que contém apenas um ícone.
`pst-indisponivel`	Linha de tabela para conteúdo bloqueado ou indisponível.
`pst-infobox`	Infobox lateral. Opcional, e hoje pouco usada: só vale quando existe uma imagem que identifica o conteúdo e fatos que não cabem na prosa. Se os dados já estão no texto, ela apenas repete informação.

Existe também uma camada mais antiga de componentes — pst-hero, pst-badges, pst-boss-grid, pst-facts, pst-split — junto dos templates Template:Selo, Template:Fato e Template:Boss. Não use nada disso em páginas de quest ou sistema. Eles existem para páginas de catálogo, que listam muitos itens equivalentes e têm filtros, como um futuro índice geral de quests.

O que evitar

Vários cards lado a lado, e cards dentro de cards.
Blocos com estatísticas gigantes e aparência de painel.
Gradientes, sombras e cantos muito arredondados.
Selos e etiquetas para qualquer informação.
Seções de abertura com título gigante, no estilo de página de divulgação.
Ícones decorativos que não carregam informação.
Transformar toda etapa em tabela.