janis/dertyp7.github.io
1
0
Fork 0
mirror of https://github.com/DerTyp7/dertyp7.github.io.git synced 2025-11-01 22:22:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

implement responsive header

Browse Source
This commit is contained in:
DerTyp7
2023-10-10 16:20:58 +02:00
parent 0a3c1e46a3
commit c0b8e19ef0
2 changed files with 66 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/styles/Header.scss
View File

@@ -39,4 +39,57 @@
align-items: center;
flex: 0.5;
}
.header-mobile {
display: none; // will be set to flex on mobile/small screens
justify-content: space-between;
flex: 1;
width: 100%;
flex-direction: row;
.logo {
display: flex;
}
.control {
display: flex;
justify-content: flex-end;
gap: 1rem;
}
}
@media (max-width: 768px) {
flex-direction: column;
gap: 1rem;
.logo {
display: none;
}
.control {
display: none;
}
.header-mobile {
display: flex;
}
}
@media (max-width: 300px) {
.header-mobile {
flex-direction: column;
.logo {
justify-content: center;
}
.control {
justify-content: center;
}
}
.links {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
}
}