Correções Gerais

[brenoalvs]

Hoje dei uma geral na home e no PR #64 , fiz algumas correções. No entanto ainda acho que faltam as seguintes correções:

• [ ] Modificação do header (Quebra de banners) - Estático e opaco
• Área de blogs
  • [x] #85 Breakpoints e posicionamento sidebar
  • [x] #85 Thumbnail blog
  • [x] Paginação
• [ ] Review classe de cores e backgrounds: Customizer
• [ ] Altura das seções flexíveis (alguém setou a altura manualmente pras seções, por isso algumas estão descentralizadas, e vão ter problemas quando entrar conteúdo real pelo usuário (ex.: skills)
• [ ] Padronização das media queries (o pessoal encheu o saco pra usar o Bootstrap e agora não estão fazendo a parada mobile-first, tem várias media queries sendo feitas com max-width xD)
• [x] Reformulação do banner (atualmente o usuário precisaria inserir um background, ícone e texto)
• [x] #78 Corrigir banner menu/banner quando se tem muitos itens.
• [x] #69 - Padronização das seções (algumas estão usando ids, outras estão com classes)
• [x] #78 Criar um container-large para as seções de blog e serviços. (Diferente do layout, atualmente essas áreas têm a mesma largura das outras)
• [x] #68 - Fazer uma marcação mais semântica. Na área de portfólio, por exemplo, poderia estar usando a marcação com <figure> e <figcaption>
• [x] #68 - Contact Form está deixando que o usuário redimensione o textarea deixando a possibilidade de o usuário quebrar aquela seção.
• [x] #69 - Em .skills-list não estilizar baseando-se em .dashicons, pois o font aewsome pode ser utilizado. Criar uma classe ou seletor genérico para remover a regra .dashicons do css.
• [x] #78 Blog está gerando barra horizontal em resoluções de smartphones (testei com 360x640)

Se lembrar de mais, ou alguém lembrar, adicionem aqui...

Edit by @nicholasio: Quem for fazendo edita a issue e coloca o PR ao lado

[nicholasio]

Eu setei a altura fixa em alguns lugares por causa da imagem da direita (ou esquerda) que está com max-height. A imagem vai cropando até desapecer hoje. Talvez seja melhor uma outra solução (colocar a imagem acima por exemplo)

Sobre as seções, os separadores estão com classes pra reutilizar, acho que o resto pode ficar com ID's.

[brenoalvs]

blz @nicholasio eu vi que foi a solução pro que está agora, só estou listando pra depois quando entrarem as imagens vindas do painel, com o crop certinho, refazermos isso.

Quanto as seção e separadores, a idéia é essa aí! Mas a seção de portfólio, por exemplo, foi um copy/paste da área de serviços (até o id) e depois foi criada uma outra section só para a galeria de imagens, quando na verdade deveria ser tudo uma coisa só. Isso não é reuso xD

Mas já dei uma geral, acho que era só isso mesmo.

[nicholasio]

Tranquilo @brenoalvs, não tinha visto essa questão do portfólio. Vamos trabalhar nisso então.

PS: Seu último item acho que ficou cortado, "marcação com e"?

[rodrigo-brito]

Vou trocar as tags do portfólio aqui, daqui a pouco envio as alterações.

[nicholasio]

Precisamos avançar aqui. No blog como faremos? Eu voto em deixar do jeito que está.. acho que fica melhor do que forçar o usuário a enviar uma imagem já com um texto. Pois de nada adianta o banner sem um texto/logomarca.

Eu posso fazer o terceiro ponto e o último. O quarto ponto precisamos repensar essas áreas, o que fazer com a imagem da lateral.

@brenoalvs você pode ajudar nesse ponto de mobile-first?

[brenoalvs]

Beleza! @nicholasio Quanto ao banner, é melhor deixarmos mesmo. A logo, que acho que era o problema, entra em várias outras partes do site também. O usuário já vai ter que upar de qualquer forma.

No entanto, temos que fazer de forma que o usuário suba uma logo só e nós a reusamos pelo site. E aí no painel do banner, podemos colocar a opção também de removê-la.

[nicholasio]

@brenoalvs acontece que no banner não está sendo usado a logo completa, agente poderia deixar as 2 opções e se o cara só enviar a logo, exibe a logo no banner.

[brenoalvs]

Huuum, agora que vi essa parada! Se for parar pra pensar, a frase "somos a horizon" teoricamente também faz parte dessa imagem (porque tá estilizada). Agora tô em dúvida de novo, rs

[nicholasio]

@DanielGCarvalho qual era a sua ideia com esse banner, o texto faz parte da imagem ou não? O usuário ao enviar o banner já enviaria a imagem com o texto?

[brenoalvs]

Acho que no momento a melhor opção seria enviar fundo + texto + logo. Mas aí entra o problema de ter que enviar várias logos, porque o site usa tipos diferentes da logo em cada parte.

[rodrigo-brito]

Outro bug brothers. O menu superior quando tem muitos itens está jogando a nav para baixo e empurrando o banner também, dando uma faixa vazia. Acho que é por causa do Banner que está com uma margem negativa fixa.

[nicholasio]

Vou olhar isso ae. Acho que dá pra substituir a margin negativa fixa por um position: absolute; top: 0;

@rodrigo-brito qual a resolução?

Eu acho que isso seria a melhor solução @brenoalvs, mas isso deixou toda essa complicação no banner, tudo porquê precisa desse texto + icone centralizado na vertical.

[rodrigo-brito]

Acho que vai preciar dar uma restruturada, se deixar ele em absolute vai atrapalhar as divs abaixo, vão ficar meio sem referência e vai sobrepor, acho melhor manter ele sem a margin e colocar a nav em absolute. Que não interfere no laoyout.

[nicholasio]

Pior que se fizer isso @rodrigo-brito a navbar fica em baixo da admin bar do WP quando o usuário tiver logado, acho que foi por isso que eu tinha feito com margin negativo. Eu ajeitei o problema com position: absolute na navbar, mas temos esse porém.

[nicholasio]

@brenoalvs não entendi essa questão do container-large, agora que fui verificar no layout.. você tá querendo dizer que a área de blog e serviços no layout estão mais largos que as outras seções? e na nossa implementação isso não acontece?

[brenoalvs]

Isso mesmo @nicholasio

[nicholasio]

@brenoalvs Olhando no layout eles tem a mesma largura que as outras, acontece que nas outras o texto está centralizado. Será que não foi isso que deu essa impressão pra vc?

Ou então na sua resolução está dando isso, manda um print se puder.

[DanielGCarvalho]

@nicholasio a ideia inicial seria uma função próxima do plugin layer slider ou outro similar.

[brenoalvs]

@nicholasio, você tinha escrito certo, rsrs No layout (psd) eles estão mais largos. No HTML não, precisamos fazer ainda!

[leobaiano]

Galera, li tudo e não consegui entender direito como vamos fazer com aquela imagem do topo. Estou trabalhando agora no customize e em dúvida se removo a setting nativa imagem de topo para criar uma section nova onde o usuário definiria a imagem de fundo, a marca e o texto ou se deixo a imagem de topo nativa pro cara fazer upload de uma imagem que jã venha com a marca e o texto.

Na verdade pela discussão parece que ficou definido que os elementos seriam separados, mas como não acompanhei ativamente prefiro perguntar. Alguém pode confirmar ai como ficou isso?

[nicholasio]

Eu acredito que tenha ficado definido enviar a imagem de fundo + texto + pequena logo (essa logo pode ser opcional). Talvez possamos usar o Custom Header para o background e adicionar as opções para esse texto e para a logo.

[brenoalvs]

O custom header não tem opção de texto também? Eu lembro que no twentytwelve, tinha imagem de header e texto!

[leobaiano]

Por padrão não vem o texto não, mas é de boa adicionar. Mas se ligue, se for para separar o texto é bom separar a logo também, porque se deixar a logo fixa vai tirar a liberdade do cara de posicionar ela onde quiser no banner por conta do texto que teria posição estática.

[brenoalvs]

Repito, essa logo tá atrapalhando, uhsahusuhaush O @DanielGCarvalho podia nos dar uma sugestão!

[leobaiano]

Por mim coloca só a imagem, o cara que se vire pra colocar texto, logo e o que mais ele quiser num JPG e pronto :)

