fix #18: set GitHub panel color to match on mobile/small screens (#19)

* fix #18: set gh panel color to match on mobile/small screens

* fix: adjust text color for active parent item in small screen sidebar

* Fix the active hover color for active parent item in small screen sidebar
Also needed manual setting for this part or it stays constant

---------

Co-authored-by: Anna Viklund <annamariaviklund@gmail.com>

Author: egrace479

docs/stylesheets/extra.css

@@ -42,6 +42,15 @@ body {
   --md-accent-fg-color:         var(--color-turquoise);
 }
 
+/* GitHub panel color (mobile and small screen, issue 18) */
+.md-nav__source {
+  background-color: var(--md-primary-fg-color);
+}
+
+.md-source {
+  background-color: var(--md-primary-fg-color);
+}
+
 /* Set admonition (Note) colors to stand out better */
 .md-typeset .admonition.note, .md-typeset details.note {
     border-color: var(--color-turquoise);
@@ -117,3 +126,16 @@ body {
 [data-md-color-scheme="slate"] .md-nav .md-nav__link--active:hover {
   color: var(--color-turquoise);
 }
+
+/* Small screen adjustments */
+@media screen and (max-width: 76.2344em) {
+  /* Dark mode custom active parent color (side panel) */
+  [data-md-color-scheme="slate"] .md-nav .md-nav__item--active > .md-nav__link {
+    color: var(--color-gb-contrast);
+  }
+  
+  /* Dark mode custom active parent hover color (side panel) */
+  [data-md-color-scheme="slate"] .md-nav .md-nav__item--active:hover > .md-nav__link {
+    color: var(--color-turquoise);
+  }
+}