Sidebar Update (#51)

* Updating the sidebar to be an appropriate port.

* Fix recent post formatting

7 files changed, 219 insertions, 198 deletions

diff --git a/static/css/add-on.css b/exampleSite/static/css/add-on.css
index b51259a..b51259a 100644
--- a/static/css/add-on.css
+++ b/exampleSite/static/css/add-on.css
diff --git a/exampleSite/static/js/add-on.js b/exampleSite/static/js/add-on.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/exampleSite/static/js/add-on.js
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 94d63f1..2bc8f0b 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,34 +1,34 @@
-      </div>
-      <a id="back-to-top" href="#" class="fa fa-arrow-up fa-border fa-2x"></a>
-      <!-- Scripts -->
+</div>
+<a id="back-to-top" href="#" class="fa fa-arrow-up fa-border fa-2x"></a>
+<!-- Scripts -->
 
-      {{ if isset .Site.Params "customjs" }}
-        {{ $.Scratch.Set "jsFiles" .Site.Params.customJS }}
-      {{ else }}
-        {{ $.Scratch.Set "jsFiles" false }}
-      {{ end }}
+{{ if isset .Site.Params "customjs" }}
+  {{ $.Scratch.Set "jsFiles" .Site.Params.customJS }}
+{{ else }}
+  {{ $.Scratch.Set "jsFiles" false }}
+{{ end }}
 
-      <!-- If the value "default" is passed into the param then we will first
-       load the standard js files associated with the theme -->
-      {{ if or (in ($.Scratch.Get "jsFiles") "default") (eq ($.Scratch.Get "jsFiles") false) }}
-        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/skel/3.0.1/skel.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
-        <script src="/js/util.js"></script>
-        <script src="/js/main.js"></script>
-        <script src="/js/backToTop.js"></script>
-      {{ end }}
+<!-- If the value "default" is passed into the param then we will first
+ load the standard js files associated with the theme -->
+{{ if or (in ($.Scratch.Get "jsFiles") "default") (eq ($.Scratch.Get "jsFiles") false) }}
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/skel/3.0.1/skel.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
+  <script src="{{ "js/util.js" | absURL }}"></script>
+  <script src="{{ "js/main.js" | absURL }}"></script>
+  <script src="{{ "js/backToTop.js" | absURL }}"></script>
+{{ end }}
 
-      {{ if ne ($.Scratch.Get "jsFiles") false }}
-      {{ range $.Scratch.Get "jsFiles" }}
-            {{ if ne . "default" }}
-                <script src="{{ . }}"></script>
-            {{ end }}
-        {{ end }}
+{{ if ne ($.Scratch.Get "jsFiles") false }}
+{{ range $.Scratch.Get "jsFiles" }}
+      {{ if ne . "default" }}
+          <script src="{{ "{{ . }}" | absURL }}"></script>
       {{ end }}
+  {{ end }}
+{{ end }}
 
-      <!-- This is called by default since this theme uses highlight.js -->
-      <script>hljs.initHighlightingOnLoad();</script>
-    </body>
+<!-- This is called by default since this theme uses highlight.js -->
+<script>hljs.initHighlightingOnLoad();</script>
+</body>
 </html>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 6af1067..54953d9 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -50,14 +50,14 @@
             <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800,900|Source+Sans+Pro:400,700">
             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" />
-            <link rel="stylesheet" href="/css/main.css">
-            <link rel="stylesheet" href="/css/add-on.css">
+            <link rel="stylesheet" href="{{ "css/main.css" | absURL }}">
+            <link rel="stylesheet" href="{{ "css/add-on.css" | absURL }}">
         {{ end }}
 
         {{ if ne ($.Scratch.Get "cssFiles") false }}
             {{ range $.Scratch.Get "cssFiles" }}
                 {{ if ne . "default" }}
-                    <link rel="stylesheet" href="{{ . }}">
+                    <link rel="stylesheet" href="{{ . | absURL }}">
                 {{ end }}
             {{ end }}
         {{ end }}
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 22f04ca..63fe851 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -1,13 +1,9 @@
 <!-- Header -->
 <header id="header">
-    {{ if .Site.Params.dynamicTitles }}
-      {{ if .IsHome }}
-          <h1><a href="/">{{ .Site.Params.navbarTitle }}</a></h1>
-      {{ else }}
-          <h1><a href="/">{{ .Section }}</a></h1>
-      {{ end }}
+    {{ if .IsHome }}
+        <h1><a href="/">{{ .Site.Params.navbarTitle }}</a></h1>
     {{ else }}
-      <h1><a href="/">{{ .Site.Params.navbarTitle }}</i></a></h1>
+        <h1><a href="/">{{ .Section }}</a></h1>
     {{ end }}
 
     <nav class="links">
@@ -68,24 +64,43 @@
             </ul>
         </section>
 
-    <!-- Recent Posts -->
-        <section>
-            <ul class="links">
+    <!-- Posts List -->
+        <section id="recent-posts">
+            <div class="mini-posts">
                 <header>
                     <h3>Recent Posts</h3>
                 </header>
+                {{ $.Scratch.Set "recentPosts" .Site.Pages }}
+
                 {{ with .Site.Params.postAmount.sidebar }}
                     {{ $.Scratch.Set "postLimit" . }}
                 {{ else }}
                     {{ $.Scratch.Set "postLimit" 5 }}
                 {{ end }}
 
-                {{ range first ($.Scratch.Get "postLimit") (where .Site.Pages "Type" "post") }}
-                    <li>
-                        <a href="{{ .Permalink }}"><p>{{ .Title }}</p></a>
-                    </li>
+                {{ range first ($.Scratch.Get "postLimit") (where ($.Scratch.Get "recentPosts") "Type" "post") }}
+                        <article class="mini-post">
+                            <header>
+                                <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
+                                {{ $.Scratch.Set "dateType" .Date }}
+                                <time class="published" datetime=
+                                    '{{ ($.Scratch.Get "dateType").Format "2006-01-02" }}'>
+                                    {{ ($.Scratch.Get "dateType").Format "January 2, 2006" }}</time>
+                            </header>
+                            {{ .Render "featured" }}
+                        </article>
                 {{ end }}
-            </ul>
+
+                {{ if ge (len (where .Site.Pages "Type" "post")) ($.Scratch.Get "postLimit") }}
+                    <a href=
+                        {{ with .Site.Params.viewMorePostLink }}
+                            {{ . }}
+                        {{ else }}
+                            "/post/"
+                        {{ end }}
+                        class="button">View more posts</a>
+                {{ end }}
+            </div>
         </section>
 
     <!-- Actions -->
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 1d50d86..74e607c 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -1,134 +1,139 @@
 <!-- Sidebar -->
 <section id="sidebar">
 
-    <!-- Intro -->
-        <section id="intro">
-            {{ $pic := .Site.Params.intro.pic }}
-            {{ with $pic.src }}
-                {{ if $pic.circle }}
-                    <img src="{{ . }}" class="intro-circle" width="{{ $pic.width }}" alt="{{ $pic.alt }}" />
-                {{ else if $pic.imperfect }}
-                    <a href="/" class="logo"><img src="{{ . }}" alt="{{ $pic.alt }}" /></a>
-                {{ else }}
-                    <img src="{{ . }}" width="{{ $pic.width }}" alt="{{ $pic.alt }}" />
-                {{ end }}
-            {{ end }}
-            {{ with .Site.Params.intro }}
-                <header>
-                    <h2>{{ .header }}</h2>
-                    <p>{{ .paragraph | safeHTML }}</p>
-                </header>
-            {{ end }}
-            <ul class="icons">
-                {{ if and (.RSSLink) (.Site.Params.rssAppearAtTop) }}
-                    <li><a href="{{ .RSSLink }}" type="application/rss+xml"
-                        target="_blank" title="RSS" class="fa fa-rss"></a></li>
-                {{ end }}
-                {{ if .Site.Params.socialAppearAtTop }}
-                    {{ partial "social" . }}
-                {{ end }}
-            </ul>
-        </section>
-
-    <!-- Posts List -->
-        <section id="recent-posts">
-            <ul class="posts">
-                <header>
-                    <h3>Recent Posts</h3>
-                </header>
-                {{ $.Scratch.Set "recentPosts" .Site.Pages }}
-
-                {{ with .Site.Params.postAmount.sidebar }}
-                    {{ $.Scratch.Set "postLimit" . }}
-                {{ else }}
-                    {{ $.Scratch.Set "postLimit" 5 }}
-                {{ end }}
-
-                {{ range first ($.Scratch.Get "postLimit") (where ($.Scratch.Get "recentPosts") "Type" "post") }}
-                    <li>
-                        <article>
-                            <header>
-                                <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
-                                {{ $.Scratch.Set "dateType" .Date }}
-                                <time class="published" datetime=
-                                    '{{ ($.Scratch.Get "dateType").Format "2006-01-02" }}'>
-                                    {{ ($.Scratch.Get "dateType").Format "January 2, 2006" }}</time>
-                            </header>
-                        </article>
-                    </li>
-                {{ end }}
-
-                {{ if ge (len (where .Site.Pages "Type" "post")) ($.Scratch.Get "postLimit") }}
-                    <li>
-                        <ul class="actions">
-                            <li><a href=
-                            {{ with .Site.Params.viewMorePostLink }}
-                                {{ . }}
-                            {{ else }}
-                                "/post/"
-                            {{ end }}
-                            class="button">View more posts</a></li>
-                        </ul>
-                    </li>
-                {{ end }}
-            </ul>
-        </section>
+  <!-- Intro -->
+  <section id="intro">
+    {{ $pic := .Site.Params.intro.pic }}
+    {{ with $pic.src }}
+      {{ if $pic.circle }}
+        <img src="{{ . }}" class="intro-circle" width="{{ $pic.width }}" alt="{{ $pic.alt }}" />
+      {{ else if $pic.imperfect }}
+        <a href="/" class="logo"><img src="{{ . }}" alt="{{ $pic.alt }}" /></a>
+      {{ else }}
+        <img src="{{ . }}" width="{{ $pic.width }}" alt="{{ $pic.alt }}" />
+      {{ end }}
+    {{ end }}
+    {{ with .Site.Params.intro }}
+      <header>
+        <h2>{{ .header }}</h2>
+        <p>{{ .paragraph | safeHTML }}</p>
+      </header>
+    {{ end }}
+    {{ if .Site.Params.socialAppearAtTop }}
+      <ul class="icons">
+        {{ if .RSSLink }}
+          <li>
+            <a href="{{ .RSSLink }}" type="application/rss+xml" target="_blank" title="RSS" class="fa fa-rss"></a>
+          </li>
+        {{ end }}
+        {{ partial "social" . }}
+      </ul>
+    {{ end }}
+  </section>
 
-    <!-- This if statement only applies if someone goes to the /categories url -->
-    <!-- Otherwise this section is shown for all other links -->
-    {{ if ne ($.Scratch.Get "showCategories") false }}
-    <!-- Categories List -->
-        <section id="categories">
-            <ul class="posts">
-                <header>
-                    <h3><a href="/categories/">Categories</a></h3>
-                </header>
+  <!-- Posts List -->
+  <section id="recent-posts">
+    <div class="mini-posts">
+      <header>
+        <h3>Recent Posts</h3>
+      </header>
+      <div class="posts-container">
+        {{ $.Scratch.Set "recentPosts" .Site.Pages }}
 
-                {{ if .Site.Params.categoriesByCount }}
-                    {{ $.Scratch.Set "categories" .Site.Taxonomies.categories.ByCount }}
-                {{ else }}
-                    {{ $.Scratch.Set "categories" .Site.Taxonomies.categories.Alphabetical }}
-                {{ end }}
+        {{ with .Site.Params.postAmount.sidebar }}
+          {{ $.Scratch.Set "postLimit" . }}
+        {{ else }}
+          {{ $.Scratch.Set "postLimit" 5 }}
+        {{ end }}
 
-                {{ range $key, $value := $.Scratch.Get "categories" }}
-                    <li>
-                        <article>
-                            <header>
-                                <a href="/categories/{{ $value.Name | urlize }}/">{{ $value.Name }}</a>
-                                <span style="float:right;">{{ $value.Count }}</span>
-                            </header>
-                        </article>
-                    </li>
-                {{ end }}
-            </ul>
-        </section>
-    {{ end }}
+        {{ range first ($.Scratch.Get "postLimit") (where ($.Scratch.Get "recentPosts") "Type" "post") }}
+          <article class="mini-post">
+            <header>
+              <h3>
+                <a href="{{ .Permalink }}">{{ .Title }}</a>
+              </h3>
+              {{ $.Scratch.Set "dateType" .Date }}
+              <time class="published" datetime='{{ ($.Scratch.Get "dateType").Format "2006-01-02" }}'>
+                {{ ($.Scratch.Get "dateType").Format "January 2, 2006" }}
+              </time>
+            </header>
+            {{ .Render "featured" }}
+          </article>
+        {{ end }}
+      </div>
 
-    <!-- About -->
-        {{ with .Site.Params.intro.about }}
-        <section class="blurb">
-            <h2>About</h2>
-            <p>{{ . | safeHTML }}</p>
+      {{ if ge (len (where .Site.Pages "Type" "post")) ($.Scratch.Get "postLimit") }}
+        <a href=
+          {{ with .Site.Params.viewMorePostLink }}
+            {{ . }}
+          {{ else }}
+            "/post/"
+          {{ end }}
+        class="button">View more posts</a>
+      {{ end }}
+    </div>
+  </section>
 
-            <ul class="actions">
-                <li><a href="/about/" class="button">Learn More</a></li>
-            </ul>
-        </section>
+  <!-- This if statement only applies if someone goes to the /categories url -->
+  <!-- Otherwise this section is shown for all other links -->
+  {{ if ne ($.Scratch.Get "showCategories") false }}
+  <!-- Categories List -->
+    <section id="categories">
+      <header>
+        <h3>
+          <a href="/categories/">Categories</a>
+        </h3>
+      </header>
+        {{ if .Site.Params.categoriesByCount }}
+          {{ $.Scratch.Set "categories" .Site.Taxonomies.categories.ByCount }}
+        {{ else }}
+          {{ $.Scratch.Set "categories" .Site.Taxonomies.categories.Alphabetical }}
         {{ end }}
 
-    <!-- Footer -->
-        <section id="footer">
-            <ul class="icons">
-                {{ if and (.RSSLink) (.Site.Params.rssAppearAtBottom) }}
-                    <li><a href="{{ .RSSLink }}" type="application/rss+xml"
-                        target="_blank" title="RSS" class="fa fa-rss"></a></li>
-                {{ end }}
-                {{ if .Site.Params.socialAppearAtBottom }}
-                    {{ partial "social" . }}
-                {{ end }}
-            </ul>
+        {{ range $key, $value := $.Scratch.Get "categories" }}
+          <article>
+            <header>
+              <a href="/categories/{{ $value.Name | urlize }}/">{{ $value.Name }}</a>
+              <span style="float:right;">{{ $value.Count }}</span>
+            </header>
+          </article>
+        {{ end }}
+    </section>
+  {{ end }}
 
-            <p class="copyright">{{ with .Site.Copyright | safeHTML }}{{ . }}{{ else }}&copy; {{ .Site.LastChange.Year }} {{if isset .Site.Params "author" }}{{ .Site.Params.author}}{{ else }}{{ .Site.Title }}{{ end }}{{end}}. Powered by <a href="//gohugo.io" target="_blank">Hugo</a></p>
-        </section>
+  <!-- About -->
+  {{ with .Site.Params.intro.about }}
+    <section id="mini-bio">
+      <h3>About</h1>
+      <p>{{ . | safeHTML }}</p>
+      <a href="/about/" class="button">Learn More</a>
+    </section>
+  {{ end }}
 
+  <!-- Footer -->
+  <section id="footer">
+    {{ if .Site.Params.socialAppearAtBottom }}
+      <ul class="icons">
+        {{ if .RSSLink }}
+          <li>
+            <a href="{{ .RSSLink }}" type="application/rss+xml" target="_blank" title="RSS" class="fa fa-rss"></a>
+          </li>
+        {{ end }}
+        {{ partial "social" . }}
+      </ul>
+    {{ end }}
+    <p class="copyright">
+      {{ with .Site.Copyright | safeHTML }}
+        {{ . }}
+      {{ else }}
+        &copy; {{ .Site.LastChange.Year }}
+        {{if isset .Site.Params "author" }}
+          {{ .Site.Params.author}}
+        {{ else }}
+          {{ .Site.Title }}
+        {{ end }}
+      {{end}}.
+      Powered by <a href="//gohugo.io" target="_blank">Hugo</a>
+    </p>
+  </section>
 </section>
diff --git a/static/css/main.css b/static/css/main.css
index b949545..d1ac152 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -355,21 +355,6 @@
 			border-bottom-color: transparent;
 		}
 
