diff --git a/static/css/pelican.css b/static/css/pelican.css
index e69de29..6a95d06 100644
--- a/static/css/pelican.css
+++ b/static/css/pelican.css
@@ -0,0 +1,128 @@
+/* resets */
+
+ul, ol {
+    list-style: none;
+}
+
+ol {
+    display: flex;
+    padding: 0;
+    margin: 0;
+}
+
+/* reset */
+
+.post st-link {
+    text-decoration: none;
+}
+
+/* LIBRARY TEMPLATE */
+
+.tmpl-library {
+    margin: 0 auto;
+    overflow-x: hidden;
+}
+
+/* books */
+
+.book {
+    display: flex;
+    justify-content: center;
+    margin: .1em;
+    position: relative;
+    text-transform: initial;
+    transition: transform .05s;
+    width: 200px;
+    z-index: 1;
+}
+
+@media screen and (max-width: 900px) {
+.postlist-home li.book:nth-of-type(7n) {
+    display: none;
+}
+}
+
+@media screen and (max-width: 800px) {
+.postlist-home li.book:nth-of-type(6n) {
+    display: none;
+}
+}
+
+@media screen and (max-width: 710px) {
+.postlist-home li.book:nth-of-type(5n) {
+    display: none;
+}
+}
+
+@media screen and (max-width: 600px) {
+.postlist-home li.book:nth-of-type(4n) {
+    display: none;
+}
+}
+
+.book .book__back {
+background-color: black;
+bottom: 0;
+color: white;
+font-size: 8px;
+display: none;
+flex-direction: column;
+justify-content: flex-end;
+padding: 0 .5em;
+position: absolute;
+text-transform: none;
+}
+
+.book:focus .book__back {
+display: flex;
+}
+
+.book:hover, book:focus {
+transform: scale(1.4);
+z-index: 1000;
+}
+
+.footer .book:hover, book:focus {
+transform: scale(2);
+}
+
+@media screen and (max-width: 800px) {
+.book:hover, book:focus {
+    transform: scale(1.5);
+}
+}
+
+@media screen and (max-width: 800px) {
+.book.book--widescreen {
+    display: none;
+}
+}
+
+@media screen and (max-width: 650px) {
+.book.book--midscreen {
+    display: none;
+}
+}
+
+.bookshelf {
+display: flex;
+flex-wrap: wrap;
+justify-content: center;
+margin: .25em 0 0 0;
+padding-left: 0;
+width: 100%;
+border: 1px;
+}
+
+.book:hover .book__image {
+box-shadow: 0 0 10px rgba(0,0,0,.5);
+}
+
+/* main */
+
+.tmpl-library .bookshelf {
+border: 1px solid var(--base-dark);
+margin: 0 auto;
+/*max-width: 810px;*/
+padding: 1em;
+}
\ No newline at end of file
diff --git a/templates/article.html b/templates/article.html
index 39665a0..d2928ae 100644
--- a/templates/article.html
+++ b/templates/article.html
@@ -1,11 +1,11 @@
 {% extends "base.html" %}
+
 {% block html_lang %}{{ article.lang }}{% endblock %}
 
 {% block title %}{{ SITENAME }} - {{ article.title|striptags  }}{% endblock %}
 
 {% block head %}
   {{ super() }}
-
   {% import 'translations.html' as translations with context %}
   {% if translations.entry_hreflang(article) %}
     {{ translations.entry_hreflang(article) }}
@@ -40,7 +40,6 @@
   <meta name="twitter:image" content="{{ SITEURL }}/{{ article.photo_image[1] }}" />
   {% endif %}
 
- 
   <!-- Open Graph Tags-->
   <meta property="og:site_name" content="{{ SITENAME }}" />
   <meta property="og:title" content="{{ article.title|striptags  }}" />
@@ -54,84 +53,87 @@
 {% endblock %}
 
 {% block content %}
