Merge pull request 'Attempt to match the look and feel of graph.openaire.eu' (#22) from styling into main

Reviewed-on: D-Net/openaire-graph-docs#22

docusaurus.config.js

@@ -81,24 +81,24 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       navbar: {
-        // title: 'OpenAIRE Documentation',
+        title: 'documentation',
         logo: {
           alt: 'OpenAIRE',
           src: 'img/logo.png',
         },
         items: [
-          {
-            type: 'doc',
-            docId: 'intro',
-            position: 'left',
-            label: 'Research graph v5.0',
-          },
+          // {
+          //   type: 'doc',
+          //   docId: 'intro',
+          //   position: 'left',
+          //   label: 'Research graph v5.0',
+          // },
           // 
           // documentation version in the navbar
-          // {
-          //   type: 'docsVersionDropdown', 
-          //   position: 'right'
-          // },
+          {
+            type: 'docsVersionDropdown', 
+            position: 'right'
+          },
           // 
           // link to blog, the blog must be enabled first
           // {to: '/blog', label: 'Blog', position: 'left'},

src/css/custom.css

@@ -5,57 +5,37 @@
  */
 
 /* 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. */
-/*
-[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);
-}
-*/
 
 :root {
-  --ifm-color-primary: #4666ca;
-  --ifm-color-primary-dark: #3757be;
-  --ifm-color-primary-darker: #3353b4;
-  --ifm-color-primary-darkest: #2a4494;
-  --ifm-color-primary-light: #5b77d0;
-  --ifm-color-primary-lighter: #6680d3;
-  --ifm-color-primary-lightest: #859adc;
+  --ifm-color-primary: #e6122e;
+  --ifm-color-primary-dark: #cf1029;
+  --ifm-color-primary-darker: #c30f27;
+  --ifm-color-primary-darkest: #a10d20;
+  --ifm-color-primary-light: #ee233e;
+  --ifm-color-primary-lighter: #ef2f48;
+  --ifm-color-primary-lightest: #f15166;
+  --ifm-background-color: #F5F5F5;
+  --ifm-navbar-background-color: #fff;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 [data-theme='dark'] {
-  --ifm-color-primary: #5dade2;
-  --ifm-color-primary-dark: #429fdd;
-  --ifm-color-primary-darker: #3498db;
-  --ifm-color-primary-darkest: #227fbd;
-  --ifm-color-primary-light: #78bbe7;
-  --ifm-color-primary-lighter: #86c2e9;
-  --ifm-color-primary-lightest: #aed6f1;
+  --ifm-color-primary: #f15166;
+  --ifm-color-primary-dark: #ef334c;
+  --ifm-color-primary-darker: #ed243f;
+  --ifm-color-primary-darkest: #d1112a;
+  --ifm-color-primary-light: #f36f80;
+  --ifm-color-primary-lighter: #f57e8d;
+  --ifm-color-primary-lightest: #f8aab5;
+  --ifm-background-color: #2c2e3a;
+  --ifm-navbar-background-color: #2c2e3a;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
+.navbar__logo {
+    height: 2.5rem;
+}
 
 .todo {
   background-color: yellow;