docs: Improve navbar styling for mobile

docs/src/css/custom.css

@@ -23,6 +23,7 @@
     --ifm-color-primary-lighter: hsl(196 100% 75%);
     --ifm-color-primary-lightest: hsl(196 100% 90%);
     --ifm-navbar-background-color: #ffffff11;
+    --navbar-background-color-mobile: #ffffffee;
     --ifm-color-content: var(--ifm-color-emphasis-800);
     --ifm-code-font-size: 95%;
     --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
@@ -46,6 +47,7 @@
     --ifm-color-primary-lighter: hsl(196 100% 75%);
     --ifm-color-primary-lightest: hsl(196 100% 90%);
     --ifm-navbar-background-color: #00021211;
+    --navbar-background-color-mobile: #000212ee;
     --ifm-card-background-color: transparent;
     --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
     --color-graphql-comment: #6ea372;

docs/src/css/overrides.css

@@ -32,15 +32,18 @@ body {
 .navbar-sidebar {
     background-color: var(--ifm-background-color);
 }
-
 .navbar {
-    backdrop-filter: blur(20px);
+    background-color: var(--navbar-background-color-mobile);
 }
 
 @media screen and (min-width: 996px) {
     .docs-wrapper article:not(.col) {
         margin-left: 32px;
     }
+    .navbar {
+        backdrop-filter: blur(20px);
+        background-color: var(--ifm-navbar-background-color);
+    }
 }
 
 

docs/src/pages/index.tsx

@@ -26,7 +26,7 @@ export default function Home(): JSX.Element {
                     ></path>
                     <path
                         stroke="currentColor"
-                        stroke-width="2"
+                        strokeWidth="2"
                         d="M530 39c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10Z"
                     ></path>
                     <path