style: update landing page design and documentation UI

- Enhanced website and documentation styling with improved CSS
- Added MrDocsBanner.png and updated mrdocs-logo.svg
- Improved header, navigation, and site-wide components
- Updated chevron.svg to white and enhanced home.svg
- Added logo.hbs partial and refined page layout
- Updated README.adoc and index page documentation

Author: julioest

README.adoc

@@ -1,6 +1,6 @@
 = MrDocs
 
-image::docs/modules/ROOT/images/MrDocsBanner.jpg[Mr. Docs Documentation,link=https://www.mrdocs.com]
+image::docs/modules/ROOT/images/MrDocsBanner.png[Mr. Docs Documentation,link=https://www.mrdocs.com]
 
 Visit the Mr. Docs Documentation website at https://www.mrdocs.com.
 

docs/modules/ROOT/images/MrDocsBanner.png

@@ -6,7 +6,7 @@ Alan Freitas <[email protected]>
 :page-tags: mrdocs
 :navtitle: Home
 
-image::MrDocsBanner.jpg[link=https://www.mrdocs.com]
+image::MrDocsBanner.png[link=https://www.mrdocs.com]
 
 - Automating {cpp} reference documentation significantly enhances usability by providing a navigable API and ensuring a single, up-to-date source of truth with minimal effort.
 - However, documenting {cpp} poses significant challenges due to discrepancies between the codebase and the public API. Doxygen remains a popular tool, yet it is suboptimal for {cpp} as it fails to fully comprehend {cpp} constructs and requires many transformation steps, including the incorporation of many macros within the {cpp} code. These macros maintain well-formed and ill-formed versions of the code, undermining the goal of unifying the source of truth.

docs/modules/ROOT/pages/index.adoc

@@ -0,0 +1,38 @@
+/* =========================== 
+   Shared Logo Styles
+=========================== */
+
+/* Logo Styles */
+.nav .logo-link, .navbar-brand .navbar-item:first-child {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    text-decoration: none;
+}
+
+.nav .logo-link:hover {
+    opacity: 0.8;
+    text-decoration: none;
+}
+
+.nav .logo-link svg, .navbar-brand .navbar-item:first-child svg {
+    height: 48px;
+    width: auto;
+    flex-shrink: 0;
+}
+
+.nav .logo-text, .navbar-brand .navbar-item:first-child .logo-text {
+    font-weight: 700;
+    color: #fff;
+    white-space: nowrap;
+}
+
+@media (max-width: 576px) {
+    .nav .logo-link svg {
+        height: 28px;
+    }
+    
+    .nav .logo-link {
+        gap: 0.5rem;
+    }
+}

docs/shared/logo.css

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

docs/ui/src/css/custom.css

@@ -9,7 +9,7 @@ body {
 }
 
 .navbar {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.2);
   backdrop-filter: blur(10px);
   color: var(--navbar-font-color);
   font-size: calc(16 / var(--rem-base) * 1rem);

docs/ui/src/css/header.css

@@ -66,6 +66,7 @@
   display: flex;
   flex-direction: column;
   height: inherit;
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .nav-panel-menu {
@@ -185,7 +186,7 @@
 }
 
 .nav-panel-explore {
-  background: var(--nav-background);
+  background: rgba(255, 255, 255, 0.3);
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -203,7 +204,7 @@
 .nav-panel-explore .context {
   font-size: calc(15 / var(--rem-base) * 1rem);
   flex-shrink: 0;
-  color: var(--nav-muted-color);
+  color: var(--color-white);
   box-shadow: 0 -1px 0 var(--nav-panel-divider-color);
   padding: 0 0.5rem;
   display: flex;

docs/ui/src/css/nav.css

@@ -11,7 +11,7 @@
 }
 
 .page-versions .version-menu-toggle {
-  color: inherit;
+  color: var(--color-white);
   background: url(../img/chevron.svg) no-repeat;
   background-position: right 0.5rem top 50%;
   background-size: auto 0.75em;

docs/ui/src/css/page-versions.css

@@ -16,3 +16,4 @@
 @import "highlight.css";
 @import "print.css";
 @import "custom.css";
+@import "../../../shared/logo.css";

docs/ui/src/css/site.css

@@ -1,4 +1,5 @@
 .toolbar {
+  background-color: rgba(255, 255, 255, 0.1);
   color: var(--toolbar-font-color);
   align-items: center;
   display: flex;
@@ -62,5 +63,5 @@
 }
 
 .toolbar .edit-this-page a {
-  color: var(--toolbar-muted-color);
+  color: var(--color-white);
 }