fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made logo responsive

Browse Source
This commit is contained in:
Felix Hamann 2018-06-09 21:06:54 +02:00
parent 4642a32c39
commit 35042cf8e1
1 changed files with 36 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
templates/widgets/navbar.lucius
View File

@ -22,6 +22,7 @@
} }
.navbar__logo { .navbar__logo {
transition: all .2s ease;
&::before { &::before {
content: 'UniWorkY'; content: 'UniWorkY';
@ -32,6 +33,23 @@
} }
} }
@media (max-width: 768px) {
.navbar__logo {
transform: scale(0.7, 0.7);
transform-origin: left;
position: absolute;
}
}
@media (max-width: 500px) {
.navbar__logo {
left: 20px;
transform: scale(0.3, 0.3);
}
}
.navbar__list { .navbar__list {
align-self: flex-end; align-self: flex-end;
white-space: nowrap; white-space: nowrap;
@ -55,12 +73,12 @@
margin-left: auto; margin-left: auto;
} }
.navbar .navbar__link-wrapper { .navbar__link-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 80px; height: var(--header-height);
color: var(--color-lightwhite); color: var(--color-lightwhite);
transition: height .2s ease; transition: height .2s ease;
} }
@ -115,23 +133,32 @@
z-index: 100; z-index: 100;
.navbar__link-wrapper { .navbar__link-wrapper {
height: 50px; height: var(--header-height-collapsed);
} }
.breadcrumbs__container {
margin-bottom: 7px;
}
} }
.navbar--animated { .navbar--animated {
transition: all .2s ease; transition: all .2s ease;
} }
.navbar__pushdown { .navbar__pushdown {
/*display: none;*/
height: var(--header-height); height: var(--header-height);
transition: height .2s ease; transition: height .2s ease;
} }
.navbar--sticky + .navbar__pushdown { .navbar--sticky + .navbar__pushdown {
display: block; display: block;
height: var(--header-height-collapsed); height: var(--header-height-collapsed);
} }
@media (max-width: 768px) {
.navbar,
.navbar__pushdown {
height: var(--header-height-collapsed);
}
.navbar__link-wrapper {
height: var(--header-height-collapsed);
}
}