Customize tale theme (& add sidenotes+footnotes).
This is a large-ish commit that adds bunch of features to the base
"tale" theme forked from https://github.com/chesterhow/tale at de5cd20.
The changes:
- custom footer
- support for sidenotes, original taken from:
https://blog.jkl.gg/jekyll-footnote-tufte-sidenote/
- logo at the top of the website
- date format is %Y-%m-%d
- The "written by" in article is only shown when article's author
differs from site author
- Pages subpage shows list of posts sorted by years
This commit is contained in:
Michal Jirku
parent
de5cd20ac5
commit
d06b7677c8
15 changed files with 282 additions and 12 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,3 +1,4 @@
|
|||
.svn
|
||||
*.gem
|
||||
.bundle
|
||||
.DS_Store
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<footer>
|
||||
<span>
|
||||
© <time datetime="{{ site.time }}">{{ site.time | date: '%Y' }}</time> {{ site.author.name }}. Made with Jekyll using the <a href="https://github.com/chesterhow/tale/">Tale</a> theme.
|
||||
© <time datetime="{{ site.time }}">{{ site.time | date: '%Y' }}</time> {{ site.author.name }}. I speak only for myself.
|
||||
<!-- Made with Jekyll using a customized https://github.com/chesterhow/tale/ theme. -->
|
||||
</span>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,12 @@
|
|||
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700">
|
||||
|
||||
<!-- scripts -->
|
||||
<script src="{{ "/assets/js/jquery.min.js" | relative_url }}"></script>
|
||||
<script src="{{ "/assets/js/sidenotes.js" | relative_url }}"></script>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" sizes="128x128" href="{{ "/assets/favicon-128x128.png" | relative_url }}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{ "/assets/favicon-32x32.png" | relative_url }}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{ "/assets/favicon-16x16.png" | relative_url }}">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ "/assets/apple-touch-icon.png" | relative_url }}">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<a href="{{ site.baseurl }}/">
|
||||
<h2 class="nav-title">{{ site.title }}</h2>
|
||||
<h2 class="nav-title"><img src="{{ '/assets/favicon-32x32.png' | prepend: site.baseurl }}" srcset="{{ '/assets/favicon-64x64.png' | prepend: site.baseurl }} 2x, {{ '/assets/favicon-96x96.png' | prepend: site.baseurl }} 3x, {{ '/assets/favicon-128x128.png' | prepend: site.baseurl }} 4x, {{ '/assets/favicon-256x256.png' | prepend: site.baseurl }} 8x"> {{ site.title }}</h2>
|
||||
</a>
|
||||
<ul>
|
||||
<li><a href="{{ site.baseurl }}/">Posts</a></li>
|
||||
<li><a href="{{ '/tags' | prepend: site.baseurl }}">Tags</a></li>
|
||||
<li><a href="{{ '/about' | prepend: site.baseurl }}">About</a></li>
|
||||
<li><a href="{{ '/posts/' | prepend: site.baseurl }}">Posts</a></li>
|
||||
<li><a href="{{ '/tags/' | prepend: site.baseurl }}">Tags</a></li>
|
||||
<li><a href="{{ '/about/' | prepend: site.baseurl }}">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,12 @@ layout: default
|
|||
{% for post in paginator.posts %}
|
||||
<a href="{{ post.url | prepend: site.baseurl }}" class="catalogue-item">
|
||||
<div>
|
||||
<time datetime="{{ post.date }}" class="catalogue-time">{{ post.date | date: "%B %d, %Y" }}</time>
|
||||
<time datetime="{{ post.date }}" class="catalogue-time">{{ post.date | date: "%Y-%m-%d" }}</time>
|
||||
<h1 class="catalogue-title">{{ post.title }}</h1>
|
||||
<div class="catalogue-line"></div>
|
||||
|
||||
<p>
|
||||
<!-- sadly this template is not compatible with post.excerpt -->
|
||||
{{ post.content | strip_html | truncatewords: 30 }}
|
||||
</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,16 +4,21 @@ layout: default
|
|||
|
||||
<div class="post">
|
||||
<div class="post-info">
|
||||
<span>Written by</span>
|
||||
{% if page.author or page.date %}
|
||||
<span>Written</span>
|
||||
{% if page.author %}
|
||||
<span>by</span>
|
||||
{% if page.author %}
|
||||
{{ page.author }}
|
||||
{% else %}
|
||||
{{ site.author.name }}
|
||||
{% endif %}
|
||||
<br>
|
||||
{% endif %}
|
||||
|
||||
{% if page.date %}
|
||||
<br>
|
||||
<span>on </span><time datetime="{{ page.date }}">{{ page.date | date: "%B %d, %Y" }}</time>
|
||||
<span>on </span><time datetime="{{ page.date }}">{{ page.date | date: "%Y-%m-%d" }}</time>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
|
@ -35,5 +40,5 @@ layout: default
|
|||
<a href="{{ page.previous.url | prepend: site.baseurl }}" class="right arrow">→</a>
|
||||
{% endif %}
|
||||
|
||||
<a href="#" class="top">Top</a>
|
||||
</div>
|
||||
<a href="#" class="top">⇈</a>
|
||||
</div>
|
||||
|
|
|
|||
50
_pages/posts.md
Normal file
50
_pages/posts.md
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
---
|
||||
layout: default
|
||||
title: "Posts"
|
||||
permalink: /posts/
|
||||
---
|
||||
|
||||
<div class="tags">
|
||||
<div class="tags-header">
|
||||
<h2 class="tags-header-title">{{ page.title }}</h2>
|
||||
<div class="tags-header-line"></div>
|
||||
</div>
|
||||
<div class="tags-clouds">
|
||||
{% for post in site.posts %}
|
||||
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
|
||||
{% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
|
||||
{% if forloop.first %}<a href="#{{ this_year }}">{{ this_year }}</a>{% endif %}
|
||||
{% unless forloop.last %}
|
||||
{% if this_year != next_year %}<a href="#{{ next_year }}">{{ next_year }}</a>{% endif %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% for post in site.posts %}
|
||||
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
|
||||
{% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
|
||||
{% if forloop.first %}
|
||||
<div class="tags-item" id="{{ this_year }}">
|
||||
<h2 class="tags-item-label">{{ this_year }}</h2>
|
||||
{% endif %}
|
||||
<a class="tags-post" href="{{ post.url | prepend: site.baseurl }}">
|
||||
<div>
|
||||
<span class="tags-post-title">{{ post.title }}</span>
|
||||
<div class="tags-post-line"></div>
|
||||
</div>
|
||||
<span class="tags-post-meta">
|
||||
<time datetime="{{ post.date }}">
|
||||
{{ post.date | date:"%Y-%m-%d" }}
|
||||
</time>
|
||||
</span>
|
||||
</a>
|
||||
{% if forloop.last %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% if this_year != next_year %}
|
||||
</div>
|
||||
<div class="tags-item" id="{{ next_year }}">
|
||||
<h2 class="tags-item-label">{{ next_year }}</h2>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
53
_pages/tags.md
Normal file
53
_pages/tags.md
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
---
|
||||
layout: default
|
||||
title: "Tags"
|
||||
permalink: /tags/
|
||||
---
|
||||
|
||||
<div class="tags">
|
||||
<div class="tags-header">
|
||||
<h2 class="tags-header-title">{{ page.title }}</h2>
|
||||
<div class="tags-header-line"></div>
|
||||
</div>
|
||||
<div class="tags-clouds">
|
||||
{% for tag in site.tags %}
|
||||
<a href="#{{ tag[0] }}">{{ tag[0] }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% for tag in site.tags %}
|
||||
<div class="tags-item" id="{{ tag[0] }}">
|
||||
<svg
|
||||
class="tags-item-icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-tag"
|
||||
>
|
||||
<path
|
||||
d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"
|
||||
></path>
|
||||
<line x1="7" y1="7" x2="7.01" y2="7"></line>
|
||||
</svg>
|
||||
<h2 class="tags-item-label">{{ tag[0] }}</h2>
|
||||
{% for post in tag[1] %}
|
||||
<a class="tags-post" href="{{ post.url | prepend: site.baseurl }}">
|
||||
<div>
|
||||
<span class="tags-post-title">{{ post.title }}</span>
|
||||
<div class="tags-post-line"></div>
|
||||
</div>
|
||||
<span class="tags-post-meta">
|
||||
<time datetime="{{ post.date }}">
|
||||
{{ post.date | date:"%Y-%m-%d" }}
|
||||
</time>
|
||||
</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
@ -7,4 +7,7 @@
|
|||
@import 'tale/pagination';
|
||||
@import 'tale/catalogue';
|
||||
@import 'tale/404';
|
||||
@import 'tale/tags';
|
||||
@import 'tale/tags';
|
||||
@import 'tale/sidenote';
|
||||
@import 'tale/footnotes';
|
||||
@import 'tale/navigation';
|
||||
|
|
|
|||
12
_sass/tale/_footnotes.scss
Normal file
12
_sass/tale/_footnotes.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
.footnotes {
|
||||
border-top: .5px solid $grey-2;
|
||||
font-size: 80%;
|
||||
|
||||
li {
|
||||
padding: 0 1em 0 0;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
5
_sass/tale/_navigation.scss
Normal file
5
_sass/tale/_navigation.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.nav-container img {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
28
_sass/tale/_sidenote.scss
Normal file
28
_sass/tale/_sidenote.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.sidenote {
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 1.5em;
|
||||
border-left: 1px solid $default-color;
|
||||
color: $default-color;
|
||||
font-style: italic;
|
||||
font-size: 0.8em;
|
||||
|
||||
&-header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-hover {
|
||||
color: $highlight-color;
|
||||
border-color: $highlight-color;
|
||||
}
|
||||
|
||||
p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.reversefootnote {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@ $white: #fff !default;
|
|||
$blue: #4a9ae1 !default;
|
||||
$shadow-color: rgba(0, 0, 0, .2) !default;
|
||||
$code-color: #bf616a !default;
|
||||
$highlight-color: #f99b6d !default;
|
||||
|
||||
// Fonts
|
||||
$serif-primary: 'Libre Baskerville', 'Times New Roman', Times, serif !default;
|
||||
|
|
|
|||
2
assets/js/jquery.min.js
vendored
Normal file
2
assets/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
103
assets/js/sidenotes.js
Normal file
103
assets/js/sidenotes.js
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
/*
|
||||
* @author: Kaushik Gopal
|
||||
* @author: Michal Jirků
|
||||
*
|
||||
* A jQuery function that displays the footnotes
|
||||
* on the side (sidenotes) for easier reading.
|
||||
*
|
||||
* This is as recommended by Edward Tufte's style sidenotes:
|
||||
* https://edwardtufte.github.io/tufte-css/#sidenotes
|
||||
*
|
||||
* ---
|
||||
*
|
||||
* Changelog:
|
||||
* - 2020-11-23, Michal Jirků
|
||||
* - make sidenotes flexible width
|
||||
* - make sidenotes not overlap one another
|
||||
* - make sidenotes reload on font load (to help with &previous)
|
||||
* - make sidenotes compatible with multiple links to the same note
|
||||
* - 2020-09-07, Kaushik Gopal
|
||||
* - initial version from https://blog.jkl.gg/jekyll-footnote-tufte-sidenote/
|
||||
*
|
||||
*/
|
||||
(function () {
|
||||
|
||||
function showSidenote(index, sup, ww, $fnli, minh) {
|
||||
|
||||
// construct sidenote div
|
||||
let content = $fnli.eq(index).html();
|
||||
let div = $(document.createElement('div'));
|
||||
div.html("<span class=\"sidenote-header\">" + (index+1) + ". </span>" +
|
||||
content);
|
||||
div.addClass("sidenote");
|
||||
let position = sup.offset();
|
||||
|
||||
div.css({
|
||||
position: "absolute",
|
||||
left: ww,
|
||||
top: minh > position["top"] ? minh : position["top"],
|
||||
'min-width': ww > 420 ? ww/4 : ww/3,
|
||||
'max-width': ww/3,
|
||||
});
|
||||
|
||||
if (ww > 420) {
|
||||
sup.hover(function() {
|
||||
div.addClass("sidenote-hover");
|
||||
}, function () {
|
||||
div.removeClass("sidenote-hover");
|
||||
});
|
||||
} else {
|
||||
div.addClass("sidenote-hover");
|
||||
}
|
||||
|
||||
// console.log("props " + ww + " fn: " + $fnli.text());
|
||||
|
||||
$(document.body).append(div);
|
||||
|
||||
// console.log("sidenote: " + index + " top: " + div.position().top + " height: " + div.height());
|
||||
|
||||
return div.position().top + div.height() + 5;
|
||||
}
|
||||
|
||||
function loadSidenotes(ww, $fnli, fncount, $fn) {
|
||||
let minh = 0;
|
||||
$("sup[role='doc-noteref']").each(function(index, el) {
|
||||
minh = showSidenote(el.textContent - 1, $(this), ww, $fnli, minh);
|
||||
});
|
||||
if (ww > 420) {
|
||||
$fn.hide();
|
||||
} else {
|
||||
$fn.show();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$(window).on("load", function() {
|
||||
let $fn = $(".footnotes"),
|
||||
$fnli = $fn.find("ol li"),
|
||||
fncount = $fnli.length,
|
||||
ww = $("main").outerWidth() + $("main").offset().left;
|
||||
|
||||
// load first time
|
||||
loadSidenotes(ww, $fnli, fncount, $fn);
|
||||
|
||||
$(window).resize(function() {
|
||||
const new_ww = $("main").outerWidth() + $("main").offset().left;
|
||||
if (new_ww === ww) return;
|
||||
|
||||
// console.log(" XXX -- RESIZE -- XXX ");
|
||||
ww = new_ww;
|
||||
$(".sidenote").remove();
|
||||
loadSidenotes(ww, $fnli, fncount, $fn);
|
||||
});
|
||||
|
||||
// fonts have a power to blow up the size of the sidenotes, hence the
|
||||
// need to adjust
|
||||
document.fonts.onloadingdone = function(fss) {
|
||||
ww = $("main").outerWidth() + $("main").offset().left;
|
||||
$(".sidenote").remove();
|
||||
loadSidenotes(ww, $fnli, fncount, $fn);
|
||||
};
|
||||
});
|
||||
|
||||
})();
|
||||
Loading…
Reference in a new issue