Étape 5 : Styles CSS Premium et Touches Finales

Pour parfaire l’apparence des articles, nous ajoutons des styles CSS personnalisés pour les titres, les listes, les citations et les blocs de code.

1. CSS des Titres et Listes

Ajoutez ces styles à votre fichier resources/css/app.css pour obtenir l’effet GitHub modern.

/* Titres avec préfixe # en couleur primaire */
.prose h2,
.prose h3 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.prose h2::before,
.prose h3::before {
    content: '#';
    color: var(--primary);
    font-weight: 800;
    opacity: 0.8;
}

/* Listes à puces minimalistes */
.prose ul {
    list-style-type: none !important;
    padding-left: 1.5rem !important;
}

.prose ul li::before {
    content: '';
    position: absolute;
    left: -1.25rem;
    top: 0.65rem;
    width: 0.4rem;
    height: 0.4rem;
    background-color: var(--border);
    border-radius: 50%;
}

/* Citations épurées */
.prose blockquote {
    border-left: 4px solid var(--primary) !important;
    background-color: var(--muted) !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
}

2. Style des Blocs de Code

Pour que vos extraits de code soient lisibles et esthétiques.

.code-block-wrapper {
    background-color: #0d1117; /* GitHub Dark match */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    margin: 2rem 0;
    overflow: hidden;
}

.code-block-header {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.code-lang {
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
}

3. Optimisation Typographique

Ajustez les marges et l’espacement pour une meilleure expérience de lecture.

.prose p {
    line-height: 1.8 !important;
    margin-bottom: 1.5rem !important;
}

.prose strong {
    font-weight: 800 !important;
}

Conclusion

En suivant ces 5 étapes, vous avez maintenant un système d’articles performant, hautement personnalisable et visuellement premium, digne des plus grands blogs techniques.