Flopstyle: LITE

Flopstyle: LITE
Autor: LiedKLiedK
Publicado em 06 Mar 2022 22:42

Este é um exemplo funcional do authorbox.

Para mais informações e como editar isso em sua própria página, consulte a subseção Sideboxes.

Para criar isso box, cole a seguinte div dentro do seu authorbox:

[[div class="flavourText"]]
Texto
[[/div]]

Eu não recomendo colocar nenhum outro div dentro do seu authorbox.

quem me deu o poder de editar CSS cometeu um grave erro

Flopstyle: LITE

Sigma-9 Themes » Flopstyle: LITE

Avaliação:

avaliação: +2+x

Avaliação c/ painel de informações:

avaliação: +2+x

Exemplo de formatação

O que é isso ?


Este é um estilo de tema criado por Lt FlopsLt Flops para uso em seus artigos.

É uma melhoria estética em relação ao Sigma-9 (tema principal do Wiki) e existe para que possa ser facilmente atualizado, independente das páginas que o utilizam. Espere que o CSS mude com o tempo.

Por favor, use apenas se você entender o que está fazendo.

Este tema é incompatível com Black Highlighter. Este tema não oferece nenhuma melhoria em relação ao Black Highlighter. Se sua página usa Black Highlighter, não importe este tema, ou ele apresentará novos erros.


Como usar


Para usar este tema, copie e cole esta sintaxe no topo da sua página:

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

Se você deseja usar este tema com outro tema Sigma-9, cole Flopstyle primeiro e seu tema escolhido na próxima linha. Alguns ajustes finos podem ser necessários.

Observe também que este tema usa os seguintes componentes:

Este tema foi projetado com os seguintes componentes em mente:

Cabeçalho Centrado Sigma-9


Para usar este componente, cole a seguinte sintaxe depois do Flopstyle. Se sua página usa outro tema Sigma-9 personalizado, cole a seguinte sintaxe depois do tema personalizado:

[[include :scp-pt-br:component:centered-header-sigma-9]]

Você pode alterar o cabeçalho, sub-cabeçalho, cor do cabeçalho, cor do sub-cabeçalho e logotipo do cabeçalho como achar melhor. Basta colar esta sintaxe depois do Cabeçalho Centrado include e estilizá-lo de acordo:

[[module CSS]]
:root{
--header-title: "TÍTULO";
--header-subtitle: "SUBTÍTULO";
--titleColor: title_colour;
--subtitleColor: subtitle_colour;
--lgurl: url(URL_HERE);
}
[[/module]]

Cabeçalho Flops


