Responsive update

[afonsopacifer]

Mini roadmap

• [x] Criar grid a22d300
• [x] Atualizar header: grid + responsividade a020109
• [x] Atualizar footer: grid + responsividade 7db86b8
• [x] Atualizar destaque: grid + responsividade ab53439

---

1 - Não deem merge nesse PR por enquanto. (eu pretendo ir alimentando ele com as alterações de layout que descreverei no item 3)

2 - Aproveitei o sass e criei um grid semântico:

Alguns motivos por eu ter feito isso:

• Utilizar um grid facilita a manutenção e criação de layouts.
• É baseado em flexbox, o que nos da vários poderes para layoutar, como vertical align nativo ;)
• Assim que eu tiver um tempinho vou documentar o grid para ficar fácil a manutenção.
• Mantém a lógica dos breakpoints no estilo, assim não dependemos de breakpoints fixos, como tablets e smartphone. Assim nós poderemos criar os breakpoints em resoluções diferentes para cada componente, logo podemos parar de pensar em tablets ou outras coisas, e focar em simplesmente ficar bom :)

OBS: O grid utiliza 12 colunas

3 - Como exemplo atualizei o estilo do header com o grid, aproveitei e deixei responsivo:

Vocês podem ver as modificações na branch responsive-update, mas seguem algumas imagens para vocês verem logo :D

OBS: Se todos estiverem de acordo, eu pretendo ir atualizando esse pull request com os commits de atualização do footer, e o main do index. Assim estaremos de volta ao ponto antes de eu adicionar o grid, porém com o que tinhamos pronto responsivo e o terreno pronto para estilizar o main das outras páginas (que será o meu próximo passo), ai damos merge.

OBS: O footer e o main do index estão quebrados pq ainda não atualizei como fiz com o header, com os próximos commits que citei acima, irei arrumar tuso e deixar responsivo.

OU

Se acharem que vai rolar algum conflito deixando esse PR aberto aqui, e acharem melhor dar merge, pode ser tbm, ai eu mando outros PRs com os próximos passos :)

OBS: O header e o grid ainda precisam ser refatorados, tem muita coisa para arrumar, e melhorar, eu só preciso saber se vocês concordam com o que eu estou fazendo para eu continuar :D

@riojs-org/team-blog

[raphamorim]

Boas alterações @afonsopacifer!

Estou de acordo. Pode continuar desenvolvendo. Qualquer conflito que surgir a gente resolve. Vai ser tranquilo.

[orafaelfragoso]

+1

[afonsopacifer]

O footer mobile ficou assim:

[afonsopacifer]

O destaque ficou assim: (Nesse caso eu só arrumei o posicionamento dos botões)

Antes: Depois:

[raphamorim]

Senhor @afonsopacifer, meteu bronca.

[raphamorim]

:) :octocat:

[raphamorim]

Deixa para outro PR:

• Atualizar o conteúdo da home: grid + responsividade
• Refatorar tudo: melhorar a mantenabilidade, semantica e adequar ao guia de estilos (Spoiler Alert), que fica pronto amanha :)

Pois o PR está ficando gigante e estes pts já feitos já podiam ser mergeados.

[afonsopacifer]

@raphamorim perfeito :ok_hand: vou aproveitar para arrumar coisas como arquitetura e modularização do css.

[raphamorim]

Awesome :)