— Sweet Nothings —

Bem-vindo(a), querido(a)~! As aparências são tudo, você se veste para impressionar e este é o primeiro passo.

Importante!

Usei vários arquivos de imagem para criar este modelo, todos hospedados no Imgur. AQUI há um arquivo zip com todos os que usei. Sinta-se à vontade para usá-los como quiser.

------------------------------------

COMO INSTALAR

1. Copie TUDO | (ESPELHO NO GOOGLE DOCS)

2. Cole na caixa Sobre Mim do seu JanitorAI.

3. Faça suas edições lá (consulte a folha de truques abaixo).

4. Salve, atualize e confira também no seu telefone.

REGRAS PARA NÃO QUEBRAR

1. Sem linhas em branco em lugar nenhum. Para um novo parágrafo digite <br><br>

2. Links de imagem devem ser diretos: https://i.imgur.com/abc123.png

Deixe uma imagem vazia assim se não a usar: src="" (imagens vazias se ocultam e suas molduras desabam)

3. Altere apenas palavras dentro de "aspas" ou entre > e <. Não exclua aspas, < >, { } ou qualquer coisa que diga class=

4. Nunca adicione comentários /* / ou os caracteres e ~ dentro da parte <style>: o JanitorAI corta a folha de estilos neles.

5. Mantenha abaixo de 70.000 caracteres (o modelo tem cerca de 57.900), ou o final do código será cortado. Adicione imagens apenas por link. O JanitorAI exclui qualquer url(...) do CSS, @import e imagem embutida (data:), então elas não podem ser usadas.

FOLHA DE TRUQUES: Encontre isto (Ctrl/Cmd + F) -> altere isto

SEU NOME

content:"Your Name" seu nome de exibição no topo da página.

O nome de usuário real do JanitorAI fica oculto, e este texto é exibido em vez dele, então digite o que quiser (mantenha as aspas). Ele é exibido em letras maiúsculas em Cinzel Decorative. Ele fica na regra que começa com .pp-uc-title::after Nomes longos devem quebrar para uma segunda linha, para nada ser cortado.

PALAVRAS DO PERFIL

content:"admirers" a palavra depois da contagem de seguidores

content:"Joined: mm.dd.yy" sua data de entrada. Digite sua data.

content:"Admire" / "Admired" o botão de seguir

content:"Darlings" a aba de bots

content:"Love Letters" a aba de scripts

content:"darlings" / "love letters" a palavra ao lado da contagem

PRONOMES

<div class="xb-pron"><span>pronouns</span><span>here</span></div>

Digite seus pronomes (ou qualquer coisa, na verdade) nos spans. Adicione ou exclua spans conforme necessário.

IMAGENS DE VOCÊ

(PNGs transparentes ficam melhores)

class="xb-sona" a imagem alta no cabeçalho, lado direito

class="xb-intro-img" a imagem alta ao lado da introdução. Ela nunca muda o tamanho da caixa: é cortada para caber e pode subir acima da caixa. Se a imagem do cabeçalho estiver vazia, sua imagem de perfil normal aparece em uma moldura redonda com um anel de pérolas. (As pérolas são a regra .pp-uc-avatar-container::before. Exclua-a para removê-las.)

FUNDOS

A página é construída em camadas, de trás para frente:

1. a cor rosa suave da página

2. sua imagem de página inteira (class="xb-bg"), com metade da força para que o rosa a tinte. Altere opacity:.5 na regra .xb-bg. Deixe src="" para nenhuma.

3. o papel de parede X/O (class="xb-wall"), um PNG transparente colocado por cima com 30% de força. Altere opacity:.3 na regra .xb-wall img. O papel de parede é uma imagem só, de 3456 x 1728 pixels (incluída como "X-O Wallpaper 3456x1728.png") e já está vinculada dentro. <div class="xb-wall"><img src="..."></div>. Troque esse link para usar o seu, ou exclua o div inteiro para removê-lo.

O PADRÃO DA FAIXA DE ESTRELAS

A faixa rosa de estrelas atrás da introdução é UMA imagem contínua, de 3840 x 4800 pixels (incluída como "Sweet Nothings - Star Pattern 3840x4800.png"), já vinculada dentro de <div class="xb-pat"><img src="..."></div>. Ela é exibida em seu tamanho real a partir do canto superior esquerdo, para as estrelas nunca esticarem. Para usar seu próprio padrão, substitua esse link. Faça o seu com 3840 x 4800 (uma imagem maior só será cortada, uma menor deixa espaço vazio em telas enormes) e mantenha o arquivo abaixo de 1 MB para o Imgur não recomprimi-lo. Não há padrão CSS de reserva, então se o link quebrar a faixa aparece em rosa puro. A faixa desvanece no papel de parede em suas bordas superior e inferior.

STATUS

Tocar no envelope escurece a página e uma carta aparece com sua mensagem. Tocar em qualquer lugar fora a fecha.

class="xb-status xb-online" altere xb-online para xb-away ou xb-offline

<b>Love Note</b> a palavra no envelope. A parte "- open" depois dela é automática.

<span class="xb-msg">...</span> a mensagem <i>...</i> a data (aparece "written" antes dela)

INTRODUÇÃO

class="xb-title" o título principal

class="xb-hl" a primeira linha destacada

<p>...</p> o texto da bio

class="xb-chips" pílulas de tags. Formas de X e O se alternam sozinhas.

Links: <a href="PASTE-LINK-HERE" class="xb-link">

<img src=""><span>Name</span><i>small line</i></a>

Três links já estão configurados (uma fileira de três colunas).

LAÇOS

Laço da caixa de introdução: <img class="xb-bow" src="..."> no topo do div xb-intro-text (seu tamanho está na regra .xb-intro-text .xb-bow)

Laço do envelope: <span class="xb-seal"><img src="..."></span> (seu tamanho é width:140px na regra .xb-seal)

Laços das séries: <img class="xb-bow" src="..."> dentro do <summary> de cada capa de série (seu tamanho está na regra .xb-sitem .xb-bow)

Exclua um <img class="xb-bow"> para remover um laço. Para uma nova capa de série, copie uma linha de capa inteira para que seu laço venha junto.

RECOLORENDO UM LAÇO: o CSS não pode editar as cores de uma imagem, mas pode

deslocá-las. Adicione um filtro à regra desse laço, por exemplo:

filter:hue-rotate(-70deg)

Para um laço rosa: -70deg lavanda, -115deg azul, +55deg laranja ou dourado, +150deg verde. Partes brancas permanecem brancas. Adicione saturate(1.3) ou brightness(1.1) depois para ajustar. Você não consegue atingir uma cor hex exata dessa forma (para isso, edite o PNG em si). Observe que um novo filtro substitui a sombra suave no laço, então repita-a: filter:hue-rotate(-70deg) drop-shadow(0 4px 4px #d9648b40)

A CAIXA DA BIO (X X X)

A caixa abre suavemente com um fade e deslize suaves. Para alterá-la, edite @keyframes xb-drop e a parte animation:xb-drop .7s da regra .xb-bio. Fechar é instantâneo. Exclua ambos para voltar a um snap simples.

SOBRE MIM

class="xb-photo xb-p1" e "xb-p2" dois retratos ovais (src="" para nenhum; se ambos estiverem vazios as caixas ocupam toda a largura)

class="xb-cap" o adesivo nas fotos <div class="xb-box"><b>Info</b><p> três caixas. O rótulo está em <b>, o texto está em <p>.

ROADMAP

(dentro da caixa Extra, sob seu texto)

Quatro pequenas caixas de projeto que você pode tocar para abrir. Cada uma:

<details class="xb-job xb-done"><summary><span>Title</span>

</summary><p>Details go here.</p></details>

A classe define sua aparência:

xb-job xb-done terminado: coração cheio, título riscado

xb-job xb-now em andamento: coração pulsante e uma borda rosa

xb-job planejado: coração em contorno

Copie uma linha para adicionar um projeto, exclua uma linha para remover um. Para remover todo o roadmap, exclua o bloco <div class="xb-road"> (de seu <div> inicial até o </div> correspondente). A palavra "Roadmap" sobre a lista vem da regra .xb-road::before.

VITRINE

(a prateleira de séries)

Cada série é um par combinando:

<details class="xb-sitem xb-s1" ...> a capa (imagem + nome)

<div class="xb-sinfo xb-i1"> a página que abre s1 corresponde a i1, s2 corresponde a i2, e assim por diante. Mantenha os números combinando. Na página: imagem de banner, título, descrição e o link (coloque sua tag de série onde diz YOURTAG). Cinco séries estão configuradas. Para menos, exclua ambas as partes de um par. A fileira de capas rola para o lado em todos os tamanhos de tela, então você pode adicionar mais de cinco: copie uma capa, dê a ela o próximo número (xb-s6, xb-i6), depois adicione xb-s6 e xb-i6 à regra longa no CSS que lista s1-s5 e i1-i5 (a que começa com .xb-series:has(.xb-s1[open])). O espaço sob as capas é sempre mantido aberto para a página não pular quando você escolhe uma série. Apenas a janela creme aparece e desaparece.

MODO GALERIA

(Se você não quer uma seção de séries)

1. Adicione a palavra xb-gallery à classe do bloco Showcase: <div class="xb-drawer xb-series xb-gallery" id="xb-series">

2. Exclua todo o bloco <div class="xb-sdisplay"> ... </div> (todas as páginas xb-sinfo) para não sobrar espaço vazio.

3. Coloque cada link de imagem no <img src=""> de uma capa e mantenha ou esvazie o nome. Um <b></b> vazio oculta a pequena fita.

As capas deixam de ser clicáveis e você pode adicionar quantas quiser copiando uma linha de capa. Altere o título do Showcase para algo como "Gallery".

MELHORES AMIGOS

<a href="PASTE-LINK-HERE" class="xb-pal"><img src="">

<span>Name</span></a>

OBSESSÕES

<a href="PASTE-LINK-HERE" class="xb-fav"><img src="">

<span>Bot Name</span></a>

Ambos são fileiras que rolam para o lado. Uma linha = um item. Copie uma

linha para adicionar, exclua para remover. Besties e Obsessions ficam

sob a aba Collection.

TÍTULOS DAS SEÇÕES

A fileira de x o x 'os sob cada título vem da regra

.xb-title::after (altere as palavras em content:"" ou exclua

a regra).

CARTÕES DE PERSONAGEM

Cada cartão de bot parece uma postagem do Instagram: coração + nome do bot + pontos no topo, uma imagem quadrada em uma moldura rosa e um rodapé com a contagem de chats, contagem de tokens e um script "xoxo". O cartão é construído apenas com as próprias peças de cartão do site, então os ícones de coração e balão de bate-papo são decoração. No computador, passe o mouse sobre um cartão e uma folha "Comments" desliza para cima com o resumo do bot, o @name do criador ao lado de um coração e as tags listadas embaixo. Telefones e tablets não têm hover, então um toque só abre o bot e a folha pode não aparecer.

ABAS, BUSCA E ORDENAÇÃO

As abas Darlings / Love Letters, a barra de busca, o botão de filtro e o menu de ordenação são redesenhados em creme e dourado para combinar com a página. Consulte PALAVRAS DO PERFIL para renomear as abas.

OS EXTRAS

PÉTALAS CAINDO

a linha que começa com <div class="xb-petals"> (X's, O's e corações que descem à deriva). Exclua-a para removê-los.

XOXO PULSANTE

um "xoxo" rosa no canto da caixa de introdução. É a regra .xb-intro-text::after: altere a palavra, tamanho ou cor, ou exclua a regra. As chips de tags deixam espaço para ele em telas largas e ficam acima dele em telefones.

ÁGUA

a água rosa suave ondulante e os brilhos na parte inferior do cartão de cabeçalho são as regras .xb-hdr::before (ondas) e .xb-hdr::after (brilhos). Exclua ambas para removê-los. O brilho suave do nome é a regra .pp-uc-title::before.

PET DA PÁGINA

um pequeno pet caminha pela parte inferior da tela acima de todo o resto, misturando aleatoriamente parado e andando, com um sutil squash and stretch. Ele se vira quando anda para a esquerda. Encontre <div class="xb-pet"> na parte inferior do HTML. Coloque sua primeira imagem (parado) no img xb-pet-idle e sua segunda imagem (andando) no img xb-pet-walk. Cada img fica dentro de seu próprio span, deixe os spans em paz. Exclua todo o div xb-pet para

remover o pet. Em telefones ele anda logo acima da barra de menu inferior do site. O percurso se repete a cada 80 segundos. Para alterá-lo, edite as porcentagens em @keyframes xb-petmove (os valores left:), mantendo sincronizadas as porcentagens correspondentes de xb-petidle, xb-petwalk e xb-petflip.

MOVIMENTO REDUZIDO

se um visitante tiver "reduzir movimento" ativado, as animações ficam paradas e a caminhada do pet fica oculta (eles veem a imagem parado em pé).

SEM VARIÁVEIS

O JanitorAI remove variáveis CSS (as linhas --algo

), então este modelo não usa nenhuma. As cores

são escritas em cada regra, então Encontrar & Substituir

funciona em todo lugar.

CORES

Cores principais (encontre e substitua para recolorir):

#fb9ebb rosa #f2799f rosa profundo (botões)

#fedcdb blush #ffe6ee rosa pálido

#f6c3d3 bordas suaves #5a3228 títulos (marrom escuro)

#43261f texto do corpo #86594c marrom suave (rótulos)

#fffafa branco pérola #d8b97c acabamento dourado

#d9648b rosa (molduras dos cartões)

CRÉDITOS

Sweet Nothings CSS por @Ru1nous

Livre para usar e editar como quiser! Crédito é apreciado, mas não obrigatório.

A pequena linha "SWEET NOTHINGS CSS by Ru1nous" na parte inferior da página pode ficar

ou sair, você decide.