[[include :scp-pt-br:component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]

Sideboxes


Adaptado de Penumbra Theme por EstrellaYoshteEstrellaYoshte.

Sideboxes são um componente embutido que vem em dois tipos:

  1. authorbox
  2. sidebox

Cada tipo tem suas próprias instruções de uso.

Nota: o authorbox não é exibido em telas de width=1079px e menores, o que inclui telas de dispositivos móveis. O sidebox é recolhido na borda da página em telas de width=1079px e menores, e nessas telas, pode ser acessado tocando com o dedo/passando o cursor sobre ele.

Por favor, considere estas condições antes de configurar esses itens — uma grande porcentagem de usuários da SCP Wiki navega através de dispositivos móveis.


1. Authorbox

(Ver canto superior esquerdo)

Por padrão, o authorbox é opt-out. Ele aparece em todas as páginas que usam Flopstyle. Se você deseja removê-lo, por favor substitua isto:

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

Por isso:

[[div style="display: none;"]]
[[include :scp-pt-br:theme:flopstyle]]
[[/div]]

Alternativa 1: Depois de remover o authorbox, você pode substituí-lo por uma versão personalizada que exibe qualquer informação que você desejar. Essa funcionalidade pode ser especialmente útil para páginas em coautoria, reescritas ou traduzidas. Para referência, este é o código que cria o authorbox:

[[div class="anchor"]] Define a posição de aderência do authorbox.
[[div class="authorbox"]]

[[module ListPages name="="]]
||~ %%title%% ||
||= **Autor:** %%created_by_linked%% ||
||~ Publicado em %%created_at|%d %b %Y%% ||
[[/module]]

|| Optional Flavour Text ||

[[/div]]
[[/div]] Define o limite final da âncora.

Por padrão, o authorbox faz uso de ListPages para automatizar os metadados exibidos. Você poderia, teoricamente, copiar a parte ListPages do authorbox para qualquer página Wiki, e esses campos serão preenchidos de uma maneira exclusiva para essa página. Você pode, é claro, alterar qualquer um desses campos conforme desejado.

Você também pode editar seu authorbox personalizado para exibir um texto de variação adaptado à sua página, como uma nota para os leitores.

Veja o lado esquerdo da página para um exemplo de authorbox.

Alternativa 2: Se desejar, você pode optar por exibir authorbox no lado direito da página. Se você quiser isso, cole isso em um módulo CSS em sua página:

.authorbox{
right: unset;
left: 103.5%;
}

Se você tem uma página que faz isso, eu recomendo contra inserir sideboxes nessa mesma página, ou ficará bastante confuso.


2. Sidebox


O sidebox é opt-in. Está configurado assim:

[[div class="limit"]] Define o limite inicial da âncora.
[[div class="anchor"]] Define a posição de aderência do sidebox.
[[div class="sidebox"]]
Desired sidebox text here.
[[/div]]
[[/div]]
Text that the sidebox associates with.
[[/div]] Define o limite final da âncora.

Eu recomendo inserir uma quebra de linha manual após o texto associado a sidebox. Você pode conseguir isso envolvendo um espaço com dois conjuntos de @@ (um de cada lado). O sidebox aparecerá ao lado deste texto à medida que você rolar.



Sem o div limit, o anchor permanecerá presente em todo o conteúdo da página assim que você rolar além de sua posição inicial.

Diversos Porções mutáveis


Se necessário, você pode editar qualquer uma dessas propriedades CSS para melhor se adequar à sua página. Esta lista não cobre todos os estilos que o Flopstyle oferece — mas é um bom lugar para começar.

Alterar propriedades da barra de informações

body{ /* -- Recolour according to Site Theme -- */
--barColour: bar_colour;
}
#u-author_block{
display: none;
}
.translation_block{
display: none;
}


Alterar a cor da legenda do título Lite

.lite-heading h3{ /* -- Recolour according to Site Theme -- */
color: lite_heading_colour;
}


Alterar a cor do bloco de cartão e da borda esquerda da caixa lateral

:root{
--accentColor: accent_colour;
}


Alterar logotipo de cabeçalho de aviso simples

(A imagem deve ser transparente)

.warning-notice{
background-image: url(URL_HERE);
background-size: 400px;
}


Alterar o logotipo do cabeçalho de aviso avançado

(A imagem deve ser transparente)

.council{
background-image: url(URL_HERE);
}


Alterar plano de fundo da navegação da série

.series-nav{
background: linear-gradient(to bottom right, hsla(0, 0%, 100%, 1), COLOUR_HERE);
}


Ocultar título da página

#page-title{
display: none;
}


Ocultar Notas de Rodapé do Rodapé

.footnotes-footer{
display: none;
}


Lista Pessoal de Tarefas dos Flops (Por Favor Ignore)


  1. Derrote as forças nefastas do Skeuomorfismo. [CONCLUÍDO]
  2. Atualizar o layout da página do tema. [CONCLUÍDO]
  3. Termine de vasculhar todos os meus artigos para que possa adicionar o CSS do Flopstyle.
    • “Caixa de Artigos Relacionados”. [CONCLUÍDO]
    • Caixa "Aviso de Perigo".
  4. Termine de atualizar todos os meus artigos com Flopstyle.

Código fonte

avaliação: +2+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; }
/* 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: 35px;
        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) {
 
    .mobile-top-bar, #top-bar .open-menu {
        display: block;
    }
 
    .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!important;
        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 {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        z-index: 10;
    }
 
    #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;
    }
 
    .close-menu {
        margin-left: 19.75em;
        opacity: 0;
    }
}

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