Add overly colorful favicons; tweak site title.

Courtesy http://realfavicongenerator.net/.

_includes/favicons.html

@@ -0,0 +1,19 @@
+<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
+<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
+<link rel="icon" type="image/png" href="/favicon-194x194.png" sizes="194x194">
+<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
+<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
+<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
+<link rel="manifest" href="/manifest.json">
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="msapplication-TileImage" content="/mstile-144x144.png">
+<meta name="theme-color" content="#ffffff">

_includes/head.html

@@ -2,10 +2,12 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="chrome=1">
   <title>{{ site.title }}</title>
+  <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="/css/main.css">
   <meta name="viewport" content="width=device-width">
   <!--[if lt IE 9]>
   <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   {% include google-analytics.html %}
+  {% include favicons.html %}
 </head>

_layouts/home.html

@@ -3,7 +3,7 @@ layout: master-bare
 ---
 <div class="wrapper">
   <header>
-    <h1>{{ site.titleMarkup }}</h1>
+    <h1><img src="android-chrome-48x48.png" class="logo">{{ site.titleMarkup }}</h1>
     <p>A Swiss Army Knife for <strong>résumés and CVs</strong><br>For Windows, OS X, Linux, and Node.js</p>
     <p><strong>Install</strong> with NPM:<br><br><code>[sudo] npm install hackmyresume -g</code></p>
     <p><strong>Feed me</strong>: One or more <a href="https://github.com/fluentdesk/FRESCA">FRESH</a> or <a href="https://github.com/json-resume/json-resume-schema">JSON Resume</a> format résumés.</p>

_sass/_hmr.scss

@@ -31,12 +31,25 @@ header, section, img {
   box-sizing: border-box;
 }
 
-img {
+img.main {
   border: solid 10px #000;
   border-radius: 10px;
   margin: 0 20px;
 }
 
+img.logo {
+  position: absolute;
+  width: 24px;
+  top: 4px;
+  left: -5px;
+}
+
+h1 {
+  position: relative;
+  padding-left: 17px;
+  font-family: $title-font;
+}
+
 @media print, screen and (max-width: 960px) {
   header {
     width: auto;

_sass/_minimal.scss

@@ -3,7 +3,7 @@
 body {
   background-color: #fff;
   padding:50px;
-  font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font: 14px/1.5 $base-font;
   color:#727272;
   font-weight:400;
 }

browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="/mstile-70x70.png"/>
+      <square150x150logo src="/mstile-150x150.png"/>
+      <square310x310logo src="/mstile-310x310.png"/>
+      <wide310x150logo src="/mstile-310x150.png"/>
+      <TileColor>#da532c</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

css/main.scss

@@ -3,5 +3,8 @@
 ---
 @charset "utf-8";
 
+$base-font: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$title-font: 'Open Sans Condensed', $base-font;
+
 // Import partials from `sass_dir` (defaults to `_sass`)
 @import "minimal", "syntax-highlighting", "hmr";

index.html

@@ -1,4 +1,4 @@
 ---
 layout: home
 ---
-<img src="img/hackmyresume_cli.png">
+<img src="img/hackmyresume_cli.png" class="main">

manifest.json

@@ -0,0 +1,41 @@
+{
+	"name": "HackMyResume",
+	"icons": [
+		{
+			"src": "\/android-chrome-36x36.png",
+			"sizes": "36x36",
+			"type": "image\/png",
+			"density": 0.75
+		},
+		{
+			"src": "\/android-chrome-48x48.png",
+			"sizes": "48x48",
+			"type": "image\/png",
+			"density": 1
+		},
+		{
+			"src": "\/android-chrome-72x72.png",
+			"sizes": "72x72",
+			"type": "image\/png",
+			"density": 1.5
+		},
+		{
+			"src": "\/android-chrome-96x96.png",
+			"sizes": "96x96",
+			"type": "image\/png",
+			"density": 2
+		},
+		{
+			"src": "\/android-chrome-144x144.png",
+			"sizes": "144x144",
+			"type": "image\/png",
+			"density": 3
+		},
+		{
+			"src": "\/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image\/png",
+			"density": 4
+		}
+	]
+}

safari-pinned-tab.svg

@@ -0,0 +1,39 @@
+<?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="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2469 5056 c-2 -2 -20 -6 -39 -9 -94 -15 -191 -59 -285 -130 -107
+-81 -186 -194 -231 -331 -23 -70 -27 -98 -28 -206 -1 -105 3 -136 22 -194 43
+-128 94 -210 186 -299 85 -83 215 -154 313 -172 16 -3 39 -7 53 -10 78 -17
+222 -5 315 27 470 158 624 742 292 1104 -136 148 -309 224 -510 224 -46 0 -86
+-2 -88 -4z"/>
+<path d="M1065 4518 c-32 -8 -306 -274 -331 -321 -35 -66 -41 -59 502 -605
+l504 -506 0 -532 0 -532 -433 -433 c-239 -239 -439 -444 -445 -456 -18 -33
+-14 -77 8 -105 48 -61 305 -308 321 -309 24 -2 45 -2 63 0 7 0 120 107 250
+237 l236 237 0 -529 c0 -507 1 -530 20 -561 14 -23 29 -34 56 -39 28 -5 415
+-9 508 -5 10 1 33 16 51 34 l33 33 0 559 c1 308 1 602 1 653 l1 93 153 -3 152
+-3 1 -646 c1 -646 1 -647 23 -677 13 -18 34 -33 54 -38 17 -4 141 -7 274 -7
+261 0 276 3 305 55 9 18 12 147 13 540 0 284 3 519 6 522 3 3 106 -94 229
+-215 211 -208 258 -248 288 -243 6 1 21 2 33 3 21 1 307 279 328 318 6 12 11
+38 11 58 0 35 -12 49 -182 217 -101 99 -302 298 -448 442 l-265 261 0 539 0
+538 440 437 c242 240 470 468 506 507 76 82 87 115 56 167 -25 42 -303 317
+-322 318 -8 1 -22 2 -30 2 -8 0 -23 -1 -32 -2 -10 0 -221 -204 -469 -452
+l-452 -451 -518 -1 -519 0 -450 450 c-292 291 -459 452 -476 455 -13 2 -38 1
+-54 -4z"/>
+<path d="M875 3229 c-207 -33 -403 -176 -498 -364 -56 -112 -72 -185 -71 -326
+2 -179 67 -332 199 -464 136 -136 309 -206 497 -199 46 1 94 5 108 8 14 3 39
+9 55 12 48 10 148 58 212 102 123 84 231 240 270 392 22 86 22 244 -1 330 -37
+142 -124 278 -234 365 -55 44 -176 111 -217 120 -11 2 -40 9 -65 16 -57 14
+-190 18 -255 8z"/>
+<path d="M4020 3224 c-262 -49 -470 -246 -534 -507 -57 -230 11 -472 180 -643
+167 -169 424 -239 654 -179 182 47 372 204 442 365 19 43 42 102 45 115 56
+258 -9 498 -182 664 -166 160 -384 227 -605 185z"/>
+</g>
+</svg>