80 lines
1.6 KiB
SCSS
80 lines
1.6 KiB
SCSS
@use "../abstracts/variables" as *;
|
|
@use "../abstracts/mixins" as *;
|
|
|
|
// =============================================================
|
|
// Header
|
|
// =============================================================
|
|
|
|
.site-header {
|
|
border-bottom: 1px solid $color-border-light;
|
|
padding: $spacing-md 0;
|
|
margin-bottom: $spacing-xl;
|
|
}
|
|
|
|
.site-header__inner {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.site-header__logo {
|
|
margin: 0;
|
|
}
|
|
|
|
// Lien englobant le titre du blog — élément BEM dédié plutôt qu'un sélecteur descendant sur <a>
|
|
.site-header__logo-link {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.site-header__nav {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
// Nom d'utilisateur connecté dans le header
|
|
.site-header__user {
|
|
margin-right: $spacing-md;
|
|
}
|
|
|
|
// Élément d'action cliquable dans le header (lien ou bouton)
|
|
.site-header__action {
|
|
text-decoration: underline;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
color: $color-primary;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
margin-right: $spacing-md;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
@include mobile {
|
|
.site-header__inner {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.site-header__nav {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: $spacing-sm;
|
|
}
|
|
|
|
.site-header__action {
|
|
margin-right: 0;
|
|
}
|
|
|
|
// Supprimer les marges droites — remplacées par le gap de la nav
|
|
.site-header__user {
|
|
margin-right: 0;
|
|
}
|
|
}
|