search

darcosion / Echosounder

petit programme marrant
MIT License
14 stars 1 forks source link

Design & couleur #3

Open darcosion opened 2 years ago

darcosion commented 2 years ago

edit : liste des images d'exemple pour se simplifier la vie :

darcosion commented 2 years ago

Après une heure de scroll, j'ai retrouvé l'image de base : palette_echosounder ref : https://www.pushing-pixels.org/wp-content/uploads/2017/09/batman-arkham-knight2@2x.jpg

Il reste plus qu'à en extraire des couleurs de wigdet, background, effects & bordures :)

darcosion commented 2 years ago

En fouillant le CSS, je suis tombé sur ça qu'on a codé : 

:root {
    --background-color-black: #010b0d;
    --background-gradiance1 : #050c12;
    --background-gradiance2 : #0d1718;
    --widget-blue1 : #3e908e;
    --widget-blue2 : #2b6b6a;
    --widget-blue3 : #4b948c;
    --widget-red1 : #5c202a;
    --widget-red2 : #371921;
    --text1 : #a5b0a9;
    --text2 : #abd6db;
  };

A priori, on a construit une palette de base, mais elle va devoir être amélioré. edit : je viens de m'en servir, elle est loin d'être bonne, on doit l'améliorer absolument, voir revoir complètement son ensemble de couleur. Je suis même pas certains qu'elle correspond à l'attendu.

darcosion commented 2 years ago

L'interview d'où viens l'image de batman arkham asylum : https://www.pushing-pixels.org/2017/09/05/looking-beyond-the-edge-interview-with-khairul-keko-ahmed.html

darcosion commented 2 years ago

3 nuances de gris ajoutés dans cette issue : 3bc03c5eb8c618e510141a1842d5a460e6f8bbfc

darcosion commented 2 years ago

Il y a beaucoup d'effets de style sur ce site dont on pourrais s'inspirer btw : https://portal.thenifty.com/

darcosion commented 2 years ago

Avec un peu de recherche, j'ai finit pas trouver un graphiste qui a travaillé de fou sur arkham, il a laissé sur son site des travaux d'exemple : https://www.nomadsolitude.com/#/batman-arkham-knight-screen-graphics/ absolument magnifique

darcosion commented 2 years ago

Cette couleur a été ajouté à la palette pour le texte en tout petit : 

  --micro-text : #11998e; /* var(--micro-text) */
darcosion commented 2 years ago

J'ai finalement trouvé comment intégrer des couleurs CSS en variable avec de l'opacité : 

--rgb-background-color-black: 1, 11, 13,; /* var(--rgb-background-color-black) */
background-color: rgba(var(--rgb-background-color-black), 0.8);

Voir 8198c9fd21ccd75f30ce31b9b21e9af65c5ef643

darcosion commented 2 years ago

J'ai trouvé comment charger dynamiquement les variables CSS, c'est assez sale par contre : 9ac7eedb182d2289d10b5e01c45c1db4111c58df

Dans l'idée, il faut un chargement de contexte direct dans le scope : https://github.com/darcosion/Echosounder/blob/9ac7eedb182d2289d10b5e01c45c1db4111c58df/static/main.js#L463-L465 C'est pas très propre, mais j'ai pas mieux.

Ensuite, un appel de la sorte : https://github.com/darcosion/Echosounder/blob/9ac7eedb182d2289d10b5e01c45c1db4111c58df/static/main.js#L1075