Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Optimized header for small viewports

Browse Source
This commit is contained in:
reverend 2020-08-02 23:02:25 +02:00
parent e2addb919f
commit 96882aef12
2 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/03_Organisms/header/_header.scss
View File

@ -3,14 +3,37 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 70px; margin-bottom: 70px;
height: 60px;
&__Logo { &__Logo {
max-width: 300px; height: 60px;
width: 35%; margin: 25px;
object-fit:contain; object-fit:cover;
max-height: 100%;
overflow: hidden;
.LP-Image{
height: 60px;
}
}
}
@media(max-width: $-viewport-medium){
.LP-Header__Logo{
width: 60px;
.LP-Image{
object-position: 0 0;
object-fit: cover;
}
}
}
@media(max-width: $-viewport-extra-small){
.LP-Header__Logo{
display: none;
} }
.LP-Header__Logo{ .LP-Header__Navigation{
margin: 25px; width: 100%;
} }
} }

2
components/03_Organisms/header/header.hbs
View File

@ -1,6 +1,6 @@
<header class="LP-Header"> <header class="LP-Header">
<div class="LP-Header__Logo"> <div class="LP-Header__Logo">
{{render '@logo'}} {{> @image source='/images/logo.png'}}
</div> </div>
<div class="LP-Header__Navigation"> <div class="LP-Header__Navigation">
{{> @navigation}} {{> @navigation}}