diff --git a/it4i_theme/base.html b/it4i_theme/base.html
index 24990eb53f91372b93d7b67507b533368ea75be9..5238fd148d1be25d0aa26d3b638e2c365b6e7459 100644
--- a/it4i_theme/base.html
+++ b/it4i_theme/base.html
@@ -1,13 +1,20 @@
<!DOCTYPE html>
-<!--[if lt IE 7 ]><html class="no-js ie6"><![endif]-->
-<!--[if IE 7 ]><html class="no-js ie7"><![endif]-->
-<!--[if IE 8 ]><html class="no-js ie8"><![endif]-->
-<!--[if IE 9 ]><html class="no-js ie9"><![endif]-->
+<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
+<!--[if IE 7 ]> <html class="no-js ie7"> <![endif]-->
+<!--[if IE 8 ]> <html class="no-js ie8"> <![endif]-->
+<!--[if IE 9 ]> <html class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1">
+
+ <!-- Charset and viewport -->
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width,
+ user-scalable=no, initial-scale=1, maximum-scale=1" />
+
+ <!-- General meta tags -->
{% block htmltitle %}
+
+ <!-- Site title -->
{% if page_title %}
<title>{{ page_title }} - {{ site_name }}</title>
{% elif page_description %}
@@ -15,28 +22,49 @@
{% else %}
<title>{{ site_name }}</title>
{% endif %}
+
+ <!-- Site description -->
{% if page_description %}
- <meta name="description" content="{{ page_description }}">
+ <meta name="description" content="{{ page_description }}" />
{% endif %}
+
+ <!-- Canonical -->
{% if canonical_url %}
- <link rel="canonical" href="{{ canonical_url }}">
+ <link rel="canonical" href="{{ canonical_url }}" />
{% endif %}
+
+ <!-- Author -->
{% if site_author %}
- <meta name="author" content="{{ site_author }}">
+ <meta name="author" content="{{ site_author }}" />
{% endif %}
{% endblock %}
- <meta property="og:url" content="{{ canonical_url }}">
- <meta property="og:title" content="{{ site_name }}">
- <meta property="og:image" content="{{ canonical_url }}/{{ base_url }}/{{ config.extra.logo }}">
- <meta name="apple-mobile-web-app-title" content="{{ site_name }}">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
+ <!-- Open graph tags -->
+ <meta property="og:url" content="{{ canonical_url }}" />
+ <meta property="og:title" content="{{ site_name }}"/>
+ <meta property="og:image"
+ content="{{ canonical_url }}/{{ base_url }}/{{ config.extra.logo }}" />
+
+ <!-- Web application capability on iOS -->
+ <meta name="apple-mobile-web-app-title" content="{{ site_name }}" />
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style"
+ content="black-translucent" />
+
+ <!-- Web application icon on iOS -->
{% if config.extra.logo %}
- <link rel="apple-touch-icon" href="{{ base_url }}/{{ config.extra.logo }}">
+ <link rel="apple-touch-icon"
+ href="{{ base_url }}/{{ config.extra.logo }}">
{% endif %}
+
+ <!-- Favicon -->
{% set favicon = favicon | default("assets/images/favicon.ico", true) %}
- <link rel="shortcut icon" type="image/x-icon" href="{{ base_url }}/{{ favicon }}">
- <link rel="icon" type="image/x-icon" href="{{ base_url }}/{{ favicon }}">
+ <link rel="shortcut icon" type="image/x-icon"
+ href="{{ base_url }}/{{ favicon }}" />
+ <link rel="icon" type="image/x-icon"
+ href="{{ base_url }}/{{ favicon }}" />
+
+ <!-- Configure icons (placed here to omit issues with subdirectories) -->
<style>
@font-face {
font-family: 'Icon';
@@ -53,15 +81,24 @@
font-style: normal;
}
</style>
- <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.css">
+
+ <!-- Theme-related stylesheets -->
+ <link rel="stylesheet" type="text/css"
+ href="{{ base_url }}/assets/stylesheets/application.css" />
+
+ <!-- Extra palettes -->
{% if config.extra.palette %}
- <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/palettes.css">
+ <link rel="stylesheet" type="text/css"
+ href="{{ base_url }}/assets/stylesheets/palettes.css" />
{% endif %}
+
+ <!-- Configure webfonts -->
{% if config.extra.font != "none" %}
{% set text = config.extra.get("font", {}).text | default("Ubuntu") %}
{% set code = config.extra.get("font", {}).code | default("Ubuntu Mono") %}
{% set font = text + ':400,700|' + code | replace(' ', '+') %}
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{ font }}">
+ <link rel="stylesheet" type="text/css"
+ href="https://fonts.googleapis.com/css?family={{ font }}" />
<style>
body, input {
font-family: '{{ text }}', Helvetica, Arial, sans-serif;
@@ -71,42 +108,86 @@
}
</style>
{% endif %}
+
+ <!-- Custom stylesheets -->
{% for path in extra_css %}
- <link rel="stylesheet" href="{{ path }}">
+ <link rel="stylesheet" type="text/css" href="{{ path }}" />
{% endfor %}
+
+ <!-- Modernizr -->
<script src="{{ base_url }}/assets/javascripts/modernizr.js"></script>
+
+ <!-- Custom header -->
{% block extrahead %}{% endblock %}
</head>
+
+ <!-- Define palette -->
{% set palette = config.extra.get("palette", {}) %}
{% set primary = palette.primary | replace(' ', '-') | lower %}
{% set accent = palette.accent | replace(' ', '-') | lower %}
- <body class="{% if primary %}palette-primary-{{ primary }}{% endif %} {% if accent %}palette-accent-{{ accent }}{% endif %}">
+ <body class="
+ {% if primary %}palette-primary-{{ primary }}{% endif %}
+ {% if accent %}palette-accent-{{ accent }}{% endif %}
+ ">
+
+ <!--
+ Sadly the jinja template engine is not very flexible - it doesn't support
+ regular expressions out-of-the-box. Since there might be a slash at the
+ end of the repository name, we just do a string comparison and kill it.
+ -->
{% if repo_name == "GitHub" and repo_url %}
{% set repo_id = repo_url | replace("https://github.com/", "") %}
{% if repo_id[-1:] == "/" %}
{% set repo_id = repo_id[:-1] %}
{% endif %}
{% endif %}
+
+ <!-- Backdrop -->
<div class="backdrop">
<div class="backdrop-paper"></div>
</div>
- <input class="toggle" type="checkbox" id="toggle-drawer">
- <input class="toggle" type="checkbox" id="toggle-search">
+
+ <!-- State toggles -->
+ <input class="toggle" type="checkbox" id="toggle-drawer" />
+ <input class="toggle" type="checkbox" id="toggle-search" />
+
+ <!-- Overlay for expanded drawer -->
<label class="toggle-button overlay" for="toggle-drawer"></label>
+
+ <!-- Header -->
<header class="header">
{% include "header.html" %}
</header>
+
+ <!-- Main content -->
<main class="main">
+
+ <!--
+ This is a nasty hack that checks whether the content contains a
+ h1 headline. If it does, the variable h1 is set to true. This is
+ necessary for correctly rendering the table of contents which is
+ embedded into the navigation and the actual headline.
+ -->
{% set h1 = "\x3ch1 id=" in content %}
+
+ <!-- Drawer with navigation -->
<div class="drawer">
{% include "drawer.html" %}
</div>
+
+ <!-- Article -->
<article class="article">
<div class="wrapper">
+
+ <!-- Headline -->
{% if not h1 %}
<h1>{{ page_title | default(site_name, true)}}</h1>
{% endif %}
+
+ <!-- Article content -->
{{ content }}
+
+ <!-- Copyright and theme information -->
<aside class="copyright" role="note">
{% if copyright %}
{{ copyright }} –
@@ -114,11 +195,14 @@
Documentation built with
<a href="http://www.mkdocs.org" target="_blank">MkDocs</a>
using the
- <a href="http://squidfunk.github.io/mkdocs-material/" target="_blank">
+ <a href="http://squidfunk.github.io/mkdocs-material/"
+ target="_blank">
Material
</a>
theme.
</aside>
+
+ <!-- Footer -->
{% block footer %}
<footer class="footer">
{% include "footer.html" %}
@@ -126,6 +210,8 @@
{% endblock %}
</div>
</article>
+
+ <!-- Search results -->
<div class="results" role="status" aria-live="polite">
<div class="scrollable">
<div class="wrapper">
@@ -135,6 +221,8 @@
</div>
</div>
</main>
+
+ <!-- Theme-related and custom javascripts -->
<script>
var base_url = '{{ base_url }}';
var repo_id = '{{ repo_id }}';
@@ -143,6 +231,8 @@
{% for path in extra_javascript %}
<script src="{{ path }}"></script>
{% endfor %}
+
+ <!-- Google Analytics -->
{% if google_analytics %}
<script>
(function(i,s,o,g,r,a,m){
@@ -152,10 +242,12 @@
m.parentNode.insertBefore(a,m)
})(window, document,
'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+
/* General initialization */
ga('create', '{{ google_analytics[0] }}', '{{ google_analytics[1] }}');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
+
/* Track outbound links */
var buttons = document.querySelectorAll('a');
Array.prototype.map.call(buttons, function(item) {
@@ -166,6 +258,7 @@
});
}
});
+
/* Register handler to log search on blur */
var query = document.querySelector('.query');
query.addEventListener('blur', function() {
@@ -177,4 +270,4 @@
</script>
{% endif %}
</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/it4i_theme/drawer.html b/it4i_theme/drawer.html
index 0186b8b79ab8c731e3d2eba18c5231d3baafdc6e..c00aaefd63e5e81e41c25877b82f01afcaaa6780 100644
--- a/it4i_theme/drawer.html
+++ b/it4i_theme/drawer.html
@@ -1,32 +1,101 @@
+<!-- Navigation -->
<nav aria-label="Navigation">
{% set home = repo_url | default("/", true) %}
+
+ <!-- Project information -->
<a href="{{ home }}" class="project">
+
+ <!-- Name and logo -->
<div class="banner">
+
+ <!-- Version -->
{% if config.extra.logo %}
<div class="logo">
- <img src="{{ base_url }}/{{ config.extra.logo }}">
+ <img src="{{ base_url }}/{{ config.extra.logo }}" />
</div>
{% endif %}
+
+ <!-- Project name and verison -->
+ <div class="name">
+ <strong>
+ {{ site_name }}
+ <span class="version">
+ {{ config.extra.version }}
+ </span>
+ </strong>
+
+ <!-- Project repository name -->
+ {% if repo_id %}
+ <br />
+ {{ repo_id }}
+ {% endif %}
+ </div>
</div>
</a>
+
+ <!-- Repository and table of contents -->
<div class="scrollable">
<div class="wrapper">
+
+ <!-- Repository -->
+ {% if repo_name == "GitHub" and repo_url %}
<ul class="repo">
<li class="repo-download">
{% set version = config.extra.version | default("master") %}
- <a href="pbspro-documentation/pbspro-programmers-guide.pdf" target="_blank" title="DOWNLOAD PDF VERSION" data-action="download">
- <i class="icon icon-download"></i> DOWNLOAD PDF VERSION
+ <a href="{{ repo_url }}/archive/{{ version }}.zip" target="_blank"
+ title="Download" data-action="download">
+ <i class="icon icon-download"></i> Download
</a>
</li>
- </ul>
- <hr>
+ <li class="repo-stars">
+ <a href="{{ repo_url }}/stargazers" target="_blank"
+ title="Stargazers" data-action="star">
+ <i class="icon icon-star"></i> Stars
+ <span class="count">–</span>
+ </a>
+ </li>
+ </ul>
+ <hr />
+ {% endif %}
+
+ <!-- Table of contents -->
<div class="toc">
<ul>
{% for nav_item in nav %}
{% include "nav.html" %}
{% endfor %}
</ul>
+
+ <!-- Author-related links -->
+ {% if config.extra.author %}
+ <hr />
+ <span class="section">The author</span>
+ <ul>
+
+ <!-- Twitter -->
+ {% if config.extra.author.twitter %}
+ {% set author = config.extra.author.twitter %}
+ <li>
+ <a href="https://twitter.com/{{ author }}" target="_blank"
+ title="@{{ author }} on Twitter">
+ @{{ author }} on Twitter
+ </a>
+ </li>
+ {% endif %}
+
+ <!-- GitHub -->
+ {% if config.extra.author.github %}
+ {% set author = config.extra.author.github %}
+ <li>
+ <a href="https://github.com/{{ author }}" target="_blank"
+ title="@{{ author }} on GitHub">
+ @{{ author }} on GitHub
+ </a>
+ </li>
+ {% endif %}
+ </ul>
+ {% endif %}
</div>
</div>
</div>
-</nav>
+</nav>
\ No newline at end of file
diff --git a/it4i_theme/footer.html b/it4i_theme/footer.html
index 660b28f675bed601c659042ae28edc4e8001cbf5..01251554198e45df6c9cf2f033582f2728b6e9f3 100644
--- a/it4i_theme/footer.html
+++ b/it4i_theme/footer.html
@@ -1,5 +1,8 @@
+<!-- Previous and next page -->
{% if include_next_prev %}
- <nav class="pagination" aria-label="Footer">
+ <nav class="pagination" aria-label="Footer">
+
+ <!-- Previous page -->
<div class="previous">
{% if previous_page %}
<a href="{{ previous_page.url }}" title="{{ previous_page.title }}">
@@ -7,7 +10,8 @@
{{ config.extra.get("i18n", {}).prev | default("Previous") }}
</span>
<div class="page">
- <div class="button button-previous" role="button" aria-label="Previous">
+ <div class="button button-previous"
+ role="button" aria-label="Previous">
<i class="icon icon-back"></i>
</div>
<div class="stretch">
@@ -19,6 +23,8 @@
</a>
{% endif %}
</div>
+
+ <!-- Next page -->
<div class="next">
{% if next_page %}
<a href="{{ next_page.url }}" title="{{ next_page.title }}">
diff --git a/it4i_theme/header.html b/it4i_theme/header.html
index 564d0b8fbab2082a6e0bb399e2eff42d4ed9c51f..dc2a0e434ea7c51122158a4a79255bd2c48a517a 100644
--- a/it4i_theme/header.html
+++ b/it4i_theme/header.html
@@ -1,10 +1,17 @@
+<!-- Top-level navigation -->
<nav aria-label="Header">
+
+ <!-- Default bar -->
<div class="bar default">
+
+ <!-- Toggle drawer -->
<div class="button button-menu" role="button" aria-label="Menu">
<label class="toggle-button icon icon-menu" for="toggle-drawer">
<span></span>
</label>
</div>
+
+ <!-- Page title -->
<div class="stretch">
<div class="title">
{% if current_page %}
@@ -22,24 +29,56 @@
{{ page_title | default(site_name, true) }}
</div>
</div>
+
+ <!-- Twitter -->
+ {% if config.extra.get("author", {}).twitter %}
+ {% set author = config.extra.author.twitter %}
+ <div class="button button-twitter" role="button" aria-label="Twitter">
+ <a href="https://twitter.com/{{ author }}"
+ title="@{{ author }} on Twitter" target="_blank"
+ class="toggle-button icon icon-twitter"></a>
+ </div>
+ {% endif %}
+
+ <!-- GitHub -->
+ {% if config.extra.get("author", {}).github %}
+ {% set author = config.extra.author.github %}
<div class="button button-github" role="button" aria-label="GitHub">
- <a href="https://gitlab.it4i.cz/kru0052/docs.it4i" title="on GitLab" target="_blank" ><img src="/img/git.png" width="30" height="30"></a>
+ <a href="https://github.com/{{ author }}"
+ title="@{{ author }} on GitHub" target="_blank"
+ class="toggle-button icon icon-github"></a>
</div>
+ {% endif %}
+
+ <!-- Open search -->
<div class="button button-search" role="button" aria-label="Search">
- <label class="toggle-button icon icon-search" title="Search" for="toggle-search"></label>
+ <label class="toggle-button icon icon-search" title="Search"
+ for="toggle-search"></label>
</div>
</div>
+
+ <!-- Search bar -->
<div class="bar search">
+
+ <!-- Close search -->
<div class="button button-close" role="button" aria-label="Close">
- <label class="toggle-button icon icon-back" for="toggle-search"></label>
+ <label class="toggle-button icon icon-back"
+ for="toggle-search"></label>
</div>
+
+ <!-- Search form -->
<div class="stretch">
<div class="field">
- <input class="query" type="text" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck>
+ <input class="query" type="text" placeholder="Search"
+ autocapitalize="off" autocorrect="off" autocomplete="off"
+ spellcheck="false" />
</div>
</div>
+
+ <!-- Empty search -->
<div class="button button-reset" role="button" aria-label="Search">
- <button class="toggle-button icon icon-close" id="reset-search"></button>
+ <button class="toggle-button icon icon-close"
+ id="reset-search"></button>
</div>
</div>
-</nav>
+</nav>
\ No newline at end of file
diff --git a/it4i_theme/nav.html b/it4i_theme/nav.html
index c926c085b448aa6b7897dfad56de7d1b23b7512a..1d70b9fc11a87ccb850a96b017556f45a61ab26c 100644
--- a/it4i_theme/nav.html
+++ b/it4i_theme/nav.html
@@ -1,24 +1,43 @@
+<!-- Render sections -->
{% if nav_item.children %}
<li>
<span class="section">{{ nav_item.title }}</span>
<ul>
+
+ <!-- Render pages of section -->
{% for nav_item in nav_item.children %}
{% include "nav.html" %}
{% endfor %}
</ul>
</li>
+
+<!-- Render page link -->
{% else %}
<li>
- <a class="{% if nav_item.active %}current{% endif %}" title="{{ nav_item.title }}" href="{{ nav_item.url }}">
+ <a class="{% if nav_item.active %}current{% endif %}"
+ title="{{ nav_item.title }}" href="{{ nav_item.url }}" >
{{ nav_item.title }}
</a>
+
+ <!-- Expand active pages -->
{% if nav_item == current_page %}
+
+ <!--
+ The top-level anchor must be skipped if the article contains a h1
+ headline, since it would be redundant to the link to the current page
+ that is located just above the anchor. Therefore we directly continue
+ with the children of the anchor.
+ -->
{% if h1 %}
{% set toc = (toc | first).children %}
{% endif %}
+
+ <!-- Render anchors of active page -->
{% if toc and (toc | first) %}
<ul>
{% for toc_item in toc %}
+
+ <!-- Render anchor -->
<li class="anchor">
<a title="{{ toc_item.title }}" href="{{ toc_item.url }}">
{{ toc_item.title }}