first steps in moving to new engine: WebImage, Singular, and Category created/altered, style-dark.css in place and a few extra alterations added in other parts of templating
Peter Molnar hello@petermolnar.eu
Tue, 03 Oct 2017 16:00:13 +0100
15 files changed,
1139 insertions(+),
585 deletions(-)
A
Category.html
@@ -0,0 +1,106 @@
+{% include 'block_header_open.html' %} + <title>{{ taxonomy.title }}</title> + <link rel="alternate" type="application/rss+xml" title="{{ taxonomy.title }} feed" href="{{ taxonomy.feed }}" /> + +{% include 'block_header_close.html' %} + +<section class="content-body h-feed"> + <aside class="follow"> + <p> + <svg class="icon"><use xlink:href="#icon-rss" /></svg> + <a title="follow {{ taxonomy.title }}" href="{{ taxonomy.feed }}">RSS/Atom feed</a> + </p> + </aside> + + <h1 class="p-name hide">{{ taxonomy.name }}</h1> + {% for post in posts %} + <article class="h-entry hentry"> + <header> + <h2>{% include 'Singular_title.html' %}</h2> + </header> + + + {% if post.summary %} + <div class="e-summary entry-summary"> + {{ post.summary }} + <span class="more"> + <a href="/{{ post.slug }}" title="{{ post.title }}"></a> + </span> + <br class="clear" /> + </div> + {% else %} + <div class="e-content entry-content"> + {{ post.html }} + </div> + {% endif %} + </article> + + {% endfor %} +</section> + +{% if taxonomy.total > 1 %} + + {# based on: http://dev.dbl-a.com/symfony-2-0/symfony2-and-twig-pagination/ #} + <nav class="pagination"> + <ul> + {% if taxonomy.page > 1 %} + {% set prev = taxonomy.page - 1 %} + <li> + <a rel="prev" href="{{ taxonomy.url }}page/{{ prev }}">«</a> + </li> + <li> + <a rel="prev" href="{{ taxonomy.url }}">1</a> + </li> + {% endif %} + + {% if taxonomy.page - 4 > 0 %} + <li> + <span class="page-numbers dots">…</span> + </li> + {% endif %} + + + {% if ( taxonomy.page - 1 > 1 ) %} + <li> + <a href="{{ taxonomy.url }}page/{{ taxonomy.page - 1 }}">{{ taxonomy.page - 1 }}</a> + </li> + {% endif %} + + + <li> + <span class="page-numbers taxonomy.page">{{ taxonomy.page }}</span> + </li> + + + {% if ( taxonomy.page + 1 <= taxonomy.total -1 ) %} + <li> + <a href="{{ taxonomy.url }}page/{{ taxonomy.page + 1 }}">{{ taxonomy.page + 1 }}</a> + </li> + {% endif %} + + + {% if taxonomy.page + 3 < taxonomy.total %} + <li> + <span class="page-numbers dots">…</span> + </li> + {% endif %} + + + {% if taxonomy.page != taxonomy.total %} + <li> + <a href="{{ taxonomy.url }}page/{{ taxonomy.total }}">{{ taxonomy.total }}</a> + </li> + {% endif %} + + {% if taxonomy.page < taxonomy.total %} + {% set next = taxonomy.page + 1 %} + <li> + <a rel="next" href="{{ taxonomy.url }}page/{{ next }}">»</a> + </li> + {% endif %} + </ul> + </nav> + +{% endif %} + +{% include 'block_footer.html' %}
A
Category_feed.html
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?> +<feed xmlns="http://www.w3.org/2005/Atom"> + <title>{{ taxonomy.title }}</title> + <link href="{{ taxonomy.feed }}" rel="self" /> + <id>{{ taxonomy.feed }}</id> + <updated>{{ taxonomy.lastmod }}</updated> + +{% for post in posts %} + <entry> + <title>{{ post.title }}</title> + <link href="{{ site.url }}/{{ post.slug }}/" /> + <id>{{ site.url }}/{{ post.slug }}</id> + <updated>{{ post.pubtime }}</updated> + {% if post.summary|length > 0 %} + <summary type="xhtml"> + <div xmlns="http://www.w3.org/1999/xhtml"> + {{ post.summary }}> + </div> + </summary> + {% endif %} + <content type="xhtml"> + <div xmlns="http://www.w3.org/1999/xhtml"> + {{ post.html }} + </div> + </content> + <author> + <name>{{ site.author.name }}</name> + <email>{{ site.author.email }}</email> + </author> + <!-- TODO: add enclosure ! --> + </entry> +{% endfor %} +</feed>
A
Singular.html
@@ -0,0 +1,73 @@
+{% include 'block_header_open.html' %} + + <title>{{ post.title }} | {{ site.domain }}</title> + <meta name="author" content="{{ site.author.name }}"> + <meta name="keywords" content="{{ post.tags|join(',') }}"> + <meta name="description" content="{{ post.summary|e }}"> + + <link rel="canonical" href="{{ site.url }}/{{ post.slug }}/" /> + <link rel="shortlink" href="{{ site.url }}/{{ post.shortslug }}" /> + <link rel="license" href="{{ post.licence.url }}" /> + +{% include 'block_header_close.html' %} + +<section class="content-body"> + <article class="h-entry hentry singular" lang="{{ post.lang }}"> + <header> + <h1>{% include 'Singular_title.html' %}</h1> + {% if 'article' == post.category and post.age >= 2 %} + <h2 class="old-warning">WARNING: this entry was published at {{ post.pubdate }}.<br />It might be outdated.</h2> + {% endif %} + </header> + +{% if post.summary %} + <div class="e-summary entry-summary"> + {{ post.summary }} + <br class="clear" /> + </div> +{% endif %} + + <div class="e-content entry-content"> + <div class="content-inner"> + {{ post.html }} + </div> + </div> + + <footer> + <p class="published"> + <time class="dt-published" datetime="{{ post.pubtime }}">{{ post.pubdate }}</time> + </p> + <p class="shorturl"> + <a href="/{{ post.shortslug }}">{{ site.url }}/{{ post.shortslug }}</a> + </p> + {% include 'block_author.html' %} + <p class="hide"> + <a class="u-url u-uuid" rel="bookmark" href="{{ site.url}}/{{ post.slug }}/"></a> + </p> + </footer> + </article> + + <aside class="content-note"> + <hr /> + <p class="license"> + {% if post.licence.text == 'CC BY 4.0' %} + <a rel="license" href="https://creativecommons.org/licenses/by/4.0/" class="hide u-license">CC BY 4.0</a> + <svg class="icon"><use xlink:href="#icon-creative-commons" /></svg> + Licensed under <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International</a>. You are free to share or republish, even if modified, if you link back here and indicate the modifications, even for commercial use. + {% elif post.licence.text == 'CC BY-NC 4.0' %} + <a rel="license" href="https://creativecommons.org/licenses/by-nc/4.0/" class="hide u-license">CC BY-NC 4.0</a> + <svg class="icon"><use xlink:href="#icon-creative-commons" /></svg> + Licensed under <a href="https://creativecommons.org/licenses/by-nc/4.0/">Creative Commons Attribution-NonCommercial 4.0 International</a>. You are free to share or republish, even if modified, if you link back here and indicate the modifications, for non commercial use. For commercial use please contact the author. + {% else %} + <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" class="hide u-license">CC BY-NC-ND 4.0</a> + <svg class="icon"><use xlink:href="#icon-creative-commons" /></svg> + Licensed under <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</a>. You are free to share if you link back here for non commercial use, but you can\'t publish any altered versions of it. For commercial use please contact the author. + {% endif %} + </p> + + </aside> + +</section> + + +{% include 'block_footer.html' %}
A
Singular_title.html
@@ -0,0 +1,30 @@
+{% if post.is_bookmark %} + <p class="p-name">{{ post.title }}</p> + <p> + <svg class="icon"><use xlink:href="#icon-bookmark" /></svg> + <a href="{{ post.is_bookmark }}" class="u-bookmark-of" title="Bookmarked URL: {{ post.is_bookmark }}"> + {{ post.is_bookmarkl }} + </a> + </p> +{% elif post.is_fav %} + <p class="p-name">{{ post.title }}</p> + <p> + <svg class="icon"><use xlink:href="#icon-repost" /></svg> + <a href="{{ post.is_fav }}" class="u-favorite-of" title="Favorite of: {{ post.is_fav }}"> + {{ post.is_fav }} + </a> + </p> +{% elif post.is_reply %} + <p class="p-name"> + <svg class="icon"><use xlink:href="#icon-reply" /></svg> + <a href="{{ post.is_reply }}" class="u-in-reply-to" title="Reply to: {{ post.is_reply }}"> + {{ post.is_reply }} + </a> + </p> +{% else %} + <p> + <a href="/{{ post.slug }}/" title="{{ post.title }}"> + <span class="entry-title p-name">{{ post.title }}</span> + </a> + </p> +{% endif %}
A
WebImage.html
@@ -0,0 +1,35 @@
+<figure class="photo"> +{% if photo.target %}<a href="{{ photo.target }}" class="{{ photo.css }}">{% endif %} +<img src="{{ photo.src }}" title="{{ photo.title }}" alt="{{ photo.alt }}" class="adaptimg" /> +{% if photo.target %}</a>{% endif %} +<figcaption> +{{ photo.alt }}{% if photo.is_photo %}<span class="author"> - photo by {{ photo.author }}</span> +<dl class="exif"> +{% if photo.exif.camera %} +<dt>Camera</dt> +<dd><svg class="icon"><use xlink:href="#icon-camera" /></svg>{{ photo.exif.camera }}</dd> +{% endif %} +{% if photo.exif.aperture %} +<dt>Aperture</dt> +<dd><svg class="icon"><use xlink:href="#icon-aperture" /></svg>f/{{ photo.exif.aperture }}</dd> +{% endif %} +{% if photo.exif.shutter_speed %} +<dt>Shutter speed</dt> +<dd><svg class="icon"><use xlink:href="#icon-clock" /></svg>{{ photo.exif.shutter_speed }} sec</dd> +{% endif %} +{% if photo.exif.focal_length %} +<dt>Focal length (as set)</dt> +<dd><svg class="icon"><use xlink:href="#icon-focallength" /></svg>{{ photo.exif.focal_length }} mm</dd> +{% endif %} +{% if photo.exif.iso %} +<dt>Sensitivity</dt> +<dd><svg class="icon"><use xlink:href="#icon-sensitivity" /></svg>ISO {{ photo.exif.iso }}</dd> +{% endif %} +{% if photo.exif.lens %} +<dt>Lens</dt> +<dd><svg class="icon"><use xlink:href="#icon-lens" /></svg>{{ photo.exif.lens }}</dd> +{% endif %} +</dl> +{% endif %} +</figcaption> +</figure>
D
archive.html
@@ -1,169 +0,0 @@
-{% include 'block_header_open.html' %} - - <title>{%- if taxonomy.name -%}{{ taxonomy.name ~ ' | ' ~ site.domain }}{%- else -%}{{ site.title }}{%- endif -%}</title> - <link rel="alternate" type="application/rss+xml" title="{{ title }} RSS Feed" href="{{ site.url}}{{ taxonomy.url }}feed" /> - -{% include 'block_header_close.html' %} - -<section class="content-body h-feed"> - - <aside class="follow"> - <a - onclick="(function(btn){var z=document.createElement('script');document.subtomeBtn=btn;z.src='https://www.subtome.com/load.js';document.body.appendChild(z);})(this)" - value="Subscribe" - data-subtome-resource="{{ site.url}}{{ taxonomy.url }}" - data-subtome-feeds="{{ site.url}}{{ taxonomy.url }}feed" - data-subtome-suggested-service-name="Blogtrottr" - data-subtome-suggested-service-url="http://blogtrottr.com/?subscribe={feed}" - href="https://www.subtome.com/?subs/#/subscribe?resource={{ site.url ~ taxonomy.url|urlencode() }}&feeds={{ site.url ~ taxonomy.url ~ 'feed'|urlencode() }}&suggestedUrl={{ 'http://blogtrottr.com/?subscribe={feed}'|urlencode() }}&suggestedName=Blogtrottr" - title="subscribe to {{ site.url}}{{ taxonomy.url }}"> - <svg class="icon"><use xlink:href="#icon-subscribe" /></svg> - follow{% if taxonomy.name %} "{{ taxonomy.name }}"{% endif%} - </a> - </aside> - - {% if taxonomy.name %} - <h1 class="p-name hide">{{ taxonomy.name }}</h1> - {% endif %} - {% if taxonomy.description %} - <p class="p-summary">{{ taxonomy.description }}</p> - {% endif %} - - {% for post in posts %} - - {% if ( ( post.category == 'photo' ) ) %} - {% set hentry = 'photo' %} - {% elif ( ( post.category == 'article' ) or (post.category == 'journal' ) ) %} - {% set hentry = 'article' %} - {% elif ( ( post.category == 'note' ) or ( post.category == 'reply' ) ) %} - {% set hentry = 'note' %} - {% elif ( post.category == 'favorite' ) %} - {% set hentry = 'favorite' %} - {% else %} - {% set hentry = 'status' %} - {% endif %} - - <article class="h-entry hentry h-{{ hentry }}"{% if post and post.lang %} lang="{{ post.lang }}"{% endif %}> - <header> - - {% if post.reactions %} - {% include 'block_reaction.html' %} - {% elif post.title|length %} - <h2> - <a href="/{{ post.slug }}" title="{{ post.title }}"> - <span class="p-name entry-title"> - {{ post.title }} - </span> - </a> - </h2> - {% endif %} - - <aside class="pubdate{% if post.bookmark or post.repost %} hide{% endif %}"> - <a class="u-url u-uuid" href="{{ site.url}}/{{ post.slug }}/"></a> - <a title="{{ post.title }}" href="/{{ post.slug }}"> - <time class="dt-published" datetime="{{ post.published|date('c') }}"> - {{ post.published|date('%Y-%m-%d %H:%M') }} - </time> - </a> - </aside> - - </header> - - {% if hentry == "article" %} - <div class="e-summary entry-summary"> - {{ post.sumhtml }} - <span class="more"> - <a href="/{{ post.slug }}" title="{{ post.title }}"></a> - </span> - <br class="clear" /> - </div> - {% else %} - <div class="e-content entry-content"> - {% if ( post.photo ) %} - {% include 'block_photo.html' %} - {% endif %} - - {% if ( post.exif ) %} - {% include 'block_exif.html' %} - {% endif %} - - {{ post.html }} - - </div> - {% endif %} - - <footer class="hide"> -{% include 'block_author.html' %} - </footer> - - </article> - - {% endfor %} -</section> - -{% if taxonomy.total > 1 %} - - {# based on: http://dev.dbl-a.com/symfony-2-0/symfony2-and-twig-pagination/ #} - <nav class="pagination"> - <ul> - {% if taxonomy.paged > 1 %} - {% set prev = taxonomy.paged - 1 %} - <li> - <a rel="prev" href="{{ taxonomy.url }}page/{{ prev }}">«</a> - </li> - <li> - <a rel="prev" href="{{ taxonomy.url }}">1</a> - </li> - {% endif %} - - {% if taxonomy.paged - 4 > 0 %} - <li> - <span class="page-numbers dots">…</span> - </li> - {% endif %} - - - {% if ( taxonomy.paged - 1 > 1 ) %} - <li> - <a href="{{ taxonomy.url }}page/{{ taxonomy.paged - 1 }}">{{ taxonomy.paged - 1 }}</a> - </li> - {% endif %} - - - <li> - <span class="page-numbers taxonomy.paged">{{ taxonomy.paged }}</span> - </li> - - - {% if ( taxonomy.paged + 1 <= taxonomy.total -1 ) %} - <li> - <a href="{{ taxonomy.url }}page/{{ taxonomy.paged + 1 }}">{{ taxonomy.paged + 1 }}</a> - </li> - {% endif %} - - - {% if taxonomy.paged + 3 < taxonomy.total %} - <li> - <span class="page-numbers dots">…</span> - </li> - {% endif %} - - - {% if taxonomy.paged != taxonomy.total %} - <li> - <a href="{{ taxonomy.url }}page/{{ taxonomy.total }}">{{ taxonomy.total }}</a> - </li> - {% endif %} - - {% if taxonomy.paged < taxonomy.total %} - {% set next = taxonomy.paged + 1 %} - <li> - <a rel="next" href="{{ taxonomy.url }}page/{{ next }}">»</a> - </li> - {% endif %} - </ul> - </nav> - -{% endif %} - -{% include 'block_footer.html' %}
D
atom.html
@@ -1,43 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?> -<feed xmlns="http://www.w3.org/2005/Atom"> - <title>{%- if taxonomy.name -%}{{ taxonomy.name ~ ' | ' ~ site.title }}{%- else -%}{{ site.title }}{%- endif -%}</title> - <link href="{{ site.url }}{{ taxonomy.url }}feed/" rel="self" /> - <link href="{{ site.url }}{{ taxonomy.url }}" /> - <id>{{ site.url }}{{ taxonomy.url }}</id> - <updated>{{ taxonomy.lastmod|date('c') }}</updated> -{% if taxonomy.url|length > 0 -%} - <link href="{{ site.websuburl }}" rel="hub" /> -{%- endif %} - -{% for post in posts %} - <entry> - <title>{% if post.title %}{{ post.title }}{% endif%}</title> - <link href="{{ site.url }}/{{ post.slug }}/" /> - <id>{{ site.url }}/{{ post.slug }}</id> - <updated>{{ post.published|date('c') }}</updated> -{%- if post.summary|length > 0 %} - <summary type="xhtml"> - <div xmlns="http://www.w3.org/1999/xhtml"> - {{ post.sumhtml }}> - </div> - </summary> -{%- endif %} - <content type="xhtml"> - <div xmlns="http://www.w3.org/1999/xhtml"> - {{ post.html }} - </div> - </content> - <author> - <name>{{ site.author.name }}</name> - <email>{{ site.author.email }}</email> - </author> -{%- if post.rssenclosure %} - <link rel="enclosure" - type="{{ post.rssenclosure.mime }}" - title="{{ post.rssenclosure.fname }}" - href="{{ post.rssenclosure.url }}" - length="{{ post.rssenclosure.size }}" /> -{% endif -%} - </entry> -{% endfor %} -</feed>
M
block_header_close.html
→
block_header_close.html
@@ -1,8 +1,7 @@
<style media="all"> -{% include 'style.css' %} +{% include 'style-dark.css' %} </style> </head> - <body> {% include 'symbols.svg' %}@@ -10,45 +9,61 @@ <header class="content-header" id="main-header">
<nav class="content-navigation"> <ul> <li> - <a title="home" href="/" class="{% if ( not post or post.url == '' ) and ( taxonomy.name == '' ) %} active{% endif %}"> +{% set cssclass = '' %} +{% if taxonomy is defined and taxonomy.name == '' %} + {% set cssclass = 'active' %} +{% endif %} + <a title="home" href="/" class="{{ cssclass }}"> <svg class="icon"><use xlink:href="#icon-home" /></svg> home </a> </li> +{% set cssclass = '' %} +{% if (post is defined and post.category == 'photo' ) or ( taxonomy is defined and taxonomy.slug == 'photo' ) %} + {% set cssclass = 'active' %} +{% endif %} <li> - <a title="photos" href="/category/photo/" class="{% if (post and post.category == 'photo' ) or ( taxonomy.slug == 'photo' ) %} active{% endif %}"> + <a title="photos" href="/category/photo/" class="{{ cssclass }}"> <svg class="icon"><use xlink:href="#icon-photo" /></svg> photos </a> </li> +{% set cssclass = '' %} +{% if (post is defined and post.category == 'journal' ) or ( taxonomy is defined and taxonomy.slug == 'journal' ) %} + {% set cssclass = 'active' %} +{% endif %} <li> - <a title="journal" href="/category/journal/" class="{% if ( post and post.category == 'journal' ) or ( post and 'journal' in post.tags ) or ( taxonomy.slug == 'journal' ) %} active{% endif %}"> + <a title="journal" href="/category/journal/" class="{{ cssclass }}"> <svg class="icon"><use xlink:href="#icon-journal" /></svg> journal </a> </li> +{% set cssclass = '' %} +{% if (post is defined and post.category == 'article' ) or ( taxonomy is defined and taxonomy.slug == 'article' ) %} + {% set cssclass = 'active' %} +{% endif %} <li> - <a title="IT" href="/category/article/" class="{% if ( post and post.category == 'article' ) or ( post and 'IT' in post.tags ) or ( ( taxonomy.slug == 'article' ) or ( taxonomy.slug == 'it' ) ) %} active{% endif %}"> + <a title="IT" href="/category/article/" class="{{ cssclass }}"> <svg class="icon"><use xlink:href="#icon-article" /></svg> IT </a> </li> +{% set cssclass = '' %} +{% if (post is defined and post.category == 'note' ) or ( taxonomy is defined and taxonomy.slug == 'note' ) %} + {% set cssclass = 'active' %} +{% endif %} <li> - <a title="notes" href="/category/note/" class="{% if ( post and 'Note' in post.tags ) or ( taxonomy.slug == 'note' ) %} active{% endif %}"> + <a title="notes" href="/category/note/" class="{{ cssclass }}"> <svg class="icon"><use xlink:href="#icon-note" /></svg> notes </a> </li> - {# - <li> - <a title="replies" href="/category/reply/" class="{% if ( post and 'Reply' in post.tags ) or ( taxonomy.slug == 'reply' ) %} active{% endif %}"> - <svg class="icon"><use xlink:href="#icon-reply" /></svg> - re: - </a> - </li> - #} +{% set cssclass = '' %} +{% if (post is defined and post.category == 'bookmark' ) or ( taxonomy is defined and taxonomy.slug == 'bookmark' ) %} + {% set cssclass = 'active' %} +{% endif %} <li> - <a title="bookmarks" href="/category/bookmark/" class="{% if ( post and post.category == 'bookmark' ) or ( post and 'Bookmark' in post.tags ) or ( taxonomy.slug == 'bookmark' ) %} active{% endif %}"> + <a title="bookmarks" href="/category/bookmark/" class="{{ cssclass }}"> <svg class="icon"><use xlink:href="#icon-bookmark" /></svg> bookmarks </a>@@ -60,7 +75,6 @@ <form role="search" method="get" class="search-form" action="/search">
<label for="search" class="hide">Search</label> <input type="search" class="search-field" placeholder="search..." value="" name="s" id="s" title="Search for:" /> <input type="submit" class="search-submit" value="Go ➡" /> - <input type="hidden" class="hide" value="{{ taxonomy.slug }}" name="c" id="c" /> </form> <br class="clear" />
M
block_header_open.html
→
block_header_open.html
@@ -1,7 +1,7 @@
<!DOCTYPE html> -<html{% if post and post.lang %} lang="{{ post.lang }}"{% elif taxonomy and taxonomy.lang %} lang="{{ taxonomy.lang }}"{% endif %}> +<html{% if post and post.lang %} lang="{{ post.lang }}"{% endif %}> <head> - <meta charset="{{ site.charset }}" /> + <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" /> <link rel="icon" href="{{ site.url }}/favicon.ico" /> <link rel="http://webmention.org/" href="{{ site.url }}/webmention" />
D
block_reaction.html
@@ -1,63 +0,0 @@
-{% if post.reactions.bookmark %} - {% for reaction in post.reactions.bookmark %} - {% if post.title|length %} - <h2 class="p-name">{{ post.title }}</h2> - <p> - <svg class="icon"><use xlink:href="#icon-bookmark" /></svg> - <a href="{{ reaction }}" class="u-bookmark-of" title="Bookmarked URL: {{ reaction }}">{{ reaction }}</a> - </p> - {% else %} - <p class="p-name"> - <svg class="icon"><use xlink:href="#icon-bookmark" /></svg> - <a href="{{ reaction }}" class="{{ class }}">{{ reaction }}</a> - </p> - {% endif %} - {% endfor %} -{% endif %} - -{% if post.reactions.reply %} - {% for reaction in post.reactions.reply %} - <p class="p-name"> - <svg class="icon"><use xlink:href="#icon-reply" /></svg> - <a href="{{ reaction }}" class="u-in-reply-to" title="Reply to: {{ reaction }}">{{ reaction }}</a> - </p> - {% endfor %} -{% endif %} - -{% if post.reactions.repost %} - {% for reaction in post.reactions.repost %} - {% if post.title|length %} - <h2 class="p-name">{{ post.title }}</h2> - <p> - <svg class="icon"><use xlink:href="#icon-repost" /></svg> - <a href="{{ reaction }}" class="u-repost-of" title="Repost of: {{ reaction }}">{{ reaction }}</a> - </p> - {% else %} - <p> - <svg class="icon"><use xlink:href="#icon-repost" /></svg> - <span class="p-name"> - <a href="{{ reaction }}" class="u-repost-of" title="Repost of: {{ reaction }}">{{ reaction }}</a> - </span> - </p> - {% endif %} - {% endfor %} -{% endif %} - -{% if post.reactions.fav %} - {% for reaction in post.reactions.fav %} - {% if post.title|length %} - <h2 class="p-name">{{ post.title }}</h2> - <p> - <svg class="icon"><use xlink:href="#icon-repost" /></svg> - <a href="{{ reaction }}" class="u-favorite-of" title="Favorite of: {{ reaction }}">{{ reaction }}</a> - </p> - {% else %} - <p> - <svg class="icon"><use xlink:href="#icon-repost" /></svg> - <span class="p-name"> - <a href="{{ reaction }}" class="u-favorite-of" title="Favorite of: {{ reaction }}">{{ reaction }}</a> - </span> - </p> - {% endif %} - {% endfor %} -{% endif %}
D
singular.html
@@ -1,238 +0,0 @@
-{%- if post.exif -%} -{%- set dctype = "Image" -%} -{%- else -%} -{%- set dctype = "Text" -%} -{%- endif -%} -{% include 'block_header_open.html' %} - - {% if post.title %} - <title>{{ post.title|e }} | {{ site.domain }}</title> - {% else %} - <title>{{ post.slug }} | {{ site.domain }}</title> - {% endif %} - - <meta name="author" content="{{ post.author.name }}"> - <meta name="keywords" content="{{ post.tags|join(',') }}"> - <meta name="description" content="{{ post.summary|e }}"> - - <link rel="canonical" href="{{ site.url }}/{{ post.slug }}/" /> - <link rel="shortlink" href="{{ site.url }}/{{ post.shortslug }}" /> - <link rel="license" href="{{ post.license.url }}" /> - -{% include 'block_header_close.html' %} - -<section class="content-body"> - <article class="h-entry hentry singular"{% if post and post.lang %} lang="{{ post.lang }}"{% endif %}> - <header> - {% if post.reactions %} - <h1 class="reaction">{% include 'block_reaction.html' %}</h1> - {% elif post.title|length %} - <h1> - <a href="/{{ post.slug }}/" title="{{ post.title }}"> - <span class="entry-title p-name">{{ post.title }}</span> - </a> - </h1> - {% endif %} - {% if 'IT' in post.tags %} - {% if post.updated %} - {% set py = post.updated|date('%Y')|int %} - {% else %} - {% set py = post.published|date('%Y')|int %} - {% endif %} - {% if( "now"|date('%Y')|int - py ) >= 2 %} - <h2 class="old-warning">WARNING: this entry was published in {{ post.published|date('%Y') }}.<br />It might be outdated.</h2> - {% endif %} - {%endif%} - - </header> - -{% if post.summary %} - <div class="e-summary entry-summary"> - {{ post.sumhtml }} - <br class="clear" /> - </div> -{% endif %} - - <div class="e-content entry-content"> - <div class="content-inner"> - - {% if ( post.photo ) %} - {% include 'block_photo.html' %} - {% endif %} - - {% if ( post.exif ) %} - {% include 'block_exif.html' %} - {% endif %} - - {{ post.html }} - -{% if ( post.syndicate ) %} - <aside class="syndicate hide"> - {% for url in post.syndicate %} - <a href="{{ url }}" class="u-syndication"></a> - {% endfor %} - </aside> -{% endif %} - - </div> - </div> - - <footer> - <p class="published"> - <time class="dt-published" - datetime="{{ post.published|date("c") }}"> - {{ post.published|date("%Y-%m-%d %H:%M") }} - </time> - </p> -{% if post.updated and post.updated != post.published %} - <p class="updated"> - <time class="dt-updated" - datetime="{{ post.updated|date("c") }}"> - (updated: {{ post.updated|date("%Y-%m-%d %H:%M") }}) - </time> - </p> -{% endif %} -{% if post.tags %} - <p class="tags"> -{% for tname in post.tags %} - #<a href="/tag/{{ tname|slugify }}" rel="tag" class="p-category">{{ tname }}</a> -{% endfor %} - </p> -{% endif %} - <p class="shorturl"> - <a href="/{{ post.shortslug }}">{{ site.url }}/{{ post.shortslug }}</a> - </p> - -{% include 'block_author.html' %} - <p class="hide"> - <a class="u-url u-uuid" rel="bookmark" href="{{ site.url}}/{{ post.slug }}/"></a> - </p> - </footer> - - -{% if ( post.comments ) %} - <section class="comments h-feed"> - {% if post.replies|length > 0 %} - <h6 class="comments-replies"><a name="replies"></a>Replies</h6> - <ol> - {% for reply in post.replies %} - <li class="h-entry p-comment"> - <a class="u-url u-uuid" href="{{ site.url }}/{{ site.commentspath }}/{{ reply.fname }}/" name="{{ reply.fname }}"></a> - <header> - <p class="p-author h-card"> - {% if reply.author.url %} - <a class="url u-url" href="{{ reply.author.url }}"> - <span class="p-name fn">{{ reply.author.name }}</span> - </a> - {% else %} - <span class="p-name fn">{{ reply.author.name }}</span> - {% endif %} - </p> - <p> - <time class="dt-published" datetime="{{ reply.published|date('c') }}"> - {{ reply.published|date('%Y-%m-%d %H:%M') }} - </time> - </p> - {% if reply.source|length > 0 %} - <p class="reponse_link"> - Read response at:<br /> - <svg class="icon"><use xlink:href="#icon-link"></use></svg> - <a href="{{ reply.source }}" class="u-repost-of">{{ reply.source }}</a> - </p> - {% endif %} - </p> - </header> - </li> - {% endfor %} - </ol> - {% endif %} - - {% if post.reacjis|length > 0 %} - <h6 class="comments-reacji"><a name="reacji"></a>Reactions</h6> - <dl> - {% for reacji, replies in post.reacjis.items() %} - <dt><a name="{{ reacji }}"></a>{{ reacji }}</dt> - <dd> - <ul> - {% for reply in replies %} - <li class="p-comment h-entry "> - <a class="u-url u-uuid" href="/{{ site.commentspath }}/{{ reply.fname }}/" name="{{ reply.fname }}"></a> - <time class="dt-published" datetime="{{ reply.published|date('c') }}"> - {{ reply.published|date('%Y-%m-%d %H:%M') }} - </time> - <span class="p-author h-card"> - {% if reply.author.url %} - <a class="url u-url" href="{{ reply.author.url }}"> - <span class="p-name fn">{{ reply.author.name }}</span> - </a> - {% else %} - <span class="p-name fn">{{ reply.author.name }}</span> - {% endif %} - </span> - <a href="{{ reply.source }}" class="u-repost-of" title="{{ reply.source }}"> - <svg class="icon"><use xlink:href="#icon-link" /></svg> - </a> - </li> - {% endfor %} - </ul> - </dd> - {% endfor %} - </dl> - {% endif %} - </section> - -{% endif %} - - - </article> - - - <aside class="content-info"> - <p> -{% if post.category == 'photo' %} - Did you like this photo?<br /> - <a href="{{ post.author.donateurl }}">Thank it with a small donation.</a> -{% elif post.category == 'article' %} - Did you find this article useful?<br /> - <a href="{{ post.author.donateurl }}">Buy me a coffee, so I can write more like this</a>, or <a href="mailto:{{ post.author.email }}">get in touch</a> if you want my help with something similar. -{% elif post.category == 'journal' %} - Did you like this entry?<br /> - <a href="{{ post.author.donateurl }}">Encourage me to write more of them.</a> -{% else %} - Did you like what you read?<br /> - <a href="{{ post.author.donateurl }}">Thank it with a small donation.</a> -{% endif %} - </p> - </aside> - - <aside class="content-note"> - <hr /> - <p class="license"> -{% if post.category == 'article' %} - <a rel="license" href="https://creativecommons.org/licenses/by/4.0/" class="hide u-license">CC BY 4.0</a> - <svg class="icon"><use xlink:href="#icon-creative-commons" /></svg> - Licensed under <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International</a>. You are free to share or republish, even if modified, if you link back here and indicate the modifications, even for commercial use. -{% elif post.category == 'journal' %} - <a rel="license" href="https://creativecommons.org/licenses/by-nc/4.0/" class="hide u-license">CC BY-NC 4.0</a> - <svg class="icon"><use xlink:href="#icon-creative-commons" /></svg> - Licensed under <a href="https://creativecommons.org/licenses/by-nc/4.0/">Creative Commons Attribution-NonCommercial 4.0 International</a>. You are free to share or republish, even if modified, if you link back here and indicate the modifications, for non commercial use. For commercial use please contact the author. -{% else %} - <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" class="hide u-license">CC BY-NC-ND 4.0</a> - <svg class="icon"><use xlink:href="#icon-creative-commons" /></svg> - Licensed under <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</a>. You are free to share if you link back here for non commercial use, but you can\'t publish any altered versions of it. For commercial use please contact the author. -{% endif %} - </p> - - - <p>Want to leave a comment or get in touch? Reply with your own blog using - <a href="http://indiewebcamp.com/webmention">Webmentions</a> or send an - <a href="mailto:{{ post.author.email }}?subject=RE: {{ post.title }}" - >email</a>. - </p> - - </aside> - -</section> - - -{% include 'block_footer.html' %}
A
style-dark.css
@@ -0,0 +1,783 @@
+* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +html, body { + min-height: 100%; + font-size:19px; + line-height: 1.2rem; + font-family: "Liberation Sans", "Helvetica Neue", "Roboto", "Arial", sans-serif; + font-weight: normal; + color: #999999; + text-shadow: 1px 1px 1px rgba(0,0,0,0.004); + background-color: #222; +} + +html { + position: relative; +} + +a { + color: #cccccc; + text-decoration:none; +} + +a:hover { + color: #fff; +} + +b, strong { + font-weight:bold; +} + +em { + font-style: italic; +} + +p { + padding: 0.6rem 0; +} + +li { + margin-left: 1.3rem; +} + +ul li { + line-height: 1.6rem; +} + +li p { + margin:0; + padding: 0; +} + +blockquote { + margin: 0.3rem; + padding-left: 0.6rem; + font-style: italic; + border-left: 2px solid #999; + color: #666; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, th { + padding: 0.3rem; + border: 1px solid #333; +} + +th { + font-weight: bold; +} + +hr { + display: block; + height: 1px; + border: none; + border-top: 1px solid #999; + margin: 1.3rem 0 1rem 0; + clear:both; +} + +.limit, +.content-body { + max-width: 70ch; + margin: 1rem auto; +} + +.h-entry { + padding: 0 0.6rem; + font-size: 0.86rem; +} + +h1, h2, h3, h4, h5, h6, dt { + font-weight:bold; + clear:both; + font-size: 1rem; +} + +h1, h2, h3, h4, h5, h6 { + margin: 1.3rem 0 0.3rem 0; + padding: 0 0 0.3rem 0; +} + +h1 { + font-size: 1.2rem; + margin-top: 0; +} + +h2 { + font-size: 1.1rem; + border-bottom: 2px solid #999; +} + +h3 { + font-size: 1rem; +} + +.h-feed .h-entry h2 { + border: none; + font-size: 1rem; + margin: 0; + padding: 0; +} + +.h-feed .h-entry { + margin: 2rem 0 0 0; + padding: 1rem; + border-bottom: 2px solid #333; + +} + +.h-entry footer { + opacity: 0.8; +} + +.h-entry footer p { + padding: 0.3rem 0; +} + +.h-entry footer .vcard img { + height: 1rem; + vertical-align: text-bottom; +} + +.published, .updated { + display: inline; +} + +.content-note a, +.e-content a { + color:#3173C4; +} + +.content-note a:hover, +.e-content a:hover { + color:#004283; +} + +.icon { + transform: rotate(0.01deg); + width: 19px; + height: 19px; + display: inline; + fill: currentColor; + vertical-align:middle; + overflow: visible; +} + +code.sourceCode span.al { color: black; } +code.sourceCode span.at { color: black; } +code.sourceCode span.bn { color: black; } +code.sourceCode span.bu { color: black; } +code.sourceCode span.cf { color: black; } +code.sourceCode span.ch { color: black; } +code.sourceCode span.co { color: darkgray; } +code.sourceCode span.dt { color: black; } +code.sourceCode span.dv { color: black; } +code.sourceCode span.er { color: black; } +code.sourceCode span.ex { color: darkorange; } +code.sourceCode span.fl { color: black; } +code.sourceCode span.fu { color: darkorange; } +code.sourceCode span.im { color: black; } +code.sourceCode span.kw { color: darkcyan; } +code.sourceCode span.op { color: black; } +code.sourceCode span.ot { color: black; } +code.sourceCode span.pp { color: black; } +code.sourceCode span.sc { color: black; } +code.sourceCode span.ss { color: black; } +code.sourceCode span.st { color: magenta; } +code.sourceCode span.va { color: darkturquoise; } + +code, +pre { + font-family: "Inconsolata", monospace; + font-size: 0.8rem; + color: darkslategrey; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + tab-size: 2; + hyphens: none; + border: 1px solid #ccc; + background-color: whitesmoke; +} + +pre { + padding: 0.3rem; + margin: 0.6rem 0; + overflow: auto; +} + +code { + display: inline-block; + padding: 0 0.3rem; + line-height: 1.1rem; +} + +pre code { + background-color: transparent; + border: none; + padding: 0; +} + +.singular footer { + margin: 2rem 0; +} + +.footnoteRef, +.footnoteRef:hover { + border: 0; + white-space: nowrap; +} + +.footnoteRef a { + border: none; +} + +.footnoteRef sup { + vertical-align: baseline; + position: relative; + top: -0.3rem; + font-size: 0.8rem; + margin-right: 0.1rem; +} + +.footnoteRef sup:before, +.footnoteRef sup:after { + color: #33c; +} + +.footnotes ol li { + margin-bottom: 0.3rem; +} + +.comments ol .u-repost-of, +.footnotes ol li a { + display: inline-block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: top; + max-width: 80%; +} + +.footnotes ol li a[href^="#"] { + margin: 0 0 0 0.6rem; + max-width: 20%; + font-size: 0.6rem; +} + +.footnotes ol li a[href^="#"]:after { + content: "back to text"; + margin: 0 0 0 0.2rem; + color: #666; +} + +.footnotes ol li a[href^="#"]:hover:after { + color: #000; +} + +.content-header, +.content-footer { + background-color: #333336; + color: #bbb; +} + +.content-header a, +.content-footer a { + color: #cccccc; + border: none; +} + +.content-header a:hover, +.content-footer a:hover { + color: #fefefe; + border: none; +} + +.content-footer { + margin-top: 2rem; + padding: 1rem 0; +} + +.footer-contact, +.footer-notes { + display: block; + padding: 1rem; + font-size: 0.9rem; +} + +.footer-contact dl, +.footer-contact img { + display: inline-block; + vertical-align: top; +} + +.footer-contact dl { + width: 80%; + padding-left: 1rem; +} + +.footer-contact img { + width: 18%; +} + +.footer-contact .p-name { + font-size: 1.1rem; + font-variant: small-caps; +} + +.footer-contact dl dt { + display:none; + visibility: hidden; +} + +.footer-contact dl dd { + line-height: 2rem; + border-bottom: 1px solid #666; +} + +.footer-contact dl dd:first-of-type { + border-bottom: none; +} + +.footer-notes figure { + display: inline-block; + margin-right: 1rem; +} + +.footer-notes figure img { + width:7rem; +} + +input { + vertical-align:middle; + border: none; + border-bottom: 3px solid #aaa; + background-color: transparent; + color: #ccc; + height: 1.6rem; + width: 6rem; + font-size: 0.8rem; +} + +input[type=submit] { + + width: 2.2rem; + cursor: pointer; +} + +input:focus, +input[type=submit]:hover { + border-bottom: 3px solid #fff; + color: #fff; +} + +.search-form { + display: block; + padding: 0.3rem 0.1rem; + text-align: center; +} + +.content-navigation ul { + list-style-type: none; + margin: 0; + padding: 0; + text-align:center; +} + +.content-navigation ul li { + margin:0; + padding: 0.3rem 0.3rem 0.3rem 0; + display: inline-block; + text-align: center; +} + +.content-navigation ul li a { + display:block; + padding:0 0.2rem; + font-weight: bold; + border-bottom: 3px solid transparent; + text-align: center; + font-size: 0.7rem; +} + +.content-navigation ul li a svg { + display:block; + margin: auto; +} + +.content-navigation ul li a.active { + border-bottom: 3px solid #ccc; +} + +.content-navigation ul li a:hover { + border-bottom: 3px solid #fefefe; +} + +/* above is mobile first; this is the desktop */ +@media all and (min-width: 50rem) { + + .content-navigation ul li a { + font-size: 0.9rem; + } + .content-navigation ul li a svg { + display:inline-block; + } + + .search-form, + .content-navigation { + display:inline-block; + } + + .search-form { + float:right; + margin: 0.1rem; + } + + .footer-contact, + .footer-notes { + display: inline-block; + max-width: 48%; + padding: 1rem; + vertical-align: top; + } + +} + +figure { + background-color: #333; + margin: 0.6rem 0; + padding: 0.6rem 0 0 0; +} + +figcaption { + padding: 0.6rem; + margin: 0.6rem 0 0 0; + background-color: #444; + text-align: left; +} + +.favurl img, +.adaptimg { + display: block; + max-height: 98vh; + max-width: 100%; + width:auto; + height:auto; + margin: 0.3rem auto; + padding: 0; + outline: 1px solid #111; +} + +.follow { + cursor:pointer; + display:block; + text-align:right; + margin: 0.6rem 0; + font-size: 0.8rem; +} + +.follow a, +.more a, +.pagination a { + padding: 0 0 0.3rem 0; + border-bottom: 3px solid #999; +} + +.follow a:hover, +.more a:hover, +.pagination a:hover { + border-bottom-color: #000; +} + +.more { + display:block; + font-weight:bold; +} + +.more a:before { + content:'Continue \00BB'; +} + +.pagination ul { + text-align:center; + list-style-type: none; + font-size: 1.2rem; +} + +.pagination li { + display:inline-block; +} + +.pagination a, +.pagination span { + padding: 0.3rem 0.6rem; +} + +time { + font-size: 0.8rem; +} + +.exif { + font-size: 0.7rem; + font-family: mono; + letter-spacing: -0.04rem; +} + +.hide, +.comments .u-uuid, +.comments dl time, +.exif dt { + display: none; + visibility: hidden; +} +.exif dd { + display: inline-block; + margin: 0 0.3rem; +} +.exif dd i { + margin-right: 0.3rem; +} + +/* replies */ +.comments ol .e-content, +.comments ol { + margin: 1rem 0 0 1rem; +} + +.comments ol li { + margin-bottom: 1.3rem; +} + + +.comments ol .p-name { + font-weight: bold; + display: block; +} + +.comments ol time, +.comments ol .u-repost-of { + font-size: 0.8rem; + margin: 0; +} + +.comments ol .u-repost-of:before { + content: '\2022'; + margin: 0 0.3rem; +} + +.comments dt, +.comments dd, +.comments dl ul, +.comments dl li { + display: inline; +} + +.comments dl li { + margin:0; + padding:0 0.3rem; +} + +.comments dl a.u-repost-of { + margin-left: 0.3rem; + +} + +.content-note { + font-size: 0.8rem; +} + +.w25, +.w33 { + display: inline-block; + height: auto; +} + +.w33 { + width: 32%; +} +.w25 { + width: 24%; +} + +.favurl img { + z-index:1; + opacity: 0.5; +} + +.favurl, +.favurl:hover { + border: none; + position: relative; + display: block; +} + +.favurl::after, +.favurl:hover::after { + display: block; + position: absolute; + opacity: 0.9; + right: 0; + left: 0; + bottom: 1rem; + content:attr(href); + padding: 0.5rem 1rem; + font-weight: bold; + color: #fff; + background-color: #000; +} + +.favurl:hover::after { + opacity: 0.8; +} + +.u-favorite-of { + font-size: 0.9rem; + font-weight: initial; +} + +.u-in-reply-to::before { + content: 'RE:'; + dislay: inline-block; + margin-right: 0.3rem; + font-weight: bold; +} + +.searchresult { + margin-bottom: 3rem; +} + +.searchresult h3 { + font-weight: normal; + font-family: mono, monospace; + font-size: 0.9rem; + margin: 0 0 1rem 0; + border: none; +} + +.searchresult h3:before { + content: "\2937"; +} + +.searchresult .highlight { + font-size: 0.9rem; +} + + +@media print { + * { + background-color: #fff !important; + } + + html, body { + font-size: 10pt !important; + text-shadow: unset !important; + } + + @page { + margin: 0.5in; + orphans: 4; + widows: 3; + } + + .limit, + .content-body { + max-width: 100% !important; + margin: 0 !important; + } + + h1, h2, h3, h4, h5, h6 { + page-break-after: avoid; + } + + p, li, pre, blockquote, aside, .footnotes { + page-break-inside: avoid !important; + } + + a { + border: none; + } + + .e-content .photo { + display:block; + page-break-inside: avoid !important; + } + + .e-content .adaptive { + display:block; + max-width: 100%; + max-height: 45vh; + text-align:center; + border:none; + text-decoration:none; + padding:0; + margin: 1rem auto; + page-break-inside: avoid !important; + } + + + .e-content .adaptive img { + page-break-inside: avoid !important; + max-width: 100%; + max-height:45vh; + } + + .content-note, .content-header, .content-footer, + video, audio, + .footnotes ol li a[href^="#"], + .footnotes ol li a[href^="#"]:after { + display:none; + visibility: hidden; + } + + .footnotes ol li a { + display: block; + overflow: visible; + white-space: normal; + border: none; + } + + code.sourceCode span { color: #000; } + + pre.sourceCode, code, pre { + color: #222; + word-break: break-all; + word-wrap: break-word; + overflow: initial; + line-height: 1rem; + } +}
