Design général de l'app

MathieuFV commented 2 weeks ago

https://www.fontshare.com/

MathieuFV commented 2 weeks ago

https://mobbin.com/browse/ios/apps

MathieuFV commented 2 weeks ago

OK ce matin j'ai fait quelques changements sur une branche spécifique "custom_styles" :

1° J'ai ajouté une fonte personnalisé Satoshi trouvée sur fontshare, on verra à l'usage si ça nous plaît 2° J'ai ajusté le tag meta dans le layout pour ajouter viewport-fit=cover afin qu'on ait une mise à l'échelle automatique du viewport en fonction des tailles d'écran 3° J'ai enlevé du layout général la navbar du wagon qui n'a pas vraiment d'utilité je pense, je pense même à complètement enlever le fichier de la navbar pour le remplacer par une partial _tab_bar qui nous servira de navigation une fois qu'on sera dans les vues d'un voyage (comme sur l'excalidraw). 4° J'ai ajouté un fichier CSS "_layout" qui permet d'appliquer au body, au header et au footer les marges automatiques obtenues à l'aide de la variable "safe areas", il faudra qu'on vérifie le comportement...

Il y a plein d'inspirations ici : https://itnext.io/make-your-pwas-look-handsome-on-ios-fd8fdfcd5777

MathieuFV commented 2 weeks ago

Je viens de setup une autre police "Gambetta" (on pourra changer si on trouve ça moche) pour les headers.

Globalement on a donc une police pour les headers et une autre pour le body. Chaque police a différents styles et weights qui permettent d'ajuster le style selon le contexte. Voici un exemple d'usage des polices :

body {
  font-family: $body-font;
  font-weight: 400; // Regular
}

h1 {
  font-family: $headers-font;
  font-weight: 700; // Bold
}

em {
  font-family: $body-font;
  font-style: italic;
  font-weight: 300; // Light Italic
}

On fait appel aux variable $body-font et $headers-font pour avoir la bonne police, ensuite on peut customiser avec le font weight (entre 300 et 900 je crois) et le font-style : italic ou normal

MathieuFV / gathergo

Design général de l'app #19