[Experimentation] Add navbar logo (#111)

* Add navbar logo

* Remove extra spacing

* Switch to SVG for compatibility

Use SVG instead of WEBP, any device too old to render it can't run the app anyways.

src/.vuepress/config.js

@@ -10,6 +10,7 @@ module.exports = {
 		repo: 'inorichi/tachiyomi',
 		docsRepo: 'tachiyomiorg/website',
 		docsDir: 'src',
+		logo: '/assets/media/logo.svg',
 		editLinks: true,
 		editLinkText: 'Help us improve this page',
 		nav: require('./config/nav'),

src/.vuepress/public/assets/media/logo.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="288.000000pt" height="288.000000pt" viewBox="0 0 288.000000 288.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,288.000000) scale(0.100000,-0.100000)"
+fill="#2E84BF" stroke="none">
+<path d="M1412 2513 l-183 -3 8 -98 c4 -53 8 -119 8 -147 l0 -50 -410 0 -410
+0 3 -179 3 -179 67 7 c152 14 1015 18 1462 7 256 -7 472 -14 480 -16 13 -4 15
+20 15 178 l0 182 -383 -4 c-210 -2 -398 0 -418 3 l-35 7 3 150 c3 128 1 149
+-12 147 -8 -1 -97 -4 -198 -5z"/>
+<path d="M845 1744 c-128 -50 -160 -67 -158 -81 1 -10 22 -73 47 -140 58 -153
+124 -384 166 -578 18 -82 34 -151 35 -153 2 -2 83 25 182 60 l179 63 -12 60
+c-35 168 -248 836 -267 834 -7 -1 -84 -30 -172 -65z"/>
+<path d="M1781 1643 c-104 -417 -229 -832 -271 -901 l-19 -31 -173 -3 c-200
+-3 -913 9 -943 16 -19 5 -20 0 -20 -180 l0 -186 50 6 c28 3 518 9 1090 12
+l1040 7 0 176 0 176 -85 -7 c-47 -3 -195 -7 -329 -7 -191 -1 -242 2 -238 12 3
+6 22 50 42 97 65 152 296 863 284 874 -4 4 -326 94 -365 103 -20 4 -24 -7 -63
+-164z"/>
+</g>
+</svg>

src/.vuepress/styles/index.styl

@@ -114,10 +114,20 @@ main.home
 		font-size 1.125em
 		margin-top 0.5em
 
+// Navbar Changes
+.navbar
+	img.logo
+		/* Bring navbar-name closer to navbar-logo */
+		margin-right 0
+	.site-name.can-hide
+		/* Display navbar-name even for small screens */
+		@media (max-width: $MQMobile)
+			display inherit
+
 // Center align class
 .centered
 	text-align center
 
 // Bold class
 .bold
-	font-weight bold
+	font-weight bold