From 2491c6cb53d7fe828acd2ce95c6985f0fb6a0487 Mon Sep 17 00:00:00 2001
From: Jake Cahill <45230295+JakeSCahill@users.noreply.github.com>
Date: Mon, 12 Aug 2024 18:23:08 +0100
Subject: [PATCH] Design follow-up fixes (#216)

* Design follow-up fixes

* Update home background

* Update home background

* add product name in metadata and breadcrumbs

* Update admonitions
---
 src/css/dark-mode.css           | 16 +++++++++-------
 src/css/header.css              |  5 +++++
 src/css/home.css                |  4 +---
 src/css/main.css                |  4 ++++
 src/css/vars.css                | 14 ++++++++------
 src/img/info-purple.svg         |  1 +
 src/partials/header-content.hbs |  4 ++--
 7 files changed, 30 insertions(+), 18 deletions(-)
 create mode 100644 src/img/info-purple.svg

diff --git a/src/css/dark-mode.css b/src/css/dark-mode.css
index 686f3e3f..1485bba4 100644
--- a/src/css/dark-mode.css
+++ b/src/css/dark-mode.css
@@ -1,6 +1,7 @@
 html[data-theme=dark] {
   /* base */
   --body-background: var(--slate-900);
+  --home-background: var(--body-background);
   --panel-background: #ffffff12;
   --panel-border-color: var(--color-white);
   --scrollbar-track-color: var(--color-white);
@@ -12,6 +13,7 @@ html[data-theme=dark] {
   --sticky-table-header-background: #545454;
   --tooltip-background: white;
   --tooltip-font-color: #181818;
+  --feature-background-color: var(--body-background);
   /* search */
   --search-hits-boxshadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 3px 0 rgba(255, 255, 255, 0.15);
   --search-detached-mode-background: #0a0908;
@@ -49,21 +51,21 @@ html[data-theme=dark] {
   /* feedback */
   --feedback-modal-background: var(--body-background);
   /* admonitions */
-  --important-background: #45ade8;
+  --important-background: rgba(68, 76, 231, 0.2);
   --important-on-color: var(--body-font-color);
   --important-icon: url(../img/info-white.svg) no-repeat center right / auto 100%;
-  --warning-background: #cd372c;
+  --warning-background: rgba(205, 55, 44, 0.2);
   --warning-on-color: var(--body-font-color);
   --warning-icon: url(../img/report-white.svg) no-repeat center right / auto 100%;
-  --note-background: #45ade8;
+  --note-background: rgba(69, 173, 232, 0.2);
   --note-on-color: var(--body-font-color);
   --note-icon: url(../img/info-white.svg) no-repeat center right / auto 100%;
-  --tip-background: #38a169;
+  --tip-background: rgba(56, 161, 105, 0.2);
   --tip-on-color: var(--body-font-color);
   --tip-icon: url(../img/check-circle-white.svg) no-repeat center right / auto 100%;
-  --caution-background: #f9a165;
-  --caution-on-color: #181818;
-  --caution-icon: url(../img/warning-black.svg) no-repeat center right / auto 100%;
+  --caution-background: rgba(249, 161, 101, 0.2);
+  --caution-on-color: var(--body-font-color);
+  --caution-icon: url(../img/warning-white.svg) no-repeat center right / auto 100%;
   /* doc */
   --doc-font-color: var(--body-font-color);
   --heading-font-color: var(--body-font-color);
diff --git a/src/css/header.css b/src/css/header.css
index 8f5a2bb5..9a7c9a4e 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -150,6 +150,11 @@ html.is-clipped--navbar {
   padding: 6px 8px;
 }
 
+.home .navbar-item,
+.home .navbar-link {
+  color: #f5f5f5;
+}
+
 .navbar-item.is-current,
 .navbar-item:hover,
 .navbar-link:hover {
diff --git a/src/css/home.css b/src/css/home.css
index 927599bc..01b1f73e 100644
--- a/src/css/home.css
+++ b/src/css/home.css
@@ -46,7 +46,6 @@
   display: flex;
   margin-top: 0;
   width: 100%;
-  background: #1d2939;
   align-items: center;
   justify-content: center;
   min-height: 178px;
@@ -62,7 +61,6 @@
 
 .home .home-header .ask {
   display: flex;
-  color: white;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;
@@ -70,7 +68,6 @@
 }
 
 .home .home-header-container h1 {
-  color: white;
   font-size: 32px;
 }
 
@@ -91,6 +88,7 @@ html:not([data-theme=dark]) .home .feature-box:hover {
   padding: 1rem;
   align-content: flex-start;
   transition: 100ms ease all;
+  background-color: var(--feature-background-color);
 }
 
 .home .feature-image {
diff --git a/src/css/main.css b/src/css/main.css
index 51a99d63..27811e2c 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -13,6 +13,10 @@ body.status-404 main > .content {
   min-height: 100vh;
 }
 
+.home main {
+  background-color: var(--home-background);
+}
+
 @media screen and (min-width: 1024px) {
   main {
     margin: 0 auto;
diff --git a/src/css/vars.css b/src/css/vars.css
index 9ab6a395..39932995 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -171,6 +171,7 @@ html:not([data-theme=dark]) {
   --body-footer-font-color: #98a2b3;
   /* base */
   --body-background: var(--color-white);
+  --home-background: rgba(245, 245, 245, 1);
   --button-font-color: white;
   --panel-background: #f9fafb;
   --panel-border-color: #e5e9f0;
@@ -180,6 +181,7 @@ html:not([data-theme=dark]) {
   --sticky-table-header-background: #f6f6f6;
   --tooltip-background: var(--slate-900);
   --tooltip-font-color: white;
+  --feature-background-color: white;
   /* search */
   --search-hits-boxshadow: 0 0 0 1px rgba(35, 38, 59, 0.05), 0 1px 3px 0 rgba(35, 38, 59, 0.15);
   --search-detached-mode-background: #f5f6f7;
@@ -223,19 +225,19 @@ html:not([data-theme=dark]) {
   /* feedback */
   --feedback-modal-background: #fefefe;
   /* admonitions */
-  --important-background: #e8f5fc;
+  --important-background: rgba(68, 76, 231, 0.1);
   --important-on-color: var(--body-font-color);
-  --important-icon: url(../img/info-blue.svg) no-repeat center right / auto 100%;
-  --warning-background: #fff6f5;
+  --important-icon: url(../img/info-purple.svg) no-repeat center right / auto 100%;
+  --warning-background: rgba(205, 55, 44, 0.1);
   --warning-on-color: var(--body-font-color);
   --warning-icon: url(../img/report-red.svg) no-repeat center right / auto 100%;
-  --note-background: #e8f5fc;
+  --note-background: rgba(69, 173, 232, 0.1);
   --note-on-color: var(--body-font-color);
   --note-icon: url(../img/info-blue.svg) no-repeat center right / auto 100%;
-  --tip-background: #f4fbf6;
+  --tip-background: rgba(56, 161, 105, 0.1);
   --tip-on-color: var(--body-font-color);
   --tip-icon: url(../img/check-circle-green.svg) no-repeat center right / auto 100%;
-  --caution-background: #fef0e7;
+  --caution-background: rgba(249, 161, 101, 0.1);
   --caution-on-color: var(--body-font-color);
   --caution-icon: url(../img/warning-orange.svg) no-repeat center right / auto 100%;
   /* doc */
diff --git a/src/img/info-purple.svg b/src/img/info-purple.svg
new file mode 100644
index 00000000..1705bafc
--- /dev/null
+++ b/src/img/info-purple.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#444CE7"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
\ No newline at end of file
diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs
index c721bc37..6d8e477f 100644
--- a/src/partials/header-content.hbs
+++ b/src/partials/header-content.hbs
@@ -1,6 +1,6 @@
 <header class="header">
     {{> announcement-bar}}
-  <nav class="navbar" {{#if page.component.latest.asciidoc.attributes.page-header-data}}{{#with page.component.latest.asciidoc.attributes.page-header-data}}style="background-color: {{this.color}}"{{/with}}{{else}}style="background-color: #1D2939"{{/if}}
+  <nav class="navbar" {{#if page.component.latest.asciidoc.attributes.page-header-data}}{{#with page.component.latest.asciidoc.attributes.page-header-data}}style="background-color: {{this.color}}"{{/with}}{{else}}style="background-color: #d73d23"{{/if}}
 >
     <div class="navbar-brand" id="brand">
       {{#with site.homeUrl}}
@@ -12,7 +12,7 @@
         <span></span>
       </button>
     </div>
-    <div id="topbar-nav" class="navbar-menu" {{#if page.component.latest.asciidoc.attributes.page-header-data}}{{#with page.component.latest.asciidoc.attributes.page-header-data}}style="background-color: {{this.color}}"{{/with}}{{else}}style="background-color: #1D2939"{{/if}}>
+    <div id="topbar-nav" class="navbar-menu" {{#if page.component.latest.asciidoc.attributes.page-header-data}}{{#with page.component.latest.asciidoc.attributes.page-header-data}}style="background-color: {{this.color}}"{{/with}}{{else}}style="background-color: #d73d23"{{/if}}>
       {{#each (sort-components site.components)}}
       <a class="navbar-item {{#if (eq this.title @root.page.component.title)}}is-current{{/if}}" href="{{{this.url}}}">{{this.title}}</a>
       {{/each}}