-<section id="content" class="body">
-  <header>
-    <h1 class="entry-title">
-      <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h1>
-  {% import 'translations.html' as translations with context %}
-  {{ translations.translations_for(article) }}
-    Published: <time class="published" datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time>
-  {% if article.modified %}
-    <br />Updated: <time class="modified" datetime="{{ article.modified.isoformat() }}">{{ article.locale_modified }}</time>
-  {% endif %}
-  {% if article.authors %}
-    <address class="vcard author">By {% for author in article.authors %}
-      <a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
-    {% endfor %}
-    </address><br />
-  {% endif %}
-
-    {% if SOCIAL_SHARE is sameas true %}
-    <p class="share">Share this article on: 
-      <span><a class="" href="https://twitter.com/intent/tweet?text={{ article.title|striptags }}&url={{ SITEURL }}/{{ article.url }}{% if SOCIAL_TWITTER %}&via={{ SOCIAL_TWITTER }}{% endif %}" target="_blank" title="Share on Twitter"><i class="fab fa-twitter"></i> Twitter</a></span>
-      <span><a class="" href="https://www.linkedin.com/sharing/share-offsite/?url={{ SITEURL }}/{{ article.url }}" target="_blank" title="Share via Linkedin"><i class="icon brands fa-linkedin"></i> Linkedin</a></span>
-      <span><a class="" href="mailto:?subject={{ article.title|striptags }}&body={{ article.summary|striptags }} - {{ SITEURL }}/{{ article.url }}" target="_blank" title="Share via Email"><i class="fas fa-envelope"></i> Email</a></span>
-    </p>
-    {% else %}
+  <section id="content" class="body">
+    <header>
+      <h1 class="entry-title">
+        <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h1>
+    {% import 'translations.html' as translations with context %}
+    {{ translations.translations_for(article) }}
+      Published: <time class="published" datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time>
+    {% if article.modified %}
+      <br />Updated: <time class="modified" datetime="{{ article.modified.isoformat() }}">{{ article.locale_modified }}</time>
+    {% endif %}
+    {% if article.authors %}
+      <address class="vcard author">By {% for author in article.authors %}
+        <a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
+      {% endfor %}
+      </address><br />
     {% endif %}
 
-    {% if article.photo_image %}
-    <img style="max-width:90%; display: block; margin: 0px auto;" src="{{ SITEURL }}/{{ article.photo_image[1] }}" />
-    <br /><br />
-    {% endif %}
-  </header>    
-  <div class="entry-content">
-  {{ article.content }}
-    {% if article.photo_gallery %}
-    <div class="gallery"> <br /><br />
-    {% for title, gallery in article.photo_gallery %}
-      <h2>{{ title }}</h2>
-        {% for name, photo, thumb, exif, caption in gallery %}
-        <a href="{{ SITEURL }}/{{ photo }}" title="{{ name }}" exif="{{ exif }}" caption="{{ caption }}"><img src="{{ SITEURL }}/{{ thumb }}"></a>
-        {% endfor %}
-    {% endfor %}
-    </div>
-    {% endif %}
-    {% if article.series %}
-    <div class="post series">
+      {% if SOCIAL_SHARE is sameas true %}
+      <p class="share">Share this article on: 
+        <span><a class="" href="https://twitter.com/intent/tweet?text={{ article.title|striptags }}&url={{ SITEURL }}/{{ article.url }}{% if SOCIAL_TWITTER %}&via={{ SOCIAL_TWITTER }}{% endif %}" target="_blank" title="Share on Twitter"><i class="fab fa-twitter"></i> Twitter</a></span>
+        <span><a class="" href="https://www.linkedin.com/sharing/share-offsite/?url={{ SITEURL }}/{{ article.url }}" target="_blank" title="Share via Linkedin"><i class="icon brands fa-linkedin"></i> Linkedin</a></span>
+        <span><a class="" href="mailto:?subject={{ article.title|striptags }}&body={{ article.summary|striptags }} - {{ SITEURL }}/{{ article.url }}" target="_blank" title="Share via Email"><i class="fas fa-envelope"></i> Email</a></span>
+      </p>
+      {% else %}
+      {% endif %}
+
+      {% if article.photo_image %}
+      <img style="max-width:90%; display: block; margin: 0px auto;" src="{{ SITEURL }}/{{ article.photo_image[1] }}" />
       <br /><br />