[rodrigo-brito]

Acho que pelo menos o texto podia ser mantido, isso já ajuda a manter a identidade do tema, senão rola uns comic sans e é só tristeza.

[leobaiano]

Se a gente mativer só o texto corre o risco do usuário colocar a marca por cima do texto por exemplo, mas já perdemos muito tempo com isso é hora de alguém bater o martelo.

[nicholasio]

Deixa do jeito que está. No custom header colocar o fundo + texto e na seção de logomarca coloca as duas logomarcas, sendo que a segunda logomarca (a que aparece no banner) é opcional, se não setar não mostrar.

Essa é minha sugestão.

[leobaiano]

Pronto, voto na solução do @nicholasio.

[rodrigo-brito]

Por mim pode ser também!

[brenoalvs]

Show, fechado!

[rodrigo-brito]

Pendencias do front-end:

• Modificação do header (Quebra de banners) - Estático e opaco
• Área de blogs
  • Breakpoints e posicionamento sidebar
  • Thumbnail blog
  • Paginação

[rodrigo-brito]

• Review classe de cores e backgrounds: Customizer

[rodrigo-brito]

Sobre a altura flexível da sessão de skils, acho que podia mudar apenas aquele esquema de colunas, deixar solto para ficar fácil iterar no back. Os traços ficam fixos ao fim da sessão e gera uma margim fixa para separar os itens.

Já os textos podem dar uma leve quebra no layout, no caso a melhor maneira seria bloquear no back? Alguma outra ideia?

[mikejavier]

Aproveitando que a galera esta fazendo a limpa nas issues, dei uma olhada rapida no front do tema e observei umas coisas:

• tem alguns detalhes que aindam quebram em certas resoluçoes e outras ficam desalinhadas.
• Além do grid e dropdown, pouquissima coisa ta se usando do bootstrap
• Atualmente esta se importatando todo o modulo de grid, consequentemente estão se cirando todas as classes de coluna ( col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, ....... ,.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 ) e no tema acredito ter visto no maximo 4 a 6 clasess ( col-4,col-6,col-8 e col-12 ). Tem uma maneira mais semantica de se usar o grid do bootstrap, que esta na propria documentação, que é usando os mesmos mixins do bootstrap para criar as colunas nescesarias. Por exemplo, em vez de usar <main id="main-content" class="site-main col-md-8 col-md-push-4" role="main"> podia ser feito assim <main id="main-content" class="site-main" role="main"> e no css colocar .site-main{ @include make-md-column(8); } além de melhorar a semantica do html, nao se cria classes desnesesarias no css.
• Tem muita classe sobre escrevendo outra e muito uso de !important

[valeriosouza]

@mikejavier seria legal ter uma issue pra cada coisa. Fica muito confuso várias coisas em uma issue.

[nicholasio]

@mikejavier manda um PR para fazer essa questão do HTML semântico definindo as colunas no próprio CSS. Acho que o ponto dois já foi superado e estamos dando import somente no necessário.

[brenoalvs]

@mikejavier, se for pegar pra fazer isso, aproveita e já dá uma atenção no ponto do mobile-first que é um ponto que tinha pego pra fazer, mas preferi deixar pra dar um geral no final.