Improve markup, reduce height of navbar, use GitHub logo, add a link to themes

_layouts/default.html

@@ -10,6 +10,7 @@
 	<meta name="description" content="{{ site.description }}">
 
 	<link rel="stylesheet" href="{{ site.baseurl }}/css/bootstrap.css">
+	<link rel="stylesheet" href="{{ site.baseurl }}/css/font-awesome.min.css">
 	<link rel="stylesheet" href="{{ site.baseurl }}/css/style.css">
 
 	<link rel="shortcut icon" href="/img/favicon.png">
@@ -20,18 +21,17 @@
 
 	<nav id="nav">
 		<div class="container">
-			<div class="row">
-				<div class="col-xs-3">
-					<a href="/" class="logo">The Lounge</a>
-				</div>
-				<div class="col-xs-9 right">
-					<a href="/docs">Documentation</a>
-					<a href="https://github.com/thelounge/lounge" class="github">
-						GitHub
-					</a>
-					<!--<a href="/blog">Blog</a>-->
-				</div>
-			</div>
+			<a href="/" class="logo">
+				<img alt="The Lounge" src="/assets/logos/logo/TL_White&Yellow_Horizontal_logotype_Transparent_Bg/TL_White&Yellow_Horizontal_logotype_Transparent_Bg.svg">
+			</a>
+
+			<ul class="nav-links">
+				<li><a href="/docs">Documentation</a></li>
+				<li><a href="https://www.npmjs.com/search?q=keywords%3Athelounge-theme">Themes</a></li>
+				<li><a href="https://github.com/thelounge" title="GitHub Organization for The Lounge">
+					<i class="fa fa-github fa-2x" aria-hidden="true"></i>
+				</a></li>
+			</ul>
 		</div>
 	</nav>
 	<div id="content">

css/style.css

@@ -62,34 +62,41 @@ pre code {
 #nav {
 	background: #455164;
 	color: #bcc4d3;
-	padding: 10px 0;
+}
+#nav ul.nav-links {
+	float: right;
+	margin: 0;
+	padding: 0;
+}
+#nav ul.nav-links li {
+	float: left;
+	list-style: none;
+	margin: 0;
 }
 #nav a {
+	display: inline-block;
+	height: 50px;
+	line-height: 50px;
+	padding: 0 10px;
 	font-weight: 700;
+	color: inherit;
+}
+#nav a i.fa {
+	line-height: 50px;
 }
 #nav a:hover {
-	border-color: #fff;
 	color: #fff;
 }
-#nav a + a {
-	margin-left: 26px;
-}
-#nav .row {
-	padding: 20px 0;
-}
 #nav .logo {
-	color: #fff;
-	font-size: 22px;
-	line-height: 19px;
-}
-#nav .right {
-	text-align: right;
+	line-height: 1;
+	margin-left: -10px;
 }
-#nav .github {
-	border: 2px solid #bcc4d3;
-	border-radius: 3px;
-	padding: 6px 12px;
+
+#nav .logo img {
+	height: 100%;
+	padding: 5px 0;
 }
+
 #splash {
 	background: #455164;
 	color: #fff;
@@ -263,9 +270,6 @@ pre code {
 	}
 }
 @media (max-width: 480px) {
-	#nav .right a:first-child {
-		display: none;
-	}
 	#splash .row {
 		padding-top: 0;
 	}