marvinjohanning.de/_site/blog/index.html

382 lines
50 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!-- General meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Begin Jekyll SEO tag v2.7.1 -->
<meta name="generator" content="Jekyll v4.2.2" />
<meta property="og:title" content="MarvinJohanning.de" />
<meta name="author" content="MarvinJohanning" />
<meta property="og:locale" content="en_GB" />
<meta name="description" content="Alembic is a starting point for Jekyll projects. Rather than starting from scratch, this boilerplate is designed to get the ball rolling immediately" />
<meta property="og:description" content="Alembic is a starting point for Jekyll projects. Rather than starting from scratch, this boilerplate is designed to get the ball rolling immediately" />
<link rel="canonical" href="http://localhost:4000/blog/" />
<meta property="og:url" content="http://localhost:4000/blog/" />
<meta property="og:site_name" content="MarvinJohanning.de" />
<meta property="og:image" content="http://localhost:4000/assets/default-social-image.png" />
<link rel="next" href="http://localhost:4000/blog/page2" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="http://localhost:4000/assets/default-social-image.png" />
<meta property="twitter:title" content="MarvinJohanning.de" />
<meta name="twitter:site" content="@Marvinjohanning" />
<meta name="twitter:creator" content="@MarvinJohanning" />
<script type="application/ld+json">
{"image":"http://localhost:4000/assets/default-social-image.png","headline":"MarvinJohanning.de","url":"http://localhost:4000/blog/","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"http://localhost:4000/assets/logos/logo.png"},"name":"MarvinJohanning"},"author":{"@type":"Person","name":"MarvinJohanning"},"@type":"WebPage","description":"Alembic is a starting point for Jekyll projects. Rather than starting from scratch, this boilerplate is designed to get the ball rolling immediately","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->
<title>Posts - MarvinJohanning.de</title>
<meta property="og:title" content="Posts">
<meta name="description" content="My thoughts and ideas">
<meta property="og:description" content="My thoughts and ideas">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#242e2b"/>
<style>/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}*{box-sizing:border-box}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html,body{height:100%}a img{border:none}blockquote{quotes:none}blockquote:before,blockquote:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}html{font-size:63.75%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}@media screen and (min-width: 40em){html{font-size:74.375%}}@media screen and (min-width: 50em){html{font-size:79.6875%}}@media screen and (min-width: 64em){html{font-size:90.3125%}}@media screen and (min-width: 100em){html{font-size:100.9375%}}@media only screen and (max-width: 768px){html{font-size:82.5%}}body{font-size:1.3333333333rem;font-family:Georgia, serif;font-style:normal;font-weight:400;line-height:2rem}@media screen and (min-width: 40em){body{font-size:1.2142857143rem}}@media screen and (min-width: 50em){body{font-size:1.2rem}}@media screen and (min-width: 64em){body{font-size:1.1764705882rem}}@media screen and (min-width: 100em){body{font-size:1.1578947368rem}}a{color:#05bf85;text-decoration:none;transition:color .1s, background-color .1s}a:hover,a:active,a:focus{color:green;text-decoration:none}.typeset p a,.typeset li a{background-image:linear-gradient(to bottom, rgba(0,0,0,0) 50%, #05bf85 50%);background-position:0 93%;background-repeat:repeat-x;background-size:100% 0.15rem;text-shadow:0.1rem 0 #fff,0.15rem 0 #fff,-0.1rem 0 #fff,-0.15rem 0 #fff}.typeset p a:hover,.typeset p a:active,.typeset p a:focus,.typeset li a:hover,.typeset li a:active,.typeset li a:focus{background-image:linear-gradient(to bottom, rgba(0,0,0,0) 50%, green 50%)}.typeset p{line-height:2rem;margin-bottom:1.49999rem;padding-top:.50001rem;font-feature-settings:'kern', 'onum', 'liga';text-align:justify}@media screen and (min-width: 40em){.typeset p{margin-bottom:1.4553471429rem;padding-top:.5446528571rem}}@media screen and (min-width: 50em){.typeset p{margin-bottom:1.44999rem;padding-top:.55001rem}}@media screen and (min-width: 64em){.typeset p{margin-bottom:1.4411664706rem;padding-top:.5588335294rem}}@media screen and (min-width: 100em){.typeset p{margin-bottom:1.4342005263rem;padding-top:.5657994737rem}}.typeset h1,.typeset h2,.typeset h3,.typeset h4,.typeset h5,.typeset h6{color:#242e2b;font-family:"Merriweather", serif;font-feature-settings:'dlig', 'liga', 'lnum', 'kern';font-style:normal;font-weight:700}.typeset h1,.typeset .alpha{line-height:3rem;font-size:2.3333333333rem;margin-bottom:.37499rem;padding-top:.62501rem}@media screen and (min-width: 40em){.typeset h1,.typeset .alpha{font-size:2.1428571429rem;margin-bottom:.3035614286rem;padding-top:.6964385714rem}}@media screen and (min-width: 50em){.typeset h1,.typeset .alpha{font-size:2.1333333333rem;margin-bottom:.29999rem;padding-top:.70001rem}}@media screen and (min-width: 64em){.typeset h1,.typeset .alpha{font-size:2.3529411765rem;margin-bottom:.3823429412rem;padding-top:.6176570588rem}}@media screen and (min-width: 100em){.typeset h1,.typeset .alpha{font-size:2.6315789474rem;margin-bottom:.4868321053rem;padding-top:.5131678947rem}}.typeset h2,.typeset .beta{line-height:3rem;font-size:2.0833333333rem;margin-bottom:.28124rem;padding-top:.71876rem}@media screen and (min-width: 40em){.typeset h2,.typeset .beta{font-size:1.9rem;margin-bottom:.21249rem;padding-top:.78751rem}}@media screen and (min-width: 50em){.typeset h2,.typeset .beta{font-size:1.8733333333rem;margin-bottom:.20249rem;padding-top:.79751rem}}@media screen and (min-width: 64em){.typeset h2,.typeset .beta{font-size:2.0882352941rem;margin-bottom:.2830782353rem;padding-top:.7169217647rem}}@media screen and (min-width: 100em){.typeset h2,.typeset .beta{font-size:2.3105263158rem;margin-bottom:.3664373684rem;padding-top:.6335626316rem}}.typeset h3,.typeset .gamma{line-height:3rem;font-size:1.8666666667rem;margin-bottom:.19999rem;padding-top:.80001rem}@media screen and (min-width: 40em){.typeset h3,.typeset .gamma{font-size:1.7142857143rem;margin-bottom:.1428471429rem;padding-top:.8571528571rem}}@media screen and (min-width: 50em){.typeset h3,.typeset .gamma{font-size:1.7066666667rem;margin-bottom:.13999rem;padding-top:.86001rem}}@media screen and (min-width: 64em){.typeset h3,.typeset .gamma{font-size:1.7647058824rem;margin-bottom:.1617547059rem;padding-top:.8382452941rem}}@media screen and (min-width: 100em){.typeset h3,.typeset .gamma{font-size:1.8578947368rem;margin-bottom:.1967005263rem;padding-top:.8032994737rem}}.typeset h4,.typeset .delta{line-height:2rem;font-size:1.6666666667rem;margin-bottom:-.37501rem;padding-top:.37501rem}@media screen and (min-width: 40em){.typeset h4,.typeset .delta{font-size:1.5214285714rem;margin-bottom:-.4294742857rem;padding-top:.4294742857rem}}@media screen and (min-width: 50em){.typeset h4,.typeset .delta{font-size:1.5rem;margin-bottom:-.43751rem;padding-top:.43751rem}}@media screen and (min-width: 64em){.typeset h4,.typeset .delta{font-size:1.5705882353rem;margin-bottom:-.4110394118rem;padding-top:.4110394118rem}}@media screen and (min-width: 100em){.typeset h4,.typeset .delta{font-size:1.6368421053rem;margin-bottom:-.3861942105rem;padding-top:.3861942105rem}}.typeset h5,.typeset .epsilon{line-height:2rem;font-size:1.4916666667rem;margin-bottom:-.440635rem;padding-top:.440635rem}@media screen and (min-width: 40em){.typeset h5,.typeset .epsilon{font-size:1.3714285714rem;margin-bottom:-.4857242857rem;padding-top:.4857242857rem}}@media screen and (min-width: 50em){.typeset h5,.typeset .epsilon{font-size:1.3666666667rem;margin-bottom:-.48751rem;padding-top:.48751rem}}@media screen and (min-width: 64em){.typeset h5,.typeset .epsilon{font-size:1.3235294118rem;margin-bottom:-.5036864706rem;padding-top:.5036864706rem}}@media screen and (min-width: 100em){.typeset h5,.typeset .epsilon{font-size:1.3157894737rem;margin-bottom:-.5065889474rem;padding-top:.5065889474rem}}.typeset h6,.typeset .zeta{line-height:2rem;font-size:1.3333333333rem;margin-bottom:-.50001rem;padding-top:.50001rem}@media screen and (min-width: 40em){.typeset h6,.typeset .zeta{font-size:1.2142857143rem;margin-bottom:-.5446528571rem;padding-top:.5446528571rem}}@media screen and (min-width: 50em){.typeset h6,.typeset .zeta{font-size:1.2rem;margin-bottom:-.55001rem;padding-top:.55001rem}}@media screen and (min-width: 64em){.typeset h6,.typeset .zeta{font-size:1.1764705882rem;margin-bottom:-.5588335294rem;padding-top:.5588335294rem}}@media screen and (min-width: 100em){.typeset h6,.typeset .zeta{font-size:1.1578947368rem;margin-bottom:-.5657994737rem;padding-top:.5657994737rem}}.typeset ul,.typeset ol{line-height:2rem;margin-bottom:1.49999rem;padding-top:.50001rem}@media screen and (min-width: 40em){.typeset ul,.typeset ol{margin-bottom:1.4553471429rem;padding-top:.5446528571rem}}@media screen and (min-width: 50em){.typeset ul,.typeset ol{margin-bottom:1.44999rem;padding-top:.55001rem}}@media screen and (min-width: 64em){.typeset ul,.typeset ol{margin-bottom:1.4411664706rem;padding-top:.5588335294rem}}@media screen and (min-width: 100em){.typeset ul,.typeset ol{margin-bottom:1.4342005263rem;padding-top:.5657994737rem}}.typeset ul li,.typeset ol li{font-feature-settings:'kern', 'onum', 'liga';margin-left:2rem}@media screen and (min-width: 40em){.typeset ul li,.typeset ol li{margin-left:0}}.typeset ul li ol,.typeset ul li ul,.typeset ol li ol,.typeset ol li ul{padding-top:1rem;margin-bottom:1rem;margin-left:2rem}.typeset ol{list-style-type:none}.typeset ol li{counter-increment:top-level}.typeset ol li:before{content:counter(top-level) ".";font-feature-settings:'lnum', 'tnum';margin-left:-3rem;position:absolute;text-align:right;width:2em}.typeset ol li ul li:before{content:''}.typeset ol li ul li ol li{counter-increment:alt-level}.typeset ol li ul li ol li:before{content:counter(alt-level) "."}.typeset ol li ol li{counter-increment:sub-level}.typeset ol li ol li:before{content:counter(top-level) "." counter(sub-level)}.typeset ol li ol li ul li:before{content:''}.typeset ol li ol li ol li{counter-increment:sub-sub-level}.typeset ol li ol li ol li:before{content:counter(top-level) "." counter(sub-level) "." counter(sub-sub-level)}.typeset dl{line-height:2rem;margin-bottom:1.49999rem;padding-top:.50001rem}@media screen and (min-width: 40em){.typeset dl{margin-bottom:1.4553471429rem;padding-top:.5446528571rem}}@media screen and (min-width: 50em){.typeset dl{margin-bottom:1.44999rem;padding-top:.55001rem}}@media screen and (min-width: 64em){.typeset dl{margin-bottom:1.4411664706rem;padding-top:.5588335294rem}}@media screen and (min-width: 100em){.typeset dl{margin-bottom:1.4342005263rem;padding-top:.5657994737rem}}.typeset dl dt,.typeset dl dd{font-feature-settings:'kern', 'onum', 'liga';margin-left:2rem}@media screen and (min-width: 40em){.typeset dl dt,.typeset dl dd{margin-left:0}}.typeset dl dt{font-weight:700}.typeset dl dd+dt{padding-top:1rem}.typeset table{line-height:2rem;font-size:1.1916666667rem;margin-bottom:-.553135rem;padding-top:.553135rem;font-family:"Merriweather", serif;font-feature-settings:'liga', 'lnum', 'tnum', 'kern';font-style:normal;font-weight:400;width:100%}@media screen and (min-width: 40em){.typeset table{font-size:1.0928571429rem;margin-bottom:-.5901885714rem;padding-top:.5901885714rem}}@media screen and (min-width: 50em){.typeset table{font-size:1.0866666667rem;margin-bottom:-.59251rem;padding-top:.59251rem}}@media screen and (min-width: 64em){.typeset table{font-size:.9941176471rem;margin-bottom:-.6272158824rem;padding-top:.6272158824rem}}@media screen and (min-width: 100em){.typeset table{font-size:.9263157895rem;margin-bottom:-.6526415789rem;padding-top:.6526415789rem}}.typeset table thead th{line-height:2rem;font-size:1.3333333333rem;margin-bottom:-.50001rem;padding-top:.50001rem;padding-bottom:1px}@media screen and (min-width: 40em){.typeset table thead th{font-size:1.2142857143rem;margin-bottom:-.5446528571rem;padding-top:.5446528571rem}}@media screen and (min-width: 50em){.typeset table thead th{font-size:1.2rem;margin-bottom:-.55001rem;padding-top:.55001rem}}@media screen and (min-width: 64em){.typeset table thead th{font-size:1.1764705882rem;margin-bottom:-.5588335294rem;padding-top:.5588335294rem}}@media screen and (min-width: 100em){.typeset table thead th{font-size:1.1578947368rem;margin-bottom:-.5657994737rem;padding-top:.5657994737rem}}.typeset b,.typeset strong,.typeset .bold{font-weight:700}.typeset em,.typeset i,.typeset .italic{font-style:italic}.typeset small,.typeset .caption{font-size:1.0666666667rem;font-family:"Merriweather", serif;font-style:normal;font-weight:400}@media screen and (min-width: 40em){.typeset small,.typeset .caption{font-size:.9714285714rem}}@media screen and (min-width: 50em){.typeset small,.typeset .caption{font-size:.96rem}}@media screen and (min-width: 64em){.typeset small,.typeset .caption{font-size:.8823529412rem}}@media screen and (min-width: 100em){.typeset small,.typeset .caption{font-size:.8210526316rem}}.typeset small{line-height:1rem}.typeset .caption{line-height:2rem;margin-bottom:1.39999rem;padding-top:.60001rem;color:#a8adac}@media screen and (min-width: 40em){.typeset .caption{margin-bottom:1.3642757143rem;padding-top:.6357242857rem}}@media screen and (min-width: 50em){.typeset .caption{margin-bottom:1.35999rem;padding-top:.64001rem}}@media screen and (min-width: 64em){.typeset .caption{margin-bottom:1.3308723529rem;padding-top:.6691276471rem}}@media screen and (min-width: 100em){.typeset .caption{margin-bottom:1.3078847368rem;padding-top:.6921152632rem}}.typeset h1+.caption,.typeset .alpha+.caption,.typeset h2+.caption,.typeset .beta+.caption,.typeset h3+.caption,.typeset .gamma+.caption{margin-top:-1rem}.typeset .delta+.caption,.typeset .epsilon+.caption,.typeset .zeta+.caption{margin-top:0rem}.typeset blockquote p{border-left:0.15rem solid #05bf85;font-style:italic;padding-left:1rem;margin-bottom:1.99999rem;padding-bottom:.50001rem}@media screen and (min-width: 40em){.typeset blockquote p{margin-bottom:1.9107042857rem;padding-bottom:.5446528571rem}}@media screen and (min-width: 50em){.typeset blockquote p{margin-bottom:1.89999rem;padding-bottom:.55001rem}}@media screen and (min-width: 64em){.typeset blockquote p{margin-bottom:1.8823429412rem;padding-bottom:.5588335294rem}}@media screen and (min-width: 100em){.typeset blockquote p{margin-bottom:1.8684110526rem;padding-bottom:.5657994737rem}}@media screen and (min-width: 40em){.typeset blockquote{margin-left:-1rem}}.typeset hr{background-image:linear-gradient(to bottom, rgba(0,0,0,0) 50%, #a8adac 50%);background-position:0 50%;background-repeat:repeat-x;background-size:100% 0.15rem;border:0;margin:0;padding-bottom:3rem;padding-top:3rem}.typeset code,.typeset pre{background-color:#fafafa;font-family:Menlo, monospace}.typeset pre{display:block;margin-bottom:2rem;padding:1rem;white-space:pre;white-space:pre-wrap;word-break:break-all;word-wrap:break-word}.typeset code{font-size:1.0666666667rem;line-height:1rem}@media screen and (min-width: 40em){.typeset code{font-size:.9714285714rem}}@media screen and (min-width: 50em){.typeset code{font-size:.96rem}}@media screen and (min-width: 64em){.typeset code{font-size:.8823529412rem}}@media screen and (min-width: 100em){.typeset code{font-size:.8210526316rem}}.typeset .upper{font-kerning:normal;letter-spacing:0.1rem;text-transform:uppercase}.typeset .small-caps{font-feature-settings:'smcp', 'kern';font-kerning:normal;letter-spacing:0.1rem}.typeset .lining-numerals{font-feature-settings:'lnum', 'kern'}.typeset .oldstyle-numerals{font-feature-settings:'onum', 'kern'}.hll{background-color:#ffffcc}.c{color:#999988;font-style:italic}.err{color:#a61717;background-color:#e3d2d2}.k{color:#000000;font-weight:bold}.o{color:#000000;font-weight:bold}.cm{color:#999988;font-style:italic}.cp{color:#999999;font-weight:bold;font-style:italic}.c1{color:#999988;font-style:italic}.cs{color:#999999;font-weight:bold;font-style:italic}.gd{color:#000000;background-color:#ffdddd}.ge{color:#000000;font-style:italic}.gr{color:#aa0000}.gh{color:#999999}.gi{color:#000000;background-color:#ddffdd}.go{color:#888888}.gp{color:#555555}.gs{font-weight:bold}.gu{color:#aaaaaa}.gt{color:#aa0000}.kc{color:#000000;font-weight:bold}.kd{color:#000000;font-weight:bold}.kn{color:#000000;font-weight:bold}.kp{color:#000000;font-weight:bold}.kr{color:#000000;font-weight:bold}.kt{color:#445588;font-weight:bold}.m{color:#009999}.s{color:#d01040}.na{color:#008080}.nb{color:#0086B3}.nc{color:#445588;font-weight:bold}.no{color:#008080}.nd{color:#3c5d5d;font-weight:bold}.ni{color:#800080}.ne{color:#990000;font-weight:bold}.nf{color:#990000;font-weight:bold}.nl{color:#990000;font-weight:bold}.nn{color:#555555}.nt{color:#000080}.nv{color:#008080}.ow{color:#000000;font-weight:bold}.w{color:#bbbbbb}.mf{color:#009999}.mh{color:#009999}.mi{color:#009999}.mo{color:#009999}.sb{color:#d01040}.sc{color:#d01040}.sd{color:#d01040}.s2{color:#d01040}.se{color:#d01040}.sh{color:#d01040}.si{color:#d01040}.sx{color:#d01040}.sr{color:#009926}.s1{color:#d01040}.ss{color:#990073}.bp{color:#999999}.vc{color:#008080}.vg{color:#008080}.vi{color:#008080}.il{color:#009999}body{background:#fff;color:#384743;height:100%;display:flex;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-x:hidden}.container{width:90%;max-width:1200px;margin:0 auto}.header .nav,.footer .nav{text-align:right}.header .logo,.footer .logo{-webkit-box-flex:0;-webkit-flex:0 0 auto;-moz-box-flex:0;-moz-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.header .container,.footer .container{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;-webkit-box-orient:horizontal;-webkit-flex-direction:row;-moz-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;-moz-justify-content:space-between;justify-content:space-between;padding:1rem 0}@media screen and (min-width: 40em){.header .container,.footer .container{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center}}.header .nav{display:flex;flex-direction:column-reverse;align-items:flex-end;justify-content:flex-end;overflow:hidden}.feature{padding-bottom:.4rem;margin-bottom:1.6rem;text-align:center;background:#f9fafa;background-size:cover;background-position:center}.feature .container{min-height:35vh;max-width:60%;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;-moz-justify-content:center;justify-content:center}.logo{display:inline-block;line-height:0;max-height:4rem;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center}.logo img{max-height:5rem}.nav a{padding:.2rem}.nav--social a{display:inline-block;line-height:1}.small{padding-top:.8rem;color:#a8adac;display:inline-block}.footer{background:#242e2b;color:#a8adac}.footer a{color:#a8adac}.footer a:hover{color:#fff}.footer .container{-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.footer .small{padding-top:0}.nav--paginator{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;-moz-justify-content:space-between;justify-content:space-between;color:#a8adac;text-align:center}.pagination{min-width:20%}.main{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex:1 0 auto;-moz-box-flex:1;-moz-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;-moz-justify-content:flex-start;justify-content:flex-start;margin-bottom:1.6rem}@media screen and (min-width: 40em){.main{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;-moz-justify-content:center;justify-content:center;-webkit-box-direction:normal;-webkit-box-orient:horizontal;-webkit-flex-direction:row;-moz-flex-direction:row;-ms-flex-direction:row;flex-direction:row}}.header,.feature,.footer{-webkit-box-flex:0;-webkit-flex:0 0 auto;-moz-box-flex:0;-moz-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}@media screen and (min-width: 40em){.content{width:62%}}.share .button{margin-right:.3rem}@media screen and (min-width: 40em){.aside{max-width:34%;margin-left:4%;-webkit-box-flex:1;-webkit-flex:1 0 auto;-moz-box-flex:1;-moz-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;opacity:1;transition:opacity .1s}.aside .section{position:sticky;top:0}.aside--left{margin-left:0;margin-right:4%;order:-1}.aside:hover{opacity:1}}.section{margin:0}.list{list-style:none}.list--nav{overflow:hidden;margin-bottom:var(--listHeight, 0)}.list .item--post,.list .item--result,.list .item--category{margin-left:0}@media screen and (min-width: 40em){.item--nav{margin-left:.4rem;display:inline-block}}.item--nav:first-of-type{margin-left:0}.item--current a{color:#a8adac}a .icon{transition:fill .1s}a .icon:hover{fill:currentColor}.icon{vertical-align:middle;width:1.1em;height:1.1em;fill:CurrentColor}img{max-width:100%;height:auto}.figure{line-height:0}.figure--left{float:left;padding-right:.8rem}.figure--right{float:right;text-align:right;padding-left:.8rem}.figure--center{text-align:center;clear:both}.video,.map{position:relative;padding-bottom:56.25%;height:0}.video iframe,.map iframe{position:absolute;top:0;left:0;width:100%;height:100%}.map{padding-bottom:70%}.figure,.video,.map,.form{margin-bottom:.8rem}audio,video{width:100%}.form{position:relative}.form__legend{font-style:italic;color:#a8adac;position:absolute;overflow:hidden;right:0;clip:rect(0 0 0 0)}button,.button,input[type="text"],input[type="email"],input[type="search"],input[type="submit"],input[type="color"],textarea,select{padding:.6rem 1.2rem;margin-bottom:.6rem;transition:color .1s, background-color .1s, border .1s;line-height:inherit;border:none;box-shadow:none;border-radius:0;-webkit-appearance:none}button .icon,.button .icon,input[type="text"] .icon,input[type="email"] .icon,input[type="search"] .icon,input[type="submit"] .icon,input[type="color"] .icon,textarea .icon,select .icon{margin:0 0 .35rem}button,.hyperbutton,input[type="text"],input[type="email"],input[type="search"],input[type="submit"],input[type="color"],textarea,select{padding:.6rem 1.2rem;margin-bottom:.6rem;transition:color .1s, background-color .1s, border .1s;line-height:inherit;border:none;box-shadow:none;border-radius:0;width:50%;-webkit-appearance:none}button .icon,.hyperbutton .icon,input[type="text"] .icon,input[type="email"] .icon,input[type="search"] .icon,input[type="submit"] .icon,input[type="color"] .icon,textarea .icon,select .icon{margin:0 0 .35rem}input[type="submit"],button,.button{cursor:pointer;display:inline-block;color:#fff;background:#05bf85;transition:box-shadow .1s;will-change:box-shadow;box-shadow:inset 0 0 0 2rem transparent}input[type="submit"]:hover,button:hover,.button:hover{box-shadow:inset 0 0 0 2rem rgba(0,0,0,0.25)}input[type="submit"]:active,input[type="submit"]:focus,button:active,button:focus,.button:active,.button:focus{box-shadow:inset 0 0 0 2rem rgba(0,0,0,0.25)}.button--nav{background:none;color:#05bf85;margin-bottom:0;min-height:4rem;min-width:4rem}@media screen and (min-width: 40em){.button--nav{display:none}}.button--nav:hover,.button--nav:focus{box-shadow:none;color:green}a:focus,a:hover:focus,button:focus,button:hover:focus,.button:focus,.button:hover:focus,input:focus,input:hover:focus,textarea:focus,textarea:hover:focus,select:focus,select:hover:focus{outline:solid 0.12rem #fa407a;outline-offset:-.12rem}a:hover:focus{outline:none}input[type="text"],input[type="email"],input[type="search"],input[type="color"],textarea,select{width:100%;border:1px solid #a8adac}input[type="text"]:hover,input[type="email"]:hover,input[type="search"]:hover,input[type="color"]:hover,textarea:hover,select:hover{border-color:#384743}select{background:#fafafa}textarea{resize:vertical}label{line-height:2rem;margin-bottom:1.49999rem;padding-top:.50001rem}@media screen and (min-width: 40em){label{margin-bottom:1.4553471429rem;padding-top:.5446528571rem}}@media screen and (min-width: 50em){label{margin-bottom:1.44999rem;padding-top:.55001rem}}@media screen and (min-width: 64em){label{margin-bottom:1.4411664706rem;padding-top:.5588335294rem}}@media screen and (min-width: 100em){label{margin-bottom:1.4342005263rem;padding-top:.5657994737rem}}code{padding:.12rem .2rem;color:#242e2b}pre code{padding:0}.required{color:red}::-webkit-input-placeholder{opacity:0.5}::-moz-placeholder{opacity:0.5}:-ms-input-placeholder{opacity:0.5}:-moz-placeholder{opacity:0.5}::selection{background:#242e2b;color:#fff;text-shadow:none}.typeset a>code{text-shadow:none}.typeset .button,.typeset button{background-image:none;text-shadow:none;color:#fff}.typeset .button:hover,.typeset .button:active,.typeset .button:focus,.typeset button:hover,.typeset button:active,.typeset button:focus{background-image:none;color:#fff}.typeset hr{width:100%}.typeset li>p{padding:0;margin:0}.typeset .nav a{padding-left:0;padding-right:0;margin-left:.2rem;margin-right:.2rem}.typeset pre{white-space:pre;overflow-x:scroll}</style>
<link rel="icon" type="image/png" href="/assets/logos/logo@16px.png" sizes="16x16">
<link rel="apple-touch-icon" sizes="16x16" href="/assets/logos/logo@16px.png">
<link rel="icon" type="image/png" href="/assets/logos/logo@32px.png" sizes="32x32">
<link rel="apple-touch-icon" sizes="32x32" href="/assets/logos/logo@32px.png">
<link rel="icon" type="image/png" href="/assets/logos/logo@96px.png" sizes="96x96">
<link rel="apple-touch-icon" sizes="96x96" href="/assets/logos/logo@96px.png">
<link rel="icon" type="image/png" href="/assets/logos/logo@120px.png" sizes="120x120">
<link rel="apple-touch-icon" sizes="120x120" href="/assets/logos/logo@120px.png">
<link rel="icon" type="image/png" href="/assets/logos/logo@144px.png" sizes="144x144">
<link rel="apple-touch-icon" sizes="144x144" href="/assets/logos/logo@144px.png">
<link rel="icon" type="image/png" href="/assets/logos/logo@180px.png" sizes="180x180">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/logos/logo@180px.png">
<link rel="icon" type="image/png" href="/assets/logos/logo@512px.png" sizes="512x512">
<link rel="apple-touch-icon" sizes="512x512" href="/assets/logos/logo@512px.png">
<link rel="icon" type="image/png" href="/assets/logos/logo@1024px.png" sizes="1024x1024">
<link rel="apple-touch-icon" sizes="1024x1024" href="/assets/logos/logo@1024px.png">
<link rel="shortcut icon" href="/assets/logos/logo.png">
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap" />
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
<noscript>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap" rel="stylesheet" />
</noscript>
<!-- Overwrite this file with code you want before the closing head tag -->
</head>
<body class="layout-blog">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="height: 0; position: absolute">
<symbol id="codepen" viewBox="0 0 16 16"><path d="M15.988 5.443c-.004-.02-.007-.04-.012-.058l-.01-.033c-.006-.017-.012-.034-.02-.05-.003-.012-.01-.023-.014-.034l-.023-.045-.02-.032-.03-.04-.024-.03c-.01-.013-.022-.026-.034-.038l-.027-.027-.04-.032-.03-.024-.012-.01L8.38.117c-.23-.155-.53-.155-.76 0L.305 4.99.296 5c-.012.007-.022.015-.032.023-.014.01-.027.02-.04.032l-.027.027-.034.037-.024.03-.03.04c-.006.012-.013.022-.02.033l-.023.045-.015.034c-.007.016-.012.033-.018.05l-.01.032c-.005.02-.01.038-.012.058l-.006.03C.002 5.5 0 5.53 0 5.56v4.875c0 .03.002.06.006.09l.007.03c.003.02.006.04.013.058l.01.033c.006.018.01.035.018.05l.015.033c.006.016.014.03.023.047l.02.03c.008.016.018.03.03.042.007.01.014.02.023.03.01.012.02.025.034.036.01.01.018.02.028.026l.04.033.03.023.01.01 7.31 4.876c.116.078.248.117.382.116.134 0 .266-.04.38-.116l7.314-4.875.01-.01c.012-.007.022-.015.032-.023.014-.01.027-.02.04-.032l.027-.027.034-.037.024-.03.03-.04.02-.032.023-.046.015-.033.018-.052.01-.033c.005-.02.01-.038.013-.058 0-.01.003-.02.004-.03.004-.03.006-.06.006-.09V5.564c0-.03-.002-.06-.006-.09l-.007-.03zM8 9.626L5.568 8 8 6.374 10.432 8 8 9.626zM7.312 5.18l-2.98 1.993-2.406-1.61 5.386-3.59v3.206zM3.095 8l-1.72 1.15v-2.3L3.095 8zm1.237.828l2.98 1.993v3.208l-5.386-3.59 2.406-1.61zm4.355 1.993l2.98-1.993 2.407 1.61-5.387 3.59v-3.206zM12.905 8l1.72-1.15v2.3L12.905 8zm-1.237-.827L8.688 5.18V1.97l5.386 3.59-2.406 1.61z" fill-rule="nonzero"/></symbol>
<symbol id="dribbble" viewBox="0 0 16 16"><path d="M8 16c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm6.747-6.905c-.234-.074-2.115-.635-4.257-.292.894 2.456 1.258 4.456 1.328 4.872 1.533-1.037 2.624-2.68 2.93-4.58zM10.67 14.3c-.102-.6-.5-2.688-1.46-5.18l-.044.014C5.312 10.477 3.93 13.15 3.806 13.4c1.158.905 2.614 1.444 4.194 1.444.947 0 1.85-.194 2.67-.543zm-7.747-1.72c.155-.266 2.03-3.37 5.555-4.51.09-.03.18-.056.27-.08-.173-.39-.36-.778-.555-1.16C4.78 7.85 1.47 7.807 1.17 7.8l-.003.208c0 1.755.665 3.358 1.756 4.57zM1.31 6.61c.307.005 3.122.017 6.318-.832-1.132-2.012-2.353-3.705-2.533-3.952-1.912.902-3.34 2.664-3.784 4.785zM6.4 1.368c.188.253 1.43 1.943 2.548 4 2.43-.91 3.46-2.293 3.582-2.468C11.323 1.827 9.736 1.176 8 1.176c-.55 0-1.087.066-1.6.19zm6.89 2.322c-.145.194-1.29 1.662-3.816 2.694.16.325.31.656.453.99.05.117.1.235.147.352 2.274-.286 4.533.172 4.758.22-.015-1.613-.59-3.094-1.543-4.257z"/></symbol>
<symbol id="designernews" viewBox="0 0 16 16"><path d="M7.514 7.988c0-2.555-1.57-4.287-4.56-4.287H0v8.6h3.016c2.903 0 4.498-1.75 4.498-4.31zM5.37 8c0 1.844-.946 2.642-2.467 2.642H2.13V5.358h.773C4.36 5.358 5.37 6.193 5.37 8zM16 12.3V3.7h-1.98v4.81L10.853 3.7h-2.07v8.6h1.982V7.152l3.39 5.146H16z"/></symbol>
<symbol id="facebook" viewBox="0 0 16 16"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.476-1.195 1.176v1.54h2.39l-.31 2.416h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></symbol>
<symbol id="flickr" viewBox="0 0 16 16"><path d="M0 8c0 2.05 1.662 3.71 3.71 3.71 2.05 0 3.713-1.66 3.713-3.71S5.76 4.29 3.71 4.29C1.663 4.29 0 5.95 0 8zm8.577 0c0 2.05 1.662 3.71 3.712 3.71C14.337 11.71 16 10.05 16 8s-1.662-3.71-3.71-3.71c-2.05 0-3.713 1.66-3.713 3.71z"/></symbol>
<symbol id="github" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8"/></symbol>
<symbol id="hackernews" viewBox="0 0 16 16"><path d="M0 0v16h16V0H0zm8.92 8.96v3H7.25v-3l-2.75-5h1.96l1.66 3.48L9.7 3.96h1.88l-2.66 5z"/></symbol>
<symbol id="instagram" viewBox="0 0 16 16"><path d="M8 0C5.827 0 5.555.01 4.702.048 3.85.088 3.27.222 2.76.42c-.526.204-.973.478-1.417.923-.445.444-.72.89-.923 1.417-.198.51-.333 1.09-.372 1.942C.008 5.555 0 5.827 0 8s.01 2.445.048 3.298c.04.852.174 1.433.372 1.942.204.526.478.973.923 1.417.444.445.89.72 1.417.923.51.198 1.09.333 1.942.372.853.04 1.125.048 3.298.048s2.445-.01 3.298-.048c.852-.04 1.433-.174 1.942-.372.526-.204.973-.478 1.417-.923.445-.444.72-.89.923-1.417.198-.51.333-1.09.372-1.942.04-.853.048-1.125.048-3.298s-.01-2.445-.048-3.298c-.04-.852-.174-1.433-.372-1.942-.204-.526-.478-.973-.923-1.417-.444-.445-.89-.72-1.417-.923-.51-.198-1.09-.333-1.942-.372C10.445.008 10.173 0 8 0zm0 1.44c2.136 0 2.39.01 3.233.048.78.036 1.203.166 1.485.276.374.145.64.318.92.598.28.28.453.546.598.92.11.282.24.705.276 1.485.038.844.047 1.097.047 3.233s-.01 2.39-.048 3.233c-.036.78-.166 1.203-.276 1.485-.145.374-.318.64-.598.92-.28.28-.546.453-.92.598-.282.11-.705.24-1.485.276-.844.038-1.097.047-3.233.047s-2.39-.01-3.233-.048c-.78-.036-1.203-.166-1.485-.276-.374-.145-.64-.318-.92-.598-.28-.28-.453-.546-.598-.92-.11-.282-.24-.705-.276-1.485C1.45 10.39 1.44 10.136 1.44 8s.01-2.39.048-3.233c.036-.78.166-1.203.276-1.485.145-.374.318-.64.598-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276C5.61 1.45 5.864 1.44 8 1.44zm0 2.452c-2.27 0-4.108 1.84-4.108 4.108 0 2.27 1.84 4.108 4.108 4.108 2.27 0 4.108-1.84 4.108-4.108 0-2.27-1.84-4.108-4.108-4.108zm0 6.775c-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667 0 1.473-1.194 2.667-2.667 2.667zm5.23-6.937c0 .53-.43.96-.96.96s-.96-.43-.96-.96.43-.96.96-.96.96.43.96.96z"/></symbol>
<symbol id="linkedin" viewBox="0 0 16 16"><path d="M13.632 13.635h-2.37V9.922c0-.886-.018-2.025-1.234-2.025-1.235 0-1.424.964-1.424 1.96v3.778h-2.37V6H8.51V7.04h.03c.318-.6 1.092-1.233 2.247-1.233 2.4 0 2.845 1.58 2.845 3.637v4.188zM3.558 4.955c-.762 0-1.376-.617-1.376-1.377 0-.758.614-1.375 1.376-1.375.76 0 1.376.617 1.376 1.375 0 .76-.617 1.377-1.376 1.377zm1.188 8.68H2.37V6h2.376v7.635zM14.816 0H1.18C.528 0 0 .516 0 1.153v13.694C0 15.484.528 16 1.18 16h13.635c.652 0 1.185-.516 1.185-1.153V1.153C16 .516 15.467 0 14.815 0z" fill-rule="nonzero"/></symbol>
<symbol id="medium" viewBox="0 0 16 16"><path d="M11.824 12.628l-.276.45.798.398 2.744 1.372c.15.076.294.11.418.11.278 0 .467-.177.467-.492V5.883l-4.15 6.745zm4.096-8.67c-.004-.003 0-.01-.003-.012l-4.825-2.412c-.06-.03-.123-.038-.187-.044-.016 0-.03-.01-.047-.01-.184 0-.368.092-.467.254l-.24.39-.5.814-1.89 3.08 1.89 3.076.5.813.5.812.59.95 4.71-7.64c.02-.03.01-.06-.02-.08zm-6.27 7.045L7.17 6.97l-.295-.477-.294-.477-.25-.416v4.867l3.32 1.663.5.25.5.25-.5-.813-.5-.813zM.737 1.68L.59 1.608c-.085-.042-.166-.062-.24-.062-.206 0-.35.16-.35.427v10.162c0 .272.2.594.442.716l4.145 2.08c.107.06.208.08.3.08.257 0 .438-.2.438-.53V4.01c0-.02-.012-.04-.03-.047L.738 1.68z"/></symbol>
<symbol id="pinterest" viewBox="0 0 16 16"><path d="M8 0C3.582 0 0 3.582 0 8c0 3.39 2.108 6.285 5.084 7.45-.07-.633-.133-1.604.028-2.295.146-.625.938-3.977.938-3.977s-.24-.48-.24-1.188c0-1.11.646-1.943 1.448-1.943.683 0 1.012.513 1.012 1.127 0 .687-.436 1.713-.662 2.664-.19.797.4 1.445 1.185 1.445 1.42 0 2.514-1.498 2.514-3.662 0-1.915-1.376-3.254-3.342-3.254-2.276 0-3.61 1.707-3.61 3.472 0 .687.263 1.424.593 1.825.066.08.075.15.057.23-.06.252-.196.796-.223.907-.035.146-.115.178-.268.107-.998-.465-1.624-1.926-1.624-3.1 0-2.524 1.834-4.84 5.287-4.84 2.774 0 4.932 1.977 4.932 4.62 0 2.757-1.74 4.977-4.153 4.977-.81 0-1.572-.422-1.833-.92l-.5 1.902c-.18.695-.667 1.566-.994 2.097.75.232 1.545.357 2.37.357 4.417 0 8-3.582 8-8s-3.583-8-8-8z" fill-rule="nonzero"/></symbol>
<symbol id="rss" viewBox="0 0 16 16"><path d="M12.8 16C12.8 8.978 7.022 3.2 0 3.2V0c8.777 0 16 7.223 16 16h-3.2zM2.194 11.61c1.21 0 2.195.985 2.195 2.196 0 1.21-.985 2.194-2.196 2.194C.984 16 0 15.017 0 13.806c0-1.21.983-2.195 2.194-2.195zM10.606 16h-3.11c0-4.113-3.383-7.497-7.496-7.497v-3.11c5.818 0 10.606 4.79 10.606 10.607z"/></symbol>
<symbol id="reddit" viewBox="0 0 16 16"><path d="M1.473 9.368c-.04.185-.06.374-.06.566 0 2.3 2.94 4.173 6.554 4.173 3.613 0 6.553-1.872 6.553-4.173 0-.183-.02-.364-.055-.54l-.01-.022c-.013-.036-.02-.073-.02-.11-.2-.784-.745-1.497-1.533-2.072-.03-.01-.058-.026-.084-.047-.017-.013-.03-.028-.044-.043-1.198-.824-2.91-1.34-4.807-1.34-1.88 0-3.576.506-4.772 1.315-.01.012-.02.023-.033.033-.026.022-.056.04-.087.05-.805.576-1.364 1.293-1.572 2.086 0 .038-.01.077-.025.114l-.005.01zM8 13.003c-1.198 0-2.042-.26-2.58-.8-.116-.116-.116-.305 0-.422.117-.11.307-.11.424 0 .42.42 1.125.63 2.155.63 1.03 0 1.73-.2 2.15-.62.11-.11.3-.11.42 0 .11.12.11.31 0 .43-.54.54-1.38.8-2.58.8zM5.592 7.945c-.61 0-1.12.51-1.12 1.12 0 .608.51 1.102 1.12 1.102.61 0 1.103-.494 1.103-1.102 0-.61-.494-1.12-1.103-1.12zm4.83 0c-.61 0-1.12.51-1.12 1.12 0 .608.51 1.102 1.12 1.102.61 0 1.103-.494 1.103-1.102 0-.61-.494-1.12-1.103-1.12zM13.46 6.88c.693.556 1.202 1.216 1.462 1.94.3-.225.48-.578.48-.968 0-.67-.545-1.214-1.214-1.214-.267 0-.52.087-.728.243zM1.812 6.64c-.67 0-1.214.545-1.214 1.214 0 .363.16.7.43.927.268-.72.782-1.37 1.478-1.92-.202-.14-.443-.22-.694-.22zm6.155 8.067c-3.944 0-7.152-2.14-7.152-4.77 0-.183.016-.363.046-.54-.53-.33-.86-.91-.86-1.545 0-1 .82-1.812 1.82-1.812.45 0 .87.164 1.2.455 1.24-.796 2.91-1.297 4.75-1.33l1.21-3.69.27.063s.01 0 .01.002l2.82.663c.23-.533.76-.908 1.38-.908.82 0 1.49.67 1.49 1.492 0 .823-.67 1.492-1.49 1.492s-1.49-.67-1.49-1.49L9.4 2.18l-.98 2.99c1.77.07 3.37.57 4.57 1.35.33-.31.764-.48 1.225-.48 1 0 1.814.81 1.814 1.81 0 .66-.36 1.26-.92 1.58.02.17.04.33.04.5-.01 2.63-3.21 4.77-7.16 4.77zM13.43 1.893c-.494 0-.895.4-.895.894 0 .493.4.894.894.894.49 0 .89-.4.89-.89s-.4-.89-.9-.89z"/></symbol>
<symbol id="skype" viewBox="0 0 16 16"><path d="M8.035 12.6c-2.685 0-3.885-1.322-3.885-2.313 0-.51.374-.865.89-.865 1.15 0 .85 1.653 2.995 1.653 1.096 0 1.703-.597 1.703-1.208 0-.368-.18-.775-.904-.954l-2.387-.597C4.524 7.833 4.175 6.79 4.175 5.812c0-2.034 1.91-2.798 3.704-2.798 1.65 0 3.6.916 3.6 2.136 0 .523-.452.827-.97.827-.98 0-.798-1.36-2.773-1.36-.98 0-1.523.444-1.523 1.08 0 .636.774.84 1.446.993l1.767.392c1.936.433 2.427 1.566 2.427 2.633 0 1.652-1.266 2.886-3.82 2.886m7.4-3.264l-.014.084-.028-.16c.015.024.028.05.042.076.082-.45.125-.912.125-1.373 0-1.023-.2-2.014-.595-2.948-.38-.902-.925-1.712-1.62-2.407-.692-.696-1.5-1.242-2.4-1.623C10.015.59 9.025.39 8.005.39c-.48 0-.963.045-1.43.135H6.57l.08.04-.16-.023.08-.016C5.927.183 5.205 0 4.472 0 3.278 0 2.155.466 1.31 1.313.465 2.16 0 3.286 0 4.483c0 .763.195 1.512.563 2.175l.013-.083.028.16c-.015-.026-.027-.052-.04-.077-.076.43-.115.867-.115 1.305 0 1.022.2 2.014.593 2.948.38.903.925 1.713 1.62 2.408.693.695 1.5 1.242 2.4 1.623.932.397 1.92.597 2.94.597.445 0 .89-.04 1.325-.118l-.077-.043.162.028-.084.014c.67.378 1.426.58 2.2.58 1.194 0 2.317-.466 3.162-1.313.845-.846 1.31-1.972 1.31-3.17 0-.765-.197-1.517-.566-2.18" fill-rule="nonzero"/></symbol>
<symbol id="tumblr" viewBox="0 0 16 16"><path d="M9.708 16c-3.396 0-4.687-2.504-4.687-4.274V6.498H3.403V4.432C5.83 3.557 6.412 1.368 6.55.12c.01-.086.077-.12.115-.12H9.01v4.076h3.2v2.422H8.997v4.98c.01.667.25 1.58 1.472 1.58h.067c.424-.012.994-.136 1.29-.278l.77 2.283c-.288.424-1.594.916-2.77.936h-.12z" fill-rule="nonzero"/></symbol>
<symbol id="twitch" viewBox="0 0 16 16"><g fill-rule="nonzero"><path d="M1.393 0L.35 2.783v11.13h3.824V16h2.088l2.085-2.088h3.13L15.65 9.74V0H1.394zm1.39 1.39H14.26v7.653l-2.435 2.435H8l-2.085 2.085v-2.085H2.783V1.39z"/><path d="M6.61 8.348H8V4.175H6.61v4.173zm3.824 0h1.39V4.175h-1.39v4.173z"/></g></symbol>
<symbol id="twitter" viewBox="0 0 16 16"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill-rule="nonzero"/></symbol>
<symbol id="vimeo" viewBox="0 0 16 16"><path d="M15.992 4.275c-.07 1.56-1.16 3.697-3.263 6.41-2.176 2.832-4.017 4.248-5.522 4.248-.933 0-1.722-.862-2.367-2.588L3.55 7.6c-.48-1.724-.993-2.587-1.542-2.587-.12 0-.538.252-1.255.755L0 4.796C.79 4.1 1.568 3.406 2.335 2.71c1.053-.912 1.844-1.39 2.37-1.44 1.246-.12 2.012.733 2.3 2.56.31 1.97.526 3.194.647 3.673.36 1.634.754 2.45 1.185 2.45.335 0 .838-.53 1.51-1.59.67-1.06 1.028-1.866 1.076-2.42.096-.915-.263-1.374-1.077-1.374-.383 0-.778.087-1.185.262.788-2.58 2.29-3.834 4.508-3.762 1.644.048 2.42 1.116 2.324 3.205z" fill-rule="nonzero"/></symbol>
<symbol id="youtube" viewBox="0 0 16 16"><path d="M0 7.345c0-1.294.16-2.59.16-2.59s.156-1.1.636-1.587c.608-.637 1.408-.617 1.764-.684C3.84 2.36 8 2.324 8 2.324s3.362.004 5.6.166c.314.038.996.04 1.604.678.48.486.636 1.588.636 1.588S16 6.05 16 7.346v1.258c0 1.296-.16 2.59-.16 2.59s-.156 1.102-.636 1.588c-.608.638-1.29.64-1.604.678-2.238.162-5.6.166-5.6.166s-4.16-.037-5.44-.16c-.356-.067-1.156-.047-1.764-.684-.48-.487-.636-1.587-.636-1.587S0 9.9 0 8.605v-1.26zm6.348 2.73V5.58l4.323 2.255-4.32 2.24h-.002z"/></symbol>
<symbol id="link" viewBox="0 0 16 16"><path d="M5.86 12.7l-.81.8c-.7.7-1.84.7-2.54 0a1.75 1.75 0 0 1 0-2.5l2.98-2.96c.61-.61 1.77-1.52 2.62-.68a1 1 0 1 0 1.4-1.4c-1.44-1.43-3.57-1.17-5.42.67L1.1 9.6a3.72 3.72 0 0 0 0 5.32 3.78 3.78 0 0 0 5.34 0l.8-.8a1 1 0 1 0-1.39-1.42zm9.03-11.5c-1.55-1.53-3.7-1.6-5.14-.19l-1 1a1 1 0 1 0 1.39 1.41l1-1c.75-.74 1.72-.43 2.35.2a1.75 1.75 0 0 1 0 2.5l-3.17 3.15c-1.46 1.45-2.14.77-2.43.48a1 1 0 0 0-1.4 1.4c.67.67 1.43 1 2.23 1 .98 0 2.01-.5 3-1.47l3.17-3.15a3.72 3.72 0 0 0 0-5.32z"/></symbol>
<symbol id="email" viewBox="0 0 16 11"><path fill-rule="evenodd" d="M1.33 0h13.34L8 5 1.33 0zM16 0v11H0V0l8 6 8-6z"/></symbol>
<symbol id="nav" viewBox="0 0 16 11"><path d="M0 12h16v-2H0v2zm0-5h16V5H0v2zm0-7v2h16V0H0z"/></symbol>
</svg>
<header class="header">
<div class="container">
<a class="logo" href="/">
<img src="/assets/logos/logo.png" alt="MarvinJohanning.de logo"/>
</a>
<nav class="nav nav--header">
<ul class="list list--nav">
<li class="item item--nav">
<a href="/">Home</a>
</li>
<li class="item item--nav">
<a href="/about/">About</a>
</li>
<li class="item item--nav item--current">
<a href="/blog/">Blog</a>
</li>
<li class="item item--nav">
<a href="/birding/">Birding</a>
</li>
<li class="item item--nav">
<a href="/categories/#Books">Books</a>
</li>
<li class="item item--nav">
<a href="/search/">Search</a>
</li>
</ul>
<button class="button button--nav" aria-label="Menu toggle">
<svg width="16" height="16" class="icon icon--nav" role="img" alt="Menu"><title>Menu</title><use xlink:href="#nav" fill="CurrentColor"></use></svg>
</button>
</nav>
<script type="text/javascript">
// Get list and button
const navList = document.querySelector('.header .list--nav')
const button = document.querySelector('.header .button--nav')
// Hide nav and apply toggle
const collapseNav = () => {
if (document.body.clientWidth < 640) {
navList.style.setProperty('--listHeight', `-${navList.offsetHeight}px`)
} else {
navList.removeAttribute('style')
}
button.onclick = () => {
navList.style.setProperty('transition', `margin .1s`)
if (navList.style.getPropertyValue('--listHeight')) {
navList.style.removeProperty('--listHeight')
} else {
navList.style.setProperty('--listHeight', `-${navList.offsetHeight}px`)
}
}
}
collapseNav()
// Check on resize if to collapse nav
window.addEventListener('resize', () => {
collapseNav()
})
</script>
</div>
<div class="feature" style="background-image: url(/assets/images/books.jpg)">
<div class="container typeset">
</div>
</div>
</header>
<main class="main container">
<div class="content">
<article class="article article--page typeset">
<h1>Posts</h1>
<p>My thoughts and ideas</p>
</article>
<section class="section typeset">
<ul class="list list--posts">
<li class="item item--post">
<article class="article article--post">
<h2><a href="/statistics/2022/07/13/stats/">Statistiken vom 25.06 bis 13.07.2022</a></h2>
<small class="small post-meta">
<span class="label label--category"><a href="/categories/#statistics">Statistics</a></span>
&nbsp;&middot;&nbsp;<time datetime="2022-07-13T00:00:00+02:00" class="time">13 Jul 2022</time>
</small>
<p>Hier eine Übersicht der Statistiken vom 25.06.2022 bis hin zum 13.07.2022. Haben tatsächlich einige Vögel schon finden können.</p>
</article>
</li>
<li class="item item--post">
<article class="article article--post">
<h2><a href="/books/2022/02/15/apocalypse-english/">Johns Revelation — A Modern Annotated Translation</a></h2>
<small class="small post-meta">
<span class="label label--category"><a href="/categories/#books">Books</a></span>
&nbsp;&middot;&nbsp;<time datetime="2022-02-15T00:00:00+01:00" class="time">15 Feb 2022</time>
</small>
<p>My translation of the Revelation of John written in a modern style with a contemporary book design. Ideal for newcomers to the Bible.</p>
</article>
</li>
</ul>
<nav class="nav nav--paginator">
<span class="pagination pagination--previous">&larr; Newer</span>
<span class="pagination pagination--counter">Page: 1 of 2</span>
<a href="/blog/page2" class="pagination pagination--next">Older &rarr;</a>
</nav>
</section>
</div>
</main>
<footer class="footer">
<div class="container">
<div class="copyright typeset">
<small class="small">&copy; MarvinJohanning.de 2022</small>
</div>
<nav class="nav nav--footer">
<ul class="list list--nav">
<li class="item item--nav">
<a href="https://marvinjohanning.de">Marvin Johanning</a>
</li>
</ul>
</nav>
</div>
</footer>
<script type="text/javascript">
(() => {
const registerServiceWorker = () => {
if (!navigator.serviceWorker) {
return;
}
navigator.serviceWorker
.register("/sw.js")
.then(registration => {
console.log("Service Worker: registered");
})
.catch(err => {
console.log("Service Worker: registration failed ", err);
});
};
registerServiceWorker();
})();
</script>
<!-- Overwrite this file with code you want before the closing body tag -->
</body>
</html>