putaindecode / putaindecode.io

Blog participatif de la communauté dev
https://putaindecode.io
MIT License
271 stars 112 forks source link

New post header (hero image) #415

Closed MoOx closed 9 years ago

MoOx commented 9 years ago

I tried a new header this morning & posted on gitter chan, but I gues most of you didn't see it

without image with image

Notes:

Any thoughts ?

kud commented 9 years ago

Really cool. It gives some "life" to the website.

magsout commented 9 years ago

like it, very good job

bloodyowl commented 9 years ago

maybe we should use a canvas & calculate the best text color for contrast at runtime by reducing the canvas to 1px & reading the dominant color?

MoOx commented 9 years ago

It might be a good enhancement indeed. But simple flags for now allow server side rendering. That said, we might handle that with a metalsmith plugin that read the image content.

MoOx commented 9 years ago

Version light avec gradient custom

screen shot 2015-05-15 at 22 41 54

header:
  light: true
  linearGradient: 160deg, rgb(250, 250, 250), rgba(214, 194, 162, 0.6)
  image: true
  credit: http://freebiesxpress.com/gallery/macbook-air-table-direct-stock-photo/

Ça vous parait correcte ?

j'hésite sur le light, p-e juste text: "light" ? Quoique non c'est pas mieux. Pour info les gradient sont préfixé -webkit aussi.

si .credit présent, on consider que image est ok

magsout commented 9 years ago

Ca rend plutot pas mal, peut-etre un peu plus grossir la partie auteur pour qu'elle soit un peu plus lisible.

MoOx commented 9 years ago

En regardant medium, je remarque qu'ils mettent ces infos dans le footer là où il y a la bio. On pourrait peut etre faire ça, et passer le temps en bulle sur le coté qui s'update au scroll ?

MoOx commented 9 years ago

What about something like that ?

screen shot 2015-05-16 at 20 54 27

MoOx commented 9 years ago

AND WHAT ABOUT A COMPLETE FUCKING CHANGE

screen shot 2015-05-16 at 20 58 07

magsout commented 9 years ago

Je préfère avec le Header rouge. Même si le fond en blanc rend pas mal.

Avec les infos auteurs et Time comme ca, c'est une bonne idée. Je laisserai limite que le titre avec l'image. Les Tags à la fin peut-être ou en dessous de la partie InfoAuteur.

MoOx commented 9 years ago

Je vais faire ça.

Plus je regarde le header blanc, plus j'aime. On pourra voir ça après coup.

magsout commented 9 years ago

Plus je regarde le header blanc, plus j'aime. On pourra voir ça après coup.

Je me disais pareil. Le blanc à un style classe, net.

Pour le rouge c'est peut-être aussi biaisé par les icônes SVG en noir qui rendent le tout un peu moins beau et terminé.

MoOx commented 9 years ago

Tu les verrais de quel couleur ?

magsout commented 9 years ago

Comme avant, comme les liens

MoOx commented 9 years ago

Ok, faut qu'on gère #374 d'abord :)

magsout commented 9 years ago

Yep mais je suis largué avec webpack :(

MoOx commented 9 years ago

C'est mon prochain post. Puis là de toute façon je pense que je vais le faire sans webpack. Ca fait overkill.

magsout commented 9 years ago

capture d ecran 2015-05-17 a 00 36 55

Ca le fait comme ça je trouve. Bien joué :+1:

Nyalab commented 9 years ago

:shipit:

lionelB commented 9 years ago

la classe :)