From d546f6f96a01ea2b5aa59323bfe6530ae55bf20b Mon Sep 17 00:00:00 2001
From: Marcel Schneider <marcel@webschneider.org>
Date: Wed, 29 Mar 2017 11:29:49 +0200
Subject: [PATCH] Change font to system fonts

---
 static/css/style.css | 653 ++++++++++++++++++++++---------------------
 1 file changed, 328 insertions(+), 325 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 6cfe83c..a2ca8fd 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -4,35 +4,35 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
 
 /* Clearfix */
 .clearfix:after {
-	content: "";
-	display: table;
-	clear: both;
+    content: "";
+    display: table;
+    clear: both;
 }
 .hidden { display: none; }
 
 /* Icons */
 @font-face {
-	font-family: 'icons';
-		src: url('../fonts/icons.eot');
-		src: url('../fonts/icons.eot#iefix') format('embedded-opentype'),
-		url('../fonts/icons.woff') format('woff'),
-		url('../fonts/icons.ttf') format('truetype'),
-		url('../fonts/icons.svg#icons') format('svg');
-	font-weight: normal;
-	font-style: normal;
+    font-family: 'icons';
+    src: url('../fonts/icons.eot');
+    src: url('../fonts/icons.eot#iefix') format('embedded-opentype'),
+    url('../fonts/icons.woff') format('woff'),
+    url('../fonts/icons.ttf') format('truetype'),
+    url('../fonts/icons.svg#icons') format('svg');
+    font-weight: normal;
+    font-style: normal;
 }
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
-	font-family: "icons";
-	font-style: normal;
-	font-weight: normal;
-	speak: none;
-	display: inline-block;
-	text-decoration: inherit;
-	text-align: center;
-	font-variant: normal;
-	text-transform: none;
-	line-height: 1em;
+    font-family: "icons";
+    font-style: normal;
+    font-weight: normal;
+    speak: none;
+    display: inline-block;
+    text-decoration: inherit;
+    text-align: center;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1em;
 }
 .icon-facebook:before { content: '\e802'; }
 .icon-facebook-squared:before { content: '\e800'; }
@@ -44,115 +44,117 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
 
 /* Spacing */
 .post h1, h3, h4, h5, p, .post-body ul, pre {
-margin-bottom: 20px;
+    margin-bottom: 20px;
 }
 
 /* Base */
 html, body { height: 100%; }
 
 body {
-	font:16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
-	color: #666;
-	-webkit-font-smoothing: antialiased;
-	text-rendering: optimizeLegibility;
+    /*font:16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;*/
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    font-size: 16px;
+    color: #666;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
 }
 
 h1 {
-	font-size: 30px;
-	letter-spacing: -1px;
-	color: #222;
-	font-weight: bold;
+    font-size: 30px;
+    letter-spacing: -1px;
+    color: #222;
+    font-weight: bold;
 }
 
 h2 {
-	font: italic 19px/1.3em Georgia,serif;
-	color: #bbb;
+    font: italic 19px/1.3em Georgia,serif;
+    color: #bbb;
 }
 
 .profile #wrapper {
-	padding: 100px 40px 0px;
-	max-width: 600px;
-	margin: 0 auto;
+    padding: 100px 40px 0px;
+    max-width: 600px;
+    margin: 0 auto;
 }
 
 .profile #header {
-	padding-bottom: 40px;
-	text-align: center;
-	position: relative;
+    padding-bottom: 40px;
+    text-align: center;
+    position: relative;
 }
 
 .profile #avatar {
