From dfd4fbfa2f5b33348e48e488f7fbfa4f76c14d1a Mon Sep 17 00:00:00 2001
From: MagicalCodeMonkey <mwoodru@gmail.com>
Date: Tue, 31 Mar 2020 10:42:55 -0400
Subject: [PATCH] Rearrange CSS and fix some mobile styling

---
 synclounge/css/synclounge.css | 57 +++++++++++++++++++++++++----------
 1 file changed, 41 insertions(+), 16 deletions(-)

diff --git a/synclounge/css/synclounge.css b/synclounge/css/synclounge.css
index 74a3406..36c831d 100644
--- a/synclounge/css/synclounge.css
+++ b/synclounge/css/synclounge.css
@@ -8,14 +8,6 @@ main {
   background: linear-gradient(180deg, #1f1c2c, #182848);
 }
 
-a {
-  color: #ffc107;
-}
-
-.md-tabs__link:hover, a:hover {
-  color: #ffc107;
-}
-
 .title-page-text {
   color: #ffc107;
   font-size: 1.25rem;
@@ -25,6 +17,15 @@ a {
   position: relative;
 }
 
+/* Fix colors for text, links, etc. */
+a {
+  color: #ffc107;
+}
+
+.md-tabs__link:hover, a:hover {
+  color: #ffc107;
+}
+
 .md-typeset h1, h1,
 .md-typeset h2, h2,
 .md-typeset h3, h3,
@@ -33,7 +34,8 @@ a {
   color: #ffc107;
 }
 
-.md-typeset .md-content__button, .md-typeset .md-content__icon {
+.md-typeset .md-content__button,
+.md-typeset .md-content__icon {
   color: #ffc107;
 }
 
@@ -47,26 +49,49 @@ a {
   color: #ffc107;
 }
 
-.md-tabs__link--active, .md-nav__item .md-nav__link--active, .md-nav__link--active, .md-nav__link:active {
+/* Fix nav link color colors */
+.md-nav__item .md-nav__link--active,
+.md-tabs__link--active,
+.md-nav__link--active,
+.md-nav__link:active,
+.md-nav--primary .md-nav__item--active>.md-nav__link {
   color: #ffc107;
   font-weight: bold;
 }
 
-.md-header-nav__topic {
-  margin-top: 6px;
-}
-
+/* Fix nav link color colors */
 .md-nav__link[data-md-state=blur] {
   color: #ffc107;
 }
 
+/* Fix code block colors */
 .md-typeset code, .md-typeset pre, code {
   background-color: hsla(0,0%,50.5%,.5);
   box-shadow: 0.29412em 0 0 hsla(0,0%,50.5%,.5), -0.29412em 0 0 hsla(0,0%,50.5%,.5);
   color: #ffc107;
 }
 
-.md-header-nav__button.md-logo img {
+/* Fix nav title position */
+.md-header-nav__topic {
+  margin-top: 6px;
+}
+
+/* Fix logo sizing */
+.md-header-nav__button.md-logo img,
+/* Fix mobile navigation logo */
+.md-nav__title .md-nav__button.md-logo img {
   height: 36px;
   width: auto;
-}
\ No newline at end of file
+}
+
+/* Fix mobile stylinf */
+@media screen and (max-width: 76.1875em) {
+  .md-nav--primary .md-nav__title,
+  .md-nav--primary .md-nav__title~.md-nav__list {
+    background-color: black;
+    color: white;
+  }
+  .md-nav {
+    background-color: transparent;
+  }
+}