daniel/Personal_Website
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix header content jump on small displays

Browse Source
This commit is contained in:
Daniel_I_Am 2022-06-15 18:13:51 +02:00
parent 1505c5bd1d
commit d39679495f
1 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/sass/_header.scss
View File

@ -16,6 +16,7 @@ header {
.brand { .brand {
$brandSize: 64px; $brandSize: 64px;
$smallBrandSize: $brandSize/2;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -27,6 +28,10 @@ header {
.brand-logo { .brand-logo {
height: $brandSize; height: $brandSize;
width: auto; width: auto;
@media (max-width: $md) {
height: $smallBrandSize;
}
} }
.brand-name { .brand-name {
@ -35,6 +40,15 @@ header {
font-size: 28px; font-size: 28px;
margin-left: 2rem; margin-left: 2rem;
@media (max-width: $md) {
line-height: $smallBrandSize;
font-size: 20px;
}
@media (max-width: $sm) {
font-size: 16px;
}
} }
} }
@ -42,6 +56,7 @@ header {
.nav-items { .nav-items {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 0 auto;
list-style: none; list-style: none;