head.html

<style>
  html {
  font-size: 15px !important;
  }

body div.zettel-view .zettel-content h1 {
    text-align: right !important;
  background-color: inherit !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

body div.zettel-view .zettel-content h2 {
    text-align: left !important;
  background-color: inherit !important;
  border-bottom: none !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}


body div.zettel-view .zettel-content h3 {
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: left !important;
  background-color: inherit !important;
}

body div.zettel-view .zettel-content h4 {
    border-bottom: none !important;
    text-align: left !important;
  background-color: inherit !important;
}



/* Title */
#zettel-container > div.zettel-view > article > h1:first-child {
  /* text-align: center !important; */
  /* font-family: "Crimson Text", serif !important; */
  /* font-style: italic; */
    text-align: right !important;
  font-weight: normal !important;
  font-size: 2rem !important;
  padding: 1rem !important;
  text-align: right !important;
  /* padding-top: 1rem; */
  /* padding-right: 1rem; */
  /* padding-left: 1rem; */
  background-color: inherit !important;
}


.ui.segment {
    background-color: #fffff8 !important;
}


#zettel-container {
    max-width: 800px !important;
}

</style>

<!-- add social share buttons  -->
<script>
  window.addEventListener("load", function(){
      var socialButtons = document.getElementById("socialMediaLinks");

      socialButtons.innerHTML +=
          "<a id='facebook' title='Share on Facebook' class='ui facebook button'><i class='facebook icon'></i> Share</a><a id='twitter' title='Tweet' class='ui twitter button'><i class='twitter icon'></i> Tweet</a><a id='linkedin' title='Share on LinkedIn' class='ui linkedin button'><i class='linkedin icon'></i> Share</a><a id='reddit' title='Share on Reddit' class='ui reddit button'><i class='reddit icon'></i> Share</a><a id='hnews' title='Share on Hacker News' class='ui hacker news button'><i class='hacker news icon'></i> Share</a>"




      document.getElementById("facebook").addEventListener("click", function(e) {
          window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&quote=' + encodeURIComponent(document.URL)); return false;
      });

      document.getElementById("twitter").addEventListener("click", function(e) {
          window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + ':%20' + encodeURIComponent(document.URL)); return false;
      });

      document.getElementById("linkedin").addEventListener("click", function(e) {
          window.open('https://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' +  encodeURIComponent(document.title)); return false;
      });

      document.getElementById("reddit").addEventListener("click", function(e) {
          window.open('https://www.reddit.com/submit?url=' + encodeURIComponent(document.URL) + '&title=' +  encodeURIComponent(document.title)); return false;
      });

      document.getElementById("hnews").addEventListener("click", function(e) {
          window.open('https://news.ycombinator.com/submitlink?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.title)); return false;
      });

      document.getElementById("rss").addEventListener("click", function(e) {
          window.open('https://alexsoto.dev/blog.xml');
      });



  })
  </script>

<script>
  window.addEventListener("load", function(){
      var socialButtons = document.getElementById("subscriptionLinks");

      socialButtons.innerHTML +=
          "<a id='rss' title='Subscribe to RSS feed' class='ui rss button'><i class='rss square icon'></i> RSS</a> <a id='mail' title='Subscribe to mailing list' class='ui paper plane button'><i class='paper plane icon'></i> Subscribe</a>"

      document.getElementById("rss").addEventListener("click", function(e) {
          window.open('https://alexsoto.dev/blog.xml');
      });

      document.getElementById("mail").addEventListener("click", function(e) {
          window.open('https://buttondown.email/alexsotodev');
      });

  })
  </script>


<style>
#socialMediaLinks {
    text-align: center;
}

#socialMediaLinks .ui.reddit.button {
    background: #FF5700;
    color: #ffffff;
}

#socialMediaLinks .ui.hacker.news.button {
    background: #ff4000;
    color: #ffffff;
}

#socialMediaLinks .ui.rss.button {
    background: #FF9249;
    color: #ffffff;
}

#subscriptionLinks .ui.rss.button {
    background: #FF9249;
    color: #ffffff;
}

#subscriptionLinks {
    text-align: center;

}

#subscriptionLinks .ui.paper.plane.button {
    background: #5A90E0;
    color: #ffffff;
}

</style>




<!-- replace logo  -->
<script>
window.addEventListener("load", function(){
  let element = document.querySelector('div.footer-version > div > a > img[alt="logo"]')
  let parent = element.parentNode.parentNode.parentNode
  // element.remove()
  console.log(parent)

  let p = document.createElement("p")
  let n = document.createTextNode("© 2021 Alexander Soto")
  p.appendChild(n)
  p.style.height = "80px";
  // parent.appendChild(n)
  parent.replaceChild(p, parent.firstChild)
  // parent.replaceChild(element.parentNode, p)
});
</script>



<!-- mermaidjs -->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>window.addEventListener("load", mermaid.initialize({startOnLoad:true}))</script>

<!-- graphviz -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/viz.js" integrity="sha512-vnRdmX8ZxbU+IhA2gLhZqXkX1neJISG10xy0iP0WauuClu3AIMknxyDjYHEpEhi8fTZPyOCWgqUCnEafDB/jVQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/full.render.js" integrity="sha512-1zKK2bG3QY2JaUPpfHZDUMe3dwBwFdCDwXQ01GrKSd+/l0hqPbF+aak66zYPUZtn+o2JYi1mjXAqy5mW04v3iA==" crossorigin="anonymous"></script>
<script>
window.addEventListener("load", function(){
  let viz = new Viz();
  for (let element of document.getElementsByClassName("graphviz")) {
    let parent = element.parentNode
    let pparent = parent.parentNode
    viz.renderSVGElement(element.textContent)
    .then(function(element) {
      element.setAttribute("width", "100%")
      pparent.replaceChild(element, parent)
    });
  }
});
</script>

<!-- chartjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js" integrity="sha512-SuxO9djzjML6b9w9/I07IWnLnQhgyYVSpHZx0JV97kGBfTIsUYlWflyuW4ypnvhBrslz1yJ3R+S14fdCWmSmSA==" crossorigin="anonymous"></script>
<script>
window.addEventListener("load", function(){
  for (let element of document.getElementsByClassName("chartjs")) {
    let parent = element.parentNode
    let pparent = parent.parentNode
    let canvas = document.createElement('canvas');
    let box = document.createElement('div');
    box.appendChild(canvas);
    let ctx = canvas.getContext("2d")
    let myChart = new Chart(ctx, JSON.parse(element.textContent));
    box.setAttribute("style","display:block;width:75%;text-align:'center';margin: 5px auto;");
    pparent.replaceChild(box, parent)
  }
});
</script>

<script defer src="https://cdn.commento.io/js/commento.js"></script>

<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
<noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt=""/></noscript>

<!-- Calendly badge widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/rc-alex-s/open-office', text: 'Schedule time with me', color: '#00a2ff', textColor: '#ffffff', branding: true }); }</script>
<!-- Calendly badge widget end -->