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 vous stylisez les applications React.

Styles globaux​

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

Styliser votre site avec Infima​

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

Infima utilise sept nuances de chaque couleur. Nous vous recommandons d'utiliser ColorBox pour trouver les différentes nuances de couleurs correspondant à la couleur principale que vous avez choisie. Vous pouvez utiliser l'outil sur 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> possède un attribut data-theme="light" ; en mode sombre, il possède un attribut data-theme="dark". Vous pouvez donc limiter votre CSS au mode sombre uniquement en ciblant html avec un attribut spécifique.

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

Affichage mobile​

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

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

Pour plus d'informations, consultez la section Styling and Layout dans la documentation Docusaurus.