hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve adaptivity of the navbar (fixes #45)

Browse Source
This commit is contained in:
daudix
2024-08-17 22:36:34 +03:00
parent fc21fd7b7d
commit e326987985
1 changed files with 85 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
sass/_nav.scss
View File

@ -10,6 +10,10 @@
background-color: var(--nav-bg);
max-width: 90%;
@media only screen and (max-width: 480px) {
position: static;
}
nav {
padding: 0.5rem;
@ -51,6 +55,12 @@
line-height: 1.25;
list-style: none;
@media only screen and (max-width: 480px) {
&:not(#search, #language-switcher, #feed) {
width: 100%;
}
}
&#home {
position: relative;
margin-inline-end: 0.625rem;
@ -67,6 +77,22 @@
:root[dir*="rtl"] & {
right: unset;
left: -0.5rem;
@media only screen and (max-width: 480px) {
left: -0.125rem;
}
}
@media only screen and (max-width: 480px) {
position: absolute;
top: unset;
right: unset;
bottom: -0.125rem;
left: -0.125rem;
background-color: var(--fg-muted-2);
width: calc(100% + 0.25rem);
height: max(1px, 0.0625em);
content: "";
}
}
@ -77,6 +103,24 @@
&:hover {
color: var(--primary-color);
}
&.active {
background-color: var(--primary-color-alpha);
color: var(--primary-color);
&:hover {
background-color: var(--primary-color);
color: var(--contrast-color);
}
&::before {
display: none;
}
}
}
@media only screen and (max-width: 480px) {
margin-inline-end: 0;
}
}
@ -115,21 +159,59 @@
right: 1.5rem;
left: 1.5rem;
transition: var(--transition);
border-bottom: 0.25rem solid var(--fg-muted-2);
border-radius: 0 0 0.25rem 0.25rem;
border-block-end: 0.25rem solid var(--fg-muted-2);
border-end-start-radius: 0.25rem;
border-end-end-radius: 0.25rem;
content: "";
@media only screen and (max-width: 480px) {
top: 0.25rem;
right: unset;
bottom: 0.25rem;
left: -0.5rem;
border-inline-end: 0.25rem solid var(--fg-muted-2);
border-block-end: none;
border-start-end-radius: 0.25rem;
border-end-start-radius: 0;
content: "";
:root[dir*="rtl"] & {
right: -0.5rem;
left: unset;
}
}
}
&:hover::before {
right: 1rem;
left: 1rem;
border-bottom: 0.25rem solid var(--primary-color);
border-block-end: 0.25rem solid var(--primary-color);
@media only screen and (max-width: 480px) {
top: 0;
right: unset;
bottom: 0;
left: -0.5rem;
border-inline-end: 0.25rem solid var(--primary-color);
border-block-end: none;
content: "";
:root[dir*="rtl"] & {
right: -0.5rem;
left: unset;
}
}
}
&:active::before {
border-radius: 0.25rem;
}
}
@media only screen and (max-width: 480px) {
width: 100%;
text-align: center;
}
}
&#search button,