-	display: inline-block;
-	width: 80px;
-	height: 80px;
-	border-radius: 50%;
-	margin-bottom: 20px;
+    display: inline-block;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    margin-bottom: 20px;
 }
 
 .profile h1 {
-	font-weight: 400;
-	letter-spacing: 0px;
-	font-size: 20px;
-	color: #222;
+    font-weight: 400;
+    letter-spacing: 0px;
+    font-size: 20px;
+    color: #222;
 }
 
 .profile h2 {
-	font-size: 20px;
-	  font-weight: 300;
-	  color: #aaa;
-	  margin-top: 10px;
-	  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	  font-style: normal;
+    font-size: 20px;
+    font-weight: 300;
+    color: #aaa;
+    margin-top: 10px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    font-style: normal;
 
 }
 
 nav.main-nav {
-	padding: 20px 20px 0;
+    padding: 20px 20px 0;
 
-	/*max-width: 600px;*/
-	/*width:100%;*/
-	background: #fff;
-	background: rgba(255,255,255,.90);
-	margin: 0 auto;
-	text-align: right;
-	/*position: fixed;*/
-	z-index: 100;
+    /*max-width: 600px;*/
+    /*width:100%;*/
+    background: #fff;
+    background: rgba(255,255,255,.90);
+    margin: 0 auto;
+    text-align: right;
+    /*position: fixed;*/
+    z-index: 100;
 }
 
 nav.main-nav a {
-	top: 8px;
-	right: 6px;
-	padding: 8px 12px;
-	color: #5badf0;
-	font-size: 13px;
-	/*font-weight: bold;*/
-	line-height: 1.35;
-	border-radius: 3px;
+    top: 8px;
+    right: 6px;
+    padding: 8px 12px;
+    color: #5badf0;
+    font-size: 13px;
+    /*font-weight: bold;*/
+    line-height: 1.35;
+    border-radius: 3px;
 
 }
 nav.main-nav a.cta {
-	background: #5badf0;
-	color: #fff;
-	margin-left: 12px;
+    background: #5badf0;
+    color: #fff;
+    margin-left: 12px;
 }
 
 #wrapper {
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 60px 40px 100px 40px;
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 60px 40px 100px 40px;
 }
 
 #wrapper.home {
-	max-width: 600px;
-	margin: 0 auto;
-	padding: 0px 40px 20px 40px;
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 0px 40px 20px 40px;
 }
 
 .home #avatar {
-	float: right;
-	width: 40px;
-	height: 40px;
-	border-radius: 50%;
+    float: right;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
 }
 
 /* Typography */
@@ -162,9 +164,9 @@ a,
 #post-list a:hover,
 #post-list li:hover .dates,
 #title:hover {
