added logo to docs

Author: gmaxlev

README.md

@@ -1,5 +1,7 @@
 # [pict-node](https://gmaxlev.github.io/pict-node/)
 
+![CLI watch mode example](./docs/logo.svg)
+
 The documentation is published on [gmaxlev.github.io/pict-node/](https://gmaxlev.github.io/pict-node/)
 
 This library is a wrapper around Microsoft's [PICT](https://github.com/microsoft/pict) (Pairwise Independent Combinatorial Testing) tool, designed to work with Node.js for generating combinations of inputs for software testing. PICT is a powerful tool that helps reduce the number of tests needed while still ensuring comprehensive coverage by generating optimized combinations of inputs.

docs/logo.svg

@@ -50,10 +50,10 @@ const config: Config = {
     // Replace with your project's social card
     // image: "img/docusaurus-social-card.jpg",
     navbar: {
-      title: "pict-node",
       logo: {
         alt: "pict-node logo",
         src: "img/logo.svg",
+        className: "header-logo",
       },
       items: [
         {

web/docusaurus.config.ts

@@ -1,6 +1,8 @@
 .intro {
   align-items: center;
   justify-content: center;
+  padding-top: 50px;
+  padding-bottom: 50px;
 }
 
 .intro h1 {
@@ -10,3 +12,7 @@
 .intro p {
   max-width: 400px;
 }
+
+.logo {
+  max-width: 80%;
+}

web/src/components/Intro/Intro.module.css

@@ -12,6 +12,11 @@ export default function Intro() {
     >
       <main className={"text--center"}>
         <div className={"container"}>
+          <img
+            src={"./img/logo.svg"}
+            alt={"pict-node logo"}
+            className={styles.logo}
+          />
           <h1>PICT for Node.js</h1>
           <h2>Combinatorial Test Case Generation</h2>
           <p>

web/src/components/Intro/Intro.tsx

@@ -6,25 +6,30 @@
 
 /* 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-color-primary: #83cd29;
+  --ifm-color-primary-dark: #56871b;
+  --ifm-color-primary-darker: #4c7719;
+  --ifm-color-primary-darkest: #3c5e13;
+  --ifm-color-primary-light: #8ddd2c;
+  --ifm-color-primary-lighter: #90e32b;
+  --ifm-color-primary-lightest: #95ea2e;
   --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;
+  --ifm-color-primary: #83cd29;
+  --ifm-color-primary-dark: #56871b;
+  --ifm-color-primary-darker: #4c7719;
+  --ifm-color-primary-darkest: #3c5e13;
+  --ifm-color-primary-light: #8ddd2c;
+  --ifm-color-primary-lighter: #90e32b;
+  --ifm-color-primary-lightest: #95ea2e;
+  --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.header-logo {
+  transform: translateY(5px);
+}