Ungol/blog
1
0
Fork 0
Code Issues Projects Releases Packages 1 Activity Actions

feat: improve header for responsive design

Browse source
This commit is contained in:
Ungol 2025-12-23 22:27:52 +01:00
parent 5b81e2abc6
commit 8556f360dd
1 changed files with 48 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

61
sass/parts/_navbar.scss
View file

@ -19,16 +19,21 @@ header {
} }
nav { nav {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
max-width: var(--main-width); max-width: var(--main-width);
margin: 0 auto; margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
ul {
list-style: none;
padding: 0;
}
.home-title { .home-title {
flex: 3 auto; flex: 3 auto;
text-transform: uppercase;
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 100; font-weight: 100;
text-transform: uppercase; text-transform: uppercase;
@ -37,39 +42,47 @@ nav {
.nav-bar { .nav-bar {
flex: 1 auto; flex: 1 auto;
@include header_link(var(--text), var(--subtext0)); @include header_link(var(--subtext1), var(--subtext0));
font-size: 1.2rem;
ul { text-transform: lowercase;
padding: 0;
display: flex;
align-items: center;
list-style: none;
} }
.nav-links { .nav-links {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
font-size: 1.2rem;
text-transform: lowercase;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
li { li {
flex: 2 auto; flex: 2 auto;
text-align: center; text-align: center;
} }
}
.menu-icons-container { li.menu-icons-container {
flex: 1 auto; flex: 1 auto;
} }
.menu-icons-group { .menu-icons-group {
color: var(--text); display: flex;
justify-content: space-around; justify-content: space-between;
} }
} }
@media only screen and (max-width: 600px) {
nav {
max-width: 100%;
flex-direction: column;
align-items: normal;
margin: 0;
.nav-bar {
background-color: var(--mantle);
}
.home-title {
text-align: center;
}
} }
} }