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;
justify-content: space-between;
margin-bottom: 70px;
height: 60px;
&__Logo {
max-width: 300px;
width: 35%;
object-fit:contain;
}
.LP-Header__Logo{
height: 60px;
margin: 25px;
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__Navigation{
width: 100%;
}
}

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

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