Design follow-up fixes (#216)

* Design follow-up fixes * Update home background * Update home background * add product name in metadata and breadcrumbs * Update admonitions
redpanda-data · Aug 12, 2024 · 2491c6c · 2491c6c
1 parent 0d07ad8
commit 2491c6c
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 18 deletions.
diff --git 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
@@ -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
@@ -46,7 +46,6 @@
   display: flex;
   margin-top: 0;
   width: 100%;
-  background: #1d2939;
   align-items: center;
   justify-content: center;
   min-height: 178px;
@@ -62,15 +61,13 @@
 
 .home .home-header .ask {
   display: flex;
-  color: white;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;
   margin-top: 30px;
 }
 
 .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
@@ -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
@@ -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
diff --git 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}}