Bootstap v4.0.0-alpha.5 \o/ compatible

I couldn't resist

alchemy/static/css/style.css

@@ -6,19 +6,6 @@
 
 body {
   background-color: #f5f5f5;
-  font-family: Merriweather, Georgia, serif;
-  font-size: 16px;
-  line-height: 1.5;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: Montserrat, 'Helvetica Neue', sans-serif;
-  font-weight: bold;
 }
 
 a {
@@ -30,79 +17,55 @@ a:hover {
   color: #0085a1
 }
 
-blockquote {
-  color: #777;
-  font-style: italic
-}
-
 /* ------------------------------------------------------------------------- */
 
 .container {
-  max-width: 970px;
+  max-width: 960px;
 }
 
 .header {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid rgba(0,0,0,.1);
-  padding-bottom: 10px;
+  padding-top: 1rem;
 }
 
 .header img {
-  margin: 20px 0;
+  margin-bottom: 1rem;
 }
 
 .header .title {
-  font-size: 3em;
+  font-size: 3rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
 }
 
-.header p {
+.header ul,
-  margin-top: 20px;
+.header li {
-}
+  margin-bottom: .5rem;
-
-.header hr {
-  border-color: #ddd;
-  margin: 15px 0;
 }
 
 .header ul {
-  font-family: Montserrat, 'Helvetica Neue', sans-serif;
+  font-size: 1.25rem;
-  font-size: 1.1em;
+  font-weight: 300;
-  margin-bottom: 0;
   text-transform: lowercase;
 }
 
-.header li {
-  margin-bottom: 10px;
-}
-
 .main {
   background-color: #fff;
-  padding: 20px 0;
+  padding: 2rem 0;
 }
 
 .footer {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid rgba(0,0,0,.1);
-  padding: 20px 0;
+  padding-top: 1rem;
-}
-
-.footer ul {
-  margin-bottom: 0;
-}
-
-.page-header {
-  margin-top: 0;
-}
-
-.page-header h1 {
-  line-height: 1.3;
-}
-
-.pagination > li > a,
-.pagination > li > span {
-  color: #333;
 }
 
 .highlight pre {
-  border: 1px solid #ddd;
+  border: 1px solid rgba(0,0,0,.1);
+  padding: 1rem;
+}
+
+.pagination .page-link {
+  color: #333;
 }
 
 .teaser header ul {
@@ -111,42 +74,37 @@ blockquote {
 }
 
 .teaser header li {
-  margin-bottom: 10px;
+  margin-bottom: .5rem;
-}
-
-.teaser .title {
-  margin-top: 0;
-  line-height: 1.3;
 }
 
 .teaser .content p {
   margin-bottom: 0;
 }
 
-.article header ul {
+.article header ul,
-  margin-bottom: 0;
-}
-
 .article header li {
-  margin-bottom: 10px;
+  margin-bottom: .5rem;
 }
 
 .article .content p {
-  margin: 25px 0;
+  margin: 1.5rem 0;
 }
 
 .article .content a {
   text-decoration: underline
 }
 
-@media (max-width: 768px) {
+@media (max-width: 576px) {
-  .teaser header ul {
+  .header,
-    margin-left: -5px;
+  .footer {
+    text-align: center;
   }
 
   .teaser header li {
     display: inline-block;
-    padding-right: 5px;
+  }
-    padding-left: 5px;
+
+  .teaser header li:not(:last-child) {
+    margin-right: 5px;
   }
 }

alchemy/templates/archives.html

@@ -9,10 +9,10 @@ Archives
 {% endblock %}
 
 {% block content %}
-<dl class="dl-horizontal">
+<dl class="row">
   {% for article in dates %}
-  <dt>{{ article.locale_date }}</dt>
+  <dt class="col-sm-4">{{ article.locale_date }}</dt>
-  <dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
+  <dd class="col-sm-8"><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
   {% endfor %}
 </dl>
 {% endblock %}

alchemy/templates/article.html

@@ -17,16 +17,18 @@
 <article class="article">
   <header>
     <ul class="list-inline">
-      <li class="text-muted" title="{{ article.date.isoformat() }}">
+      <li class="list-inline-item text-muted" title="{{ article.date.isoformat() }}">
         <i class="fa fa-clock-o"></i>
         {{ article.locale_date }}
       </li>
-      <li>
+      <li class="list-inline-item text-muted">&middot;</li>
+      <li class="list-inline-item">
         <i class="fa fa-folder-open-o"></i>
         <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
       </li>
       {% if article.tags %}
-      <li>
+      <li class="list-inline-item text-muted">&middot;</li>
+      <li class="list-inline-item">
         <i class="fa fa-files-o"></i>
         {% for tag in article.tags %}
         <a href="{{ SITEURL }}/{{ tag.url }}">#{{ tag }}</a>{% if not loop.last %}, {% endif %}
@@ -34,7 +36,8 @@
       </li>
       {% endif %}
       {% if not HIDE_AUTHORS and article.authors %}
-      <li>
+      <li class="list-inline-item text-muted">&middot;</li>
+      <li class="list-inline-item">
         <i class="fa fa-user-o"></i>
         {% for author in article.authors %}
         <a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>{% if not loop.last %}, {% endif %}

alchemy/templates/base.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>{% block title %}| {{ SITENAME }}{% endblock %}</title>
   <link rel="canonical" href="{{ SITEURL }}/{{ output_file }}">
 
@@ -47,14 +47,6 @@
   <link rel="stylesheet" href="{{ SITEURL }}/theme/css/style.css">
 
   {% block head %}{% endblock %}
-
-  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
-  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-  <!--[if lt IE 9]>
-    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
-    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-  <![endif]-->
-
   {% include 'include/analytics.html' %}
 </head>
 
@@ -64,7 +56,9 @@
       <div class="row">
         {% if SITEIMAGE %}
         <div class="col-sm-4">
-          <a href="{{ SITEURL }}"><img class="img-responsive" src={{ SITEURL }}{{ SITEIMAGE }} alt="{{ SITENAME }}"></a>
+          <a href="{{ SITEURL }}">
+            <img class="img-fluid rounded" src={{ SITEURL }}{{ SITEIMAGE }} alt="{{ SITENAME }}">
+          </a>
         </div>
         {% endif %}
         <div class="col-sm-{% if SITEIMAGE %}8{% else %}12{% endif %}">
@@ -76,21 +70,21 @@
           <hr>
           <ul class="list-inline">
             {% for title, link in LINKS %}
-            <li><a href="{{ link }}" target="_blank">{{ title }}</a></li>
+            <li class="list-inline-item"><a href="{{ link }}" target="_blank">{{ title }}</a></li>
             {% endfor %}
             {% if DISPLAY_PAGES_ON_MENU %}
             {% for page in PAGES %}
             {% if LINKS and loop.first %}
-            <li class="text-muted">|</li>
+            <li class="list-inline-item text-muted">|</li>
             {% endif %}
-            <li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a></li>
+            <li class="list-inline-item"><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a></li>
             {% endfor %}
             {% endif %}
             {% for icon, link in ICONS %}
             {% if (LINKS or (DISPLAY_PAGES_ON_MENU and PAGES)) and loop.first %}
-            <li class="text-muted">|</li>
+            <li class=" list-inline-item text-muted">|</li>
             {% endif %}
-            <li><a class="fa fa-lg fa-{{ icon }}" href="{{ link }}" target="_blank"></a></li>
+            <li class="list-inline-item"><a class="fa fa-lg fa-{{ icon }}" href="{{ link }}" target="_blank"></a></li>
             {% endfor %}
           </ul>
           {% endif %}
@@ -101,9 +95,8 @@
 
   <div class="main">
     <div class="container">
-      <div class="page-header">
+      <h1>{% block page_header %}{% endblock %}</h1>
-        <h1>{% block page_header %}{% endblock %}</h1>
+      <hr>
-      </div>
       {% block content %}{% endblock %}
     </div>
   </div>
@@ -113,17 +106,17 @@
       <div class="row">
        <ul class="col-sm-6 list-inline">
           {% if not HIDE_AUTHORS %}
-          <li><a href="{{ SITEURL }}/authors.html">Authors</a></li>
+          <li class="list-inline-item"><a href="{{ SITEURL }}/authors.html">Authors</a></li>
           {% endif %}
-          <li><a href="{{ SITEURL }}/archives.html">Archives</a></li>
+          <li class="list-inline-item"><a href="{{ SITEURL }}/archives.html">Archives</a></li>
-          <li><a href="{{ SITEURL }}/categories.html">Categories</a></li>
+          <li class="list-inline-item"><a href="{{ SITEURL }}/categories.html">Categories</a></li>
           {% if tags|length %}
-          <li><a href="{{ SITEURL }}/tags.html">Tags</a></li>
+          <li class="list-inline-item"><a href="{{ SITEURL }}/tags.html">Tags</a></li>
           {% endif %}
         </ul>
-        <div class="col-sm-6 hidden-xs text-right text-muted">
+        <p class="col-sm-6 text-sm-right text-muted">
           Generated by <a href="https://github.com/getpelican/pelican" target="_blank">Pelican</a> using <a href="https://github.com/rwanyoike/pelican-alchemy" target="_blank">&#x2728; alchemy</a>
-        </div>
+        </p>
       </div>
     </div>
   </footer>

alchemy/templates/include/pagination.html

@@ -2,11 +2,23 @@
 <hr>
 <ul class="pagination">
   {% if articles_page.has_previous() %}
-  <li><a href="{{ SITEURL }}/{{ articles_previous_page.url }}">&laquo;</a></li>
+  <li class="page-item">
+    <a class="page-link" href="{{ SITEURL }}/{{ articles_previous_page.url }}">
+      <span aria-hidden="true">&laquo;</span>
+      <span class="sr-only">Previous</span>
+    </a>
+  </li>
   {% endif %}
-  <li><span>{{ articles_page.number }} of {{ articles_paginator.num_pages }}</span></li>
+  <li class="page-item disabled">
+    <span class="page-link">{{ articles_page.number }} of {{ articles_paginator.num_pages }}</span>
+  </li>
   {% if articles_page.has_next() %}
-  <li><a href="{{ SITEURL }}/{{ articles_next_page.url }}">&raquo;</a></li>
+  <li class="page-item">
+    <a class="page-link" href="{{ SITEURL }}/{{ articles_next_page.url }}">
+      <span aria-hidden="true">&raquo;</span>
+      <span class="sr-only">Next</span>
+    </a>
+  </li>
   {% endif %}
 </ul>
 {% endif %}

alchemy/templates/index.html

@@ -24,11 +24,13 @@ All Articles
         <i class="fa fa-clock-o"></i>
         {{ article.locale_date }}
       </li>
+      <li class="list-inline-item hidden-sm-up text-muted">&middot;</li>
       <li>
         <i class="fa fa-folder-open-o"></i>
         <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
       </li>
       {% if not HIDE_AUTHORS and article.authors %}
+      <li class="list-inline-item hidden-sm-up text-muted">&middot;</li>
       <li>
         <i class="fa fa-user-o"></i>
         {% for author in article.authors %}

alchemy/templates/sitemap.html

@@ -1,32 +1,27 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-
+  {% for article in articles %}
-{% for article in articles %}
+  <url>
-<url>
+    <loc>{{ SITEURL }}/{{ article.url }}</loc>
-  <loc>{{ SITEURL }}/{{ article.url }}</loc>
+    <priority>0.8</priority>
-  <priority>0.8</priority>
+  </url>
-</url>
+  {% for translation in article.translations %}
-
+  <url>
-{% for translation in article.translations %}
+    <loc>{{ SITEURL }}/{{ translation.url }}</loc>
-<url>
+    <priority>0.8</priority>
-  <loc>{{ SITEURL }}/{{ translation.url }}</loc>
+  </url>
-  <priority>0.8</priority>
+  {% endfor %}
-</url>
+  {% endfor %}
-{% endfor %}
+  {% for page in pages %}
-{% endfor %}
+  <url>
-
+    <loc>{{ SITEURL }}/{{ page.url }}</loc>
-{% for page in pages %}
+    <priority>1.0</priority>
-<url>
+  </url>
-  <loc>{{ SITEURL }}/{{ page.url }}</loc>
+  {% for translation in page.translations %}
-  <priority>1.0</priority>
+  <url>
-</url>
+    <loc>{{ SITEURL }}/{{ translation.url }}</loc>
-
+    <priority>1.0</priority>
-{% for translation in page.translations %}
+  </url>
-<url>
+  {% endfor %}
-  <loc>{{ SITEURL }}/{{ translation.url }}</loc>
+  {% endfor %}
-  <priority>1.0</priority>
-</url>
-{% endfor %}
-{% endfor %}
-
 </urlset>