-	text-decoration: none;
-	color: #5badf0;
-	color: #5694f1;
+    text-decoration: none;
+    color: #5badf0;
+    color: #5694f1;
 }
 
 p a { color: #5694f1; }
@@ -172,88 +174,89 @@ p a { color: #5694f1; }
 /*Transitions*/
 a,
 #post-nav a,
-#post-list a	{
-	-webkit-transition: all 0.15s ease;
-	-moz-transition: all 0.15s ease;
-	-ms-transition: all 0.15s ease;
-	-o-transition: all 0.15s ease;
-	transition: all 0.15s ease;
+#post-list a    {
+    -webkit-transition: all 0.15s ease;
+    -moz-transition: all 0.15s ease;
+    -ms-transition: all 0.15s ease;
+    -o-transition: all 0.15s ease;
+    transition: all 0.15s ease;
 }
 
-ul 	{ margin:0; padding:0; margin-bottom: 20px; }
-li	{ list-style-type:circle; list-style-position:inside; }
+ul  { margin:0; padding:0; margin-bottom: 20px; }
+li  { list-style-type:circle; list-style-position:inside; }
 
 /* Line Height */
 #post-body, p { line-height:1.7; }
 
 b, strong { font-weight: 500;
-  color: #1E2025; }
+color: #1E2025; }
 em, i { font-style: italic; }
 
 #title {
-	display: inline-block;
-	line-height: 100%;
-	font-weight: 500;
-	font-size: 19px;
-	margin: 0;
-	padding-bottom: 20px;
+    display: inline-block;
+    line-height: 100%;
+    font-weight: 500;
+    font-size: 19px;
+    margin: 0;
+    padding-bottom: 20px;
 }
 
 .description {
-	float: right;
-	font: italic 14px/1.4em Georgia,serif;
-	color: #aaa;
+    float: right;
+    font: italic 14px/1.4em Georgia,serif;
+    color: #aaa;
 }
 
 
 
 .home h1 {
-	font-size: 30px;
-	letter-spacing: -1px;
-	color: #222;
-	font-weight: bold;
+    font-size: 30px;
+    letter-spacing: -1px;
+    color: #222;
+    font-weight: bold;
 }
 
 .home h2 {
-	font: italic 19px/1.3em Georgia,serif;
-	color: #bbb;
+    font: italic 19px/1.3em Georgia,serif;
+    color: #bbb;
 }
 
 .post header {
-	text-align:center;
+    text-align:center;
 
 }
 
 .post h1 {
-	margin-bottom: 20px;
-	color: #222;
-	font: 300 32px/1.4em "Helvetica Neue", Helvetica,Arial,sans-serif;
+    margin-bottom: 20px;
+    color: #222;
+    font-weight: 300;
+    font-size: 200%;
 }
 
 .post h2 {
-	margin-bottom: 40px;
-	  font: 300 24px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;
-	  color: #111;
+    margin-bottom: 40px;
+    font: 300 24px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    color: #111;
 }
 
 
 .post h2.headline {
-	/*font: italic 22px/1.3em Georgia,serif;*/
-	font: normal 13px/1.5em "Helvetica Neue",Helvetica,Arial,sans-serif;
-	margin: -5px 0 40px 0;
-	color: #b2b9be;
-	  font-size: 13px;
-	  text-transform: uppercase;
-	  letter-spacing: 2px;
-	  /*margin-top: 15px;*/
-	  display: inline-block;
+    /*font: italic 22px/1.3em Georgia,serif;*/
+    font: normal 13px/1.5em -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    margin: -5px 0 40px 0;
+    color: #b2b9be;
+    font-size: 13px;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    /*margin-top: 15px;*/
+    display: inline-block;
 }
 
 #post-list h2 {
-	font: normal 17px/1.5em "Helvetica Neue",Helvetica,Arial,sans-serif;
-	color: #aaa;
-	max-width: 400px;
-	margin-top: 2px;
+    font: normal 17px/1.5em -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    color: #aaa;
+    max-width: 400px;
+    margin-top: 2px;
 }
 
 h3, h4, h5 { color:#333; }
@@ -263,376 +266,376 @@ h4 { font-size:16px; font-weight:bold; }
 h5 { font-size:15px; font-weight: bold; }
 
 h6 {
-	font-size: 13px;
-	font-weight: bold;
-	color: #666;
-	margin-bottom: 6px;
+    font-size: 13px;
+    font-weight: bold;
+    color: #666;
+    margin-bottom: 6px;
 }
 
 p.small {
-	color: #bbb;
-	font-size: 14px;
-	line-height: 1.5;
-	display: block;
-	text-align: center;
-	margin-top: 20px;
+    color: #bbb;
+    font-size: 14px;
+    line-height: 1.5;
+    display: block;
+    text-align: center;
+    margin-top: 20px;
 }
 
 blockquote {
-	padding-left: 15px;
-	border-left: 3px solid #eee;
+    padding-left: 15px;
+    border-left: 3px solid #eee;
 }
 
 hr {
-	display: block;
-	border: none;
-	height: 1px;
-	margin: 40px auto;
-	background: #eee;
+    display: block;
+    border: none;
+    height: 1px;
+    margin: 40px auto;
+    background: #eee;
 }
 
 span.code { font-family:Menlo, Monaco, Courier; background-color:#EEE; font-size:14px; }
 
-pre	{
-	font-family:Menlo, Monaco, Courier;
-	white-space:pre-wrap;
-	/*border: 1px solid #ddd;*/
-	padding:20px;
-	background-color:#fdfdfd;
-	/*font-size:14px;*/
-	overflow:auto;
-	border-radius: 3px;
-	background: #272b2d;
-	  font-family: 'Source Code Pro',Menlo,monospace;
-	  font-size: 13px;
-	  line-height: 1.5em;
-	  font-weight: 500;
-	color: #d0d4d7;
+pre {
+    font-family:Menlo, Monaco, Courier;
+    white-space:pre-wrap;
+    /*border: 1px solid #ddd;*/
+    padding:20px;
+    background-color:#fdfdfd;
+    /*font-size:14px;*/
+    overflow:auto;
+    border-radius: 3px;
+    background: #272b2d;
+    font-family: 'Source Code Pro',Menlo,monospace;
+    font-size: 13px;
+    line-height: 1.5em;
+    font-weight: 500;
+    color: #d0d4d7;
 
 }
 
 table {
-	width: 100%;
-	margin: 40px 0;
-	border-collapse: collapse;
-	font-size: 13px;
-	line-height: 1.5em;
+    width: 100%;
+    margin: 40px 0;
+    border-collapse: collapse;
+    font-size: 13px;
+    line-height: 1.5em;
 }
 
 th,td {
-	text-align: left;
-	padding-right: 20px;
-	vertical-align: top;
+    text-align: left;
+    padding-right: 20px;
+    vertical-align: top;
 }
 
 table td,td {
-	border-spacing: none;
-	border-style: solid;
-	padding: 10px 15px;
-	border-width: 1px 0 0 0;
+    border-spacing: none;
+    border-style: solid;
+    padding: 10px 15px;
+    border-width: 1px 0 0 0;
 }
 
 tr>td {
-	border-top: 1px solid #eaeaea;
+    border-top: 1px solid #eaeaea;
 }
 
 tr:nth-child(odd)>td {
-	background: #fcfcfc;
+    background: #fcfcfc;
 }
 
 thead th,th {
-	text-align: left;
-	padding: 10px 15px;
-	height: 20px;
-	font-size: 13px;
-	font-weight: bold;
-	color: #444;
-	border-bottom: 1px solid #dadadc;
-	cursor: default;
-	white-space: nowrap;
+    text-align: left;
+    padding: 10px 15px;
+    height: 20px;
+    font-size: 13px;
+    font-weight: bold;
+    color: #444;
+    border-bottom: 1px solid #dadadc;
+    cursor: default;
+    white-space: nowrap;
 }
 
 img {
-	max-width: 100%;
-	border-radius: 3px;
+    max-width: 100%;
+    border-radius: 3px;
 }
 
 /* Made with Cactus Badge */
 #badge {
-	position: absolute;
-	bottom: 8px;
-	right: 8px;
-	height: 48px;
-	width: 48px;
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    height: 48px;
+    width: 48px;
 }
 
 /*=========================================
 Post List
 =========================================== */
 #archive-list {
-	margin-top: 100px;
+    margin-top: 100px;
 }
 
 #post-list {
-	margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 #post-list li,#archive-list li {
-	border-top: 1px solid #eee;
-	padding-top: 20px;
-	padding-bottom: 20px;
-	list-style-type: none;
-	margin-bottom: 0;
+    border-top: 1px solid #eee;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    list-style-type: none;
+    margin-bottom: 0;
 }
 
 #post-list li:last-child {
