PageSourceSearch

https://fbellelli.com/

html fbellelli.com collected 2026-10-02 01:28:52 UTC 85,612 bytes, 3,122 lines download raw bytes

1<!DOCTYPE html>
2
3<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
4
5<head>
6  <meta charset="utf-8"/>
7  <meta name="viewport" content="width=device-width, initial-scale=1"/>
8  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
9  <meta name="generator" content="distill" />
10  <link rel="alternate" type="application/rss+xml" href="https://fbellelli.com/index.xml" />
11
12  <style type="text/css">
13  /* Hide doc at startup (prevent jankiness while JS renders/transforms) */
14  body {
15    visibility: hidden;
16  }
17  </style>
18
19 <!--radix_placeholder_import_source-->
20 <!--/radix_placeholder_import_source-->
21
22<style type="text/css">code{white-space: pre;}</style>
23<style type="text/css" data-origin="pandoc">
24pre > code.sourceCode { white-space: pre; position: relative; }
25pre > code.sourceCode > span { line-height: 1.25; }
26pre > code.sourceCode > span:empty { height: 1.2em; }
27.sourceCode { overflow: visible; }
28code.sourceCode > span { color: inherit; text-decoration: inherit; }
29div.sourceCode { margin: 1em 0; }
30pre.sourceCode { margin: 0; }
31@media screen {
32div.sourceCode { overflow: auto; }
33}
34@media print {
35pre > code.sourceCode { white-space: pre-wrap; }
36pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
37}
38pre.numberSource code
39  { counter-reset: source-line 0; }
40pre.numberSource code > span
41  { position: relative; left: -4em; counter-increment: source-line; }
42pre.numberSource code > span > a:first-child::before
43  { content: counter(source-line);
44    position: relative; left: -1em; text-align: right; vertical-align: baseline;
45    border: none; display: inline-block;
46    -webkit-touch-callout: none; -webkit-user-select: none;
47    -khtml-user-select: none; -moz-user-select: none;
48    -ms-user-select: none; user-select: none;
49    padding: 0 4px; width: 4em;
50    color: #aaaaaa;
51  }
52pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
53div.sourceCode
54  { color: #00769e; background-color: #f1f3f5; }
55@media screen {
56pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
57}
58code span { color: #00769e; } /* Normal */
59code span.al { color: #ad0000; } /* Alert */
60code span.an { color: #5e5e5e; } /* Annotation */
61code span.at { color: #657422; } /* Attribute */
62code span.bn { color: #ad0000; } /* BaseN */
63code span.bu { } /* BuiltIn */
64code span.cf { color: #00769e; } /* ControlFlow */
65code span.ch { color: #20794d; } /* Char */
66code span.cn { color: #8f5902; } /* Constant */
67code span.co { color: #5e5e5e; } /* Comment */
68code span.cv { color: #5e5e5e; font-style: italic; } /* CommentVar */
69code span.do { color: #5e5e5e; font-style: italic; } /* Documentation */
70code span.dt { color: #ad0000; } /* DataType */
71code span.dv { color: #ad0000; } /* DecVal */
72code span.er { color: #ad0000; } /* Error */
73code span.ex { } /* Extension */
74code span.fl { color: #ad0000; } /* Float */
75code span.fu { color: #4758ab; } /* Function */
76code span.im { } /* Import */
77code span.in { color: #5e5e5e; } /* Information */
78code span.kw { color: #00769e; } /* Keyword */
79code span.op { color: #5e5e5e; } /* Operator */
80code span.ot { color: #00769e; } /* Other */
81code span.pp { color: #ad0000; } /* Preprocessor */
82code span.sc { color: #5e5e5e; } /* SpecialChar */
83code span.ss { color: #20794d; } /* SpecialString */
84code span.st { color: #20794d; } /* String */
85code span.va { color: #111111; } /* Variable */
86code span.vs { color: #20794d; } /* VerbatimString */
87code span.wa { color: #5e5e5e; font-style: italic; } /* Warning */
88</style>
89
90
91  <!--radix_placeholder_meta_tags-->
92  <title>F.S.Bellelli: Blog</title>
93
94
95  <link rel="icon" type="image/vnd.microsoft.icon" href="images/favicon feather.ico"/>
96
97
98  <!--  https://developers.facebook.com/docs/sharing/webmasters#markup -->
99  <meta property="og:title" content="F.S.Bellelli: Blog"/>
100  <meta property="og:type" content="article"/>
101  <meta property="og:locale" content="en_US"/>
102  <meta property="og:site_name" content="F.S.Bellelli"/>
103
104  <!--  https://dev.twitter.com/cards/types/summary -->
105  <meta property="twitter:card" content="summary"/>
106  <meta property="twitter:title" content="F.S.Bellelli: Blog"/>
107
108  <!--/radix_placeholder_meta_tags-->
109  <!--radix_placeholder_rmarkdown_metadata-->
110
111  
111<script type="text/json" id="radix-rmarkdown-metadata">
112  {"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["title","site","listing"]}},"value":[{"type":"character","attributes":{},"value":["Blog"]},{"type":"character","attributes":{},"value":["distill::distill_website"]},{"type":"character","attributes":{},"value":["posts"]}]}
113  </script>
113
114  <!--/radix_placeholder_rmarkdown_metadata-->
115  <!--radix_placeholder_navigation_in_header-->
116  <meta name="distill:offset" content=""/>
117
118  
118<script type="application/javascript">
119
120    window.headroom_prevent_pin = false;
121
122    window.document.addEventListener("DOMContentLoaded", function (event) {
123
124      // initialize headroom for banner
125      var header = $('header').get(0);
126      var headerHeight = header.offsetHeight;
127      var headroom = new Headroom(header, {
128        tolerance: 5,
129        onPin : function() {
130          if (window.headroom_prevent_pin) {
131            window.headroom_prevent_pin = false;
132            headroom.unpin();
133          }
134        }
135      });
136      headroom.init();
137      if(window.location.hash)
138        headroom.unpin();
139      $(header).addClass('headroom--transition');
140
141      // offset scroll location for banner on hash change
142      // (see: https://github.com/WickyNilliams/headroom.js/issues/38)
143      window.addEventListener("hashchange", function(event) {
144        window.scrollTo(0, window.pageYOffset - (headerHeight + 25));
145      });
146
147      // responsive menu
148      $('.distill-site-header').each(function(i, val) {
149        var topnav = $(this);
150        var toggle = topnav.find('.nav-toggle');
151        toggle.on('click', function() {
152          topnav.toggleClass('responsive');
153        });
154      });
155
156      // nav dropdowns
157      $('.nav-dropbtn').click(function(e) {
158        $(this).next('.nav-dropdown-content').toggleClass('nav-dropdown-active');
159        $(this).parent().siblings('.nav-dropdown')
160           .children('.nav-dropdown-content').removeClass('nav-dropdown-active');
161      });
162      $("body").click(function(e){
163        $('.nav-dropdown-content').removeClass('nav-dropdown-active');
164      });
165      $(".nav-dropdown").click(function(e){
166        e.stopPropagation();
167      });
168    });
169  </script>
169
170
171  <style type="text/css">
172
173  /* Theme (user-documented overrideables for nav appearance) */
174
175  .distill-site-nav {
176    color: rgba(255, 255, 255, 0.8);
177    background-color: #0F2E3D;
178    font-size: 15px;
179    font-weight: 300;
180  }
181
182  .distill-site-nav a {
183    color: inherit;
184    text-decoration: none;
185  }
186
187  .distill-site-nav a:hover {
188    color: white;
189  }
190
191  @media print {
192    .distill-site-nav {
193      display: none;
194    }
195  }
196
197  .distill-site-header {
198
199  }
200
201  .distill-site-footer {
202
203  }
204
205
206  /* Site Header */
207
208  .distill-site-header {
209    width: 100%;
210    box-sizing: border-box;
211    z-index: 3;
212  }
213
214  .distill-site-header .nav-left {
215    display: inline-block;
216    margin-left: 8px;
217  }
218
219  @media screen and (max-width: 768px) {
220    .distill-site-header .nav-left {
221      margin-left: 0;
222    }
223  }
224
225
226  .distill-site-header .nav-right {
227    float: right;
228    margin-right: 8px;
229  }
230
231  .distill-site-header a,
232  .distill-site-header .title {
233    display: inline-block;
234    text-align: center;
235    padding: 14px 10px 14px 10px;
236  }
237
238  .distill-site-header .title {
239    font-size: 18px;
240    min-width: 150px;
241  }
242
243  .distill-site-header .logo {
244    padding: 0;
245  }
246
247  .distill-site-header .logo img {
248    display: none;
249    max-height: 20px;
250    width: auto;
251    margin-bottom: -4px;
252  }
253
254  .distill-site-header .nav-image img {
255    max-height: 18px;
256    width: auto;
257    display: inline-block;
258    margin-bottom: -3px;
259  }
260
261
262
263  @media screen and (min-width: 1000px) {
264    .distill-site-header .logo img {
265      display: inline-block;
266    }
267    .distill-site-header .nav-left {
268      margin-left: 20px;
269    }
270    .distill-site-header .nav-right {
271      margin-right: 20px;
272    }
273    .distill-site-header .title {
274      padding-left: 12px;
275    }
276  }
277
278
279  .distill-site-header .nav-toggle {
280    display: none;
281  }
282
283  .nav-dropdown {
284    display: inline-block;
285    position: relative;
286  }
287
288  .nav-dropdown .nav-dropbtn {
289    border: none;
290    outline: none;
291    color: rgba(255, 255, 255, 0.8);
292    padding: 16px 10px;
293    background-color: transparent;
294    font-family: inherit;
295    font-size: inherit;
296    font-weight: inherit;
297    margin: 0;
298    margin-top: 1px;
299    z-index: 2;
300  }
301
302  .nav-dropdown-content {
303    display: none;
304    position: absolute;
305    background-color: white;
306    min-width: 200px;
307    border: 1px solid rgba(0,0,0,0.15);
308    border-radius: 4px;
309    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
310    z-index: 1;
311    margin-top: 2px;
312    white-space: nowrap;
313    padding-top: 4px;
314    padding-bottom: 4px;
315  }
316
317  .nav-dropdown-content hr {
318    margin-top: 4px;
319    margin-bottom: 4px;
320    border: none;
321    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
322  }
323
324  .nav-dropdown-active {
325    display: block;
326  }
327
328  .nav-dropdown-content a, .nav-dropdown-content .nav-dropdown-header {
329    color: black;
330    padding: 6px 24px;
331    text-decoration: none;
332    display: block;
333    text-align: left;
334  }
335
336  .nav-dropdown-content .nav-dropdown-header {
337    display: block;
338    padding: 5px 24px;
339    padding-bottom: 0;
340    text-transform: uppercase;
341    font-size: 14px;
342    color: #999999;
343    white-space: nowrap;
344  }
345
346  .nav-dropdown:hover .nav-dropbtn {
347    color: white;
348  }
349
350  .nav-dropdown-content a:hover {
351    background-color: #ddd;
352    color: black;
353  }
354
355  .nav-right .nav-dropdown-content {
356    margin-left: -45%;
357    right: 0;
358  }
359
360  @media screen and (max-width: 768px) {
361    .distill-site-header a, .distill-site-header .nav-dropdown  {display: none;}
362    .distill-site-header a.nav-toggle {
363      float: right;
364      display: block;
365    }
366    .distill-site-header .title {
367      margin-left: 0;
368    }
369    .distill-site-header .nav-right {
370      margin-right: 0;
371    }
372    .distill-site-header {
373      overflow: hidden;
374    }
375    .nav-right .nav-dropdown-content {
376      margin-left: 0;
377    }
378  }
379
380
381  @media screen and (max-width: 768px) {
382    .distill-site-header.responsive {position: relative; min-height: 500px; }
383    .distill-site-header.responsive a.nav-toggle {
384      position: absolute;
385      right: 0;
386      top: 0;
387    }
388    .distill-site-header.responsive a,
389    .distill-site-header.responsive .nav-dropdown {
390      display: block;
391      text-align: left;
392    }
393    .distill-site-header.responsive .nav-left,
394    .distill-site-header.responsive .nav-right {
395      width: 100%;
396    }
397    .distill-site-header.responsive .nav-dropdown {float: none;}
398    .distill-site-header.responsive .nav-dropdown-content {position: relative;}
399    .distill-site-header.responsive .nav-dropdown .nav-dropbtn {
400      display: block;
401      width: 100%;
402      text-align: left;
403    }
404  }
405
406  /* Site Footer */
407
408  .distill-site-footer {
409    width: 100%;
410    overflow: hidden;
411    box-sizing: border-box;
412    z-index: 3;
413    margin-top: 30px;
414    padding-top: 30px;
415    padding-bottom: 30px;
416    text-align: center;
417  }
418
419  /* Headroom */
420
421  d-title {
422    padding-top: 6rem;
423  }
424
425  @media print {
426    d-title {
427      padding-top: 4rem;
428    }
429  }
430
431  .headroom {
432    z-index: 1000;
433    position: fixed;
434    top: 0;
435    left: 0;
436    right: 0;
437  }
438
439  .headroom--transition {
440    transition: all .4s ease-in-out;
441  }
442
443  .headroom--unpinned {
444    top: -100px;
445  }
446
447  .headroom--pinned {
448    top: 0;
449  }
450
451  /* adjust viewport for navbar height */
452  /* helps vertically center bootstrap (non-distill) content */
453  .min-vh-100 {
454    min-height: calc(100vh - 100px) !important;
455  }
456
457  </style>
458
459  
459<script src="site_libs/jquery-3.6.0/jquery-3.6.0.min.js"></script>
459
460  <link href="site_libs/font-awesome-6.5.2/css/all.min.css" rel="stylesheet"/>
461  <link href="site_libs/font-awesome-6.5.2/css/v4-shims.min.css" rel="stylesheet"/>
462  
462<script src="site_libs/headroom-0.9.4/headroom.min.js"></script>
462
463  
463<script src="site_libs/autocomplete-0.37.1/autocomplete.min.js"></script>
463
464  
464<script src="site_libs/fuse-6.4.1/fuse.min.js"></script>
464
465
466  
466<script type="application/javascript">
467
468  function getMeta(metaName) {
469    var metas = document.getElementsByTagName('meta');
470    for (let i = 0; i < metas.length; i++) {
471      if (metas[i].getAttribute('name') === metaName) {
472        return metas[i].getAttribute('content');
473      }
474    }
475    return '';
476  }
477
478  function offsetURL(url) {
479    var offset = getMeta('distill:offset');
480    return offset ? offset + '/' + url : url;
481  }
482
483  function createFuseIndex() {
484
485    // create fuse index
486    var options = {
487      keys: [
488        { name: 'title', weight: 20 },
489        { name: 'categories', weight: 15 },
490        { name: 'description', weight: 10 },
491        { name: 'contents', weight: 5 },
492      ],
493      ignoreLocation: true,
494      threshold: 0
495    };
496    var fuse = new window.Fuse([], options);
497
498    // fetch the main search.json
499    return fetch(offsetURL('search.json'))
500      .then(function(response) {
501        if (response.status == 200) {
502          return response.json().then(function(json) {
503            // index main articles
504            json.articles.forEach(function(article) {
505              fuse.add(article);
506            });
507            // download collections and index their articles
508            return Promise.all(json.collections.map(function(collection) {
509              return fetch(offsetURL(collection)).then(function(response) {
510                if (response.status === 200) {
511                  return response.json().then(function(articles) {
512                    articles.forEach(function(article) {
513                      fuse.add(article);
514                    });
515                  })
516                } else {
517                  return Promise.reject(
518                    new Error('Unexpected status from search index request: ' +
519                              response.status)
520                  );
521                }
522              });
523            })).then(function() {
524              return fuse;
525            });
526          });
527
528        } else {
529          return Promise.reject(
530            new Error('Unexpected status from search index request: ' +
531                        response.status)
532          );
533        }
534      });
535  }
536
537  window.document.addEventListener("DOMContentLoaded", function (event) {
538
539    // get search element (bail if we don't have one)
540    var searchEl = window.document.getElementById('distill-search');
541    if (!searchEl)
542      return;
543
544    createFuseIndex()
545      .then(function(fuse) {
546
547        // make search box visible
548        searchEl.classList.remove('hidden');
549
550        // initialize autocomplete
551        var options = {
552          autoselect: true,
553          hint: false,
554          minLength: 2,
555        };
556        window.autocomplete(searchEl, options, [{
557          source: function(query, callback) {
558            const searchOptions = {
559              isCaseSensitive: false,
560              shouldSort: true,
561              minMatchCharLength: 2,
562              limit: 10,
563            };
564            var results = fuse.search(query, searchOptions);
565            callback(results
566              .map(function(result) { return result.item; })
567            );
568          },
569          templates: {
570            suggestion: function(suggestion) {
571              var img = suggestion.preview && Object.keys(suggestion.preview).length > 0
572                ? `<img src="${offsetURL(suggestion.preview)}"</img>`
573                : '';
574              var html = `
575                <div class="search-item">
576                  <h3>${suggestion.title}</h3>
577                  <div class="search-item-description">
578                    ${suggestion.description || ''}
579                  </div>
580                  <div class="search-item-preview">
581                    ${img}
582                  </div>
583                </div>
584              `;
585              return html;
586            }
587          }
588        }]).on('autocomplete:selected', function(event, suggestion) {
589          window.location.href = offsetURL(suggestion.path);
590        });
591        // remove inline display style on autocompleter (we want to
592        // manage responsive display via css)
593        $('.algolia-autocomplete').css("display", "");
594      })
595      .catch(function(error) {
596        console.log(error);
597      });
598
599  });
600
601  </script>
601
602
603  <style type="text/css">
604
605  .nav-search {
606    font-size: x-small;
607  }
608
609  /* Algolioa Autocomplete */
610
611  .algolia-autocomplete {
612    display: inline-block;
613    margin-left: 10px;
614    vertical-align: sub;
615    background-color: white;
616    color: black;
617    padding: 6px;
618    padding-top: 8px;
619    padding-bottom: 0;
620    border-radius: 6px;
621    border: 1px #0F2E3D solid;
622    width: 180px;
623  }
624
625
626  @media screen and (max-width: 768px) {
627    .distill-site-nav .algolia-autocomplete {
628      display: none;
629      visibility: hidden;
630    }
631    .distill-site-nav.responsive .algolia-autocomplete {
632      display: inline-block;
633      visibility: visible;
634    }
635    .distill-site-nav.responsive .algolia-autocomplete .aa-dropdown-menu {
636      margin-left: 0;
637      width: 400px;
638      max-height: 400px;
639    }
640  }
641
642  .algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
643    width: 90%;
644    outline: none;
645    border: none;
646  }
647
648  .algolia-autocomplete .aa-hint {
649    color: #999;
650  }
651  .algolia-autocomplete .aa-dropdown-menu {
652    width: 550px;
653    max-height: 70vh;
654    overflow-x: visible;
655    overflow-y: scroll;
656    padding: 5px;
657    margin-top: 3px;
658    margin-left: -150px;
659    background-color: #fff;
660    border-radius: 5px;
661    border: 1px solid #999;
662    border-top: none;
663  }
664
665  .algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
666    cursor: pointer;
667    padding: 5px 4px;
668    border-bottom: 1px solid #eee;
669  }
670
671  .algolia-autocomplete .aa-dropdown-menu .aa-suggestion:last-of-type {
672    border-bottom: none;
673    margin-bottom: 2px;
674  }
675
676  .algolia-autocomplete .aa-dropdown-menu .aa-suggestion .search-item {
677    overflow: hidden;
678    font-size: 0.8em;
679    line-height: 1.4em;
680  }
681
682  .algolia-autocomplete .aa-dropdown-menu .aa-suggestion .search-item h3 {
683    font-size: 1rem;
684    margin-block-start: 0;
685    margin-block-end: 5px;
686  }
687
688  .algolia-autocomplete .aa-dropdown-menu .aa-suggestion .search-item-description {
689    display: inline-block;
690    overflow: hidden;
691    height: 2.8em;
692    width: 80%;
693    margin-right: 4%;
694  }
695
696  .algolia-autocomplete .aa-dropdown-menu .aa-suggestion .search-item-preview {
697    display: inline-block;
698    width: 15%;
699  }
700
701  .algolia-autocomplete .aa-dropdown-menu .aa-suggestion .search-item-preview img {
702    height: 3em;
703    width: auto;
704    display: none;
705  }
706
707  .algolia-autocomplete .aa-dropdown-menu .aa-suggestion .search-item-preview img[src] {
708    display: initial;
709  }
710
711  .algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
712    background-color: #eee;
713  }
714  .algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
715    font-weight: bold;
716    font-style: normal;
717  }
718
719  </style>
720
721
722  <!--/radix_placeholder_navigation_in_header-->
723  <!--radix_placeholder_distill-->
724
725  <style type="text/css">
726
727  body {
728    background-color: white;
729  }
730
731  .pandoc-table {
732    width: 100%;
733  }
734
735  .pandoc-table>caption {
736    margin-bottom: 10px;
737  }
738
739  .pandoc-table th:not([align]) {
740    text-align: left;
741  }
742
743  .pagedtable-footer {
744    font-size: 15px;
745  }
746
747  d-byline .byline {
748    grid-template-columns: 2fr 2fr;
749  }
750
751  d-byline .byline h3 {
752    margin-block-start: 1.5em;
753  }
754
755  d-byline .byline .authors-affiliations h3 {
756    margin-block-start: 0.5em;
757  }
758
759  .authors-affiliations .orcid-id {
760    width: 16px;
761    height:16px;
762    margin-left: 4px;
763    margin-right: 4px;
764    vertical-align: middle;
765    padding-bottom: 2px;
766  }
767
768  d-title .dt-tags {
769    margin-top: 1em;
770    grid-column: text;
771  }
772
773  .dt-tags .dt-tag {
774    text-decoration: none;
775    display: inline-block;
776    color: rgba(0,0,0,0.6);
777    padding: 0em 0.4em;
778    margin-right: 0.5em;
779    margin-bottom: 0.4em;
780    font-size: 70%;
781    border: 1px solid rgba(0,0,0,0.2);
782    border-radius: 3px;
783    text-transform: uppercase;
784    font-weight: 500;
785  }
786
787  d-article table.gt_table td,
788  d-article table.gt_table th {
789    border-bottom: none;
790    font-size: 100%;
791  }
792
793  .html-widget {
794    margin-bottom: 2.0em;
795  }
796
797  .l-screen-inset {
798    padding-right: 16px;
799  }
800
801  .l-screen .caption {
802    margin-left: 10px;
803  }
804
805  .shaded {
806    background: rgb(247, 247, 247);
807    padding-top: 20px;
808    padding-bottom: 20px;
809    border-top: 1px solid rgba(0, 0, 0, 0.1);
810    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
811  }
812
813  .shaded .html-widget {
814    margin-bottom: 0;
815    border: 1px solid rgba(0, 0, 0, 0.1);
816  }
817
818  .shaded .shaded-content {
819    background: white;
820  }
821
822  .text-output {
823    margin-top: 0;
824    line-height: 1.5em;
825  }
826
827  .hidden {
828    display: none !important;
829  }
830
831  hr.section-separator {
832    border: none;
833    border-top: 1px solid rgba(0, 0, 0, 0.1);
834    margin: 0px;
835  }
836
837
838  d-byline {
839    border-top: none;
840  }
841
842  d-article {
843    padding-top: 2.5rem;
844    padding-bottom: 30px;
845    border-top: none;
846  }
847
848  d-appendix {
849    padding-top: 30px;
850  }
851
852  d-article>p>img {
853    width: 100%;
854  }
855
856  d-article h2 {
857    margin: 1rem 0 1.5rem 0;
858  }
859
860  d-article h3 {
861    margin-top: 1.5rem;
862  }
863
864  d-article iframe {
865    border: 1px solid rgba(0, 0, 0, 0.1);
866    margin-bottom: 2.0em;
867    width: 100%;
868  }
869
870  /* Tweak code blocks */
871
872  d-article div.sourceCode code,
873  d-article pre code {
874    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
875  }
876
877  d-article pre,
878  d-article div.sourceCode,
879  d-article div.sourceCode pre {
880    overflow: auto;
881  }
882
883  d-article div.sourceCode {
884    background-color: white;
885  }
886
887  d-article div.sourceCode pre {
888    padding-left: 10px;
889    font-size: 12px;
890    border-left: 2px solid rgba(0,0,0,0.1);
891  }
892
893  d-article pre {
894    font-size: 12px;
895    color: black;
896    background: none;
897    margin-top: 0;
898    text-align: left;
899    white-space: pre;
900    word-spacing: normal;
901    word-break: normal;
902    word-wrap: normal;
903    line-height: 1.5;
904
905    -moz-tab-size: 4;
906    -o-tab-size: 4;
907    tab-size: 4;
908
909    -webkit-hyphens: none;
910    -moz-hyphens: none;
911    -ms-hyphens: none;
912    hyphens: none;
913  }
914
915  d-article pre a {
916    border-bottom: none;
917  }
918
919  d-article pre a:hover {
920    border-bottom: none;
921    text-decoration: underline;
922  }
923
924  d-article details {
925    grid-column: text;
926    margin-bottom: 0.8em;
927  }
928
929  @media(min-width: 768px) {
930
931  d-article pre,
932  d-article div.sourceCode,
933  d-article div.sourceCode pre {
934    overflow: visible !important;
935  }
936
937  d-article div.sourceCode pre {
938    padding-left: 18px;
939    font-size: 14px;
940  }
941
942  /* tweak for Pandoc numbered line within distill */
943  d-article pre.numberSource code > span {
944      left: -2em;
945  }
946
947  d-article pre {
948    font-size: 14px;
949  }
950
951  }
952
953  figure img.external {
954    background: white;
955    border: 1px solid rgba(0, 0, 0, 0.1);
956    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
957    padding: 18px;
958    box-sizing: border-box;
959  }
960
961  /* CSS for d-contents */
962
963  .d-contents {
964    grid-column: text;
965    color: rgba(0,0,0,0.8);
966    font-size: 0.9em;
967    padding-bottom: 1em;
968    margin-bottom: 1em;
969    padding-bottom: 0.5em;
970    margin-bottom: 1em;
971    padding-left: 0.25em;
972    justify-self: start;
973  }
974
975  @media(min-width: 1000px) {
976    .d-contents.d-contents-float {
977      height: 0;
978      grid-column-start: 1;
979      grid-column-end: 4;
980      justify-self: center;
981      padding-right: 3em;
982      padding-left: 2em;
983    }
984  }
985
986  .d-contents nav h3 {
987    font-size: 18px;
988    margin-top: 0;
989    margin-bottom: 1em;
990  }
991
992  .d-contents li {
993    list-style-type: none
994  }
995
996  .d-contents nav > ul {
997    padding-left: 0;
998  }
999
1000  .d-contents ul {
1001    padding-left: 1em
1002  }
1003
1004  .d-contents nav ul li {
1005    margin-top: 0.6em;
1006    margin-bottom: 0.2em;
1007  }
1008
1009  .d-contents nav a {
1010    font-size: 13px;
1011    border-bottom: none;
1012    text-decoration: none
1013    color: rgba(0, 0, 0, 0.8);
1014  }
1015
1016  .d-contents nav a:hover {
1017    text-decoration: underline solid rgba(0, 0, 0, 0.6)
1018  }
1019
1020  .d-contents nav > ul > li > a {
1021    font-weight: 600;
1022  }
1023
1024  .d-contents nav > ul > li > ul {
1025    font-weight: inherit;
1026  }
1027
1028  .d-contents nav > ul > li > ul > li {
1029    margin-top: 0.2em;
1030  }
1031
1032
1033  .d-contents nav ul {
1034    margin-top: 0;
1035    margin-bottom: 0.25em;
1036  }
1037
1038  .d-article-with-toc h2:nth-child(2) {
1039    margin-top: 0;
1040  }
1041
1042
1043  /* Figure */
1044
1045  .figure {
1046    position: relative;
1047    margin-bottom: 2.5em;
1048    margin-top: 1.5em;
1049  }
1050
1051  .figure .caption {
1052    color: rgba(0, 0, 0, 0.6);
1053    font-size: 12px;
1054    line-height: 1.5em;
1055  }
1056
1057  .figure img.external {
1058    background: white;
1059    border: 1px solid rgba(0, 0, 0, 0.1);
1060    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
1061    padding: 18px;
1062    box-sizing: border-box;
1063  }
1064
1065  .figure .caption a {
1066    color: rgba(0, 0, 0, 0.6);
1067  }
1068
1069  .figure .caption b,
1070  .figure .caption strong, {
1071    font-weight: 600;
1072    color: rgba(0, 0, 0, 1.0);
1073  }
1074
1075  /* Citations */
1076
1077  d-article .citation {
1078    color: inherit;
1079    cursor: inherit;
1080  }
1081
1082  div.hanging-indent{
1083    margin-left: 1em; text-indent: -1em;
1084  }
1085
1086  /* Citation hover box */
1087
1088  .tippy-box[data-theme~=light-border] {
1089    background-color: rgba(250, 250, 250, 0.95);
1090  }
1091
1092  .tippy-content > p {
1093    margin-bottom: 0;
1094    padding: 2px;
1095  }
1096
1097
1098  /* Tweak 1000px media break to show more text */
1099
1100  @media(min-width: 1000px) {
1101    .base-grid,
1102    distill-header,
1103    d-title,
1104    d-abstract,
1105    d-article,
1106    d-appendix,
1107    distill-appendix,
1108    d-byline,
1109    d-footnote-list,
1110    d-citation-list,
1111    distill-footer {
1112      grid-template-columns: [screen-start] 1fr [page-start kicker-start] 80px [middle-start] 50px [text-start kicker-end] 65px 65px 65px 65px 65px 65px 65px 65px [text-end gutter-start] 65px [middle-end] 65px [page-end gutter-end] 1fr [screen-end];
1113      grid-column-gap: 16px;
1114    }
1115
1116    .grid {
1117      grid-column-gap: 16px;
1118    }
1119
1120    d-article {
1121      font-size: 1.06rem;
1122      line-height: 1.7em;
1123    }
1124    figure .caption, .figure .caption, figure figcaption {
1125      font-size: 13px;
1126    }
1127  }
1128
1129  @media(min-width: 1180px) {
1130    .base-grid,
1131    distill-header,
1132    d-title,
1133    d-abstract,
1134    d-article,
1135    d-appendix,
1136    distill-appendix,
1137    d-byline,
1138    d-footnote-list,
1139    d-citation-list,
1140    distill-footer {
1141      grid-template-columns: [screen-start] 1fr [page-start kicker-start] 60px [middle-start] 60px [text-start kicker-end] 60px 60px 60px 60px 60px 60px 60px 60px [text-end gutter-start] 60px [middle-end] 60px [page-end gutter-end] 1fr [screen-end];
1142      grid-column-gap: 32px;
1143    }
1144
1145    .grid {
1146      grid-column-gap: 32px;
1147    }
1148  }
1149
1150
1151  /* Get the citation styles for the appendix (not auto-injected on render since
1152     we do our own rendering of the citation appendix) */
1153
1154  d-appendix .citation-appendix,
1155  .d-appendix .citation-appendix {
1156    font-size: 11px;
1157    line-height: 15px;
1158    border-left: 1px solid rgba(0, 0, 0, 0.1);
1159    padding-left: 18px;
1160    border: 1px solid rgba(0,0,0,0.1);
1161    background: rgba(0, 0, 0, 0.02);
1162    padding: 10px 18px;
1163    border-radius: 3px;
1164    color: rgba(150, 150, 150, 1);
1165    overflow: hidden;
1166    margin-top: -12px;
1167    white-space: pre-wrap;
1168    word-wrap: break-word;
1169  }
1170
1171  /* Include appendix styles here so they can be overridden */
1172
1173  d-appendix {
1174    contain: layout style;
1175    font-size: 0.8em;
1176    line-height: 1.7em;
1177    margin-top: 60px;
1178    margin-bottom: 0;
1179    border-top: 1px solid rgba(0, 0, 0, 0.1);
1180    color: rgba(0,0,0,0.5);
1181    padding-top: 60px;
1182    padding-bottom: 48px;
1183  }
1184
1185  d-appendix h3 {
1186    grid-column: page-start / text-start;
1187    font-size: 15px;
1188    font-weight: 500;
1189    margin-top: 1em;
1190    margin-bottom: 0;
1191    color: rgba(0,0,0,0.65);
1192  }
1193
1194  d-appendix h3 + * {
1195    margin-top: 1em;
1196  }
1197
1198  d-appendix ol {
1199    padding: 0 0 0 15px;
1200  }
1201
1202  @media (min-width: 768px) {
1203    d-appendix ol {
1204      padding: 0 0 0 30px;
1205      margin-left: -30px;
1206    }
1207  }
1208
1209  d-appendix li {
1210    margin-bottom: 1em;
1211  }
1212
1213  d-appendix a {
1214    color: rgba(0, 0, 0, 0.6);
1215  }
1216
1217  d-appendix > * {
1218    grid-column: text;
1219  }
1220
1221  d-appendix > d-footnote-list,
1222  d-appendix > d-citation-list,
1223  d-appendix > distill-appendix {
1224    grid-column: screen;
1225  }
1226
1227  /* Include footnote styles here so they can be overridden */
1228
1229  d-footnote-list {
1230    contain: layout style;
1231  }
1232
1233  d-footnote-list > * {
1234    grid-column: text;
1235  }
1236
1237  d-footnote-list a.footnote-backlink {
1238    color: rgba(0,0,0,0.3);
1239    padding-left: 0.5em;
1240  }
1241
1242
1243
1244  /* Anchor.js */
1245
1246  .anchorjs-link {
1247    /*transition: all .25s linear; */
1248    text-decoration: none;
1249    border-bottom: none;
1250  }
1251  *:hover > .anchorjs-link {
1252    margin-left: -1.125em !important;
1253    text-decoration: none;
1254    border-bottom: none;
1255  }
1256
1257  /* Social footer */
1258
1259  .social_footer {
1260    margin-top: 30px;
1261    margin-bottom: 0;
1262    color: rgba(0,0,0,0.67);
1263  }
1264
1265  .disqus-comments {
1266    margin-right: 30px;
1267  }
1268
1269  .disqus-comment-count {
1270    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
1271    cursor: pointer;
1272  }
1273
1274  #disqus_thread {
1275    margin-top: 30px;
1276  }
1277
1278  .article-sharing a {
1279    border-bottom: none;
1280    margin-right: 8px;
1281  }
1282
1283  .article-sharing a:hover {
1284    border-bottom: none;
1285  }
1286
1287  .sidebar-section.subscribe {
1288    font-size: 12px;
1289    line-height: 1.6em;
1290  }
1291
1292  .subscribe p {
1293    margin-bottom: 0.5em;
1294  }
1295
1296
1297  .article-footer .subscribe {
1298    font-size: 15px;
1299    margin-top: 45px;
1300  }
1301
1302
1303  .sidebar-section.custom {
1304    font-size: 12px;
1305    line-height: 1.6em;
1306  }
1307
1308  .custom p {
1309    margin-bottom: 0.5em;
1310  }
1311
1312  /* Styles for listing layout (hide title) */
1313  .layout-listing d-title, .layout-listing .d-title {
1314    display: none;
1315  }
1316
1317  /* Styles for posts lists (not auto-injected) */
1318
1319
1320  .posts-with-sidebar {
1321    padding-left: 45px;
1322    padding-right: 45px;
1323  }
1324
1325  .posts-list .description h2,
1326  .posts-list .description p {
1327    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
1328  }
1329
1330  .posts-list .description h2 {
1331    font-weight: 700;
1332    border-bottom: none;
1333    padding-bottom: 0;
1334  }
1335
1336  .posts-list h2.post-tag {
1337    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
1338    padding-bottom: 12px;
1339  }
1340  .posts-list {
1341    margin-top: 60px;
1342    margin-bottom: 24px;
1343  }
1344
1345  .posts-list .post-preview {
1346    text-decoration: none;
1347    overflow: hidden;
1348    display: block;
1349    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
1350    padding: 24px 0;
1351  }
1352
1353  .post-preview-last {
1354    border-bottom: none !important;
1355  }
1356
1357  .posts-list .posts-list-caption {
1358    grid-column: screen;
1359    font-weight: 400;
1360  }
1361
1362  .posts-list .post-preview h2 {
1363    margin: 0 0 6px 0;
1364    line-height: 1.2em;
1365    font-style: normal;
1366    font-size: 24px;
1367  }
1368
1369  .posts-list .post-preview p {
1370    margin: 0 0 12px 0;
1371    line-height: 1.4em;
1372    font-size: 16px;
1373  }
1374
1375  .posts-list .post-preview .thumbnail {
1376    box-sizing: border-box;
1377    margin-bottom: 24px;
1378    position: relative;
1379    max-width: 500px;
1380  }
1381  .posts-list .post-preview img {
1382    width: 100%;
1383    display: block;
1384  }
1385
1386  .posts-list .metadata {
1387    font-size: 12px;
1388    line-height: 1.4em;
1389    margin-bottom: 18px;
1390  }
1391
1392  .posts-list .metadata > * {
1393    display: inline-block;
1394  }
1395
1396  .posts-list .metadata .publishedDate {
1397    margin-right: 2em;
1398  }
1399
1400  .posts-list .metadata .dt-authors {
1401    display: block;
1402    margin-top: 0.3em;
1403    margin-right: 2em;
1404  }
1405
1406  .posts-list .dt-tags {
1407    display: block;
1408    line-height: 1em;
1409  }
1410
1411  .posts-list .dt-tags .dt-tag {
1412    display: inline-block;
1413    color: rgba(0,0,0,0.6);
1414    padding: 0.3em 0.4em;
1415    margin-right: 0.2em;
1416    margin-bottom: 0.4em;
1417    font-size: 60%;
1418    border: 1px solid rgba(0,0,0,0.2);
1419    border-radius: 3px;
1420    text-transform: uppercase;
1421    font-weight: 500;
1422  }
1423
1424  .posts-list img {
1425    opacity: 1;
1426  }
1427
1428  .posts-list img[data-src] {
1429    opacity: 0;
1430  }
1431
1432  .posts-more {
1433    clear: both;
1434  }
1435
1436
1437  .posts-sidebar {
1438    font-size: 16px;
1439  }
1440
1441  .posts-sidebar h3 {
1442    font-size: 16px;
1443    margin-top: 0;
1444    margin-bottom: 0.5em;
1445    font-weight: 400;
1446    text-transform: uppercase;
1447  }
1448
1449  .sidebar-section {
1450    margin-bottom: 30px;
1451  }
1452
1453  .categories ul {
1454    list-style-type: none;
1455    margin: 0;
1456    padding: 0;
1457  }
1458
1459  .categories li {
1460    color: rgba(0, 0, 0, 0.8);
1461    margin-bottom: 0;
1462  }
1463
1464  .categories li>a {
1465    border-bottom: none;
1466  }
1467
1468  .categories li>a:hover {
1469    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
1470  }
1471
1472  .categories .active {
1473    font-weight: 600;
1474  }
1475
1476  .categories .category-count {
1477    color: rgba(0, 0, 0, 0.4);
1478  }
1479
1480
1481  @media(min-width: 768px) {
1482    .posts-list .post-preview h2 {
1483      font-size: 26px;
1484    }
1485    .posts-list .post-preview .thumbnail {
1486      float: right;
1487      width: 30%;
1488      margin-bottom: 0;
1489    }
1490    .posts-list .post-preview .description {
1491      float: left;
1492      width: 45%;
1493    }
1494    .posts-list .post-preview .metadata {
1495      float: left;
1496      width: 20%;
1497      margin-top: 8px;
1498    }
1499    .posts-list .post-preview p {
1500      margin: 0 0 12px 0;
1501      line-height: 1.5em;
1502      font-size: 16px;
1503    }
1504    .posts-with-sidebar .posts-list {
1505      float: left;
1506      width: 75%;
1507    }
1508    .posts-with-sidebar .posts-sidebar {
1509      float: right;
1510      width: 20%;
1511      margin-top: 60px;
1512      padding-top: 24px;
1513      padding-bottom: 24px;
1514    }
1515  }
1516
1517
1518  /* Improve display for browsers without grid (IE/Edge <= 15) */
1519
1520  .downlevel {
1521    line-height: 1.6em;
1522    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
1523    margin: 0;
1524  }
1525
1526  .downlevel .d-title {
1527    padding-top: 6rem;
1528    padding-bottom: 1.5rem;
1529  }
1530
1531  .downlevel .d-title h1 {
1532    font-size: 50px;
1533    font-weight: 700;
1534    line-height: 1.1em;
1535    margin: 0 0 0.5rem;
1536  }
1537
1538  .downlevel .d-title p {
1539    font-weight: 300;
1540    font-size: 1.2rem;
1541    line-height: 1.55em;
1542    margin-top: 0;
1543  }
1544
1545  .downlevel .d-byline {
1546    padding-top: 0.8em;
1547    padding-bottom: 0.8em;
1548    font-size: 0.8rem;
1549    line-height: 1.8em;
1550  }
1551
1552  .downlevel .section-separator {
1553    border: none;
1554    border-top: 1px solid rgba(0, 0, 0, 0.1);
1555  }
1556
1557  .downlevel .d-article {
1558    font-size: 1.06rem;
1559    line-height: 1.7em;
1560    padding-top: 1rem;
1561    padding-bottom: 2rem;
1562  }
1563
1564
1565  .downlevel .d-appendix {
1566    padding-left: 0;
1567    padding-right: 0;
1568    max-width: none;
1569    font-size: 0.8em;
1570    line-height: 1.7em;
1571    margin-bottom: 0;
1572    color: rgba(0,0,0,0.5);
1573    padding-top: 40px;
1574    padding-bottom: 48px;
1575  }
1576
1577  .downlevel .footnotes ol {
1578    padding-left: 13px;
1579  }
1580
1581  .downlevel .base-grid,
1582  .downlevel .distill-header,
1583  .downlevel .d-title,
1584  .downlevel .d-abstract,
1585  .downlevel .d-article,
1586  .downlevel .d-appendix,
1587  .downlevel .distill-appendix,
1588  .downlevel .d-byline,
1589  .downlevel .d-footnote-list,
1590  .downlevel .d-citation-list,
1591  .downlevel .distill-footer,
1592  .downlevel .appendix-bottom,
1593  .downlevel .posts-container {
1594    padding-left: 40px;
1595    padding-right: 40px;
1596  }
1597
1598  @media(min-width: 768px) {
1599    .downlevel .base-grid,
1600    .downlevel .distill-header,
1601    .downlevel .d-title,
1602    .downlevel .d-abstract,
1603    .downlevel .d-article,
1604    .downlevel .d-appendix,
1605    .downlevel .distill-appendix,
1606    .downlevel .d-byline,
1607    .downlevel .d-footnote-list,
1608    .downlevel .d-citation-list,
1609    .downlevel .distill-footer,
1610    .downlevel .appendix-bottom,
1611    .downlevel .posts-container {
1612    padding-left: 150px;
1613    padding-right: 150px;
1614    max-width: 900px;
1615  }
1616  }
1617
1618  .downlevel pre code {
1619    display: block;
1620    border-left: 2px solid rgba(0, 0, 0, .1);
1621    padding: 0 0 0 20px;
1622    font-size: 14px;
1623  }
1624
1625  .downlevel code, .downlevel pre {
1626    color: black;
1627    background: none;
1628    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
1629    text-align: left;
1630    white-space: pre;
1631    word-spacing: normal;
1632    word-break: normal;
1633    word-wrap: normal;
1634    line-height: 1.5;
1635
1636    -moz-tab-size: 4;
1637    -o-tab-size: 4;
1638    tab-size: 4;
1639
1640    -webkit-hyphens: none;
1641    -moz-hyphens: none;
1642    -ms-hyphens: none;
1643    hyphens: none;
1644  }
1645
1646  .downlevel .posts-list .post-preview {
1647    color: inherit;
1648  }
1649
1650
1651
1652  </style>
1653
1654  
1654<script type="application/javascript">
1655
1656  function is_downlevel_browser() {
1657    if (bowser.isUnsupportedBrowser({ msie: "12", msedge: "16"},
1658                                   window.navigator.userAgent)) {
1659      return true;
1660    } else {
1661      return window.load_distill_framework === undefined;
1662    }
1663  }
1664
1665  // show body when load is complete
1666  function on_load_complete() {
1667
1668    // add anchors
1669    if (window.anchors) {
1670      window.anchors.options.placement = 'left';
1671      window.anchors.add('d-article > h2, d-article > h3, d-article > h4, d-article > h5');
1672    }
1673
1674
1675    // set body to visible
1676    document.body.style.visibility = 'visible';
1677
1678    // force redraw for leaflet widgets
1679    if (window.HTMLWidgets) {
1680      var maps = window.HTMLWidgets.findAll(".leaflet");
1681      $.each(maps, function(i, el) {
1682        var map = this.getMap();
1683        map.invalidateSize();
1684        map.eachLayer(function(layer) {
1685          if (layer instanceof L.TileLayer)
1686            layer.redraw();
1687        });
1688      });
1689    }
1690
1691    // trigger 'shown' so htmlwidgets resize
1692    $('d-article').trigger('shown');
1693  }
1694
1695  function init_distill() {
1696
1697    init_common();
1698
1699    // create front matter
1700    var front_matter = $('<d-front-matter></d-front-matter>');
1701    $('#distill-front-matter').wrap(front_matter);
1702
1703    // create d-title
1704    $('.d-title').changeElementType('d-title');
1705
1706    // separator
1707    var separator = '<hr class="section-separator" style="clear: both"/>';
1708    // prepend separator above appendix
1709    $('.d-byline').before(separator);
1710    $('.d-article').before(separator);
1711
1712    // create d-byline
1713    var byline = $('<d-byline></d-byline>');
1714    $('.d-byline').replaceWith(byline);
1715
1716    // create d-article
1717    var article = $('<d-article></d-article>');
1718    $('.d-article').wrap(article).children().unwrap();
1719
1720    // move posts container into article
1721    $('.posts-container').appendTo($('d-article'));
1722
1723    // create d-appendix
1724    $('.d-appendix').changeElementType('d-appendix');
1725
1726    // flag indicating that we have appendix items
1727    var appendix = $('.appendix-bottom').children('h3').length > 0;
1728
1729    // replace footnotes with <d-footnote>
1730    $('.footnote-ref').each(function(i, val) {
1731      appendix = true;
1732      var href = $(this).attr('href');
1733      var id = href.replace('#', '');
1734      var fn = $('#' + id);
1735      var fn_p = $('#' + id + '>p');
1736      fn_p.find('.footnote-back').remove();
1737      var text = fn_p.html();
1738      var dtfn = $('<d-footnote></d-footnote>');
1739      dtfn.html(text);
1740      $(this).replaceWith(dtfn);
1741    });
1742    // remove footnotes
1743    $('.footnotes').remove();
1744
1745    // move refs into #references-listing
1746    $('#references-listing').replaceWith($('#refs'));
1747
1748    $('h1.appendix, h2.appendix').each(function(i, val) {
1749      $(this).changeElementType('h3');
1750    });
1751    $('h3.appendix').each(function(i, val) {
1752      var id = $(this).attr('id');
1753      $('.d-contents a[href="#' + id + '"]').parent().remove();
1754      appendix = true;
1755      $(this).nextUntil($('h1, h2, h3')).addBack().appendTo($('d-appendix'));
1756    });
1757
1758    // show d-appendix if we have appendix content
1759    $("d-appendix").css('display', appendix ? 'grid' : 'none');
1760
1761    // localize layout chunks to just output
1762    $('.layout-chunk').each(function(i, val) {
1763
1764      // capture layout
1765      var layout = $(this).attr('data-layout');
1766
1767      // apply layout to markdown level block elements
1768      var elements = $(this).children().not('details, div.sourceCode, pre, script');
1769      elements.each(function(i, el) {
1770        var layout_div = $('<div class="' + layout + '"></div>');
1771        if (layout_div.hasClass('shaded')) {
1772          var shaded_content = $('<div class="shaded-content"></div>');
1773          $(this).wrap(shaded_content);
1774          $(this).parent().wrap(layout_div);
1775        } else {
1776          $(this).wrap(layout_div);
1777        }
1778      });
1779
1780
1781      // unwrap the layout-chunk div
1782      $(this).children().unwrap();
1783    });
1784
1785    // remove code block used to force  highlighting css
1786    $('.distill-force-highlighting-css').parent().remove();
1787
1788    // remove empty line numbers inserted by pandoc when using a
1789    // custom syntax highlighting theme, except when numbering line
1790    // in code chunk
1791    $('pre:not(.numberLines) code.sourceCode a:empty').remove();
1792
1793    // load distill framework
1794    load_distill_framework();
1795
1796    // wait for window.distillRunlevel == 4 to do post processing
1797    function distill_post_process() {
1798
1799      if (!window.distillRunlevel || window.distillRunlevel < 4)
1800        return;
1801
1802      // hide author/affiliations entirely if we have no authors
1803      var front_matter = JSON.parse($("#distill-front-matter").html());
1804      var have_authors = front_matter.authors && front_matter.authors.length > 0;
1805      if (!have_authors)
1806        $('d-byline').addClass('hidden');
1807
1808      // article with toc class
1809      $('.d-contents').parent().addClass('d-article-with-toc');
1810
1811      // strip links that point to #
1812      $('.authors-affiliations').find('a[href="#"]').removeAttr('href');
1813
1814      // add orcid ids
1815      $('.authors-affiliations').find('.author').each(function(i, el) {
1816        var orcid_id = front_matter.authors[i].orcidID;
1817        var author_name = front_matter.authors[i].author
1818        if (orcid_id) {
1819          var a = $('<a></a>');
1820          a.attr('href', 'https://orcid.org/' + orcid_id);
1821          var img = $('<img></img>');
1822          img.addClass('orcid-id');
1823          img.attr('alt', author_name ? 'ORCID ID for ' + author_name : 'ORCID ID');
1824          img.attr('src','data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1N0NEMjA4MDI1MjA2ODExOTk0QzkzNTEzRjZEQTg1NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozM0NDOEJGNEZGNTcxMUUxODdBOEVCODg2RjdCQ0QwOSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozM0NDOEJGM0ZGNTcxMUUxODdBOEVCODg2RjdCQ0QwOSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkZDN0YxMTc0MDcyMDY4MTE5NUZFRDc5MUM2MUUwNEREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU3Q0QyMDgwMjUyMDY4MTE5OTRDOTM1MTNGNkRBODU3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+84NovQAAAR1JREFUeNpiZEADy85ZJgCpeCB2QJM6AMQLo4yOL0AWZETSqACk1gOxAQN+cAGIA4EGPQBxmJA0nwdpjjQ8xqArmczw5tMHXAaALDgP1QMxAGqzAAPxQACqh4ER6uf5MBlkm0X4EGayMfMw/Pr7Bd2gRBZogMFBrv01hisv5jLsv9nLAPIOMnjy8RDDyYctyAbFM2EJbRQw+aAWw/LzVgx7b+cwCHKqMhjJFCBLOzAR6+lXX84xnHjYyqAo5IUizkRCwIENQQckGSDGY4TVgAPEaraQr2a4/24bSuoExcJCfAEJihXkWDj3ZAKy9EJGaEo8T0QSxkjSwORsCAuDQCD+QILmD1A9kECEZgxDaEZhICIzGcIyEyOl2RkgwAAhkmC+eAm0TAAAAABJRU5ErkJggg==');
1825          a.append(img);
1826          $(this).append(a);
1827        }
1828      });
1829
1830      // hide elements of author/affiliations grid that have no value
1831      function hide_byline_column(caption) {
1832        $('d-byline').find('h3:contains("' + caption + '")').parent().css('visibility', 'hidden');
1833      }
1834
1835      // affiliations
1836      var have_affiliations = false;
1837      for (var i = 0; i<front_matter.authors.length; ++i) {
1838        var author = front_matter.authors[i];
1839        if (author.affiliation !== "&nbsp;") {
1840          have_affiliations = true;
1841          break;
1842        }
1843      }
1844      if (!have_affiliations)
1845        $('d-byline').find('h3:contains("Affiliations")').css('visibility', 'hidden');
1846
1847      // published date
1848      if (!front_matter.publishedDate)
1849        hide_byline_column("Published");
1850
1851      // document object identifier
1852      var doi = $('d-byline').find('h3:contains("DOI")');
1853      var doi_p = doi.next().empty();
1854      if (!front_matter.doi) {
1855        // if we have a citation and valid citationText then link to that
1856        if ($('#citation').length > 0 && front_matter.citationText) {
1857          doi.html('Citation');
1858          $('<a href="#citation"></a>')
1859            .text(front_matter.citationText)
1860            .appendTo(doi_p);
1861        } else {
1862          hide_byline_column("DOI");
1863        }
1864      } else {
1865        $('<a></a>')
1866           .attr('href', "https://doi.org/" + front_matter.doi)
1867           .html(front_matter.doi)
1868           .appendTo(doi_p);
1869      }
1870
1871       // change plural form of authors/affiliations
1872      if (front_matter.authors.length === 1) {
1873        var grid = $('.authors-affiliations');
1874        grid.children('h3:contains("Authors")').text('Author');
1875        grid.children('h3:contains("Affiliations")').text('Affiliation');
1876      }
1877
1878      // remove d-appendix and d-footnote-list local styles
1879      $('d-appendix > style:first-child').remove();
1880      $('d-footnote-list > style:first-child').remove();
1881
1882      // move appendix-bottom entries to the bottom
1883      $('.appendix-bottom').appendTo('d-appendix').children().unwrap();
1884      $('.appendix-bottom').remove();
1885
1886      // hoverable references
1887      $('span.citation[data-cites]').each(function() {
1888        const citeChild = $(this).children()[0]
1889        // Do not process if @xyz has been used without escaping and without bibliography activated
1890        // https://github.com/rstudio/distill/issues/466
1891        if (citeChild === undefined) return true
1892
1893        if (citeChild.nodeName == "D-FOOTNOTE") {
1894          var fn = citeChild
1895          $(this).html(fn.shadowRoot.querySelector("sup"))
1896          $(this).id = fn.id
1897          fn.remove()
1898        }
1899        var refs = $(this).attr('data-cites').split(" ");
1900        var refHtml = refs.map(function(ref) {
1901          // Could use CSS.escape too here, we insure backward compatibility in navigator
1902          return "<p>" + $('div[id="ref-' + ref + '"]').html() + "</p>";
1903        }).join("\n");
1904        window.tippy(this, {
1905          allowHTML: true,
1906          content: refHtml,
1907          maxWidth: 500,
1908          interactive: true,
1909          interactiveBorder: 10,
1910          theme: 'light-border',
1911          placement: 'bottom-start'
1912        });
1913      });
1914
1915      // fix footnotes in tables (#411)
1916      // replacing broken distill.pub feature
1917      $('table d-footnote').each(function() {
1918        // we replace internal showAtNode methode which is triggered when hovering a footnote
1919        this.hoverBox.showAtNode = function(node) {
1920          // ported from https://github.com/distillpub/template/pull/105/files
1921          calcOffset = function(elem) {
1922              let x = elem.offsetLeft;
1923              let y = elem.offsetTop;
1924              // Traverse upwards until an `absolute` element is found or `elem`
1925              // becomes null.
1926              while (elem = elem.offsetParent && elem.style.position != 'absolute') {
1927                  x += elem.offsetLeft;
1928                  y += elem.offsetTop;
1929              }
1930
1931              return { left: x, top: y };
1932          }
1933          // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop
1934          const bbox = node.getBoundingClientRect();
1935          const offset = calcOffset(node);
1936          this.show([offset.left + bbox.width, offset.top + bbox.height]);
1937        }
1938      })
1939
1940      // clear polling timer
1941      clearInterval(tid);
1942
1943      // show body now that everything is ready
1944      on_load_complete();
1945    }
1946
1947    var tid = setInterval(distill_post_process, 50);
1948    distill_post_process();
1949
1950  }
1951
1952  function init_downlevel() {
1953
1954    init_common();
1955
1956     // insert hr after d-title
1957    $('.d-title').after($('<hr class="section-separator"/>'));
1958
1959    // check if we have authors
1960    var front_matter = JSON.parse($("#distill-front-matter").html());
1961    var have_authors = front_matter.authors && front_matter.authors.length > 0;
1962
1963    // manage byline/border
1964    if (!have_authors)
1965      $('.d-byline').remove();
1966    $('.d-byline').after($('<hr class="section-separator"/>'));
1967    $('.d-byline a').remove();
1968
1969    // remove toc
1970    $('.d-contents').remove();
1971
1972    // move appendix elements
1973    $('h1.appendix, h2.appendix').each(function(i, val) {
1974      $(this).changeElementType('h3');
1975    });
1976    $('h3.appendix').each(function(i, val) {
1977      $(this).nextUntil($('h1, h2, h3')).addBack().appendTo($('.d-appendix'));
1978    });
1979
1980
1981    // inject headers into references and footnotes
1982    var refs_header = $('<h3></h3>');
1983    refs_header.text('References');
1984    $('#refs').prepend(refs_header);
1985
1986    var footnotes_header = $('<h3></h3');
1987    footnotes_header.text('Footnotes');
1988    $('.footnotes').children('hr').first().replaceWith(footnotes_header);
1989
1990    // move appendix-bottom entries to the bottom
1991    $('.appendix-bottom').appendTo('.d-appendix').children().unwrap();
1992    $('.appendix-bottom').remove();
1993
1994    // remove appendix if it's empty
1995    if ($('.d-appendix').children().length === 0)
1996      $('.d-appendix').remove();
1997
1998    // prepend separator above appendix
1999    $('.d-appendix').before($('<hr class="section-separator" style="clear: both"/>'));
2000
2001    // trim code
2002    $('pre>code').each(function(i, val) {
2003      $(this).html($.trim($(this).html()));
2004    });
2005
2006    // move posts-container right before article
2007    $('.posts-container').insertBefore($('.d-article'));
2008
2009    $('body').addClass('downlevel');
2010
2011    on_load_complete();
2012  }
2013
2014
2015  function init_common() {
2016
2017    // jquery plugin to change element types
2018    (function($) {
2019      $.fn.changeElementType = function(newType) {
2020        var attrs = {};
2021
2022        $.each(this[0].attributes, function(idx, attr) {
2023          attrs[attr.nodeName] = attr.nodeValue;
2024        });
2025
2026        this.replaceWith(function() {
2027          return $("<" + newType + "/>", attrs).append($(this).contents());
2028        });
2029      };
2030    })(jQuery);
2031
2032    // prevent underline for linked images
2033    $('a > img').parent().css({'border-bottom' : 'none'});
2034
2035    // mark non-body figures created by knitr chunks as 100% width
2036    $('.layout-chunk').each(function(i, val) {
2037      var figures = $(this).find('img, .html-widget');
2038      // ignore leaflet img layers (#106)
2039      figures = figures.filter(':not(img[class*="leaflet"])')
2040      if ($(this).attr('data-layout') !== "l-body") {
2041        figures.css('width', '100%');
2042      } else {
2043        figures.css('max-width', '100%');
2044        figures.filter("[width]").each(function(i, val) {
2045          var fig = $(this);
2046          fig.css('width', fig.attr('width') + 'px');
2047        });
2048
2049      }
2050    });
2051
2052    // auto-append index.html to post-preview links in file: protocol
2053    // and in rstudio ide preview
2054    $('.post-preview').each(function(i, val) {
2055      if (window.location.protocol === "file:")
2056        $(this).attr('href', $(this).attr('href') + "index.html");
2057    });
2058
2059    // get rid of index.html references in header
2060    if (window.location.protocol !== "file:") {
2061      $('.distill-site-header a[href]').each(function(i,val) {
2062        $(this).attr('href', $(this).attr('href').replace(/^index[.]html/, "./"));
2063      });
2064    }
2065
2066    // add class to pandoc style tables
2067    $('tr.header').parent('thead').parent('table').addClass('pandoc-table');
2068    $('.kable-table').children('table').addClass('pandoc-table');
2069
2070    // add figcaption style to table captions
2071    $('caption').parent('table').addClass("figcaption");
2072
2073    // initialize posts list
2074    if (window.init_posts_list)
2075      window.init_posts_list();
2076
2077    // implmement disqus comment link
2078    $('.disqus-comment-count').click(function() {
2079      window.headroom_prevent_pin = true;
2080      $('#disqus_thread').toggleClass('hidden');
2081      if (!$('#disqus_thread').hasClass('hidden')) {
2082        var offset = $(this).offset();
2083        $(window).resize();
2084        $('html, body').animate({
2085          scrollTop: offset.top - 35
2086        });
2087      }
2088    });
2089  }
2090
2091  document.addEventListener('DOMContentLoaded', function() {
2092    if (is_downlevel_browser())
2093      init_downlevel();
2094    else
2095      window.addEventListener('WebComponentsReady', init_distill);
2096  });
2097
2098  </script>
2098
2099
2100  <style type="text/css">
2101  /* base variables */
2102
2103  /* Edit the CSS properties in this file to create a custom
2104     Distill theme. Only edit values in the right column
2105     for each row; values shown are the CSS defaults.
2106     To return any property to the default,
2107     you may set its value to: unset
2108     All rows must end with a semi-colon.                      */
2109
2110  /* Optional: embed custom fonts here with `@import`          */
2111  /* This must remain at the top of this file.                 */
2112
2113
2114
2115  html {
2116    /*-- Main font sizes --*/
2117    --title-size:      50px;
2118    --body-size:       1.06rem;
2119    --code-size:       14px;
2120    --aside-size:      12px;
2121    --fig-cap-size:    13px;
2122    /*-- Main font colors --*/
2123    --title-color:     #000000;
2124    --header-color:    rgba(0, 0, 0, 0.8);
2125    --body-color:      rgba(0, 0, 0, 0.8);
2126    --aside-color:     rgba(0, 0, 0, 0.6);
2127    --fig-cap-color:   rgba(0, 0, 0, 0.6);
2128    /*-- Specify custom fonts ~~~ must be imported above   --*/
2129    --heading-font:    sans-serif;
2130    --mono-font:       monospace;
2131    --body-font:       sans-serif;
2132    --navbar-font:     sans-serif;  /* websites + blogs only */
2133  }
2134
2135  /*-- ARTICLE METADATA --*/
2136  d-byline {
2137    --heading-size:    0.6rem;
2138    --heading-color:   rgba(0, 0, 0, 0.5);
2139    --body-size:       0.8rem;
2140    --body-color:      rgba(0, 0, 0, 0.8);
2141  }
2142
2143  /*-- ARTICLE TABLE OF CONTENTS --*/
2144  .d-contents {
2145    --heading-size:    18px;
2146    --contents-size:   13px;
2147  }
2148
2149  /*-- ARTICLE APPENDIX --*/
2150  d-appendix {
2151    --heading-size:    15px;
2152    --heading-color:   rgba(0, 0, 0, 0.65);
2153    --text-size:       0.8em;
2154    --text-color:      rgba(0, 0, 0, 0.5);
2155  }
2156
2157  /*-- WEBSITE HEADER + FOOTER --*/
2158  /* These properties only apply to Distill sites and blogs  */
2159
2160  .distill-site-header {
2161    --title-size:       18px;
2162    --text-color:       rgba(255, 255, 255, 0.8);
2163    --text-size:        15px;
2164    --hover-color:      white;
2165    --bkgd-color:       #0F2E3D;
2166  }
2167
2168  .distill-site-footer {
2169    --text-color:       rgba(255, 255, 255, 0.8);
2170    --text-size:        15px;
2171    --hover-color:      white;
2172    --bkgd-color:       #0F2E3D;
2173  }
2174
2175  /*-- Additional custom styles --*/
2176  /* Add any additional CSS rules below                      */
2177  </style>
2178  <style type="text/css">
2179  /* base variables */
2180
2181  /* Edit the CSS properties in this file to create a custom
2182     Distill theme. Only edit values in the right column
2183     for each row; values shown are the CSS defaults.
2184     To return any property to the default,
2185     you may set its value to: unset
2186     All rows must end with a semi-colon.                      */
2187
2188  /* Optional: embed custom fonts here with `@import`          */
2189  /* This must remain at the top of this file.                 */
2190
2191
2192
2193  html {
2194    /*-- Main font sizes --*/
2195    --title-size:      50px;
2196    --body-size:       1.06rem;
2197    --code-size:       14px;
2198    --aside-size:      12px;
2199    --fig-cap-size:    13px;
2200    /*-- Main font colors --*/
2201    --title-color:     #000000;
2202    --header-color:    rgba(0, 0, 0, 0.8);
2203    --body-color:      rgba(0, 0, 0, 0.8);
2204    --aside-color:     rgba(0, 0, 0, 0.6);
2205    --fig-cap-color:   rgba(0, 0, 0, 0.6);
2206    /*-- Specify custom fonts ~~~ must be imported above   --*/
2207    --heading-font:    sans-serif;
2208    --mono-font:       monospace;
2209    --body-font:       sans-serif;
2210    --navbar-font:     sans-serif;  /* websites + blogs only */
2211  }
2212
2213  /*-- ARTICLE METADATA --*/
2214  d-byline {
2215    --heading-size:    0.6rem;
2216    --heading-color:   rgba(0, 0, 0, 0.5);
2217    --body-size:       0.8rem;
2218    --body-color:      rgba(0, 0, 0, 0.8);
2219  }
2220
2221  /*-- ARTICLE TABLE OF CONTENTS --*/
2222  .d-contents {
2223    --heading-size:    18px;
2224    --contents-size:   13px;
2225  }
2226
2227  /*-- ARTICLE APPENDIX --*/
2228  d-appendix {
2229    --heading-size:    15px;
2230    --heading-color:   rgba(0, 0, 0, 0.65);
2231    --text-size:       0.8em;
2232    --text-color:      rgba(0, 0, 0, 0.5);
2233  }
2234
2235  /*-- WEBSITE HEADER + FOOTER --*/
2236  /* These properties only apply to Distill sites and blogs  */
2237
2238  .distill-site-header {
2239    --title-size:       18px;
2240    --text-color:       rgba(255, 255, 255, 0.8);
2241    --text-size:        15px;
2242    --hover-color:      white;
2243    --bkgd-color:       #0F2E3D;
2244  }
2245
2246  .distill-site-footer {
2247    --text-color:       rgba(255, 255, 255, 0.8);
2248    --text-size:        15px;
2249    --hover-color:      white;
2250    --bkgd-color:       #0F2E3D;
2251  }
2252
2253  /*-- Additional custom styles --*/
2254  /* Add any additional CSS rules below                      */
2255
2256
2257
2258  html a {
2259      text-decoration: none;
2260      background-image: linear-gradient(currentColor, currentColor);
2261      background-position: 0% 100%;
2262      background-repeat: no-repeat;
2263      background-size: 0% 2px;
2264      transition: background-size .3s;
2265  }
2266
2267  html a:hover, html a:focus {
2268    background-size: 100% 2px;
2269    color: #107dac;
2270  }
2271
2272  a:hover {
2273      text-decoration: none;
2274  }
2275
2276
2277
2278
2279  /* Chunk output */
2280
2281  d-article pre { 
2282    overflow: auto !important;
2283    border-radius: 5px; /* Rounded edges */
2284    font-size: 12px;
2285    color: white;
2286    background-color: #0f2a3d;
2287    padding: 5px 5px 5px 18px;
2288  }
2289
2290  /* Chunk code */
2291
2292  d-article div.sourceCode pre { 
2293    overflow: auto !important;
2294    border-radius: 5px; /* Rounded edges */
2295    background-color: #e6f0ff;
2296    color: black;
2297    padding: 5px 5px 5px 18px;
2298  }
2299
2300  </style>
2301  <style type="text/css">
2302  /* base style */
2303
2304  /* FONT FAMILIES */
2305
2306  :root {
2307    --heading-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
2308    --mono-default: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
2309    --body-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
2310  }
2311
2312  body,
2313  .posts-list .post-preview p,
2314  .posts-list .description p {
2315    font-family: var(--body-font), var(--body-default);
2316  }
2317
2318  h1, h2, h3, h4, h5, h6,
2319  .posts-list .post-preview h2,
2320  .posts-list .description h2 {
2321    font-family: var(--heading-font), var(--heading-default);
2322  }
2323
2324  d-article div.sourceCode code,
2325  d-article pre code {
2326    font-family: var(--mono-font), var(--mono-default);
2327  }
2328
2329
2330  /*-- TITLE --*/
2331  d-title h1,
2332  .posts-list > h1 {
2333    color: var(--title-color, black);
2334  }
2335
2336  d-title h1 {
2337    font-size: var(--title-size, 50px);
2338  }
2339
2340  /*-- HEADERS --*/
2341  d-article h1,
2342  d-article h2,
2343  d-article h3,
2344  d-article h4,
2345  d-article h5,
2346  d-article h6 {
2347    color: var(--header-color, rgba(0, 0, 0, 0.8));
2348  }
2349
2350  /*-- BODY --*/
2351  d-article > p,  /* only text inside of <p> tags */
2352  d-article > ul, /* lists */
2353  d-article > ol {
2354    color: var(--body-color, rgba(0, 0, 0, 0.8));
2355    font-size: var(--body-size, 1.06rem);
2356  }
2357
2358
2359  /*-- CODE --*/
2360  d-article div.sourceCode code,
2361  d-article pre code {
2362    font-size: var(--code-size, 14px);
2363  }
2364
2365  /*-- ASIDE --*/
2366  d-article aside {
2367    font-size: var(--aside-size, 12px);
2368    color: var(--aside-color, rgba(0, 0, 0, 0.6));
2369  }
2370
2371  /*-- FIGURE CAPTIONS --*/
2372  figure .caption,
2373  figure figcaption,
2374  .figure .caption {
2375    font-size: var(--fig-cap-size, 13px);
2376    color: var(--fig-cap-color, rgba(0, 0, 0, 0.6));
2377  }
2378
2379  /*-- METADATA --*/
2380  d-byline h3 {
2381    font-size: var(--heading-size, 0.6rem);
2382    color: var(--heading-color, rgba(0, 0, 0, 0.5));
2383  }
2384
2385  d-byline {
2386    font-size: var(--body-size, 0.8rem);
2387    color: var(--body-color, rgba(0, 0, 0, 0.8));
2388  }
2389
2390  d-byline a,
2391  d-article d-byline a {
2392    color: var(--body-color, rgba(0, 0, 0, 0.8));
2393  }
2394
2395  /*-- TABLE OF CONTENTS --*/
2396  .d-contents nav h3 {
2397    font-size: var(--heading-size, 18px);
2398  }
2399
2400  .d-contents nav a {
2401    font-size: var(--contents-size, 13px);
2402  }
2403
2404  /*-- APPENDIX --*/
2405  d-appendix h3 {
2406    font-size: var(--heading-size, 15px);
2407    color: var(--heading-color, rgba(0, 0, 0, 0.65));
2408  }
2409
2410  d-appendix {
2411    font-size: var(--text-size, 0.8em);
2412    color: var(--text-color, rgba(0, 0, 0, 0.5));
2413  }
2414
2415  d-appendix d-footnote-list a.footnote-backlink {
2416    color: var(--text-color, rgba(0, 0, 0, 0.5));
2417  }
2418
2419  /*-- WEBSITE HEADER + FOOTER --*/
2420  .distill-site-header .title {
2421    font-size: var(--title-size, 18px);
2422    font-family: var(--navbar-font), var(--heading-default);
2423  }
2424
2425  .distill-site-header a,
2426  .nav-dropdown .nav-dropbtn {
2427    font-family: var(--navbar-font), var(--heading-default);
2428  }
2429
2430  .nav-dropdown .nav-dropbtn {
2431    color: var(--text-color, rgba(255, 255, 255, 0.8));
2432    font-size: var(--text-size, 15px);
2433  }
2434
2435  .distill-site-header a:hover,
2436  .nav-dropdown:hover .nav-dropbtn {
2437    color: var(--hover-color, white);
2438  }
2439
2440  .distill-site-header {
2441    font-size: var(--text-size, 15px);
2442    color: var(--text-color, rgba(255, 255, 255, 0.8));
2443    background-color: var(--bkgd-color, #0F2E3D);
2444  }
2445
2446  .distill-site-footer {
2447    font-size: var(--text-size, 15px);
2448    color: var(--text-color, rgba(255, 255, 255, 0.8));
2449    background-color: var(--bkgd-color, #0F2E3D);
2450  }
2451
2452  .distill-site-footer a:hover {
2453    color: var(--hover-color, white);
2454  }</style>
2455  <!--/radix_placeholder_distill-->
2456  
2456<script src="site_libs/header-attrs-2.29/header-attrs.js"></script>
2456
2457  
2457<script src="site_libs/popper-2.6.0/popper.min.js"></script>
2457
2458  <link href="site_libs/tippy-6.2.7/tippy.css" rel="stylesheet" />
2459  <link href="site_libs/tippy-6.2.7/tippy-light-border.css" rel="stylesheet" />
2460  
2460<script src="site_libs/tippy-6.2.7/tippy.umd.min.js"></script>
2460
2461  
2461<script src="site_libs/anchor-4.2.2/anchor.min.js"></script>
2461
2462  
2462<script src="site_libs/bowser-1.9.3/bowser.min.js"></script>
2462
2463  
2463<script src="site_libs/webcomponents-2.0.0/webcomponents.js"></script>
2463
2464  
2464<script src="site_libs/distill-2.2.21/template.v2.js"></script>
2464
2465  <!--radix_placeholder_site_in_header-->
vendor: 115 bytes, lines 2465-2466
2465
2466  <script type="text/javascript" cookie-consent="tracking" async src="https://www.googletagmanager.com/gtag/js?id=
2466G-3HR0Z037ZB
vendor: 14 bytes, lines 2466-2467
2466"></script>
2467  
2467<script type="text/javascript" cookie-consent="tracking">
2468  
vendor: 133 bytes, lines 2468-2471
2468window.dataLayer = window.dataLayer || [];
2469  function gtag(){dataLayer.push(arguments);}
2470  gtag('js', new Date());
2471  gtag('config', '
2471G-3HR0Z037ZB
vendor: 6 bytes, lines 2471-2472
2471');
2472  
2472</script>
2472
2473  <!--/radix_placeholder_site_in_header-->
2474
2475
2476</head>
2477
2478<body class="layout-listing">
2479
2480<!--radix_placeholder_front_matter-->
2481
2482<script id="distill-front-matter" type="text/json">
2483{"title":"Blog","authors":[]}
2484</script>
2484
2485
2486<!--/radix_placeholder_front_matter-->
2487<!--radix_placeholder_navigation_before_body-->
2488<header class="header header--fixed" role="banner">
2489<nav class="distill-site-nav distill-site-header">
2490<div class="nav-left">
2491<a href="index.html" class="title">F.S.Bellelli</a>
2492<input id="distill-search" class="nav-search hidden" type="text" placeholder="Search..."/>
2493</div>
2494<div class="nav-right">
2495<a href="index.html">
2496<i class="fa fa-home" aria-hidden="true"></i>
2497</a>
2498<a href="about.html">About</a>
2499<a href="research.html">Publications</a>
2500<div class="nav-dropdown">
2501<button class="nav-dropbtn">
2502Data
2503 
2504<span class="down-arrow">&#x25BE;</span>
2505</button>
2506<div class="nav-dropdown-content">
2507<a href="EDB-data.html">EDB extension</a>
2508<a href="ratification-data.html">IEA ratification</a>
2509</div>
2510</div>
2511<a href="projects.html">Other projects</a>
2512<a href="javascript:void(0);" class="nav-toggle">&#9776;</a>
2513</div>
2514</nav>
2515</header>
2516<!--/radix_placeholder_navigation_before_body-->
2517<!--radix_placeholder_site_before_body-->
2518<!--/radix_placeholder_site_before_body-->
2519<!--radix_placeholder_article_listing-->
2520
2521
2522<script type="application/javascript">
2523
2524function init_posts_list() {
2525
2526  function load_image(img) {
2527    var src = $(img).attr('data-src');
2528    if (src) {
2529      $(img).attr('src', src);
2530      $(img).on("load", function() {
2531        img.removeAttribute('data-src');
2532      });
2533    }
2534  }
2535
2536  function set_posts_visible(posts, visible) {
2537    if (visible) {
2538
2539      // show bottom border by default
2540      $(posts).removeClass('post-preview-last');
2541
2542      // apply limits if need be
2543      var max_posts = 25;
2544      var apply_limits = $('.posts-container').hasClass('posts-apply-limit');
2545      if (apply_limits && posts.length > max_posts) {
2546        posts = $(posts).slice(0, max_posts);
2547      } else {
2548        $('.posts-more a').addClass('hidden');
2549      }
2550
2551      // apply last style
2552      $(posts.slice(-1)[0]).addClass('post-preview-last');
2553
2554      $(posts).removeClass('hidden');
2555      $(posts).find('img[data-src]').each(function(i, img) {
2556        load_image(img);
2557      });
2558    } else {
2559      $(posts).addClass('hidden');
2560    }
2561  }
2562
2563  function apply_hash_filter() {
2564
2565    // clear active state
2566    $('.categories .active').removeClass('active');
2567
2568    // mark all posts invisible to start
2569    set_posts_visible($('.posts-list').children('a'), false);
2570
2571    // if we have a hash filter
2572    if (window.location.hash && window.location.hash.startsWith("#category:")) {
2573
2574      // mark posts that match the category visible
2575      var page_category = window.location.hash.replace(/^#category:/, "");
2576      page_category = decodeURIComponent(page_category)
2577      var posts = $('.post-metadata').map(function(idx, script) {
2578        var metadata = $.parseJSON($(script).html());
2579        var post = null;
2580        $.each(metadata.categories, function(idx, category) {
2581          category = category.replace(/ /g,"_");
2582          if ((page_category || '').toLowerCase() === "articles" || category === page_category) {
2583            post = $(script).parent().get();
2584            return false;
2585          }
2586        });
2587        return post;
2588      });
2589      set_posts_visible(posts, true);
2590
2591      // mark the hash active
2592      $('.categories li>a[href="' + decodeURIComponent(window.location.hash) + '"]').addClass('active');
2593
2594      // update the list_caption
2595      var list_caption = $('.posts-list-caption');
2596      var caption = (page_category || '').toLowerCase() === "articles"
2597        ? list_caption.attr('data-caption')
2598        : ('Category: ' + page_category.replace(/_/g," "));
2599      list_caption.text(caption);
2600
2601    } else {
2602
2603      // no hash filter, make all posts visible (subject to max display)
2604      set_posts_visible($('.posts-list').children(), true);
2605
2606      // reset list caption
2607      var list_caption = $('.posts-list-caption');
2608      list_caption.text(list_caption.attr('data-caption'));
2609
2610
2611    }
2612  }
2613
2614  // more articles
2615  function apply_post_limits(apply) {
2616    if (apply) {
2617      $('.posts-container').addClass('posts-apply-limit');
2618      $('.posts-more a').removeClass('hidden');
2619    } else {
2620      $('.posts-container').removeClass('posts-apply-limit');
2621      $('.posts-more a').addClass('hidden');
2622    }
2623  }
2624
2625  // click handling for tags
2626  $('.dt-tag').click(function(ev) {
2627    window.location.hash = '#category:' + $(this).text().replace(/ /g, "_");
2628    return false;
2629  })
2630
2631  // hash filter handling
2632  apply_hash_filter();
2633  $(window).on('hashchange',function() {
2634    apply_post_limits(true);
2635    apply_hash_filter();
2636  });
2637
2638  // more articles link
2639  $('.posts-more a').click(function(e) {
2640    e.preventDefault();
2641    apply_post_limits(false);
2642    apply_hash_filter();
2643    return false;
2644  });
2645
2646}
2647
2648</script>
2648
2649
2650
2651
2652<div class="posts-container posts-with-sidebar posts-apply-limit l-screen-inset">
2653<div class="posts-list">
2654<h1 class="posts-list-caption" data-caption="Blog">Blog</h1>
2655<a href="posts/2023-11-06-new-edb-extension-release/" class="post-preview">
2656<script class="post-metadata" type="text/json">{"categories":["environment","economics"]}</script>
2656
2657<div class="metadata">
2658<div class="publishedDate">Nov. 5, 2023</div>
2659<div class="dt-authors">
2660<div class="dt-author">Francesco S. Bellelli</div>
2661</div>
2662</div>
2663<div class="thumbnail">
2664<img src="posts/2023-11-06-new-edb-extension-release/detected_HS_last_notification_year.png"/>
2665</div>
2666<div class="description">
2667<h2>New EDB extension release</h2>
2668<div class="dt-tags">
2669<div class="dt-tag">environment</div>
2670<div class="dt-tag">economics</div>
2671</div>
2672<p>The environmental measure dataset has been updated to cover the policies notified to WTO up to 2022.</p>
2673</div>
2674</a>
2675<a href="posts/2023-09-24-the-package-countries-is-now-on-cran/" class="post-preview">
2676<script class="post-metadata" type="text/json">{"categories":["coding"]}</script>
2676
2677<div class="metadata">
2678<div class="publishedDate">Sept. 24, 2023</div>
2679<div class="dt-authors">
2680<div class="dt-author">Francesco S. Bellelli</div>
2681</div>
2682</div>
2683<div class="thumbnail">
2684<img src="posts/2023-09-24-the-package-countries-is-now-on-cran/R_logo.png"/>
2685</div>
2686<div class="description">
2687<h2>The package countries is now on CRAN</h2>
2688<div class="dt-tags">
2689<div class="dt-tag">coding</div>
2690</div>
2691<p>After a year of development, I am happy to annouce that my package can now be downloaded directly from R's official repository. And it has some cool new functionalities!</p>
2692</div>
2693</a>
2694<a href="posts/2023-06-06-mpt-portfolio-optimization/" class="post-preview">
2695<script class="post-metadata" type="text/json">{"categories":["finance"]}</script>
2695
2696<div class="metadata">
2697<div class="publishedDate">June 7, 2023</div>
2698<div class="dt-authors">
2699<div class="dt-author">Francesco S. Bellelli</div>
2700</div>
2701</div>
2702<div class="thumbnail">
2703<img src="posts/2023-06-06-mpt-portfolio-optimization/efficient_frontier.png"/>
2704</div>
2705<div class="description">
2706<h2>MPT portfolio optimization</h2>
2707<div class="dt-tags">
2708<div class="dt-tag">finance</div>
2709</div>
2710<p>Portfolio optimization based on Modern Portfolio Theory (MPT) offers investors a framework to maximize returns while minimizing risk by diversifying their investments across different asset classes. In this post, I give a practical demonstration of how simulation can be used to find an efficient portfolio.</p>
2711</div>
2712</a>
2713<a href="posts/2023-04-20-automatic-sorting-of-pictures-by-country/" class="post-preview">
2714<script class="post-metadata" type="text/json">{"categories":["coding"]}</script>
2714
2715<div class="metadata">
2716<div class="publishedDate">April 20, 2023</div>
2717<div class="dt-authors">
2718<div class="dt-author">Francesco S. Bellelli</div>
2719</div>
2720</div>
2721<div class="thumbnail">
2722<img src="posts/2023-04-20-automatic-sorting-of-pictures-by-country/thumbnail.jpg"/>
2723</div>
2724<div class="description">
2725<h2>Automatic sorting of pictures by location</h2>
2726<div class="dt-tags">
2727<div class="dt-tag">coding</div>
2728</div>
2729<p>I like to make a backup of my pictures on an external drive and keep them tidy by sorting them in a separate folder for each country. In this post I share a small script to automate this process and showcase how to do reverse geocoding offline.</p>
2730</div>
2731</a>
2732<a href="posts/2022-12-20-what-to-visit-in-rome/" class="post-preview">
2733<script class="post-metadata" type="text/json">{"categories":["other"]}</script>
2733
2734<div class="metadata">
2735<div class="publishedDate">Dec. 20, 2022</div>
2736<div class="dt-authors">
2737<div class="dt-author">Francesco S. Bellelli</div>
2738</div>
2739</div>
2740<div class="thumbnail">
2741<img src="posts/2022-12-20-what-to-visit-in-rome/cupolone.jpg"/>
2742</div>
2743<div class="description">
2744<h2>What to visit in Rome</h2>
2745<div class="dt-tags">
2746<div class="dt-tag">other</div>
2747</div>
2748<p>I often get asked what to visit in Rome by friends and colleagues planning a trip. In this post I summarise my recommendations and share a few tips for the aspiring tourists.</p>
2749</div>
2750</a>
2751<a href="posts/2022-08-07-updates-to-package-countries/" class="post-preview">
2752<script class="post-metadata" type="text/json">{"categories":["coding"]}</script>
2752
2753<div class="metadata">
2754<div class="publishedDate">Aug. 7, 2022</div>
2755<div class="dt-authors">
2756<div class="dt-author">Francesco S. Bellelli</div>
2757</div>
2758</div>
2759<div class="thumbnail">
2760<img data-src="posts/2022-08-07-updates-to-package-countries/../../images/Countries_logo.png"/>
2761</div>
2762<div class="description">
2763<h2>Updates to package countries</h2>
2764<div class="dt-tags">
2765<div class="dt-tag">coding</div>
2766</div>
2767<p>Version 0.2 of package countries is out. This article is a short description of some of the new functions.</p>
2768</div>
2769</a>
2770<a href="posts/2022-05-22-a-brief-introduction-to-natural-hazard-risk-analysis/" class="post-preview">
2771<script class="post-metadata" type="text/json">{"categories":["risk","coding","environment","other"]}</script>
2771
2772<div class="metadata">
2773<div class="publishedDate">May 22, 2022</div>
2774<div class="dt-authors">
2775<div class="dt-author">Francesco S. Bellelli</div>
2776</div>
2777</div>
2778<div class="thumbnail">
2779<img data-src="posts/2022-05-22-a-brief-introduction-to-natural-hazard-risk-analysis/flood.jpg"/>
2780</div>
2781<div class="description">
2782<h2>A brief introduction to natural hazard risk analysis</h2>
2783<div class="dt-tags">
2784<div class="dt-tag">risk</div>
2785<div class="dt-tag">coding</div>
2786<div class="dt-tag">environment</div>
2787<div class="dt-tag">other</div>
2788</div>
2789<p>This article is a quick guide on the basic steps involved in natural hazard risk analysis. It briefly touches on some of the most common steps:  geocoding, hazard maps, damage curves and climate projections. I demonstrate how R can be used to assess exposure of assets with a simple example on flood risk for presidential palaces around the world.</p>
2790</div>
2791</a>
2792<a href="posts/2022-02-27-first-version-of-countries/" class="post-preview">
2793<script class="post-metadata" type="text/json">{"categories":["coding"]}</script>
2793
2794<div class="metadata">
2795<div class="publishedDate">Feb. 27, 2022</div>
2796<div class="dt-authors">
2797<div class="dt-author">Francesco S. Bellelli</div>
2798</div>
2799</div>
2800<div class="thumbnail">
2801<img data-src="posts/2022-02-27-first-version-of-countries/../../images/Countries_logo.png"/>
2802</div>
2803<div class="description">
2804<h2>First version of countries</h2>
2805<div class="dt-tags">
2806<div class="dt-tag">coding</div>
2807</div>
2808<p>The first development version of the package countries is now available on Github. This post looks at how the package can be used to work with country names.</p>
2809</div>
2810</a>
2811<a href="posts/2021-12-18-mishmash-of-charts/" class="post-preview">
2812<script class="post-metadata" type="text/json">{"categories":["economics","other"]}</script>
2812
2813<div class="metadata">
2814<div class="publishedDate">Dec. 18, 2021</div>
2815<div class="dt-authors">
2816<div class="dt-author">Francesco S. Bellelli</div>
2817</div>
2818</div>
2819<div class="thumbnail">
2820<img data-src="posts/2021-12-18-mishmash-of-charts/../../papers/map pictet.gif"/>
2821</div>
2822<div class="description">
2823<h2>Mishmash of charts</h2>
2824<div class="dt-tags">
2825<div class="dt-tag">economics</div>
2826<div class="dt-tag">other</div>
2827</div>
2828<p>This article is a selection of charts that I prepared over the last three years.</p>
2829</div>
2830</a>
2831<a href="posts/2021-11-16-the-world-trade-report-is-out/" class="post-preview">
2832<script class="post-metadata" type="text/json">{"categories":["economics","trade","risk"]}</script>
2832
2833<div class="metadata">
2834<div class="publishedDate">Nov. 16, 2021</div>
2835<div class="dt-authors">
2836<div class="dt-author">Francesco S. Bellelli</div>
2837</div>
2838</div>
2839<div class="thumbnail">
2840<img data-src="https://www.wto.org/images/img_bkshop/wtr21_e.jpg"/>
2841</div>
2842<div class="description">
2843<h2>The 2021 World Trade Report is out</h2>
2844<div class="dt-tags">
2845<div class="dt-tag">economics</div>
2846<div class="dt-tag">trade</div>
2847<div class="dt-tag">risk</div>
2848</div>
2849<p>I had the honour to contribute to the writing of this year's edition of the World Trade Report, the flagship economic publication of the World Trade Organization.  The report explores the role of trade, trade policy and international cooperation in building economic resilience in a world marked by increasing risks. In this article, I briefly outline my contributions on risk trends and policy responses to shocks.</p>
2850</div>
2851</a>
2852<a href="posts/2021-10-24-all-you-need-to-know-about-the-paris-agreement-ahead-of-cop26/" class="post-preview">
2853<script class="post-metadata" type="text/json">{"categories":["environment"]}</script>
2853
2854<div class="metadata">
2855<div class="publishedDate">Oct. 24, 2021</div>
2856<div class="dt-authors">
2857<div class="dt-author">Francesco S. Bellelli</div>
2858</div>
2859</div>
2860<div class="thumbnail">
2861<img data-src="posts/2021-10-24-all-you-need-to-know-about-the-paris-agreement-ahead-of-cop26/pexels-pixabay-221012.jpg"/>
2862</div>
2863<div class="description">
2864<h2>All you need to know about the Paris Agreement ahead of COP26</h2>
2865<div class="dt-tags">
2866<div class="dt-tag">environment</div>
2867</div>
2868<p>Only one week left to the official start of the COP26 in Glasgow, in which global leaders will meet to take crucial decisions on climate change. Scientific evidence shows that we are running out of time. If we wish to avoid the worst scenario, it's now or never. What will come out of the summit? Will it be a flop or a success? We don't know yet, but this article will quickly get you up to speed with climate talks.</p>
2869</div>
2870</a>
2871<a href="posts/2021-08-15-pandemic-and-the-office-space-market/" class="post-preview">
2872<script class="post-metadata" type="text/json">{"categories":["economics"]}</script>
2872
2873<div class="metadata">
2874<div class="publishedDate">Aug. 15, 2021</div>
2875<div class="dt-authors">
2876<div class="dt-author">Francesco S. Bellelli</div>
2877</div>
2878</div>
2879<div class="thumbnail">
2880<img data-src="posts/2021-08-15-pandemic-and-the-office-space-market/city2_preview.jpg"/>
2881</div>
2882<div class="description">
2883<h2>How has the pandemic affected the office space market?</h2>
2884<div class="dt-tags">
2885<div class="dt-tag">economics</div>
2886</div>
2887<p>In this post I have a look at data from the City of London to understand how the pandemic has impacted the office market.</p>
2888</div>
2889</a>
2890<a href="posts/2021-07-08-the-fascinating-world-of-voronoi-diagrams/" class="post-preview">
2891<script class="post-metadata" type="text/json">{"categories":["maths","other"]}</script>
2891
2892<div class="metadata">
2893<div class="publishedDate">July 8, 2021</div>
2894<div class="dt-authors">
2895<div class="dt-author">Francesco S. Bellelli</div>
2896</div>
2897</div>
2898<div class="thumbnail">
2899<img data-src="posts/2021-07-08-the-fascinating-world-of-voronoi-diagrams/voronoi_animation2.gif"/>
2900</div>
2901<div class="description">
2902<h2>The fascinating world of Voronoi diagrams</h2>
2903<div class="dt-tags">
2904<div class="dt-tag">maths</div>
2905<div class="dt-tag">other</div>
2906</div>
2907<p>In this article I explain what is a Voronoi diagram and why they are amazing</p>
2908</div>
2909</a>
2910<a href="posts/2021-06-20-a-package-for-country-data/" class="post-preview">
2911<script class="post-metadata" type="text/json">{"categories":["coding"]}</script>
2911
2912<div class="metadata">
2913<div class="publishedDate">June 20, 2021</div>
2914<div class="dt-authors">
2915<div class="dt-author">Francesco S. Bellelli</div>
2916</div>
2917</div>
2918<div class="thumbnail">
2919<img data-src="https://cdn.britannica.com/13/129613-131-30279F20/Flags-world-flags-Country-history-blog-travel-2009.jpg"/>
2920</div>
2921<div class="description">
2922<h2>A package for country data</h2>
2923<div class="dt-tags">
2924<div class="dt-tag">coding</div>
2925</div>
2926<p>I am working on an R package designed to quickly wrangle, merge and explore country data</p>
2927</div>
2928</a>
2929<a href="posts/2021-04-03-tilemaster-a-strategy-game-in-shiny/" class="post-preview">
2930<script class="post-metadata" type="text/json">{"categories":["coding"]}</script>
2930
2931<div class="metadata">
2932<div class="publishedDate">April 3, 2021</div>
2933<div class="dt-authors">
2934<div class="dt-author">Francesco S. Bellelli</div>
2935</div>
2936</div>
2937<div class="thumbnail">
2938<img data-src="posts/2021-04-03-tilemaster-a-strategy-game-in-shiny/../../images/tilemaster_screenshot.png"/>
2939</div>
2940<div class="description">
2941<h2>TileMaster: a strategy game in Shiny</h2>
2942<div class="dt-tags">
2943<div class="dt-tag">coding</div>
2944</div>
2945<p>I created a small strategy game with RStudios' Shiny platform. If it can run a data dashboard, why not a strategy game?</p>
2946</div>
2947</a>
2948<a href="posts/2021-03-20-how-to-increase-participation-in-environmental-agreements/" class="post-preview">
2949<script class="post-metadata" type="text/json">{"categories":["environment","economics"]}</script>
2949
2950<div class="metadata">
2951<div class="publishedDate">March 20, 2021</div>
2952<div class="dt-authors">
2953<div class="dt-author">Francesco S. Bellelli</div>
2954</div>
2955</div>
2956<div class="thumbnail">
2957<img data-src="posts/2021-03-20-how-to-increase-participation-in-environmental-agreements/map-number-ratifications.png"/>
2958</div>
2959<div class="description">
2960<h2>How to increase participation in environmental agreements?</h2>
2961<div class="dt-tags">
2962<div class="dt-tag">environment</div>
2963<div class="dt-tag">economics</div>
2964</div>
2965<p>Understanding the determinants of participation in environmental agreements can help us frame more successful agreements. In this article, I discuss the economic theory and empirical evidence on this topic.</p>
2966</div>
2967</a>
2968<a href="posts/2021-01-27-watercolours/" class="post-preview">
2969<script class="post-metadata" type="text/json">{"categories":["other"]}</script>
2969
2970<div class="metadata">
2971<div class="publishedDate">Jan. 27, 2021</div>
2972<div class="dt-authors">
2973<div class="dt-author">Francesco S. Bellelli</div>
2974<div class="dt-author">Lily Runkun Tian</div>
2975</div>
2976</div>
2977<div class="thumbnail">
2978<img data-src="posts/2021-01-27-watercolours/paintings/squirrel.jpeg"/>
2979</div>
2980<div class="description">
2981<h2>Watercolours</h2>
2982<div class="dt-tags">
2983<div class="dt-tag">other</div>
2984</div>
2985<p>A gallery displaying some of the artistic creations of Francesco and Lily</p>
2986</div>
2987</a>
2988<a href="posts/2021-01-20-mappa-licita-naturale/" class="post-preview">
2989<script class="post-metadata" type="text/json">{"categories":["other"]}</script>
2989
2990<div class="metadata">
2991<div class="publishedDate">Jan. 20, 2021</div>
2992<div class="dt-authors">
2993<div class="dt-author">Francesco S. Bellelli</div>
2994</div>
2995</div>
2996<div class="thumbnail">
2997<img data-src="posts/2021-01-20-mappa-licita-naturale/BRIDGE sistema naturale.svg"/>
2998</div>
2999<div class="description">
3000<h2>Mappa licita naturale</h2>
3001<div class="dt-tags">
3002<div class="dt-tag">other</div>
3003</div>
3004<p>Mappa di un sistema di licita naturale lungo-corto a bridge</p>
3005</div>
3006</a>
3007</div>
3008<div class="posts-sidebar">
3009<div><div class="sidebar-section custom">
3010  <h3>About</h3>
3011  This is the personal website of Francesco Saverio Bellelli. From time to time, I post about things that I find interesting or about some recent work I have been doing. 
3012</div>
3013</div>
3014<div class="sidebar-section categories">
3015<h3>Categories</h3>
3016<ul>
3017<li>
3018<a href="#category:articles">articles</a>
3019<span class="category-count">(18)</span>
3020</li>
3021<li>
3022<a href="#category:coding">coding</a>
3023<span class="category-count">(7)</span>
3024</li>
3025<li>
3026<a href="#category:economics">economics</a>
3027<span class="category-count">(5)</span>
3028</li>
3029<li>
3030<a href="#category:environment">environment</a>
3031<span class="category-count">(4)</span>
3032</li>
3033<li>
3034<a href="#category:finance">finance</a>
3035<span class="category-count">(1)</span>
3036</li>
3037<li>
3038<a href="#category:maths">maths</a>
3039<span class="category-count">(1)</span>
3040</li>
3041<li>
3042<a href="#category:other">other</a>
3043<span class="category-count">(6)</span>
3044</li>
3045<li>
3046<a href="#category:risk">risk</a>
3047<span class="category-count">(2)</span>
3048</li>
3049<li>
3050<a href="#category:trade">trade</a>
3051<span class="category-count">(1)</span>
3052</li>
3053</ul>
3054</div>
3055</div>
3056<div class="posts-more">
3057<a href="#">More articles &raquo;</a>
3058</div>
3059</div>
3060<!--/radix_placeholder_article_listing-->
3061
3062<div class="d-title">
3063<h1>Blog</h1>
3064
3065<!--radix_placeholder_categories-->
3066<!--/radix_placeholder_categories-->
3067
3068</div>
3069
3070
3071<div class="d-article">
3072<div class="sourceCode" id="cb1"><pre class="sourceCode r distill-force-highlighting-css"><code class="sourceCode r"></code></pre></div>
3073<!--radix_placeholder_article_footer-->
3074<!--/radix_placeholder_article_footer-->
3075</div>
3076
3077<div class="d-appendix">
3078</div>
3079
3080
3081<!--radix_placeholder_site_after_body-->
3082<!--/radix_placeholder_site_after_body-->
3083<!--radix_placeholder_appendices-->
3084<div class="appendix-bottom"></div>
3085<!--/radix_placeholder_appendices-->
3086<!--radix_placeholder_navigation_after_body-->
3087<div class="distill-site-nav distill-site-footer">
3088<p>© Copyright 2021 <strong><a
3089href="https://fbellelli.com/about.html">Francesco S.
3090Bellelli</a></strong></p>
3091<p>All code, data, website content, and images are available under a <a
3092href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0
3093license</a>.</p>
3094<div>
3095        <a class = ".plainlink" href="mailto:[email protected]" title="Email me">
3096          <span class="fa-stack fa-lg">
3097            <i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
3098          </span>
3099        </a>  
3100        
3101              <a class = "plainlink" href="https://github.com/fbellelli" title="GitHub">
3102        <span class="fa-stack fa-lg">
3103          <i class="fab fa-github fa-stack-1x fa-inverse"></i>
3104        </span>
3105      </a>
3106
3107
3108      <a class = "plainlink" href="https://www.linkedin.com/in/francesco-saverio-bellelli-025852183/" title="Linkedin">
3109        <span class="fa-stack fa-lg">
3110          <i class="fab fa-linkedin fa-stack-1x fa-inverse"></i>
3111        </span>
3112      </a>
3113
3114    
3115</div>
3116</div>
3117<!--/radix_placeholder_navigation_after_body-->
3118
3119
3120</body>
3121
3122</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.