use separate pd client

res/include/img/icons/medium.svg

@@ -0,0 +1,7 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 126.66667" height="24" width="24" xml:space="preserve" version="1.1" id="svg2">
+	<g transform="matrix(1.3333333,0,0,-1.3333333,0,126.66667)" id="g10">
+		<g transform="scale(0.1)" id="g12">
+			<path id="path14" fill="#{{.Style.InputTextColor.RGB}}" style="fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 1200,810 -47.46,0 C 1134.92,810 1110,784.582 1110,768.309 l 0,-589.809 c 0,-16.293 24.92,-38.5 42.54,-38.5 l 47.46,0 0,-140 -430,0 0,140 90,0 0,620 -4.41,0 L 645.422,0 482.707,0 275.25,760 270,760 270,140 360,140 360,0 0,0 0,140 46.0977,140 C 65.082,140 90,162.207 90,178.5 l 0,589.809 C 90,784.582 65.082,810 46.0977,810 L 0,810 l 0,140 450.164,0 147.797,-550 4.066,0 149.164,550 448.809,0 0,-140"/>
+		</g>
+	</g>
+</svg>

res/include/img/icons/patreon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 100 100">
+  <g fill="#{{.Style.InputTextColor.RGB}}" fill-rule="evenodd">
+    <path d="M64.1102,0.1004 C44.259,0.1004 28.1086,16.2486 28.1086,36.0986 C28.1086,55.8884 44.259,71.989 64.1102,71.989 C83.9,71.989 100,55.8884 100,36.0986 C100,16.2486 83.9,0.1004 64.1102,0.1004"/>
+    <polygon points=".012 95.988 17.59 95.988 17.59 .1 .012 .1"/>
+  </g>
+</svg>

res/include/style/layout.css

@@ -48,6 +48,9 @@
 .icon.small {
 	font-size: 16px;
 }
+a > svg {
+	vertical-align: middle;
+}
 
 /* Page rendering configuration */
 html, body {

res/include/style/viewer.css

@@ -216,6 +216,7 @@
 	top: 0;
 	width: 8em;
 	height: auto;
+	text-align: center;
 }
 
 .toolbar_button{