style: update logo and styling

Signed-off-by: Karim Stekelenburg <karim@animo.id>

docusaurus.config.js

@@ -74,8 +74,8 @@ const config = {
       navbar: {
         title: 'Credo Docs',
         logo: {
-          alt: 'Hyperledger Aries Logo',
-          src: 'img/aries-logo.png',
+          alt: 'Credo Logo',
+          src: 'img/credo-logo.png',
         },
         items: [
           {

src/css/custom.css

@@ -6,28 +6,34 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-}
-
-/* For readability concerns, you should choose a lighter palette in dark mode. */
+    --ifm-color-primary: #fe008e;
+    --ifm-color-primary-dark: #e50080;
+    --ifm-color-primary-darker: #d80079;
+    --ifm-color-primary-darkest: #b20063;
+    --ifm-color-primary-light: #ff1899;
+    --ifm-color-primary-lighter: #ff259f;
+    --ifm-color-primary-lightest: #ff4bb0;
+    --ifm-background-color: #faf9f6;
+    --ifm-code-font-size: 95%;
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  }
+
+  /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+    --ifm-color-primary: #cf00b8;
+    --ifm-color-primary-dark: #ba00a6;
+    --ifm-color-primary-darker: #b0009c;
+    --ifm-color-primary-darkest: #910081;
+    --ifm-color-primary-light: #e400ca;
+    --ifm-color-primary-lighter: #ee00d4;
+    --ifm-color-primary-lightest: #ff0ee4;
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.custom-banner-bg {
+  background: linear-gradient(135deg, #ff008e 0%, #CF00B8 100%);
+}
+
 
 .admonition-holder {
   --ifm-alert-background-color: #b6b2f5;

src/pages/index.module.css

@@ -8,8 +8,11 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  /* --ifm-hero-background-color: linear-gradient(90deg, #ff008e 0%, #8e00f2 100%); */
 }
 
+
+
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;

src/pages/index.tsx

@@ -9,7 +9,7 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures'
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext()
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx('hero hero--primary', styles.heroBanner) + ' custom-banner-bg'}>
       <div className="container">
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>