header styels for small and medium screens, adapts sizes

This commit is contained in:
jorge-vitrubio 2021-07-07 14:47:20 +02:00
parent 07f2459f66
commit 015312942d
3 changed files with 18 additions and 7 deletions

File diff suppressed because one or more lines are too long

View File

@ -13,8 +13,14 @@
background-position: center;
}
.logo {
max-width: 10rem;
margin-top: -5rem; //half of .logo size
@include breakpoint(small){
max-width: 6rem;
margin-top: -3rem; //half of .logo size
}
@include breakpoint(medium){
max-width: 10rem;
margin-top: -5rem; //half of .logo size
}
}
&.arc-hive{
&::before {

View File

@ -6,13 +6,15 @@
@include breakpoint(small){
@include xy-cell(12);
@include flex-align(center, middle);
padding: $global-padding*2 $global-padding;
min-width: 14rem;
text-align: center;
}
@include breakpoint (medium) {
padding: $global-padding*2 $global-padding;
}
@include breakpoint(large){
@include xy-cell(shrink);
@include flex-align(left, middle);
// min-width: 14rem;
text-align: unset;
}
}
@ -32,8 +34,11 @@
padding: 0;
font-size: 0.8rem;
}
.menu a {
padding: $global-padding*0.7 $global-padding*0.5;
.menu {
justify-content: center;
a {
padding: $global-padding*0.7 $global-padding*0.5;
}
}
}
@include breakpoint(medium) {