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

83
sass/parts/_navbar.scss
View file

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