jmg
/
blog


			
							{% from "macros.j2" import itemurl, slug %}
<!doctype html>
<!-- https://github.com/paulirish/html5-boilerplate/blob/master/index.html -->
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
	{% block starthead %}{% endblock starthead %}
	<meta charset="{{ resource.meta.charset }}">

	<!-- encoding must be specified within the first 512 bytes
	     www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset -->

	<!-- meta element for compatibility mode needs to be before
	     all elements except title & meta
	     msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx -->
	<!-- Chrome Frame is only invoked if meta element for
	     compatibility mode is within the first 1K bytes
	     code.google.com/p/chromium/issues/detail?id=23003 -->

	{#
	<meta http-equiv="refresh" content="2">
	#}

	<!-- Twitter cards, OpenGraph and Slack unfurling -->
<meta name="twitter:card" content="summary" />
{% if resource.meta.twittertitle %}
	<meta property="og:title" content="{{ resource.meta.twittertitle }}" />
{% else %}
	<meta property="og:title" content="{{ resource.meta.title }}" />
{% endif %}
<meta property="og:description" content="{{ resource.meta.description }}" />
{% if resource.meta.image %} <meta property="og:image" content="{{ resource.meta.image }}" />{% endif %}
{% if site.context.tweet_via %} <meta property="twitter:site:id" content="{{ site.context.tweet_via }}" /> {% endif %}
{% if resource.meta.imagealt %} <meta name="twitter:image:alt" content="{{ resource.meta.imagealt }}" />{% endif %}
{% if resource.meta.twitterlabel1 %} <meta name="twitter:label1" content="{{ resource.meta.twitterlabel1 }}" />{% endif %}
{% if resource.meta.twitterlabel2 %} <meta name="twitter:label2" content="{{ resource.meta.twitterlabel2 }}" />{% endif %}
{% if resource.meta.twitterdata1 %} <meta name="twitter:data1" content="{{ resource.meta.twitterdata1 }}" />{% endif %}
{% if resource.meta.twitterdata2 %} <meta name="twitter:data2" content="{{ resource.meta.twitterdata2 }}" />{% endif %}

	<title>{% block title %}{{ resource.meta.title }}{% endblock %}</title>
	<meta name="description" content="{{ resource.meta.description }}">
	<meta name="author" content="{{ resource.meta.author }}">

	<!--  Mobile viewport optimized: j.mp/bplateviewport -->

	<meta name="viewport" content="{{ resource.meta.viewport or site.context.viewport }}">

	{% block css %}
	<link rel="stylesheet" href="{{ media_url('css/w3.css') }}">
	<link rel="stylesheet" href="{{ media_url('css/tufte.css') }}">
	<link rel="stylesheet" href="{{ media_url('css/custom.css') }}">
	{% endblock css %}
	{% block endhead %}{% endblock endhead %}
</head>

<body class="w3-main" id="{{ slug(resource) }}">
<!-- from: https://www.w3schools.com/w3css/w3css_sidebar.asp -->
<div class="w3-top">
<div class="w3-bar w3-lightgrey">
<button class="w3-bar-item w3-button w3-xlarge w3-right" onclick="w3_open()">☰</button>
</div>
</div>
<div class="w3-sidebar w3-animate-right w3-bar-block w3-collapse" id="mySidebar">
  <button class="w3-bar-item w3-button" onclick="w3_close()"><b>Close</b> &times;</button>
	{% set hierarchy = node.rwalk()|list %}
        {% for yeargrp in hierarchy[-1].walk_resources_sorted_by_time()|groupby("meta.posted.year")|reverse %}
          <div class="w3-dropdown-hover w3-dropdown-click">
            <button class="w3-button"><b>{{ yeargrp.grouper }}</b> ({{ yeargrp.list|count }}){# font awesome <i class="fa fa-caret-down"></i> #}</button>
            <div class="w3-dropdown-content w3-bar-block">
              {% for monthgrp in yeargrp.list|groupby("meta.posted.month")|reverse %}
                <b><button class="w3-button">{{ monthgrp.list[0].meta.posted|date_format('%B') }}{# font awesome <i class="fa fa-caret-down"></i> #}</button></b>
                {% for item in monthgrp.list %}
                  <div class="w3-dropdown-click w3-bar-block" style="margin-left: 0.75em;">
                    <a href="{{ itemurl(item) }}" class="no-tufte-underline w3-bar-item w3-button">{{ item.meta.title }}</a>
                  </div>
                {% endfor %}
              {% endfor %}
            </div>
          </div>
        {% endfor %}
</div>
	{% block content %}
	<div class="site" id="main" role="main">
		{% block container %}
		<header class="banner clearfix title">
			{% block header -%}
			<h1><a class="no-tufte-underline" href="{{ content_url('/') }}">{{ site.context.title }}</a></h1>
			{%- endblock %}
		</header>
		{% block main %}
		{% endblock main %}
		{% endblock container %}
		<section>
			<footer>
			<div class="footer tags prevnext">

			<ul class="tags footer">

			<li><a href="{{ content_url('/atom.xml') }}">Atom Feed</a></li>
			<li class="contact">Mastodon: <a rel="me" href="https://{{ site.context.mastodon_domain }}/@{{ site.context.mastodon_user }}">@{{ site.context.mastodon_user }}@{{ site.context.mastodon_domain }}</a></li>

			</ul>

			</div>
			<div class="copyright">{% block copyright %}
			{% endblock copyright %}
			</div>
			</footer>
		</section>
	</div>
{% endblock content%}
{% block js %}
<!-- Javascript at the bottom for fast page loading -->

{% block scripts %}
{% endblock scripts %}


<script>
/* incase there is no JS, always make it visible */
document.getElementById("mySidebar").style.display = "none";

function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}
</script>
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix('img, .png_bg'); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script>
<![endif]-->

{% endblock js %}
</body>
</html>