From a8162d803b21febcc3f221b8a9948316d7c8b3aa Mon Sep 17 00:00:00 2001
From: NeilBrommer <NeilBrommer@users.noreply.github.com>
Date: Tue, 12 Jun 2018 21:21:08 -0700
Subject: [PATCH] Make the social media links horizontal on mobile

---
 layouts/partials/navbar.html |  4 ++--
 static/css/main.css          | 20 ++++++++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index f06885b..59e38a8 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -17,7 +17,7 @@
 
 			</ul>
 
-			<ul class="navbar-nav">
+			<ul id="social-menu" class="navbar-nav">
 				{{ with .Site.Data.social }}
 					{{ with .github }}
 					<li class="nav-item">
@@ -35,7 +35,7 @@
 					{{ end }}
 				{{ end }}
 
-				<li class="nav-item ml-md-2">
+				<li class="nav-item ml-auto">
 					<button id="btnTheme" type="button" class="btn btn-dark" aria-pressed="false" autocomplete="off">
 						<span id="themeText" class="fas fa-moon"></span>
 					</button>
diff --git a/static/css/main.css b/static/css/main.css
index 6288bb3..9c313e2 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,8 +1,8 @@
 :root {
-	--main-color: #3f51b5; /* R:63, G:82, B:181 */
-	--main-dark-color: #002984;
-	--main-light-color: #757de8;
-	--accent-color: #FFC107;
+	--main-color: #3f51b5;       /* R:63,  G:82,  B:181 */
+	--main-dark-color: #002984;  /* R:0,   G:41,  B:132 */
+	--main-light-color: #757de8; /* R:117, G:125, B:232 */
+	--accent-color: #FFC107;     /* R:255, G:193, B:7   */
 }
 
 body {
@@ -29,6 +29,10 @@ body {
 		padding-bottom: 0.25rem;
 		border-bottom: white 0.25rem solid;
 	}
+
+	#btnTheme {
+		margin-left: 0.5rem;
+	}
 }
 
 @media screen and (max-width: 767px) {
@@ -40,6 +44,14 @@ body {
 	.navbar-nav .nav-item {
 		padding-left: 1rem;
 	}
+
+	#social-menu {
+		flex-direction: row;
+	}
+
+	#social-menu .nav-item:not(:first-child) {
+		padding-left: 2rem;
+	}
 }
 
 .navbar {