design: landing page & docs ui updates

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/pages/index.adoc

@@ -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/shared/logo.css

@@ -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/ui/preview-src/ui-model.yml

@@ -1,7 +1,7 @@
 antoraVersion: '1.0.0'
 site:
   url: http://localhost:5252
-  title: Brand Docs
+  title: MrDocs
   homeUrl: &home_url /xyz/5.2/index.html
   components:
   - name: abc

docs/ui/src/css/base.css

@@ -9,6 +9,16 @@ html {
   font-size: var(--body-font-size);
   height: 100%;
   scroll-behavior: smooth;
+  background:
+    radial-gradient(ellipse 100% 100% at var(--x1) var(--y1), rgba(89, 36, 99, 0.8), transparent 50%),
+    radial-gradient(ellipse 80% 120% at var(--x2) var(--y2), rgba(138, 214, 236, 0.5), transparent 55%),
+    radial-gradient(ellipse 150% 90% at var(--x3) var(--y3), rgba(40, 98, 114, 0.6), transparent 65%),
+    radial-gradient(ellipse 100% 100% at 80% 100%, rgba(89, 36, 99, 0.8), transparent 60%),
+    linear-gradient(135deg, #124b83, #124b83, #124b83);
+  background-attachment: fixed;
+  background-blend-mode: screen;
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 
 @media screen and (min-width: 1024px) {
@@ -18,13 +28,14 @@ html {
 }
 
 body {
-  background: var(--body-background);
+  /* Remove the solid background since we're using gradient on html */
+  /* background: var(--body-background); */
   color: var(--body-font-color);
   font-family: var(--body-font-family);
   line-height: var(--body-line-height);
   margin: 0;
   tab-size: 4;
-  word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */
+  word-wrap: anywhere;
 }
 
 a {

docs/ui/src/css/custom.css

@@ -0,0 +1,85 @@
+/* Inherits styles from landing page */
+
+.dotted {
+  background-image: url("../../../../docs/website/assets/halftone.png");
+  background-size: 158%;
+  background-repeat: repeat-y;
+  background-position: center center;
+  width: 190px;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  opacity: 0.1;
+  top: 0;
+  z-index: -5;
+  pointer-events: none;
+}
+
+.dotted-right {
+  background-image: url("../../../../docs/website/assets/halftone.png");
+  background-size: 158%;
+  transform: rotate(180deg);
+  background-repeat: repeat-y;
+  background-position: center center;
+  width: 190px;
+  height: 100vh;
+  position: fixed;
+  right: 0;
+  opacity: 0.1;
+  top: 0;
+  z-index: -5;
+  pointer-events: none;
+}
+
+@media (max-width: 576px) {
+  .dotted,
+  .dotted-right {
+    opacity: 0.05;
+  }
+
+  .dotted {
+    left: -80px;
+  }
+
+  .dotted-right {
+    right: -80px;
+  }
+}
+
+.doc {
+  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,
+.doc h4,
+.doc h5,
+.doc h6 {
+  color: var(--navbar-font-color);
+}
+
+.toc.sidebar .toc-menu {
+  color: var(--navbar-font-color);
+}
+
+.toc.sidebar .toc-menu h3 {
+  color: var(--navbar-font-color);
+}
+
+.breadcrumbs li {
+  color: var(--color-white-50);
+}
+
+.toc .toc-menu a.is-active {
+  color: var(--color-white-50);
+}
+
+.nav-text {
+  color: var(--color-white-50);
+}

docs/ui/src/css/header.css

@@ -9,7 +9,8 @@ body {
 }
 
 .navbar {
-  background: var(--navbar-background);
+  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);
   height: var(--navbar-height);

docs/ui/src/css/nav.css

@@ -5,6 +5,8 @@
 }
 
 .nav-container {
+  background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
   position: fixed;
   top: var(--navbar-height);
   left: 0;
@@ -35,7 +37,7 @@
 }
 
 .nav {
-  background: var(--nav-background);
+  /* background: var(--nav-background); */
   position: relative;
   top: var(--toolbar-height);
   height: var(--nav-height);
@@ -57,13 +59,14 @@
 }
 
 .nav a {
-  color: inherit;
+  color: var(--color-white);
 }
 
 .nav .panels {
   display: flex;
   flex-direction: column;
   height: inherit;
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .nav-panel-menu {
@@ -183,7 +186,7 @@
 }
 
 .nav-panel-explore {
-  background: var(--nav-background);
+  background: rgba(255, 255, 255, 0.3);
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -201,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/page-versions.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/site.css

@@ -15,3 +15,5 @@
 @import "footer.css";
 @import "highlight.css";
 @import "print.css";
+@import "custom.css";
+@import "../../../shared/logo.css";

docs/ui/src/css/toolbar.css

@@ -1,19 +1,18 @@
 .toolbar {
+  background-color: rgba(255, 255, 255, 0.1);
   color: var(--toolbar-font-color);
   align-items: center;
-  background-color: var(--toolbar-background);
-  box-shadow: 0 1px 0 var(--toolbar-border-color);
   display: flex;
   font-size: calc(15 / var(--rem-base) * 1rem);
   height: var(--toolbar-height);
   justify-content: flex-start;
-  position: sticky;
+  position: static;
   top: var(--navbar-height);
   z-index: var(--z-index-toolbar);
 }
 
 .toolbar a {
-  color: inherit;
+  color: var(--navbar-font-color);
 }
 
 .nav-toggle {
@@ -64,5 +63,5 @@
 }
 
 .toolbar .edit-this-page a {
-  color: var(--toolbar-muted-color);
+  color: var(--color-white);
 }

docs/ui/src/css/vars.css

@@ -1,22 +1,23 @@
 :root {
   /* colors */
-  --color-white: #fff;
-  --color-smoke-10: #fefefe;
-  --color-smoke-30: #fafafa;
-  --color-smoke-50: #f5f5f5;
-  --color-smoke-70: #f0f0f0;
-  --color-smoke-90: #e1e1e1;
-  --color-gray-10: #c1c1c1;
-  --color-gray-30: #9c9c9c;
-  --color-gray-40: #8e8e8e;
-  --color-gray-50: #808080;
-  --color-gray-70: #5d5d5d;
-  --color-jet-20: #4a4a4a;
-  --color-jet-30: #424242;
-  --color-jet-50: #333;
-  --color-jet-70: #222;
-  --color-jet-80: #191919;
-  --color-black: #000;
+  --color-white: rgba(255, 255, 255, 1);
+  --color-white-50: rgba(255, 255, 255, 0.5);
+  --color-smoke-10: rgba(254, 254, 254, 0.95);
+  --color-smoke-30: rgba(250, 250, 250, 0.9);
+  --color-smoke-50: rgba(245, 245, 245, 0.85);
+  --color-smoke-70: rgba(240, 240, 240, 0.8);
+  --color-smoke-90: rgba(225, 225, 225, 0.75);
+  --color-gray-10: rgba(193, 193, 193, 0.7);
+  --color-gray-30: rgba(156, 156, 156, 0.65);
+  --color-gray-40: rgba(142, 142, 142, 0.6);
+  --color-gray-50: rgba(128, 128, 128, 0.55);
+  --color-gray-70: rgba(93, 93, 93, 0.5);
+  --color-jet-20: rgba(74, 74, 74, 0.45);
+  --color-jet-30: rgba(66, 66, 66, 0.4);
+  --color-jet-50: rgba(51, 51, 51, 0.35);
+  --color-jet-70: rgba(34, 34, 34, 0.3);
+  --color-jet-80: rgba(25, 25, 25, 0.25);
+  --color-black: rgba(0, 0, 0, 0.2);
   /* fonts */
   --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
   --body-font-size: 1.0625em; /* 17px */
@@ -148,4 +149,12 @@
   --z-index-toolbar: 2;
   --z-index-page-version-menu: 3;
   --z-index-navbar: 4;
+
+  /* Background gradient position variables */
+  --x1: 20%;
+  --y1: 20%;
+  --x2: 75%;
+  --y2: 25%;
+  --x3: 50%;
+  --y3: 50%;
 }

docs/ui/src/partials/header-content.hbs

@@ -1,7 +1,10 @@
 <header class="header">
-  <nav class="navbar">
+  <nav class="nav navbar">
     <div class="navbar-brand">
-      <a class="navbar-item" href="{{{or site.url siteRootPath}}}">{{site.title}}</a>
+      <a class="navbar-item" href="{{{or site.url siteRootPath}}}">
+        {{> logo }}
+        <span class="logo-text">{{site.title}}</span>
+      </a>
       {{#if env.SITE_SEARCH_PROVIDER}}
       <div class="navbar-item search hide-for-print">
         <div id="search-field" class="field">