Olá dev!

Hoje veremos...

No post de hoje, vamos falar o que fiz de novo na nossa página! A dois posts atrás eu pedi a opinião de vocês a respeito da paleta de cores, além de explicar a funcionalidade de variáveis no CSS. Por conta disso, alterar a paleta de cores fica relativamente fácil. Então, aproveitei a deixa para resolver o light mode, que não estava me agradando muito. Então utilizei tons de azul mais claro e corrigi alguns bugs de cores que estava acontecendo.

Eu gostei tanto do resultado que queria saber se por padrão, deixo a cor do site no light ou no dark mode. Se puderem opinar o que acharam e como preferem, ajudaria muito.

Aproveitei também...

Pra dar um tcham a mais no site eu coloquei a minha logo na lateral do site - porém, somente para telas grandes. No mobile iria ficar feio, visto que existe o menu mobile. Então fiz uma condicional para só mostrar a logo nas telas grandes. Uma dica que dou pra vocês é priorizar os ícones com a extensão svg. A definição de SVG é:

SVG é a abreviatura de Scalable Vector Graphics que pode ser traduzido como gráficos vetoriais escalonáveis. Trata-se de uma linguagem XML para descrever de forma vetorial desenhos e gráficos bidimensionais, quer de forma estática, quer dinâmica ou animada.

A vantagem do SVG é que por ele ser composto por vetores, ele não se distorce para diminuição ou aumento do item. Dessa forma a qualidade do seu item fica sempre perfeita! Aumentando a qualidade do site de vocês =)

Para fazer isso...

Mas Luca, como consigo esse tal desse SVG?

Então, tem algumas formas. Se um dia contratarem um designer profissional e pagarem pra ele fazer uma logo para sua marca, basta especificar que quer a sua logo em SVG. Caso contrário, existe uma forma de "burlar" uma imagem e transformar ela em SVG - que foi o meu caso. Então eu peguei minha logo que está como png e jpg e coloquei em um site que converte imagens em SVG. Não sei exatamente como esse site fez isso, para te ser sincero, mas funcionou bem. Meu arquivo estava em formato SVG, todo vetorizado. Dai foi só importar ele para a minha menu bar e colocar ele aonde eu queria.

Achei que deu um charme especial rs.

Site que converte imagens para SVG: SVG conversor

Então é isso...

Por hoje vai ser isso devs! Espero que tenham curtido a alteração e que tenham aprendido um pouco sobre SVG's. Peço que opinem sobre o como ficou, qual tema deveria ficar como padrão - o light ou o dark mode - e alguma dica para o que devo fazer no próximo post da série básico ao avançado. Acredito que ensinarei sobre React.JS, mas queria ideia de aplicações para fazermos.

Forte abraço galera!