Add missing HTML img alt attribute

Wrap content body in div

Add title class to titles

Show icons with the teaser metadata

Visual improvements

alchemy/static/css/style.css

@@ -46,6 +46,7 @@ h4,
 h5,
 h6 {
   font-family: Montserrat, 'Helvetica Neue', sans-serif;
+  font-weight: bold;
 }
 
 a {
@@ -77,7 +78,7 @@ blockquote {
   margin: 20px 0;
 }
 
-.header h1 {
+.header .title {
   font-size: 3em;
 }
 
@@ -132,40 +133,48 @@ blockquote {
   border: 1px solid #ddd;
 }
 
-.teaser h4 {
+.teaser header ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.teaser header li {
+  margin-bottom: 10px;
+}
+
+.teaser .title {
   margin-top: 0;
   line-height: 1.3;
 }
 
-.teaser p {
+.teaser .content p {
   margin-bottom: 0;
 }
 
-.teaser header div {
-  margin-bottom: 10px;
-}
-
-.article > ul,
-.article > ol,
-.article > p,
-.article > blockquote,
-.article > .highlight {
-  margin: 20px 0;
-}
-
-.article > h2 {
-  margin-top: 30px;
-}
-
-
-.article a {
-  text-decoration: underline
-}
-
 .article header ul {
-  margin-bottom: 10px;
+  margin-bottom: 0;
 }
 
 .article header li {
   margin-bottom: 10px;
 }
+
+.article .content p {
+  margin: 25px 0;
+}
+
+.article .content a {
+  text-decoration: underline
+}
+
+@media (max-width: 768px) {
+  .teaser header ul {
+    margin-left: -5px;
+  }
+
+  .teaser header li {
+    display: inline-block;
+    padding-right: 5px;
+    padding-left: 5px;
+  }
+}

alchemy/templates/article.html

@@ -43,7 +43,9 @@
       {% endif %}
     </ul>
   </header>
-  {{ article.content }}
+  <div class="content">
+    {{ article.content }}
+  </div>
 </article>
 {% include 'include/comments.html' %}
 {% endblock %}

alchemy/templates/base.html

@@ -63,12 +63,12 @@
     <div class="container">
       <div class="row">
         {% if SITEIMAGE %}
-        <div class="col-sm-4 hidden-xs">
-          <a href="{{ SITEURL }}"><img class="img-responsive" src={{ SITEURL }}{{ SITEIMAGE }}></a>
+        <div class="col-sm-4">
+          <a href="{{ SITEURL }}"><img class="img-responsive" src={{ SITEURL }}{{ SITEIMAGE }} alt="{{ SITENAME }}"></a>
         </div>
         {% endif %}
         <div class="col-sm-{% if SITEIMAGE %}8{% else %}12{% endif %}">
-          <h1><a href="{{ SITEURL }}">{{ SITENAME }}</a></h1>
+          <h1 class="title"><a href="{{ SITEURL }}">{{ SITENAME }}</a></h1>
           {% if SITESUBTITLE %}
           <p>{{ SITESUBTITLE }}</p>
           {% endif %}
@@ -108,7 +108,7 @@
     </div>
   </div>
 
-  <footer class="footer text-muted">
+  <footer class="footer">
     <div class="container">
       <div class="row">
        <ul class="col-sm-6 list-inline">
@@ -121,7 +121,7 @@
           <li><a href="{{ SITEURL }}/tags.html">Tags</a></li>
           {% endif %}
         </ul>
-        <div class="col-sm-6 hidden-xs text-right">
+        <div class="col-sm-6 hidden-xs text-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>
       </div>

alchemy/templates/index.html

@@ -18,24 +18,31 @@ All Articles
 {% block content %}
 {% for article in articles_page.object_list %}
 <article class="row teaser">
-  <header class="col-sm-4 hidden-xs text-muted">
-    <div title="{{ article.date.isoformat() }}">
-      {{ article.locale_date }}
-    </div>
-    <div>
-      <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
-    </div>
-    {% if not HIDE_AUTHORS and article.authors %}
-    <div>
-      {% for author in article.authors %}
-      <a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>{% if not loop.last %}, {% endif %}
-      {% endfor %}
-    </div>
-    {% endif %}
+  <header class="col-sm-4 text-muted">
+    <ul>
+      <li title="{{ article.date.isoformat() }}">
+        <i class="fa fa-clock-o"></i>
+        {{ article.locale_date }}
+      </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>
+        <i class="fa fa-user-o"></i>
+        {% for author in article.authors %}
+        <a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>{% if not loop.last %}, {% endif %}
+        {% endfor %}
+      </li>
+      {% endif %}
+    </ul>
   </header>
   <div class="col-sm-8">
-    <h4><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></h4>
-    {{ article.summary|striptags }}
+    <h4 class="title"><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></h4>
+    <div class="content">
+      {{ article.summary|striptags }}
+    </div>
   </div>
 </article>
 {% if not loop.last %}

alchemy/templates/page.html

@@ -15,6 +15,8 @@
 
 {% block content %}
 <article class="article">
-  {{ page.content }}
+  <div class="content">
+    {{ page.content }}
+  </div>
 </article>
 {% endblock %}