Update with recent styling updates.

Author: guzman-raphael

docs/mkdocs.yaml

@@ -17,9 +17,13 @@ nav:
 edit_uri: ./edit/main/docs/src
 docs_dir: ./src
 theme:
+  font:
+    text: Roboto Slab
+    code: Source Code Pro
   name: material
   custom_dir: src/.overrides
-  logo: assets/images/project-logo-black.png
+  icon:
+    logo: main/project-logo-black
   favicon: assets/images/project-logo-color.png
   features:
     - toc.integrate
@@ -68,8 +72,10 @@ extra:
   version:
     provider: mike
   social:
-    - icon: datajoint/company-logo
+    - icon: main/company-logo
       link: https://www.datajoint.com/
+    - icon: fontawesome/solid/ticket
+      link: https://support.djneuro.io/portal/en/home
     - icon: fontawesome/brands/slack
       link: https://datajoint.slack.com
     - icon: fontawesome/brands/linkedin
@@ -78,6 +84,10 @@ extra:
       link: https://twitter.com/DataJointIO
     - icon: fontawesome/brands/github
       link: https://github.com/datajoint
+    - icon: fontawesome/brands/docker
+      link: https://hub.docker.com/u/datajoint
+    - icon: fontawesome/brands/python
+      link: https://pypi.org/user/datajointbot
     - icon: fontawesome/brands/stack-overflow
       link: https://stackoverflow.com/questions/tagged/datajoint
     - icon: fontawesome/brands/youtube

docs/src/.overrides/.icons/datajoint/company-logo.svg

@@ -1,36 +1,59 @@
-[data-md-color-scheme="datajoint"] {
-
-    --dj-yellow: #fcb954;
-
-    --md-primary-fg-color: var(--dj-yellow);
-    --md-primary-bg-color: #000000;
-    --md-primary-fg-color--dark: var(--dj-yellow);
-
-    --md-accent-fg-color: var(--dj-yellow);
-
-    --md-code-bg-color: #e4f3f6;
+:root {
+    --dj-primary: #00a0df;
+    --dj-secondary: #ff5113;
+    --dj-background: #808285;
+    --dj-black: #000000;
+    --dj-white: #ffffff;
+}
 
-    --md-footer-fg-color: var(--dj-yellow);
+[data-md-color-scheme="datajoint"] {
+    /* ribbon */
+    /* ribbon + markdown heading expansion */
+    --md-primary-fg-color: var(--dj-black);
+    /* ribbon text */
+    --md-primary-bg-color: var(--dj-primary);
+
+    /* navigation */
+    /* navigation header + links */
+    --md-typeset-a-color: var(--dj-primary);
+    /* navigation on hover + diagram outline */
+    --md-accent-fg-color: var(--dj-secondary);
+
+    /* main */
+    /* main header + already viewed*/
+    --md-default-fg-color--light: var(--dj-background);
+    /* primary text */
+    --md-typeset-color: var(--dj-black);
+    /* code comments + diagram text */
+    --md-code-fg-color: var(--dj-secondary);
+
+    /* footer */
+    /* previous/next text */
+    --md-footer-fg-color: var(--dj-primary);
 }
 
 [data-md-color-scheme="slate"] {
-
-    --dj-yellow: #fcb954;
-
-    --md-typeset-color: #e4f3f6;
-    --md-typeset-a-color: #17b2ff;
-
-    --md-default-fg-color: #e4f3f6;
-    --md-default-fg-color--light: var(--dj-yellow);
-
-    --md-primary-fg-color: var(--dj-yellow);
-    --md-primary-bg-color: #000000;
-    --md-primary-fg-color--dark: var(--dj-yellow);
-
-    --md-accent-fg-color: var(--dj-yellow);
-
-    --md-code-fg-color: #76c9e9;
-    --md-code-hl-comment-color: #ffd28d;
-
-    --md-footer-fg-color: var(--dj-yellow);
+    /* ribbon */
+    /* ribbon + markdown heading expansion */
+    --md-primary-fg-color: var(--dj-primary);
+    /* ribbon text */
+    --md-primary-bg-color: var(--dj-white);
+
+    /* navigation */
+    /* navigation header + links */
+    --md-typeset-a-color: var(--dj-primary);
+    /* navigation on hover + diagram outline */
+    --md-accent-fg-color: var(--dj-secondary);
+
+    /* main */
+    /* main header + already viewed*/
+    /* --md-default-fg-color--light: var(--dj-background); */
+    /* primary text */
+    --md-typeset-color: var(--dj-white);
+    /* code comments + diagram text */
+    --md-code-fg-color: var(--dj-secondary);
+
+    /* footer */
+    /* previous/next text */
+    --md-footer-fg-color: var(--dj-white);
 }