optimize for mobile responsiveness (#1032)

* style: enhance navbar and footer link styles
* style: refine link styles in navbar and footer
* style: adjust box dimensions for responsive design
* style: enhance header layout and improve responsiveness
* style: refactor inner-box styles for rotation and scaling
* style: remove background styles from article and nav

Author: julioest

docs/ui/src/css/custom.css

@@ -50,11 +50,6 @@
   color: var(--navbar-font-color);
 }
 
-.body .article {
-  backdrop-filter: blur(10px);
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
 .doc h1,
 .doc h2,
 .doc h3,

docs/ui/src/css/nav.css

@@ -21,10 +21,6 @@
     width: var(--nav-width);
     background-color: transparent;
   }
-
-  .nav-container .nav {
-    background-color: rgb(255 255 255 / 18%);
-  }
 }
 
 @media screen and (min-width: 1024px) {

docs/website/assets/glasses.png

@@ -46,9 +46,9 @@
         <div class="nav-section">
             <ul role="menubar">
             {{#each navbar}}
-            <li><a href="{{ href }}">{{ title }}</a></li>
+            <li class="nav-link"><a href="{{ href }}">{{ title }}</a></li>
             {{/each}}
-            <li>
+            <li class="nav-link">
                 <a href="{{ site.github.url }}" class="contrast" aria-label="{{ site.title }} GitHub repository">
                         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 496 512" height="16px">
@@ -62,20 +62,22 @@
     </nav>
     <header>
         <div class="container">
-            <div class="header-content">
-                <h1>{{ title }}</h1>
-                <p>{{ description }}</p>
-                <div class="header-cta">
-                    <a href="docs/" class="contrast outline">Get started</a>
-                    <a href="docs/mrdocs/install.html" class="primary">Download</a>
-                </div>
-                <div class="banner-snippet">
-                    <small><code>{{ banner.description }}</code></small>
+            <div class="grid header-banner">
+                <div class="header-content">
+                    <h1>{{ title }}</h1>
+                    <p>{{ description }}</p>
+                    <div class="header-cta">
+                        <a href="docs/" class="contrast outline">Get started</a>
+                        <a href="docs/mrdocs/install.html" class="primary">Download</a>
+                    </div>
+                    <div class="banner-snippet">
+                        <small><code>{{ banner.description }}</code></small>
+                    </div>
                 </div>
-            </div>
-            <div class="header-image">
-                <div class="box3 box-shape2 box270">
-                    <div class="inner-box mrdocs"></div>
+                <div class="header-image">
+                    <div class="box3 box-shape2 box270">
+                        <div class="inner-box mrdocs"></div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -178,11 +180,11 @@
     </main>
     <footer>
         <div class="container">
-            <ul>
+            <ul class="footer-links">
                 {{#each navbar}}
-                <li><a href="{{ href }}">{{ title }}</a></li>
+                <li class="footer-link"><a href="{{ href }}">{{ title }}</a></li>
                 {{/each}}
-                <li><a href="https://github.com/cppalliance/mrdocs">GitHub</a></li>
+                <li class="footer-link"><a href="https://github.com/cppalliance/mrdocs">GitHub</a></li>
             </ul>
         </div>
     </footer>