Merge pull request #95 from thelounge/astorije/navbar

Improve markup, reduce height of navbar, use GitHub logo, add a link to themes
thelounge · Oct 26, 2018 · 52fbc6a · 52fbc6a
2 parents d28fded + 05dcc38
commit 52fbc6a
Show file tree

Hide file tree

Showing 9 changed files with 2,712 additions and 33 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -10,25 +10,25 @@
 	<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">
 
 	</head>
 	<body>
 
 	<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">

diff --git a/css/font-awesome.min.css b/css/font-awesome.min.css
diff --git a/css/style.css b/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;
 	}

diff --git a/fonts/FontAwesome.otf b/fonts/FontAwesome.otf
diff --git a/fonts/fontawesome-webfont.eot b/fonts/fontawesome-webfont.eot
diff --git a/fonts/fontawesome-webfont.svg b/fonts/fontawesome-webfont.svg
diff --git a/fonts/fontawesome-webfont.ttf b/fonts/fontawesome-webfont.ttf
diff --git a/fonts/fontawesome-webfont.woff b/fonts/fontawesome-webfont.woff
diff --git a/fonts/fontawesome-webfont.woff2 b/fonts/fontawesome-webfont.woff2