feat: webtools branding for docs

Author: boazpoolman

packages/docs/docusaurus.config.ts

@@ -3,8 +3,8 @@ import type {Config} from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
-  title: 'Pluginpal Documentation',
-  tagline: "All of Pluginpal's plugin documentation in one place",
+  title: 'Strapi Webtools',
+  tagline: "Documentation for the webtools plugin for Strapi",
   favicon: 'img/favicon.jpg',
 
   plugins: [
@@ -86,14 +86,14 @@ const config: Config = {
     // Replace with your project's social card
     // image: 'img/docusaurus-social-card.jpg',
     navbar: {
-      title: 'PluginPal Docs',
+      title: 'Strapi Webtools',
       logo: {
-        alt: 'PluginPal logo',
+        alt: 'Webtools logo',
         src: 'img/logo.png',
       },
       items: [
         {
-          href: 'https://github.com/pluginpal',
+          href: 'https://github.com/pluginpal/strapi-webtools',
           label: 'GitHub',
           position: 'right',
         },
@@ -131,11 +131,11 @@ const config: Config = {
       ],
     },
 
-    algolia: {
-      appId: '8VTVGK458K',
-      apiKey: '2f311b65edaffdd986645eb42d4afa51',
-      indexName: 'pluginpal',
-    },
+    // algolia: {
+    //   appId: '8VTVGK458K',
+    //   apiKey: '2f311b65edaffdd986645eb42d4afa51',
+    //   indexName: 'pluginpal',
+    // },
 
     prism: {
       theme: prismThemes.github,

packages/docs/src/scss/navbar.scss

@@ -22,7 +22,7 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
   --custom-navbar-icon-button-hover-background: var(--strapi-neutral-100);
   --custom-navbar-items-font-size: var(--strapi-font-size-sm);
   --custom-navbar-items-gap: var(--strapi-spacing-3);
-  --custom-navbar-logo-img-width: 150px;
+  --custom-navbar-logo-img-width: 40px;
   --custom-navbar-toggle-mr: var(--strapi-spacing-1);
   --custom-navbar-transition: all 0.2s ease;
 
@@ -38,19 +38,24 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
   &__brand,
   &__logo {
     height: auto;
-    line-height: 0;
+    display: flex;
   }
 
   &__brand {
     margin-right: var(--custom-navbar-brand-mr);
+    font-size: large;
+
+    @include small-up {
+      font-size: x-large;
+    }
   }
 
   &__toggle {
     margin-right: var(--custom-navbar-toggle-mr);
   }
 
   &__logo {
-    margin-right: 0;
+    margin-right: var(--custom-navbar-items-gap);
 
     img {
       height: var(--custom-navbar-logo-img-height);