Achille

Achille

Particularités

Achille est un thème originale de par sa pattern en forme de vague entre les blocs, l’alternance de couleurs de fond et ses bords arrondis. Avec son design original et joyeux, il offre une expérience unique aux visiteurs. Ce thème pensé autour du milieu aquatique peut également convenir à de nombreux sujets.

Paramètres globaux

  • Les titres H1 sont centrés. Les autres titres sont alignés à gauche
  • Note developer: Dans les blocs colonnes, news, events, Hero avec image centrée, dès lors qu’il y a une image et un titre, le titre se met par dessus l’image et la couleur du titre par défaut sera la couleur encapsulée derrière la couleur claire (couleur light) et ce, quel que soit le format du titre (h1, h2, h3, h4)

  • Les boutons ont un bord arrondis (10 px) et ont une icône flèche
image
  • Les images utilisées dans les widgets sont à bords arrondis (30px) et ont un masque gradient du clair vers le sombre
image
  • Succession des sections avec alternance des couleurs de fond (couleur tertaire et claire).
  • Un calque en forme de vague délimite les widgets et assure la succession des sections
  • Ratio des images selon les blocs (à déterminer → en cours)
image
  • Bouton primaire : à bords arrondis (20px) + flèche à droite + BG
  • Bouton secondaire : bords arrondis (20px) + flèche à droite + bordure uniquement (pas de couleur de fond)
    • Une couleur de texte ET de bordure identique à choisir
    • Une couleur de texte lors du survol à régler
    • Une couleur de fond lors du survol à fixer
  • Bouton tertiaire : flèche à droite + Font
    • Une couleur de texte à choisir
    • Une couleur de texte lors du survol à régler
  • Les Heros avec images alignés à gauche ou à droite affichent celles-ci sur 50% de la largeur à partir de la grille, bords arrondis (30px)
  • Les éléments actifs du menu sont en gras
  • Les icônes et pictos sont inchangeables
  • Le fond de page (body) utilise la couleur Light
  • Note developer

    widget pair: fond = couleur tertiaire

    widget impair: fond = couleur light

Application des variables de couleurs inhérentes au thèmes

💡
Par défaut non customizable à partir des réglages de Minos

Primary color

Utilisée par défaut pour la couleur:

  • L’arrière-plan du footer (cf. Footer customizable)
  • Les couleurs des éléments et d’arrière-plan du footer sont également customizables: pour plus de renseignements voir comment changer les couleurs du footer

  • La couleur de fond du menu upper (menu secondaire)
  • La couleur des flèches des select et pour signaler la présence d’une liste déroulante
  • Dans le bloc profil, la couleur des icons

Secondary color

Utilisée par défaut pour la couleur :

  • la bordure des éléments du formulaire lorsque sélectionnés / lorsque le focus est fait (input, select, …)
  • Dans le bloc profil, la couleur des icônes au survol

Tertiary color

Utilisée par défaut pour la couleur:

  • des widgets pairs dans la page
  • du background des sous-menus
  • La couleur globale de fond du menu off-canvas (contenant les menus primaire et secondaire)
  • La couleur tertiaire pour le survol des éléments de survol du footer

Dark color

Utilisée par défaut pour la couleur:

  • la bordure des éléments du formulaire (input, select, …)
  • La bordure et l’arrière plan des radio button et des checkbox
  • Dans le menu off-canvas, le trait de séparation entre les menus (CTAs, menu langue, menus principal et secondaire)

Light color

Utilisée par défaut pour la couleur:

  • des widgets impairs dans la page
  • de fond de la page (body)
  • La couleur de fond du menu down (menu primaire)
  • du texte (titre, menu et icon) du footer
  • les titres dès lors qu’ils sont dans une image

Footer

Il y a 3 variables de couleurs utilisées dans le footer

  • La couleur primaire pour l’arrière-plan
  • La couleur light pour les titres et les menus
  • La couleur tertiaire pour le survol des éléments

Les couleurs des éléments et d’arrière-plan du footer sont également customizables: pour plus de renseignements voir comment changer les couleurs des éléments du footer

💡
Conseils d’utilisation
  • La succession des sections utilise une alternance des couleurs de fond (couleur tertiary et light). Pour cette raison, il est conseillé que ces deux couleurs aient des teintes très proches l’une de l’autre pour envisager une alternance agréable visuellement (et respectant un niveau suffisant de contraste). Il est néanmoins possible de jouer avec les “compositions” de Minos pour changer localement cette logique.
  • Nous conseillons pour le texte et les titres d’utiliser une couleur sombre (Dark Color) si les couleurs réglées derrière les variables de couleurs tertiaire et claire (Tertiary color & Light color) sont claires afin de garder un contraste assez important pour avoir une bonne lisibilité des textes.
  • Pour une question de contraste, la couleur primaire doit être plus foncée que les couleurs secondaire et tertiaire.

Typographies

Pour les typographies, vous avez pour le moment à dispositions 12 polices qui sont toutes des “Google fonts”.

Les polices ne vous inspirent pas ? Nous pouvons en rajouter une pour vous. Nous vous conseillons des google fonts et il est toujours possible de trouver une typographie équivalente à celle de votre charte graphique.

  • Dans la barre de navigation du bas, le texte prendra toujours en compte le réglages de la police faits sous l’onglet navigation (cf. Attribution de la police et des couleurs aux différents éléments).
  • Dans la barre de navigation du haut, les réglages de navigation seront respectées à l’exception, pour plus de lisibilité et pour des questions de design propre au thème:
    • du caractère de la police: par défaut, le texte sera en majuscule
    • la taille de la police : par défaut est de 12px

💡
Conseils