updated logo to use svg

public/assets/css/general.css

@@ -436,9 +436,8 @@ table {
 	border-bottom: 0.5px solid #cacaca;
 }
 
-.nav-bar-logo {
+.nav-bar--left {
-	vertical-align: text-bottom;
+	align-self: center;
-	height: 2rem;
 }
 
 .nav-bar-tagline {

public/assets/css/mediaQueries.css

@@ -1,20 +1,11 @@
-
-@media (max-width: 1200px) {
-
-	.nav-bar-title--tagline {
-		font-size: small;
-	}
-}
-
 @media (max-width: 1050px) {
 
-	.nav-bar-title--tagline {
+	.nav-bar--center {
 		display: none;
 	}
 
 }
 
-
 @media (max-width: 750px ) {
 
 	body, button, input, textarea, label, select, option, p, h3 {
@@ -37,34 +28,15 @@
 		margin-top: 1em;
 	}
 
-	.nav-bar-title-section {
-		width:100%;
-		padding: 0px;
-	}
-
-	.nav-bar-title {
-		width: calc(25% - 2rem);
-		padding: 1rem;
-	}
-
 	.nav-bar-logo {
-		height: 1.5rem;
+		height: 1rem;
-	}
-
-	.nav-bar-link-section {
-		width: 75%;
-		padding: 0px;
 	}
 
 	.nav-bar-link {
-		float: left;
+		font-size: small;
-		text-align: center;
+		padding: 1rem 0.5rem 1rem 0.5rem;
-		width: calc(25% - 2rem);
-		padding: 1rem;
-		margin: 0px;
 	}
 
-
 }
 
 @media (max-width: 500px) {
@@ -73,10 +45,17 @@
 		height: 1rem;
 	}
 
-	.nav-bar-link {
+	.row--padded {
-		font-size: small;
+		padding: 1rem;
-		width: calc(25% - 1rem);
+	}
-		padding: 1rem 0.5rem 1rem 0.5rem;
+
+	.row--short {
+		padding-top: 0px;
+		padding-bottom: 0px;
+	}
+
+	.row--margined {
+		margin: 1rem;
 	}
 
 	body, button, input, textarea, label, select, option, p, h3, .fine-print {

public/assets/icon/logo.svg

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="80px" height="31px" viewBox="0 0 80 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
-    <title>Group 17</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="About" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Publish-Form-V2-(filled)" transform="translate(-42.000000, -23.000000)">
-            <g id="Group-17" transform="translate(42.000000, 22.000000)">
-                <text id="Spee&lt;h" font-family="Graphik-Light, Graphik" font-size="24" font-weight="300" fill="#000000">
-                    <tspan x="0" y="20">Spee&lt;h</tspan>
-                </text>
-                <g id="Group-16" transform="translate(0.000000, 30.000000)" stroke-linecap="square">
-                    <path d="M0.5,1.5 L15.5,1.5" id="Line-8" stroke="#09F911"></path>
-                    <path d="M16.5,1.5 L31.5,1.5" id="Line-8-Copy" stroke="#029D74"></path>
-                    <path d="M32.5,1.5 L47.5,1.5" id="Line-8-Copy-2" stroke="#E35BD8"></path>
-                    <path d="M48.5,1.5 L63.5,1.5" id="Line-8-Copy-3" stroke="#4156C5"></path>
-                    <path d="M64.5,1.5 L79.5,1.5" id="Line-8-Copy-4" stroke="#635688"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

views/partials/navBar.handlebars

@@ -1,8 +1,25 @@
 <div class="row row--wide nav-bar">
     <div class="row row--padded row--short flex-container flex-container--row flex-container--align-center">
-        <div class="nav-bar--left">
+        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="24px" viewBox="0 0 80 31" enable-background="new 0 0 80 31" xml:space="preserve" class="nav-bar-logo">
-            <a href="/"><img class="nav-bar-logo" src="/assets/icon/logo.svg" alt="spee.ch"/></a>
+            <a href="/">
-        </div>
+            <title>Logo</title>
+            <desc>Spee.ch logo</desc>
+            <g id="About">
+                <g id="Publish-Form-V2-_x28_filled_x29_" transform="translate(-42.000000, -23.000000)">
+                    <g id="Group-17" transform="translate(42.000000, 22.000000)">
+                        <text transform="matrix(1 0 0 1 0 20)" font-size="27">Spee&lt;h</text>
+                        <g id="Group-16" transform="translate(0.000000, 30.000000)">
+                            <path id="Line-8" fill="none" stroke="#09F911" stroke-linecap="square" d="M0.5,1.5h15"/>
+                            <path id="Line-8-Copy" fill="none" stroke="#029D74" stroke-linecap="square" d="M16.5,1.5h15"/>
+                            <path id="Line-8-Copy-2" fill="none" stroke="#E35BD8" stroke-linecap="square" d="M32.5,1.5h15"/>
+                            <path id="Line-8-Copy-3" fill="none" stroke="#4156C5" stroke-linecap="square" d="M48.5,1.5h15"/>
+                            <path id="Line-8-Copy-4" fill="none" stroke="#635688" stroke-linecap="square" d="M64.5,1.5h15"/>
+                        </g>
+                    </g>
+                </g>
+            </g>
+            </a>
+        </svg>
         <div class="nav-bar--center">
             <span class="nav-bar-tagline">Open-source, decentralized image and video sharing.</span>
         </div>
@@ -15,7 +32,7 @@
                 <option value="VIEW">View</option>
                 <option value="LOGOUT">Logout</option>
             </select>
-            <a id="nav-bar-login-link" class="nav-bar-link--last" href="/login" {{#if user}}style="display:none"{{/if}}>Channel</a>
+            <a id="nav-bar-login-link" class="nav-bar-link nav-bar-link--last" href="/login" {{#if user}}style="display:none"{{/if}}>Channel</a>
         </div>
     </div>
 </div>