-	border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #eee;
 }
 
 #post-list a {
-	color: #333;
-	display: block;
-	font: bold 19px/1.7 "Helvetica Neue",helvetica,Arial,sans-serif;
+    color: #333;
+    display: block;
+    font: bold 19px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
 
 #post-list .dates {
-	float: right;
-	position: relative;
-	top: 1px;
-	font: 300 17px/1.8 "Helvetica Neue",helvetica,Arial,sans-serif;
-	color: #bbb;
+    float: right;
+    position: relative;
+    top: 1px;
+    font: 300 17px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    color: #bbb;
 }
 
 #post-list-footer {
-	border-top: 1px solid #eee;
-	margin-top: 20px;
-	padding-top: 100px;
+    border-top: 1px solid #eee;
+    margin-top: 20px;
+    padding-top: 100px;
 }
 
 #archive-link {
-	display: inline-block;
-	font-size: 13px;
-	font-weight: bold;
-	border-radius: 4px;
-	padding: 3px 10px 6px;
-	box-shadow: 0 0 0 1px hsla(207,83%,80%,1);
+    display: inline-block;
+    font-size: 13px;
+    font-weight: bold;
+    border-radius: 4px;
+    padding: 3px 10px 6px;
+    box-shadow: 0 0 0 1px hsla(207,83%,80%,1);
 }
 
 #archive-link:hover {
-	background: #5694f1;
-	color: #fff;
-	box-shadow: 0 0 0 1px #5694f1;
+    background: #5694f1;
+    color: #fff;
+    box-shadow: 0 0 0 1px #5694f1;
 }
 
 #archive-link span {
