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 !== " ") { 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">▾</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">☰</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 »</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.