-      <p>This post is part {{ article.series.index }} of the "{{ article.series.name }}" series:</p>
-      <ol class="parts">
-        {% for part_article in article.series.all %}
-        <li {% if part_article == article %}class="active"{% endif %}>
-          <a href='{{ SITEURL }}/{{ part_article.url }}'>{{ part_article.title }}</a>
-        </li>
-        {% endfor %}
-      </ol>      
-    </div>
-    {% endif %}
-    <footer class="post-info">
-      {% if article.category %}
-      <div class="category">
-          Category: <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
-      </div>
       {% endif %}
-      {% if article.tags %}
-      <div class="tags">
-          Tags:
-          {% for tag in article.tags %}
-              <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>
+    </header>    
+    <div class="entry-content">
+    {{ article.content }}
+      {% if article.photo_gallery %}
+      <br /><br />
+      {% for title, gallery in article.photo_gallery %}
+      <h2>{{ title }}</h2>
+          <section class="photo_gallery"> 
+          <ol class="bookshelf">
+          {% for name, photo, thumb, exif, caption in gallery %}
+            <li class="book postlist-item"><a href="{{ SITEURL }}/{{ photo }}" target="_blank"  title="{{ name }}" exif="{{ exif }}" caption="{{ caption }}"><img src="{{ SITEURL }}/{{ thumb }}"></a></li>
           {% endfor %}
+        </ol></section>
+      {% endfor %}
+          
+      {% endif %}
+      {% if article.series %}
+      <div class="post series">
+        <br /><br />
+        <p>This post is part {{ article.series.index }} of the "{{ article.series.name }}" series:</p>
+        <ol class="parts">
+          {% for part_article in article.series.all %}
+          <li {% if part_article == article %}class="active"{% endif %}>
+            <a href='{{ SITEURL }}/{{ part_article.url }}'>{{ part_article.title }}</a>
+          </li>
+          {% endfor %}
+        </ol>      
       </div>
       {% endif %}
-    </footer><!-- /.post-info -->
-    {% if MASTODON_COMMENTS is sameas True %}
-    <div class="mastodon-comments">
-      <br />
-      <p><strong><a href="{{ SITEURL }}/mastodon-comments/bot.php?title={{ article.title|striptags }}&url={{ SITEURL }}/{{ article.url }}{% if article.photo_image %}&image=../{{ article.photo_image[1] }}{% endif %}">Click Here to Comment on Mastodon.</a></strong></p>
-      <p>If its your first time commenting, <a href="https://jeffmackinnon.com/commenting-on-blog-with-mastodon.html">click here</a> to figure it out.</p>
-    </div>
-      {% endif %}
-  </div><!-- /.entry-content -->
-</section>
+      <footer class="post-info">
+        {% if article.category %}
+        <div class="category">
+            Category: <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
+        </div>
+        {% endif %}
+        {% if article.tags %}
+        <div class="tags">
+            Tags:
+            {% for tag in article.tags %}
+                <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>
+            {% endfor %}
+        </div>
+        {% endif %}
+      </footer><!-- /.post-info -->
+      {% if MASTODON_COMMENTS is sameas True %}
+      <div class="mastodon-comments">
+        <br />
+        <p><strong><a href="{{ SITEURL }}/mastodon-comments/bot.php?title={{ article.title|striptags }}&url={{ SITEURL }}/{{ article.url }}{% if article.photo_image %}&image=../{{ article.photo_image[1] }}{% endif %}">Click Here to Comment on Mastodon.</a></strong></p>
+        <p>If its your first time commenting, <a href="https://jeffmackinnon.com/commenting-on-blog-with-mastodon.html">click here</a> to figure it out.</p>
+      </div>
+        {% endif %}
+    </div><!-- /.entry-content -->
+  </section>
 {% endblock %}
\ No newline at end of file