-	position: relative;
-	top: 0;
-	font-size: 17px;
+    position: relative;
+    top: 0;
+    font-size: 17px;
 }
 
 #footer {
-	padding: 40px 0 0 0;
+    padding: 40px 0 0 0;
 }
 
 /* Post Page */
 .post {
-	margin: 80px 0 0 0;
+    margin: 80px 0 0 0;
 }
 
 #post-meta {
-	font-size: 13px;
-	font-weight: bold;
-	line-height: 1.4;
-	border-top: 1px solid #eee;
-	padding-top: 40px;
-	margin-bottom: 40px;
-	padding-bottom: 40px;
-	margin-top: 40px;
-	color:#444;
-	border-bottom: 1px solid #eee;
+    font-size: 13px;
+    font-weight: bold;
+    line-height: 1.4;
+    border-top: 1px solid #eee;
+    padding-top: 40px;
+    margin-bottom: 40px;
+    padding-bottom: 40px;
+    margin-top: 40px;
+    color:#444;
+    border-bottom: 1px solid #eee;
 }
 
 #post-meta div span {
-	color: #aaa;
-	font-weight: 500;
-	display: block;
+    color: #aaa;
+    font-weight: 500;
+    display: block;
 }
 
 #post-meta div span.dark {
-	color: #1E2025;
+    color: #1E2025;
 
 }
 
 #post-meta div {
-	margin: 0 25px 0 0;
-	float: left;
+    margin: 0 25px 0 0;
+    float: left;
 }
 
 #sharing {
-	float: right;
-	margin: -2px;
+    float: right;
+    margin: -2px;
 }
 
 #sharing a {
-	font-size: 20px;
-	font-size: 23px;
-	margin-left: 1px;
-	margin-top: 4px;
-	color: #d4d4d4;
-	display: inline-block;
-	vertical-align: middle;
+    font-size: 20px;
+    font-size: 23px;
+    margin-left: 1px;
+    margin-top: 4px;
+    color: #d4d4d4;
+    display: inline-block;
+    vertical-align: middle;
 }
 
 #sharing a:hover {
-	/*color: #444;*/
-	opacity: 0.8;
+    /*color: #444;*/
+    opacity: 0.8;
 }
 
 /* Post Navigation */
 #post-nav {
-	text-align:center;
-	font-size:13px;
-	font-weight:500;
-	margin-top: 20px;
+    text-align:center;
+    font-size:13px;
+    font-weight:500;
+    margin-top: 20px;
 }
 
 #post-nav span {
-	-webkit-transition: all 0.1s linear;
-	-moz-transition: all 0.1s linear;
-	-ms-transition: all 0.1s linear;
-	-o-transition: all 0.1s linear;
-	transition: all 0.1s linear;
-	position: relative;
+    -webkit-transition: all 0.1s linear;
+    -moz-transition: all 0.1s linear;
+    -ms-transition: all 0.1s linear;
+    -o-transition: all 0.1s linear;
+    transition: all 0.1s linear;
+    position: relative;
 }
 
 #post-nav span.prev {
-	float: left;
+    float: left;
 }
 
 #post-nav span.next {
-	float: right;
+    float: right;
 }
 
 #post-nav span .arrow {
-	position: relative;
-	padding: 1px;
+    position: relative;
+    padding: 1px;
 }
 
 #post-nav span.prev:hover .arrow {
-	left: -4px;
+    left: -4px;
 }
 
 #post-nav span.next:hover .arrow {
-	right: -4px;
+    right: -4px;
 }
 
 #post-nav span.prev:hover {
-	left: -3px;
+    left: -3px;
 }
 
 #post-nav span.next:hover {
-	right: -3px;
+    right: -3px;
 }
 
 /* Archive */
 h1.archive {
-	margin-bottom: 0px;
+    margin-bottom: 0px;
 }
 
 h2.month {
-	width: 100%;
-	font: bold 13px/1 "Helvetica Neue",helvetica,Arial,sans-serif;
-	text-transform: uppercase;
-	margin-top: 40px;
-	margin-bottom: 10px;
-	padding-bottom: 10px;
-	border-bottom: 1px solid #eee;
+    width: 100%;
+    font: bold 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    text-transform: uppercase;
+    margin-top: 40px;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
 }
 
 #archive-list li:last-child {
