63 lines
905 B
SCSS
63 lines
905 B
SCSS
.global-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: center;
|
|
align-items: center;
|
|
margin: 0 auto $gutter;
|
|
width: 83%;
|
|
|
|
> * { flex: 0 0 auto; }
|
|
|
|
.social-menu {
|
|
order: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
.search-form {
|
|
order: 2;
|
|
width: 100%;
|
|
}
|
|
|
|
.logo-banner {
|
|
order: 3;
|
|
width: 100%;
|
|
}
|
|
|
|
.header-menu {
|
|
order: 4;
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (min-width: #{$screen-tablet}) {
|
|
.global-head {
|
|
width: $container-tablet;
|
|
|
|
.social-menu,
|
|
.search-form {
|
|
flex: 1 1 auto;
|
|
width: auto;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: #{$screen-tablet-lg}) {
|
|
.global-head {
|
|
width: $container-tablet-lg;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: #{$screen-desktop}) {
|
|
.global-head {
|
|
width: $container-desktop;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: #{$screen-desktop-lg}) {
|
|
.global-head {
|
|
width: $container-desktop-lg;
|
|
}
|
|
}
|