gestiojeux/website/scss/header.scss

106 lines
2 KiB
SCSS
Raw Normal View History

header {
display: flex;
align-content: stretch;
background-color: $header_bg_color;
color: $header_text_color;
padding: 0 30px;
gap: 20px;
border-bottom: 4px solid $header_border_color;
@media (max-width: 800px) {
padding: 0 10px;
flex-direction: column;
gap: 0;
}
@media (max-width: 500px) {
padding: 0;
}
h1 {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 5px 20px;
color: $header_text_color;
font-size: 1em;
@media (max-width: 700px) {
font-size: 1.25em;
}
}
#mobile_nav_trigger {
display: none;
text-align: center;
border-top: 4px solid $header_border_color;
padding: 5px 10px;
}
nav {
display: flex;
justify-content: space-between;
flex: 1 1 auto;
@media (max-width: 500px) {
flex-direction: column;
}
div {
display: flex;
@media (max-width: 500px) {
flex-direction: column;
}
}
}
.links {
display: flex;
flex: 1 0 auto;
}
a {
display: flex;
padding: 10px 20px;
}
a, #mobile_nav_trigger {
align-items: center;
margin: 0;
border-radius: 0;
color: $header_text_color;
text-decoration: none;
&:hover {
background-color: darken($header_bg_color, 10%);
color: $page_link_color;
}
&.current {
background-color: $header_border_color;
}
&:focus {
background-color: darken($header_bg_color, 10%);
box-shadow: none;
color: $page_link_color;
}
}
#account {
flex-direction: row;
justify-content: end;
a {
padding: 10px;
}
.username {
font-size: 0.7em;
}
}
}