Improve docs setup (SVG logos, repo links) (#7074)

* Add SVG logo with dark mode, GitHub/Forum/Chat buttons

* Fix CSS syntax higlight

* Lint

* Add GitHub config

docs/source/conf.py

@@ -173,7 +173,45 @@
 # Theme options are theme-specific and customize the look and feel of a theme
 # further.  For a list of options available for each theme, see the
 # documentation.
-# html_theme_options = {}
+html_theme_options = {
+    "icon_links": [
+        {
+            "name": "jupyter.org",
+            "url": "https://jupyter.org",
+            "icon": "_static/jupyter_logo.svg",
+            "type": "local",
+        },
+        {
+            "name": "GitHub",
+            "url": "https://github.com/jupyter/notebook",
+            "icon": "fab fa-github-square",
+        },
+        {
+            "name": "Discourse",
+            "url": "https://discourse.jupyter.org/c/notebook/31",
+            "icon": "fab fa-discourse",
+        },
+        {
+            "name": "Gitter",
+            "url": "https://gitter.im/jupyter/jupyter",
+            "icon": "fab fa-gitter",
+        },
+    ],
+    "logo": {
+        "alt_text": "Jupyter",
+        "image_light": "_static/logo-rectangle.svg",
+        "image_dark": "_static/logo-rectangle-dark.svg",
+    },
+    "use_edit_page_button": True,
+}
+
+# Output for github to be used in links
+html_context = {
+    "github_user": "jupyter",  # Username
+    "github_repo": "notebook",  # Repo name
+    "github_version": "main",  # Version
+    "doc_path": "docs/source/",  # Path in the checkout to the docs root
+}
 
 # Add any paths that contain custom themes here, relative to this directory.
 # html_theme_path = []

docs/source/custom_css.md

@@ -6,21 +6,24 @@ To apply custom CSS, you can add a `/custom/custom.css` file in the jupyter `con
 
 You can use a custom CSS file to modify default Jupyter styling.
 
-```
+```css
 /* Modify Jupyter Styles */
-#top-panel-wrapper, #jp-top-bar {
-  background-color: #aecad4!important;
+#top-panel-wrapper,
+#jp-top-bar {
+  background-color: #aecad4 !important;
 }
 
-#menu-panel-wrapper, #jp-MainMenu, #menu-panel {
-  background-color: #aecad4!important;
+#menu-panel-wrapper,
+#jp-MainMenu,
+#menu-panel {
+  background-color: #aecad4 !important;
 }
 
 .jp-NotebookPanel-toolbar {
-  background-color:  #aecad4!important;
+  background-color: #aecad4 !important;
 }
 .lm-MenuBar-content {
-  color: #02484d
+  color: #02484d;
 }
 ```
 
@@ -30,7 +33,7 @@ You can use a custom CSS file to modify default Jupyter styling.
 
 Another potential application for custom CSS is styling markdown.
 
-```
+```css
 /* Headings */
 h1,
 h2 {
@@ -44,7 +47,6 @@ h1 {
   margin-bottom: 40px;
   color: #10929e;
   text-decoration: underline;
-
 }
 
 h2 {