Added footer

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.1.7
+
+- Added footer to pages.
+
 # 0.1.6
 
 - Support for `/rss?short` URL for short articles description on the RSS feed.

madblog/static/css/common.css

@@ -1,5 +1,6 @@
 html {
-  height: 100%;
+  height: -webkit-fill-available;
+  height: -moz-available;
   font-size: 20px;
   font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
   font-weight: 400;
@@ -8,8 +9,10 @@ html {
 
 body {
   margin: 0;
-  width: 100%;
-  height: 100%;
+  height: 100vh;
+  /* mobile viewport bug fix */
+  min-height: -webkit-fill-available;
+  min-height: -moz-available;
 }
 
 a, a:visited {
@@ -105,3 +108,13 @@ h2 {
   line-height: 1.1em;
 }
 
+footer {
+  width: 100%;
+  font-size: .65em;
+  color: rgba(0, 0, 0, .4);
+  letter-spacing: .02em;
+  margin-top: .5em;
+  padding-top: .25em;
+  text-align: center;
+  box-shadow: 1px -2px 2px 0 #bbb;
+}

madblog/static/css/home.css

@@ -2,6 +2,15 @@ main {
   padding: 0;
 }
 
+.index {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+}
+
 .articles {
   width: 100%;
   height: 100%;

madblog/templates/article.html

@@ -38,6 +38,8 @@
             {{ content | safe }}
         </div>
     </div>
+
+    {% include 'footer.html' %}
 </main>
 
 {% include 'common-tail.html' %}

madblog/templates/footer.html

@@ -0,0 +1,3 @@
+<footer>
+    Powered by <a href="https://github.com/BlackLight/madblog" target="_blank">madblog</a>
+</footer>

madblog/templates/index.html

@@ -3,35 +3,39 @@
 {% endwith %}
 
 <main>
-    <div class="articles">
-        {% for page in pages %}
-        <a class="article" href="{{ page['uri'] }}">
-            <div class="container">
-                {% if page['image'] %}
-                <div class="image">
-                    <img src="{{ page['image'] }}" alt="">
-                </div>
-                {% endif %}
+    <div class="index">
+        <div class="articles">
+            {% for page in pages %}
+                <a class="article" href="{{ page['uri'] }}">
+                    <div class="container">
+                        {% if page['image'] %}
+                            <div class="image">
+                                <img src="{{ page['image'] }}" alt="">
+                            </div>
+                        {% endif %}
 
-                <div class="title">
-                    {{ page['title'] }}
-                </div>
+                        <div class="title">
+                            {{ page['title'] }}
+                        </div>
 
-                {% if page['published'] %}
-                <div class="published-date">
-                    {{ page['published'].strftime('%b %d, %Y') }}
-                </div>
-                {% endif %}
+                        {% if page['published'] %}
+                            <div class="published-date">
+                                {{ page['published'].strftime('%b %d, %Y') }}
+                            </div>
+                        {% endif %}
 
-                {% if page['description'] %}
-                <div class="description">
-                    {{ page['description'] }}
-                </div>
-                {% endif %}
-            </div>
-        </a>
-        {% endfor %}
+                        {% if page['description'] %}
+                            <div class="description">
+                                {{ page['description'] }}
+                            </div>
+                        {% endif %}
+                    </div>
+                </a>
+            {% endfor %}
+        </div>
     </div>
+
+    {% include 'footer.html' %}
 </main>
 
 {% include 'common-tail.html' %}