Update styling and add getting started.

Author: guzman-raphael

docs/mkdocs.yaml

@@ -4,8 +4,8 @@ site_name: DataJoint Python
 repo_url: https://github.com/datajoint/datajoint-python
 repo_name: datajoint/datajoint-python
 nav:
-  - DataJoint Python: getting_started.md
-  - Getting Started: getting_started.md
+  - DataJoint Python: getting_started/index.md
+  - Getting Started: getting_started/index.md
   - Concepts: concepts.md
   - Tutorials: tutorials.md
   - About:
@@ -17,9 +17,13 @@ nav:
 edit_uri: ./edit/master/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
@@ -38,7 +42,7 @@ plugins:
   - search
   - redirects:
       redirect_maps:
-        "index.md": "getting_started.md"
+        "index.md": "getting_started/index.md"
   - mkdocstrings:
       default_handler: python
   - gen-files:
@@ -54,10 +58,16 @@ markdown_extensions:
   - toc:
       permalink: true
   - pymdownx.emoji:
+      emoji_index: !!python/name:materialx.emoji.twemoji
+      emoji_generator: !!python/name:materialx.emoji.to_svg
       options:
         custom_icons:
           - .overrides/.icons
   - mdx_truly_sane_lists
+  - pymdownx.tabbed:
+      alternate_style: true
+  - admonition
+  - pymdownx.details
   - pymdownx.superfences:
       custom_fences:
         - name: mermaid
@@ -68,8 +78,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 +90,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);
 }