Eaque

Eaque

image

Table des matières

Particularités

Eaque est un thème originale grâce à son background parsemé de bulles colorées, son alternance de couleurs de fond et ses arrondis. C’est un thème élégant et polyvalent qui s’adaptera à tous les types de contenus et qui mettra en valeur votre travail.

image

Paramètres globaux

  • Les titres et description de section sont centrés
  • Les images utilisées dans les widgets sont à bords arrondis (20px)
  • Succession des sections avec alternance des couleurs de fond (couleur primaire et secondaire). 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. Il est néanmoins possible de jouer avec les “compositions” de Minos pour changer localement cette logique.
  • Cercles transparents positionnés aux extrémités gauche et droite de l’interface (couleur tertiaire à 5%)
  • Boutons Bords arrondis + flèches à droite
    1. image
    2. Primaire : à bords arrondis + flèche à droite
    3. Secondaire : fond transparent + bords arrondis + flèche à droite
    4. Tertiaire : flèche à droite
  • Un calque d’une opacité de 50% assombrit le Héro
  • Les Heros avec images alignés à gauche ou à droite affichent celles-ci sur 50% de la largeur, format carré.
  • Les éléments actifs du menu sont en gras
  • Les icônes et pictos sont inchangeables
  • Ratio des images selon les blocs (à déterminer → en cours)
  • Le fond de page (body) utilise la couleur secondaire
  • Note developer

    widget pair: background-color: var(-—color_secondary)

    widget impair: background-color: var(--color_primary)

Application des variables couleurs inhérentes au thème

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

Primary color

Utilisée par défaut pour :

  • La couleur du fond de la navigation upper
  • La couleur des widgets impairs dans la page

Secondary color

Utilisée par défaut pour :

  • La couleur de fond de la page (body)
  • La couleur des widgets pairs dans la page
  • La couleur de fond de la navigation down (setup en transparent et elle prend la couleur du body “par défaut”)

Tertiary color

Utilisée par défaut pour :

  • la bordure des éléments du formulaire (input, select, …)
  • La bordure et l’arrière plan des radio button et des checkbox
  • La couleur des labels dans les formulaires
  • La couleur des flèches des select et pour signaler la présence d’une liste déroulante
  • La couleur des cercles aux extrémités de l’interface (opacité 5%)
  • la couleur du bouton langue (bordure et flèche seulement) dans les menus upper / down
  • dans le bloc profil, la couleur des icons

Dark color

Utilisée par défaut pour :

Light color

Utilisée par défaut pour le:

  • fond du sous-menu dans la barre de navigation down @Benoît Vrins
  • couleur du texte du menu off-canvas en mobile
  • dans le bloc profil, la couleur des icons au survol

Footer et Menu Off canvas

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

Il y a 3 variables de couleurs utilisées dans le footer et le menu off-canvas

  • La couleur sombre pour l’arrière-plan
  • La couleur light pour les icons, les titres et le texte des menus (et la barre de séparation des menus dans le menu off-canvas)
  • La couleur secondaire pour le survol des éléments

💡
Conseils
  • Succession des sections avec alternance des couleurs de fond (couleurs primary et secondary). 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. 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 primaire et secondaire (primary & secondary) sont claires afin de garder un contraste assez important pour avoir une bonne lisibilité des textes.
  • Pour une question de contraste, la couleur tertiare doit être plus foncée que les couleurs primaires et secondaires.

Typographies

Les polices installées 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.

  • Les Blockquotes prennent d’office la typographie tertiaire
  • 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:
    • 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

Déclinaisons

Déclinaison thème nourriture

image

Déclinaison ONG

image