Aller au contenu principal

Style et mise en page

Un site DocStatic est une application React à page unique. Vous pouvez le styliser de la même manière que les applications React.

Styles globaux​

DocStatic utilise le thème @docusaurus/preset-classic avec des surcharges CSS dans le fichier /src/css/custom.css. Toute CSS que vous écrivez dans ce fichier est disponible globalement et peut être référencée directement à l'aide de chaînes de caractères.

Styliser votre site avec Infima​

DocStatic utilise Infima comme cadre de style sous-jacent. Infima fournit une mise en page flexible et des composants d'interface utilisateur communs adaptés aux sites web centrés sur le contenu (blogs, documentation, pages d'atterrissage). Pour plus de détails, consultez le site web Infima.

Infima utilise sept nuances de chaque couleur. Nous vous recommandons d'utiliser ColorBox pour trouver les différentes nuances de couleurs pour la couleur primaire que vous avez choisie. Vous pouvez utiliser l'outil de la Page d'exemple pour générer les différentes nuances pour votre site web et copier les variables dans /src/css/custom.css.

Mode sombre​

En mode clair, l'élément <html> a un attribut data-theme="light" ; en mode sombre, il est data-theme="dark". Par conséquent, vous pouvez adapter votre CSS au mode sombre uniquement en ciblant l'élément html avec un attribut spécifique.

/* Surcharge des variables racines d'Infima */
[data-theme='dark'] {
  --ifm-color-primary : #4e89e8 ;
}
/* Styliser une classe spécialement en mode sombre */
[data-theme='dark'] .purple-text {
  color : plum ;
}

Vue mobile​

Docstatic utilise 996px comme limite entre la largeur de l'écran mobile et celle de l'écran de bureau. Si vous voulez que votre mise en page soit différente dans l'affichage mobile, vous pouvez utiliser des requêtes de média.

.banner {
  padding : 4rem ;
}
/** Dans la vue mobile, réduire le padding */
@media screen and (max-width : 996px) {
  .heroBanner {
    padding : 2rem ;
  }
}

Pour plus d'informations, voir Style et mise en page dans la documentation de Docusaurus.