build the blog with nix

1 files changed, 43 insertions, 0 deletions

diff --git a/src/_includes/image.html b/src/_includes/image.html
new file mode 100644
index 0000000..8875050
--- /dev/null
+++ b/src/_includes/image.html
@@ -0,0 +1,43 @@
+<div style="
+  box-sizing: border-box;
+  text-align: center;
+  padding-left: 2em;
+  padding-right: 2em;
+  margin-bottom: 1em;
+  {%- if include.float %}
+  float: {{ include.float }};
+  {% endif -%}
+  {%- if include.float or include.inline %}
+  max-width: 49%;
+  {% endif -%}
+  {%- if include.inline %}
+  display: inline-block;
+  {% endif -%}
+  ">
+  <a href="/img/{{ include.dir }}/{{ include.file }}" target="_blank">
+    <picture>
+      {%- if include.width %}
+      {%- for targetWidth in site.img_widths reversed -%}
+      {% if include.width <= targetWidth %}{% continue %}{% endif %}
+      {%- if targetWidth > 1000 %}
+      <source media="(min-width: 1000px) and (min-resolution: {{ targetWidth | divided_by: 1000.0 }}dppx)"
+      {%- elsif targetWidth > 500 %}
+      <source media="(min-width: 500px), (min-resolution: 1.1dppx)"
+      {%- else %}
+      <source
+      {% endif %}
+              srcset="/img/{{ include.dir }}/{{ targetWidth }}px/{{ include.file }}"
+              >
+      {%- endfor %}
+      {%- endif %}
+      <img style="max-height: 60vh;"
+           {% if include.width < 1000 %}
+           src="/img/{{ include.dir }}/{{ include.file }}"
+           {% else %}
+           src="/img/{{ include.dir }}/1000px/{{ include.file }}"
+           {% endif %}
+           alt="{{ include.descr }}" />
+    </picture>
+  </a>
+  {%- if include.descr %}<br/><em>{{ include.descr }}</em>{%- endif %}
+</div>