feat(home): a landing cabe numa tela, com trama no fundo e as cartas na mao - #29
Merged
Conversation
…na mao A home dizia tres coisas (o que e, como usar, como e o resultado) espalhadas por uma pagina que rolava, sem eixo comum: heroi alinhado a esquerda, cartas numa grade centrada, faixa de apoio com peso de bloco. Agora as tres cabem juntas na tela e dividem o mesmo eixo vertical, com o cabecalho e a faixa fechando a composicao em cima e embaixo pelo mesmo fio de 1px. O ajuste e por altura, nao por largura: tipografia e largura das cartas crescem em vh com teto em vw, entao a composicao encolhe junto em vez de estourar. O corte fica em 560px de altura — abaixo disso nao ha o que espremer e a home volta a rolar de proposito. O `overflow-y: clip` da landing e por eixo, e nao pelo atalho: o horizontal ja e cortado pela regra que existe para o pacote nao sair do centro no telefone, e o atalho a apagaria justo na home. O fundo e o Dither do React Bits, portado a mao em WebGL cru — a mesma decisao que o TiltCard tomou com o ReflectiveCard da mesma biblioteca, pelo mesmo motivo: o original roda sobre three + fiber + postprocessing, e ~600 KB de motor 3D para um quad de tela cheia nao passa no orcamento de cinco dependencias de runtime. Um pass so em vez de dois (pixelar antes de amostrar da o mesmo resultado que renderizar grande e reduzir depois), saida em alpha para o --bg do site continuar mandando no fundo, e a trama congela num quadro sob prefers-reduced-motion em vez de sumir. As cartas de exemplo ficam encostadas, como na mao; a apontada sobe e vem para a frente, e as outras duas se afastam. Quem sobe e a carta, nao o item — os tres rotulos ficam na mesma linha de base. O raio do canto passa a ser proporcional a carta (4.7cqw). Os 16px fixos foram desenhados para os 340px da pagina de perfil; na home a mesma carta aparece a 198 ou a 117, e ali 16px e quase 15% da largura — o canto comia a moldura impressa no PNG, que tem o proprio raio. cqw porque a medida certa e a largura da propria carta, e `%` em border-radius mede altura na vertical, o que numa carta 5:7 devolve um canto eliptico. Junto vai um bug que o autocomplete tinha desde sempre: `.search-form button` (0,1,1) alcancava as sugestoes, que tambem sao <button>, e ganhava de `.search-dropdown-item` (0,1,0) — a lista saia pintada de amarelo, com o padding do botao de envio. O :hover do item (0,2,0) voltava a vencer, entao a linha sob o cursor era a unica escura, e o sintoma parecia intencional. O seletor passa a ser por tipo, que e o que de fato separa os dois.
Preview: https://gitmon-cards-k1qz2094m-mcsscalabrin-8230s-projects.vercel.app
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A home dizia três coisas — o que é, como usar, como é o resultado — espalhadas por uma página que rolava, sem eixo comum: herói alinhado à esquerda, cartas numa grade centrada, faixa de apoio com peso de bloco. Agora as três cabem juntas na tela e dividem o mesmo eixo vertical, com o cabeçalho e a faixa fechando a composição em cima e embaixo pelo mesmo fio de 1px.
Cabe numa tela
Shellganhoulanding, e só a home passa. Acima de 560px de altura o shell trava em100dvhe o miolo centraliza no que sobra.O ajuste é por altura, não por largura: tipografia e largura das cartas crescem em
vhcom teto emvw, então a composição encolhe junto em vez de estourar. Abaixo de 560px de altura a home volta a rolar de propósito — lá não há o que espremer, e "sem scroll" é uma promessa sobre a composição, não sobre a régua.O
overflow-y: clipda landing é por eixo, e não pelo atalhooverflow: o horizontal já é cortado pela regra que #26 acabou de introduzir para o pacote não sair do centro no telefone, e o atalho a apagaria justamente na home.Medido em 1440×900, 1280×720, 1512×1080 e 390×844 —
scrollHeight === clientHeightnos quatro.Fundo dithered
components/ui/DitherBackground.tsx: oDitherdo React Bits portado à mão em WebGL cru. É a mesma decisão que oTiltCardjá tinha tomado com oReflectiveCardda mesma biblioteca, pelo mesmo motivo — o original roda sobrethree+@react-three/fiber+postprocessing, e ~600 KB de motor 3D para desenhar um quad de tela cheia não passa num projeto de cinco dependências de runtime. Nenhuma dependência nova.Ruído simplex somado em oitavas desenha as ondas, a imagem é quantizada em 4 níveis e uma matriz de Bayer 8×8 espalha o erro dessa quantização. Um pass só em vez dos dois do original: pixelar antes de amostrar dá o mesmo resultado que renderizar grande e reduzir depois. A saída é em alpha, não em RGB, então quem pinta o fundo continua sendo
--bg— se o componente não montar (WebGL indisponível, JS desligado), a home fica exatamente como era.Sob
prefers-reduced-motiona trama congela num quadro em vez de sumir: o que incomoda é a onda andando, não o desenho existir. Pausa também com a aba oculta.Cartas
4.7cqw). Os 16px fixos foram desenhados para os 340px da página de perfil; na home a mesma carta aparece a 198 ou a 117, e ali 16px é quase 15% da largura — o canto comia a moldura impressa no PNG, que tem o próprio raio.cqwporque a medida certa é a largura da própria carta:%emborder-radiusmede largura na horizontal e altura na vertical, o que numa carta 5:7 devolve um canto elíptico. Os 4.7% reproduzem exatamente os 16px na largura de origem.Um bug que veio junto
O dropdown do autocomplete pintava amarelo, e desde sempre.
.search-form button(0,1,1) alcançava as sugestões, que também são<button>, e ganhava de.search-dropdown-item(0,1,0) na cascata: a lista saía com o fundo e o padding do botão de envio. O:hoverdo item (0,2,0) voltava a vencer, então a linha sob o cursor era a única escura — o que fazia o sintoma parecer intencional. O seletor passa a serbutton[type="submit"], que é o que de fato separa os dois: um envia o formulário, os outros escolhem um nome.Testes
Um e2e novo trava o requisito, porque a regressão aqui é silenciosa por construção — um bloco cresce alguns pixels, a barra volta, e nada quebra.
Verde:
typecheck,lint, 161 unitários, e o e2e inteiro (22 casos,@statefulde fora). O/ não rola de ladoque veio no #26 agora cobre a landing nova.O que ficou de fora
No celular a faixa de apoio empilha em três linhas. Cabe na tela e está legível, mas fica um pouco solta — dá para apertar, se valer a pena.