-	margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 #archive-list a {
-	display: block;
-	font: bold 17px/1.7 "Helvetica Neue",helvetica,Arial,sans-serif;
-	color: #333;
+    display: block;
+    font: bold 17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    color: #333;
 }
 
 #archive-list .dates {
-	float: right;
-	position: relative;
-	top: 1px;
-	font: 300 17px/1.7 "Helvetica Neue",helvetica,Arial,sans-serif;
-	color: #bbb;
+    float: right;
+    position: relative;
+    top: 1px;
+    font: 300 17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    color: #bbb;
 }
 
 #archive-list li a:hover,#archive-list li:hover .dates {
-	color: #5694f1;
+    color: #5694f1;
 }
 
 #post-meta img.avatar {
-  height: 36px;
-  width: 36px;
-  float: left;
-  border-radius: 50%;
-  margin-top: 3px;
-  margin-right: 20px;
-  box-shadow: 0 0 0 3px #fff, 0 0 0 4px #eee;
+    height: 36px;
+    width: 36px;
+    float: left;
+    border-radius: 50%;
+    margin-top: 3px;
+    margin-right: 20px;
+    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #eee;
 }
 
 #post-list.archive.readmore h3{
 
-	  font: 400 20px "Helvetica Neue", Helvetica,Arial,sans-serif;
-	  margin-bottom: 30px;
+    font: 400 20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    margin-bottom: 30px;
 }
 
 #post-list.archive.readmore a{
-	font: 400 16px/1.6 "Helvetica Neue",helvetica,Arial,sans-serif;
-	color: #5694f1;
+    font: 400 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    color: #5694f1;
 }
 
 #post-list.archive.readmore a:hover{
-	opacity: 0.8;
+    opacity: 0.8;
 }
 
 #post-list.archive.readmore .dates{
-	font: 300 16px/1.6 "Helvetica Neue",helvetica,Arial,sans-serif;
+    font: 300 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
 #sharing a.facebook {
-  background: #4361b3;
+    background: #4361b3;
 }
 #sharing a.twitter {
-  background: #4fafed;
+    background: #4fafed;
 }
 
 #sharing a {
-  font-size: 20px;
-  font-size: 13px;
-  font-weight: bold;
-  color: #fff;
-  padding: 6px 10px;
-  border-radius: 4px;
-  margin-left: 2px;
+    font-size: 20px;
+    font-size: 13px;
+    font-weight: bold;
+    color: #fff;
+    padding: 6px 10px;
+    border-radius: 4px;
+    margin-left: 2px;
 }
 
 /* Media Queries */
 @media screen and (max-width: 540px) {
-	#wrapper { padding:20px 20px 20px 20px;}
-	.post { margin: 40px 0; }
+    #wrapper { padding:20px 20px 20px 20px;}
+    .post { margin: 40px 0; }
 
-	#post-list, #archive-list { margin-top: 0; }
-	#post-meta { margin-top: 60px; }
+    #post-list, #archive-list { margin-top: 0; }
+    #post-meta { margin-top: 60px; }
 
-	#title { font-size: 17px; }
-	#post-list .dates { display: none; }
+    #title { font-size: 17px; }
+    #post-list .dates { display: none; }
 
-	#post-list-footer { margin-top: 20px; padding-top: 40px; }
+    #post-list-footer { margin-top: 20px; padding-top: 40px; }
 
-	h1 { font-size: 26px; }
-	.post h2.headline { font-size: 13px; }
-	.post h1 { font-size:24px; }
-	.post h2 { font-size:20px; }
+    h1 { font-size: 26px; }
+    .post h2.headline { font-size: 13px; }
+    .post h1 { font-size:24px; }
+    .post h2 { font-size:20px; }
 }
 
 
@@ -656,8 +659,8 @@ a.symbol:hover {
 }
 
 code { 
-	font-family:Menlo, Monaco, Courier; 
-	background-color:#EEE; font-size:14px; 
-	padding: 4px; 
-	font-weight: 600;
+    font-family:Menlo, Monaco, Courier; 
+    background-color:#EEE; font-size:14px; 
+    padding: 4px; 
+    font-weight: 600;
 }