[Bonsai docs] Add version switcher to sidebar and update custom styles (#6004)

* Create brand.html

* Update custom.css for version switcher

* Update brand.html

src/bonsai/docs/_static/custom.css

@@ -1,5 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800&display=swap");
 @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700&display=swap');
+
 h1, h2, h3, h4 {
     font-weight: normal;
     color: #7cbf33;
@@ -8,22 +9,27 @@ h1, h2, h3, h4 {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
+
 a {
     text-decoration: none;
 }
+
 .toc-tree .reference:hover {
     color: #d98014;
 }
+
 .sidebar-brand-text {
     font-size: 1rem;
     text-align: center;
 }
+
 .blockbutton {
     max-width: 500px;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
 }
+
 .blockbutton a {
     display: block;
     padding-top: 15px;
@@ -35,12 +41,15 @@ a {
     color: #fff;
     text-decoration: none;
 }
+
 .blockbutton a:hover {
     background: #70ba35;
 }
+
 .highlight .hll {
     background-color: #ffc2;
 }
+
 section img {
     display: block;
     margin-left: auto;
@@ -48,6 +57,7 @@ section img {
     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
     border-radius: 5px;
 }
+
 .location-scene img {
     display: inline;
     border-radius: 0px;
@@ -55,9 +65,11 @@ section img {
     vertical-align: middle;
     margin-top: -3px;
 }
+
 .location-scene p {
     margin: 0.75rem;
 }
+
 .location-scene {
     border: 1px solid var(--color-admonition-title);
     background-color: var(--color-admonition-title-background);
@@ -65,24 +77,27 @@ section img {
     font-style: italic;
     color: var(--color-admonition-text);
 }
+
 img.transparent {
     width: auto;
     height: auto;
     box-shadow: none;
 }
+
 img.icon {
     width: auto;
     height: auto;
     border-radius: 0px;
     box-shadow: none;
     vertical-align: middle;
-    vertical-align: middle;
 }
+
 .content figure figcaption>p {
     font-style: italic;
     font-size: small;
     color: #808080;
 }
+
 span.menuselection {
     border: 1px solid var(--color-admonition-title);
     background-color: var(--color-admonition-title-background);
@@ -92,8 +107,6 @@ span.menuselection {
     padding-right: 3px;
 }
 
-
-
 /* Start section cards. */
 .toc-cards {
     display: grid;
@@ -102,3 +115,19 @@ span.menuselection {
     list-style-type: none;
     margin-bottom: 24px;
 }
+
+/* New styles for the version switcher */
+.doc-version-switcher {
+    display: block;
+    margin: 10px auto;
+    padding: 5px;
+    font-size: 1rem;
+    border-radius: 5px;
+    border: 1px solid #7cbf33;
+    background-color: #f7f7f6;
+    color: #2e3436;
+}
+
+.doc-version-switcher:hover {
+    border-color: #d98014;
+}