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

Update tricks page to reflect navbar additions

Browse Source
This commit is contained in:
daudix
2024-08-19 05:15:35 +03:00
parent 5bfc843cc5
commit 3b10d47e48
1 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
content/tricks/index.md
View File

@ -26,7 +26,7 @@ Duckquill is pretty easy to restyle with just a few lines of SCSS in the [approp
You can make navbar have more classic look: You can make navbar have more classic look:
![classic navabr](https://files.catbox.moe/udj332.png) ![classic navabr](https://files.catbox.moe/wd9nal.png)
```scss ```scss
#site-nav { #site-nav {
@ -43,11 +43,16 @@ You can make navbar have more classic look:
width: min(var(--container-width), 90%); width: min(var(--container-width), 90%);
} }
nav ul li a, nav ul li {
nav ul li#search button, a,
nav ul li#language-switcher details summary { &#search button,
&#language-switcher details summary,
&#theme-switcher details summary {
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
} }
}
#search-container { #search-container {
#search-bar { #search-bar {
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
@ -56,16 +61,32 @@ You can make navbar have more classic look:
} }
``` ```
Or you can make it sticked to top: Or you can make it sticked to top but not full-width:
![sticked navabr](https://files.catbox.moe/wkweqh.png) ![sticked navabr](https://files.catbox.moe/vr62lb.png)
```scss ```scss
#site-nav { #site-nav {
top: 0; top: 0;
margin-top: 0; margin-top: 0;
box-shadow: 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5); box-shadow: 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
border-radius: 0 0 1.625rem 1.625rem; border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem) calc(var(--rounded-corner) + 0.5rem);
nav ul li {
a,
&#search button,
&#language-switcher details summary,
&#theme-switcher details summary {
border-radius: var(--rounded-corner);
}
}
#search-container {
#search-bar {
border-radius: var(--rounded-corner);
}
}
} }
``` ```