Responsive hamburger nav. Colors, margins. Template cleanup. Clean URLs for category and draft.

pelicanconf.py

@@ -9,16 +9,25 @@ SITEURL = ''
 
 PATH = 'content'
 THEME = 'theme'
-PAGE_URL = '{slug}'
-PAGE_SAVE_AS = '{slug}/index.html'
+
 ARTICLE_URL = '{slug}'
 ARTICLE_SAVE_AS = '{slug}/index.html'
 
+CATEGORY_URL = 'category/{slug}'
+CATEGORY_SAVE_AS = 'category/{slug}/index.html'
+
+PAGE_URL = '{slug}'
+PAGE_SAVE_AS = '{slug}/index.html'
+
+DRAFT_URL = 'draft/{slug}'
+DRAFT_SAVE_AS = 'draft/{slug}/index.html'
+
 TIMEZONE = 'America/New_York'
 DEFAULT_DATE = 'fs'
 DATE_FORMATS = {
     'en': '%B %d, %Y',
 }
+
 DEFAULT_PAGINATION = 10
 
 # no feeds in dev

theme/static/css/style.css

 /********** General **********/
+html {
+    background-color: #222;
+}
 body {
     font: 18px sans-serif;
     max-width: 1000px;
     margin: 0 auto;
-    padding: 0 1em;
+    padding: 0 1em 1em;
+    background-color: #fff;
+}
+time {
+    color: #aaa;
 }
 
 /* Headings */
+h1, h2, h3, h4, h5, h6 {
+    color: #333;
+}
 h1 {
     font-size: 1.5em;
 }
@@ -76,7 +86,7 @@ body > div > :empty {
     display: none;
 }
 body > div > :not(:last-child) {
-    margin-right: 1em;
+    margin-bottom: .6em;
 }
 
 
@@ -86,15 +96,95 @@ body > div > aside {
     flex: 1 0 100%;
 }
 /* Nav */
+body > div > nav {
+    text-align: center;
+}
+body > div > nav header {
+    font-size: .7rem;
+}
+body > div > nav header h1,
+body > div > nav header h2 {
+    margin: 0;
+}
 body > div > nav ul {
     list-style-type: none;
     margin: 0;
     padding-left: 0;
-    text-align: right;
 }
