style: update logo and styling (#145)

Updates CSS colors, images and logo
---------

Signed-off-by: Karim Stekelenburg <karim@animo.id>
Co-authored-by: Berend Sliedrecht <61358536+berendsliedrecht@users.noreply.github.com>

README.md

@@ -1,7 +1,7 @@
 <p align="center">
   <br />
   <img
-    alt="Hyperledger Aries logo"
+    alt="Credo logo"
     src="https://raw.githubusercontent.com/openwallet-foundation/credo-ts/aa31131825e3331dc93694bc58414d955dcb1129/images/aries-logo.png"
     height="250px"
   />

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: [
           {

guides/index.md

@@ -2,16 +2,18 @@
 
 Welcome, to the Credo community!
 
-There's no way around it. Working with self-sovereign identity can be difficult. Luckily this documentation's main goal is to make it easy for you. Whether you have a lot of experience building with Aries or non-Aries SSI frameworks, or have never heard of terms like Verifiable Credential, [DID](./concepts/did-and-didcomm.md), or [Agent](./concepts/agents.md). This documentation will either help you create a JavaScript based SSI solution yourself, or help you find the right resources in the community to assist you!
+There's no way around it. Working with self-sovereign identity can be difficult. Luckily this documentation's main goal is to make it easy for you, whether you have SSI experience or not. This documentation will either help you create a JavaScript based SSI solution yourself, or help you find the right resources in the community to assist you!
 
 So what is [Credo](https://github.com/openwallet-foundation/credo-ts)?
 
+Credo originated as a project named "Aries Framework JavaScript" under the Hyperledger Aries umbrella. It has since been migrated from the Hyperledger Foundation to the OpenWallet Foundation and rebranded as Credo. As a result of its origin and strong ties to the Hyperledger community, a significant portion of its codebase adheres to Hyperledger Aries standards (RFCs), and the code and documentation make references to other Hyperledger-related projects.
+
 > Hyperledger Aries provides a shared, reusable, interoperable tool kit designed for initiatives and solutions focused on creating, transmitting and storing verifiable digital credentials.
 >
 > — Hyperledger Foundation
 
-There are [several](https://wiki.hyperledger.org/display/ARIES) Aries frameworks that help you build solutions using verifiable credentials. This one is written in TypeScript and is specifically well suited for Multi-Platform development as it supports Node.js and React Native. We, the community, like to view it as the most accessible framework mostly because it is written in TypeScript, and our maintainers and contributors work to keep developer user experience a top priority.
+There are [several](https://wiki.hyperledger.org/display/ARIES) other Aries-based frameworks that help you build solutions using verifiable credentials. This one is written in TypeScript and is specifically well suited for Multi-Platform development as it supports Node.js and React Native. We, the community, like to view it as the most accessible framework mostly because it is written in TypeScript, and our maintainers and contributors work to keep developer user experience a top priority.
 
-These docs are not just for the main framework, but also all that surround it. So you'll find [general explanations about the concepts used](./concepts/index.md), [specific tutorials for common use cases](./tutorials/index.md) and [relevant projects and related repositories](./ecosystem/index.md). Most of all you'll find solid documentation with lots of code examples and an enthusiastic community that wants to build great stuff together.
+These docs are not just for the core framework, but also all that surround it. So you'll find [general explanations about the concepts used](./concepts/index.md), [specific tutorials for common use cases](./tutorials/index.md) and [relevant projects and related repositories](./ecosystem/index.md). Most of all you'll find solid documentation with lots of code examples and an enthusiastic community that wants to build great stuff together.
 
 Are you ready to get started?

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>