added subtitle to nav bar

public/assets/css/general.css

@@ -361,7 +361,7 @@ table {
 	z-index: 1;
 }
 
-.nav-bar-logo, .nav-bar-title, .nav-bar-link {
+.nav-bar-logo, .nav-bar-title, .nav-bar-link, .nav-bar-subtitle {
 	padding: 2rem 0.5rem 1.5rem 0.5rem;
 	display: inline-block;
 	color: black;
@@ -372,6 +372,15 @@ table {
 	vertical-align: top;
 }
 
+.nav-bar-subtitle {
+	font-size: small;
+	color:grey;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translateX(-50%) translateY(-50%);
+}
+
 .nav-bar-link {
 	border-bottom: 2px solid white;
 }

public/assets/css/mediaQueries.css

@@ -17,6 +17,29 @@
 	}
 }
 
+@media (max-width: 850px) {
+	.nav-bar-title, .nav-bar-subtitle {
+		padding-bottom: 0px;
+	}
+
+	.nav-bar-subtitle {
+		left: auto;
+		right: 0px;
+		top: auto;
+		transform: none;
+		padding-right: 2rem;
+	}
+
+	.nav-bar-link-section {
+		position: relative;
+		padding-left: 0px;
+	}
+
+	.nav-bar {
+		height: 8rem;
+	}
+}
+
 @media (max-width: 750px ) {
 
 	.column--med-10 {
@@ -32,10 +55,10 @@
 @media (max-width: 475px) {
 
 	.nav-bar {
-		height: 8rem;
+		height: 12rem;
 	}
 
-	.nav-bar-title {
+	.nav-bar-title, .nav-bar-subtitle {
 		padding-bottom: 0px;
 	}
 
@@ -44,6 +67,14 @@
 		padding-left: 0px;
 	}
 
+	.nav-bar-subtitle {
+		position: relative;
+		display: inline-block;
+		left: auto;
+		top: auto;
+		transform: none;
+	}
+
 	.row--full-height {
 
 		height: calc(100% - 11rem);

views/partials/topBar.handlebars

@@ -1,6 +1,7 @@
 <div class="row-wide nav-bar">
     <div class="nav-bar-title-section">
         <a href="/"><span class="nav-bar-title">spee&lt;h</span></a><span class="nav-bar-title nav-bar-title--superscript">(beta)</span>
+        <span class="nav-bar-subtitle">Open-source, decentralized image and video hosting.</span>
         <div class="nav-bar-link-section">
             <a class="nav-bar-link" href="/">Upload</a>
             <a class="nav-bar-link" href="/popular">Popular</a>