-/* Blurb */
-
-	.blurb h2 {
-		font-size: 0.8em;
-		margin: 0 0 1.5em 0;
-	}
-
-	.blurb h3 {
-		font-size: 0.7em;
-	}
-
-	.blurb p {
-		font-size: 0.9em;
-	}
-
 /* Box */
 
 	.box {
@@ -1200,6 +1185,10 @@
 				transform: scale(1.05);
 			}
 
+			.mini-post .image.featured {
+					margin: 0;
+			}
+
 		.mini-post header {
 			padding: 1.25em 4.25em 0.1em 1.25em ;
 			min-height: 4em;
@@ -1236,7 +1225,7 @@
 
 		@media screen and (max-width: 1280px) {
 
-			.mini-posts {
+			.mini-posts .posts-container {
 				display: -moz-flex;
 				display: -webkit-flex;
 				display: -ms-flex;
@@ -1245,28 +1234,31 @@
 				-webkit-flex-wrap: wrap;
 				-ms-flex-wrap: wrap;
 				flex-wrap: wrap;
-				width: calc(100% + 2em);
+				justify-content: space-between;
+				width: 100%;
 			}
 
-				.mini-posts > * {
-					margin: 2em 2em 0 0;
-					width: calc(50% - 2em);
-				}
-
-				.mini-posts > :nth-child(-n + 2) {
+				.mini-posts .posts-container > * {
+					margin: 2em 0 0 0;
+					width: 24%;
 					margin-top: 0;
 				}
 
 		}
 
-		@media screen and (max-width: 480px) {
+		@media screen and (max-width: 800px) {
 
-			.mini-posts {
-				display: block;
-				width: 100%;
+
+			.mini-posts .posts-container > * {
+				margin: 0 0 2em 0;
+				width: 49%;
 			}
 
-				.mini-posts > * {
+		}
+
+		@media screen and (max-width: 480px) {
+
+				.mini-posts .posts-container > * {
 					margin: 0 0 2em 0;
 					width: 100%;
 				}
@@ -2395,6 +2387,14 @@
 				padding: 0 0.5em 0 0;
 			}
 
+		@media screen and (min-width: 1280px) {
+
+				#header .menu {
+					display: none;
+				}
+
+			}
+
 		@media screen and (max-width: 980px) {
 
 			#header .links {
@@ -2508,9 +2508,7 @@
 			padding-top: 0;
 		}
 
-		#sidebar #recent-posts ul.posts time,
-		#sidebar #categories ul.posts li header,
-		#sidebar .blurb p {
+		#sidebar #mini-bio p {
 				/* Theoretically for IE 8 & 9 (more valid) */
 				/* ...but not required as filter works too */
 				/* should come BEFORE filter */
@@ -2522,6 +2520,8 @@
 
 				/* Modern Browsers */
 				opacity: 0.65;
+				font-size: 0.9em;
+				padding: 1.25em 1.25em 0.1em 1.25em
 		}
 
 		@media screen and (max-width: 1280px) {
@@ -2649,6 +2649,7 @@
 	}
 
 	#footer .copyright {
+		text-align: center;
 		color: #aaaaaa;
 		font-family: "Raleway", Helvetica, sans-serif;
 		font-size: 0.5em;