alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

💄 style: improve header's responsiveness

Browse Source 
Both title and navs take up 100% of the width on small displays.

Closes #48
This commit is contained in:
welpo 2023-04-14 16:12:38 +02:00
parent 0f14171b6a
commit 5df62f546c
No known key found for this signature in database
GPG Key ID: A2F978CF4EC1F5A6
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
sass/parts/_header.scss
View File

@ -8,7 +8,6 @@ header {
align-items: flex-start; align-items: flex-start;
gap: 12px; gap: 12px;
font-size: 1.5rem; font-size: 1.5rem;
/* Otherwise header and menu is too close on small screens*/
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
@ -108,12 +107,15 @@ header {
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.nav-title { .nav-navs {
margin: 0; margin-top: 0.8rem;
width: 100%;
justify-content: center;
} }
.navbar { .navbar {
max-width: var(--medium-layout-width); flex-direction: column;
align-items: center;
} }
} }