Cabeçalho Centralizado Sigma-9
AVISO:
Esta é uma página component usada internamente pela Wiki Lusófona. Ela foi feita para ser usada e incluída em outras páginas.
O que isto é
Um monte de 'melhorias' de CSS variadas que eu, 
Croquembouche, 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.
.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; }
Como Usar
Para usar este componente, por favor cole a seguinte sintaxe no topo da sua página. Se sua página usar um tema Sigma-9 customizado, por favor cole a seguinte sintaxe depois do tema customizado:
[[include :scp-pt-br:component:centered-header-sigma-9]]
Você pode alterar o título do cabeçalho, o subtítulo do cabeçalho, a cor do título do cabeçalho, a cor do subtítulo do cabeçalho, e o logo do cabeçalho como quiser. Apenas cole esta sintaxe depois do include, e então estilize-a de acordo:
[[module CSS]]
:root{
--header-title: "TÍTULO";
--header-subtitle: "SUBTÍTULO";
--titleColor: cor_título;
--subtitleColor: cor_subtítulo;
--lgurl: url(URL_AQUI);
}
[[/module]]
A fonte padrão do título do cabeçalho e subtítulo do cabeçalho é Montserrat.
Se você quiser manter a fonte original do título do cabeçalho da sua página, adicione este código:
#header h1 a::before{
font-family: unset;
}
Se você quiser manter a fonte original do subtítulo do cabeçalho da sua página, adicione este código:
#header h2::before{
font-family: unset;
}
O titleColor padrão é
hsl(0, 0%, 95%).
O subtitleColor padrão é
hsl(60, 62%, 85%).
Se você quiser manter as cores de título originais, você pode omitir inteiramente estes dois campos.
Você também pode escolher não ter logo:
Pela razão de este componente ter uma abordagem diferente para projetar o cabeçalho, componentes de logo (como Modelo de SCP do Orgulho, Highlighter de Orgulho, e Logos SCP Alternativas Mega Maneiras de Calibri) não funcionaram como o intencionado. Se você desejar usar logos de uma das páginas que acabei de ligar, por favor em vez veja suas sessões de "Arquivos", então ligue a imagem do logo desejada diretamente.
Toggle Sidebar de acesso rápido [opcional]:
[[include :scp-pt-br:component:toggle-sidebar]]
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
/* Centered Header Sigma-9
* [2021 Wikidot Component]
* By Lt Flops (CC BY-SA 3.0)
* Forked from:
* Penumbra Theme by EstrellaYoshte
* Also based on:
* Centered Header BHL by Woedenaz
**/
/* ---- VARS ---- */
:root{
--titleColor: hsl(0, 0%, 95%);
--subtitleColor: hsl(60, 62%, 85%);
--lgurl: url(https://scp-wiki.wdfiles.com/local--files/component%3Acentered-header-sigma-9/logo.svg);
}
/* ---- SITE BANNER ---- */
#header,
div#header{
background-image: none;
}
#header::before{
position: absolute;
width: 100%;
height: 100%;
content: "";
background-image: var(--lgurl);
background-position: center top;
background-repeat: no-repeat;
background-size: auto 9em;
opacity: .33;
}
#header h1,
#header h2{
float: none;
margin-left: 0;
text-align: center;
}
#header h1 span,
#header h2 span{
/* Hide the Existing Text */
display: none;
}
#header h1 a::before,
#header h2::before{
/* Style the New Text */
font-family: "Montserrat", "Arial", sans-serif;
text-shadow: none;
}
#header h1 a::before{
position: relative;
bottom: .15em;
color: var(--titleColor);
font-size: 115%;
font-weight: 700;
}
#header h2::before{
position: relative;
top: .1em;
color: var(--subtitleColor);
font-size: 130%;
font-weight: 600;
}
#header h1 a::before{
/* Set the New Text's Content From Variable */
content: var(--header-title, "FUNDAÇÃO SCP");
}
#header h2::before{
content: var(--header-subtitle, "ASSEGURAR - CONTER - PROTEGER");
}
/* ---- SEARCH ---- */
#search-top-box{
top: 1em;
right: 0;
}
#search-top-box-form input.button{
margin-right: 0;
}
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus{
border-radius: 0;
box-shadow: none;
font-size: 100%;
}
/* ---- TOP BAR ---- */
#top-bar{
right: 0;
display: flex;
justify-content: center;
}
#top-bar ul li ul{
border-bottom: 1px solid hsl(0, 0%, 40%);
box-shadow: none;
}
/* ---- LOGIN ---- */
#login-status{
top: 1.1em;
right: initial;
color: hsl(0, 0%, 87%);
}
#account-topbutton{
border-color: hsl(0, 0%, 87%);
font-size: 100%;
}
/* ---- PAGE TITLE ---- */
.meta-title,
#page-title{
text-align: center;
}
/* ---- BREADCRUMBS ---- */
.pseudocrumbs,
#breadcrumbs{
text-align: center;
}
/* ---- MOBILE DISPLAY ---- */
@media (max-width: 767px){
#search-top-box{
top: 1.85em;
width: unset;
}
.mobile-top-bar{
position: relative;
left: 0;
display: flex;
justify-content: center;
}
#login-status{
top: 0;
right: 0;
}
#header .printuser{
font-size: 0;
}
#header .printuser img.small{
margin: 0;
transform: translate(6px, 4px);
}
#my-account{
display: none;
}
#account-topbutton{
margin-left: 2px;
}
}