-body > div > nav li {
+body > div > nav ul:not(:last-child) {
+    margin-bottom: .5em;
+}
+body > div > nav li:not(:last-child) {
     margin-bottom: .25em;
 }
+nav.expanded ul,
+nav.expanded header {
+    display: block;
+}
+nav.collapsed ul,
+nav.collapsed header {
+    display: none;
+}
+/* Hamburger (based on jonsuh/hamburgers) */
+.toggle {
+    padding: 5px 5px;
+    display: inline-block;
+    cursor: pointer;
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    background-color: transparent;
+    border: 0;
+    margin: 0;
+    overflow: visible;
+}
+.toggle:hover {
+    opacity: 0.7;
+}
+.toggle-box {
+    width: 30px;
+    height: 10px;
+    display: inline-block;
+    position: relative;
+}
+.toggle-inner,
+.toggle-inner::before,
+.toggle-inner::after {
+    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+    display: block;
+    width: 30px;
+    height: 3px;
+    background-color: #000;
+    border-radius: 4px;
+    position: absolute;
+}
+.toggle-inner {
+    top: 50%;
+    margin-top: -2px;
+    transition-duration: 0.3s;
+}
+.toggle-inner::before,
+.toggle-inner::after {
+    transition-property: top, opacity, bottom, transform;
+    content: "";
+    display: block;
+}
+.toggle-inner::before {
+    top: -8px;
+}
+.toggle-inner::after {
+    bottom: -8px;
+}
+nav.expanded .toggle-inner {
+    transform: rotate(315deg);
+}
+nav.expanded .toggle-inner::before {
+    opacity: 0;
+}
+nav.expanded .toggle-inner::after {
+    bottom: 0;
+    transform: rotate(90deg);
+}
 
 
 /********** Main **********/
@@ -114,14 +204,42 @@ body > footer {
 
 /********** Larger screens **********/
 @media screen and (min-width: 600px) {
+    body {
+        margin: 1em auto;
+        box-sizing: border-box;
+    }
     body > header {
         font-size: 1rem;
+        margin-bottom: 1.35em;
+    }
+    body > div > :not(:last-child) {
+        margin-bottom: 0;
+        margin-right: 1.35em;
+    }
+    body > div > main {
+        flex-basis: 400px;
     }
     body > div > nav,
     body > div > aside {
         flex-basis: 100px;
     }
-    body > div > main {
-        flex-basis: 400px;
+    body > div > nav {
+        text-align: right;
+    }
+    body > div > nav .toggle {
+        display: none;
+    }
+    body > div > nav.expanded ul,
+    body > div > nav.expanded header,
+    body > div > nav.collapsed ul,
+    body > div > nav.collapsed header {
+        display: block;
+    }
+}
+
+/********** Largest (extra space on sides)  **********/
+@media screen and (min-width: 1000px) {
+    body {
+        border-radius: 4px;
     }
 }

theme/static/js/script.js

+/* Responsive Navigation Menu */
+(function(selector) {
+    var nav = document.querySelector(selector),
+        toggle = document.createElement("button");
+    toggle.className = "toggle";
+    toggle.innerHTML  = "<span class='toggle-box'>"
+                      + "<span class='toggle-inner'></span>"
+                      + "</span>";
+    toggle.addEventListener("click", function(e) {
+        if (nav.className.indexOf("collapsed") != -1) {
+            nav.className = nav.className.replace("collapsed", "expanded");
+        } else {
+            nav.className = nav.className.replace("expanded", "collapsed");
+        }
+    }, false);
+    nav.insertBefore(toggle, nav.firstChild);
+    nav.className += "collapsed";
+})("body > div > nav");

theme/templates/article.html

@@ -17,9 +17,11 @@
     <h2>
         <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark">{{ article.title }}</a>
     </h2>
-    <p class="date">Posted on {{ article.locale_date }}</p>
+    <time datetime="{{ article.date.isoformat() }}">
+        Posted on {{ article.locale_date }}</time>
 	{% if article.modified %}
-    <p class="date">Modified on {{ article.locale_modified }}</p>
+    <time datetime="{{ article.modified.isoformat() }}">
+        Modified on {{ article.locale_modified }}</time>
 	{% endif %}
 </header>
 <div>

theme/templates/base.html

@@ -34,7 +34,7 @@
         {% endblock head %}
 </head>
 <body>
-{% block body %}
+    {% block body %}
     <header>
             <h1><a href="{{ SITEURL }}/">{{ SITENAME }}</a></h1>
             {% if SITESUBTITLE %}
@@ -43,21 +43,32 @@
     </header>
     <div>
         <nav>
+
+            {% if MENUITEMS %}
             <ul>
                 {% for title, link in MENUITEMS %}
                 <li><a href="{{ link }}">{{ title }}</a></li>
                 {% endfor %}
-                {% if DISPLAY_PAGES_ON_MENU %}
+            </ul>
+            {% endif %}
+
+            {% if DISPLAY_PAGES_ON_MENU %}
+            <ul>
                 {% for p in PAGES %}
                 <li><a href="{{ SITEURL }}/{{ p.url }}"{% if p == page %} class="active"{% endif %}>{{ p.menu_title or p.title }}</a></li>
                 {% endfor %}
-                {% endif %}{# DISPLAY_PAGES_ON_MENU #}
-                {% if DISPLAY_CATEGORIES_ON_MENU %}
+            </ul>
+            {% endif %}
+
+            {% if DISPLAY_CATEGORIES_ON_MENU %}
+            <header><h1>Categories</h1></header>
+            <ul>
                 {% for cat, null in categories %}
                 <li><a href="{{ SITEURL }}/{{ cat.url }}"{% if cat == category %} class="active"{% endif %}>{{ cat }}</a></li>
                 {% endfor %}
-                {% endif %}{# DISPLAY_CATEGORIES_ON_MENU #}
             </ul>
+            {% endif %}
+
         </nav>
         {% if self.content() %}
         <main>
@@ -75,6 +86,7 @@
         {% block footer %}{% endblock %}
     </footer>
     {% endif %}
-{% endblock %}
+    {% endblock %}
+    <script src="{{ SITEURL }}/theme/js/script.js"></script>
 </body>
 </html>

theme/templates/home.html

 {% extends "base.html" %}
 {% block content %}
             {{ page.content|indent(12) }}
+            {% if articles %}
             <section>
                 <h2>Recent Posts</h2>
                 <ul>
                 {% for article in articles %}
                     <li>
-                        <article>
-                                <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark">
-                                    {{ article.title }}</a> on
-                                    {{ article.locale_date }}
-                        </article>
+                        <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark">
+                            {{ article.title }}</a>
+                        <time datetime="{{ article.date.isoformat() }}">
+                            on {{ article.locale_date }}</time>
                     </li>
                 {% endfor %}
                 </ul>
             </section>
+            {% endif %}
 {% endblock content %}
 {% block footer %}
 {% endblock %}