:m: Move version to the bottom of the sidebar

2 files changed, 47 insertions, 37 deletions

diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 720c095..b20fc0b 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -1,25 +1,28 @@
 <div class="sidebar">
-    {{ partial "logo.html" }}
-    <h1 class="site-title"><a href="/">{{ .Site.Title }}</a></h1>
+    <div class="navigation">
+        {{ partial "logo.html" }}
+        <h1 class="site-title"><a href="/">{{ .Site.Title }}</a></h1>
 
-    <div class="version">
-            {{ now.Format "Jan 2, 2006" }}
-        </div>
 
-    <nav class="internal">
-        {{ partial "menu.html" . }}
-    </nav>
+        <nav class="internal">
+            {{ partial "menu.html" . }}
+        </nav>
 
-    <nav class="external">
-        <div class="external-title">{{ .Site.Params.externalTitle }}</div>
-        {{ with .Site.Menus.shortcuts }}
+        <nav class="external">
+            <div class="external-title">{{ .Site.Params.externalTitle }}</div>
+            {{ with .Site.Menus.shortcuts }}
             <ul id="shortcuts">
                 {{ range sort . "Weight" }}
-                    <li>
-                        <a href="{{.URL}}" target="_blank" rel="noopener">{{safeHTML .Name}}</a>
-                    </li>
+                <li>
+                    <a href="{{.URL}}" target="_blank" rel="noopener">{{safeHTML .Name}}</a>
+                </li>
                 {{ end }}
             </ul>
-        {{ end }}
-    </nav>
+            {{ end }}
+        </nav>
+    </div>
+
+    <div class="version">
+            generated on {{ now.Format "Jan 2, 2006" }}
+    </div>
 </div>
diff --git a/static/css/styles.css b/static/css/styles.css
index 9691bfc..64604e8 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,23 +1,44 @@
-html {
+html, body {
   font-family: "Open Sans", sans-serif;
   color: #363636;
+  height: 100%;
 }
+
 @media (min-width: 48em) {
   html {
     font-size: 16px;
   }
 }
+
 @media (min-width: 58em) {
   html {
     font-size: 20px;
   }
 }
 
+@media (min-width: 48em) {
+  .content {
+    margin-left: 21rem;
+    margin-right: 2rem;
+  }
+}
+
+@media (min-width: 64em) {
+  .content {
+    margin-left: 22rem;
+    margin-right: 3rem;
+  }
+}
+
+/* Sidebar */
 .sidebar {
+  overflow: auto;
   text-align: center;
   padding: 1rem 1rem;
   color: white;
   background-color: #363636;
+  display: flex;
+  flex-direction: column;
 }
 @media (min-width: 48em) {
   .sidebar {
@@ -30,21 +51,6 @@ html {
   }
 }
 
-@media (min-width: 48em) {
-  .content {
-    margin-left: 21rem;
-    margin-right: 2rem;
-  }
-}
-
-@media (min-width: 64em) {
-  .content {
-    margin-left: 22rem;
-    margin-right: 3rem;
-  }
-}
-
-/* Sidebar */
 .site-title {
   margin-top: 0px;
 }
@@ -72,16 +78,17 @@ html {
 }
 
 nav {
-  margin: 2em 0 2em 0;
+  margin: 1em 0 1em 0;
 }
 
-.sidebar {
-  overflow: auto;
+.sidebar .navigation {
+  flex: 1 0 auto;
 }
 
 .sidebar .version {
-  font-size: 60%;
-  text-align: center;
+  font-size: 80%;
+  text-align: right;
+  padding: 2px;
 }
 
 .sidebar .external-title {