style: enhance antora docs ui

- replace logo on landing page
- add blurred backgrounds to docs
- update text colors in docs

Author: julioest

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

@@ -10,11 +10,11 @@ html {
   height: 100%;
   scroll-behavior: smooth;
   background:
-    radial-gradient(ellipse 100% 100% at 20% 20%, #582363CC, transparent 50%),
-    radial-gradient(ellipse 80% 120% at 75% 25%, rgba(138, 214, 236, 0.5), transparent 55%),
-    radial-gradient(ellipse 150% 90% at 50% 50%, rgba(40, 98, 114, 0.6), transparent 65%),
-    radial-gradient(ellipse 100% 100% at 80% 100%, #582363CC, transparent 60%),
-    linear-gradient(135deg, #124B83, #124B83, #124B83);
+    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;

docs/ui/src/css/custom.css

@@ -0,0 +1,89 @@
+/* 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);
+}
+
+.doc .content {
+  backdrop-filter: blur(10px);
+}
+
+.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.1);
+  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,7 +59,7 @@
 }
 
 .nav a {
-  color: inherit;
+  color: var(--color-white);
 }
 
 .nav .panels {

docs/ui/src/css/site.css

@@ -1,4 +1,3 @@
-
 @import "typeface-roboto.css";
 @import "typeface-roboto-mono.css";
 @import "vars.css";
@@ -16,5 +15,4 @@
 @import "footer.css";
 @import "highlight.css";
 @import "print.css";
-
-/* Inherits styles from landing page */
+@import "custom.css";

docs/ui/src/css/toolbar.css

@@ -1,19 +1,17 @@
 .toolbar {
   color: var(--toolbar-font-color);
-  align-items: center;
-  background-color: var(--toolbar-background);
-  box-shadow: 0 1px 0 var(--toolbar-border-color);
+  align-items: center;  
   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 {

docs/ui/src/css/vars.css

@@ -1,6 +1,7 @@
 :root {
   /* colors */
   --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);
@@ -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/main.hbs

@@ -1,4 +1,6 @@
 <main class="article">
+  <div class="dotted"></div>
+  <div class="dotted"></div>
 {{> toolbar}}
   <div class="content">
 {{#if (eq page.layout '404')}}