Files
slim-blog/assets/scss/pages/_home.scss
2026-03-16 01:47:07 +01:00

59 lines
1.6 KiB
SCSS

@use "../abstracts/variables" as *;
// =============================================================
// Page d'accueil — liste des articles
// =============================================================
// Les styles de structure des cartes sont dans components/_card.scss.
// Ce fichier surcharge uniquement les éléments spécifiques au contexte blog.
// Lien d'action "Lire la suite →" — élément BEM dédié plutôt qu'un sélecteur
// descendant sur <a>, pour respecter BEM et éviter les collisions de styles
.card__actions-link {
font-size: $font-size-sm;
color: $color-primary;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
// =============================================================
// Barre de filtre par catégorie
// =============================================================
// Conteneur de la liste de liens de filtre
.category-filter {
display: flex;
flex-wrap: wrap;
gap: $spacing-sm;
margin-bottom: $spacing-lg;
padding-bottom: $spacing-md;
border-bottom: 1px solid $color-border;
}
// Lien de filtre individuel
.category-filter__item {
padding: $spacing-xs $spacing-sm;
border-radius: $border-radius-sm;
font-size: $font-size-sm;
text-decoration: none;
color: $color-text-muted;
border: 1px solid $color-border;
transition:
color 0.15s,
border-color 0.15s;
&:hover {
color: $color-primary;
border-color: $color-primary;
}
}
// État actif — catégorie sélectionnée
.category-filter__item--active {
color: $color-primary;
border-color: $color-primary;
font-weight: bold;
}