Fix toc sidebar, add icons to site nav, and add prev/next links

2026-08-24 15:28:54 +00:00 · 2017-02-17 19:08:50 -06:00
parent bf7399fe2f
commit ce3eb287df
51 changed files with 576 additions and 288 deletions
@@ -78,7 +78,8 @@ watch = true
  ## Gh repo for site footer (include trailing slash)
  ghrepo = "https://github.com/spf13/hugo/"
  ## GitHub Docs Repository Base URL (include trailing slash)
-  ghdocsrepo = "https://github.com/rdwatters/hugo-docs-concept/"
+  ### https://github.com/spf13/hugo/tree/master/docs
+  ghdocsrepo = "https://github.com/rdwatters/hugo-docs-concept/tree/master/"
  ## Github Wiki for Documentation
  ghdocswiki = ""
  ## Github Wiki for Development
@@ -0,0 +1,14 @@
+---
+title: Hugo
+linktitle: Hugo
+description:
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+weight: 01
+draft: false
+slug:
+aliases: []
+toc: false
+notes:
+---
@@ -16,13 +16,13 @@ notes:

 In no particular order, here is what is currently being worked on for the Hugo project:

-* Intelligently related posts ({{< issue 98 >}})
+* Intelligently related posts ({{< gh 98 >}})
 * Even easier deployment to S3, SSH, GitHub, rsync. Give the [hosting and deployment][] section a shot.
 * Import from other website systems. There are already [existing migration tools][], but they don’t cover all major platforms.
 * An interactive web-based editor (See the [related Discuss thread][])
 * Additional [themes][], which are always ongoing and contributions are welcome!
-* Dynamic image resizing via shortcodes ({{< issue 1014 >}})
-* Native support for additional content formats (AsciiDoc {{< issue 1435>}}, reST {{< issue 1436 >}})
+* Dynamic image resizing via shortcodes ({{< gh 1014 >}})
+* Native support for additional content formats (AsciiDoc {{< gh 1435>}}, reST {{< gh 1436 >}})
 * And, last but not least, [*your* best ideas!][]

 ## Contributions Welcome
@@ -90,9 +90,9 @@ categories = ["web development"]
 ```
 {{% /input %}}

-{{% caution "EOL Characters in Text Editors"%}}
+{{% warning "EOL Characters in Text Editors"%}}
 If you get an `EOF error` when using `hugo new`, add a carriage return after the closing `+++` or `---` for your TOML or YAML front matter, respectively. (See [troubleshooting](/troubleshooting/eof-error/).)
-{{% /caution %}}
+{{% /warning %}}

 ### Using the Default Archetype

@@ -62,5 +62,6 @@ By default, everything created within a section will use the [content type][] th
 [content type]: /content-management/content-types/
 [example site]: /getting-started/
 [directory structure]: /project-organization/directory-structure/
+[List and Section Page Templates]: /templates/list-and-section-page-templates/


@@ -139,10 +139,10 @@ These shortcodes will look up the pages by their relative path (e.g., `blog/post
 `ref` and `relref` also make it possible to make fragmentary links that work for the header links generated by Hugo.

 {{% note "More on Cross References" %}}
-Read a more extensive description of `ref` and `relref` in the [cross-references][] documentation.
+Read a more extensive description of `ref` and `relref` in the [cross-references]() documentation.
 {{% /note %}}

-`ref` and `relref` take exactly one required parameter of _reference_.
+`ref` and `relref` take exactly one required parameter of _reference_, quoted and in position `0`.

 #### Example `ref` and `relref` Input

@@ -441,8 +441,7 @@ And will be rendered as:
 {{% /output %}}

 {{% note %}}
-The preceding template makes use of a Hugo-specific template function
-called `highlight`, which uses [Pygments][] to add the highlighting code.
+The preceding template makes use of a Hugo-specific template function called `highlight`, which uses [Pygments][] to add the highlighting code.
 {{% /note %}}

 ### Simple Single-word Example: `year`
@@ -459,13 +458,15 @@ Let's assume you would like to have a shortcode to be replaced by the current ye
 ```
 {{% /input %}}

-More shortcode examples can be found in the [shortcodes directory for spf13.com][].
+More shortcode examples can be found in the [shortcodes directory for spf13.com][] and [shortcodes directory for the Hugo docs][].

 [cross-references]: /content-management/cross-references/
 [Instagram]: https://www.instagram.com/
 [page variables]: /variables-and-params/page-variables/
+[partial template]: /templates/partials-templates/
 [Pygments]: http://pygments.org/
 [shortcodes directory for spf13.com]: https://github.com/spf13/spf13.com/tree/master/layouts/shortcodes
+[shortcodes directory for the Hugo docs]: https://github.com/spf13/hugo/tree/master/docs/layouts/shortcodes
 [source organization]: /project-organization/directory-structure/
 [Speaker Deck]: https://speakerdeck.com/
 [Vimeo]: https://vimeo.com/
@@ -31,11 +31,15 @@ In order to effectively work with taxonomies in Hugo, it's important to first un
 * **Term:** A key within that taxonomy
 * **Value:** A piece of content assigned to that Term

-## Hugo's Default Taxonomies
+## Default Values and URLs
+
+Hugo natively supports taxonomies, which means there are architectural patterns and default values baked into Hugo's core. Luckily, Hugo limits these default behaviors to those that save you time as you develop your site.
+
+### Default Taxonomies

 Hugo ships with *tags* and *categories* as default taxonomies. These taxonomies are common to many website systems (e.g., WordPress, Drupal, Jekyll). Unlike these systems, Hugo makes it trivial to customize the taxonomies you will be using for your website. In addition to *tags* and *categories*, a *series* of posts for a blog is another common example of taxonomies.

-## Pages Generated
+### Pages Generated

 When taxonomies are used---and [taxonomy templates][] are provided---Hugo will automatically create a taxonomy page listing all of the taxonomy's terms and individual pages for all content associated with the term. For example, a `categories` taxonomy will create the following pages:

@@ -13,3 +13,7 @@ slug:
 aliases:
 notes:
 ---
+
+## Submitting a Pull Request
+
+## Gitter Channel
@@ -10,8 +10,52 @@ tags: [docs,documentation,community]
 weight:
 draft: false
 slug:
-aliases:
+aliases: []
+toc: true
 notes:
 ---

-Documentation is an integral part of any open source project. The Hugo docs were completely reworked in anticipation of the release of v0.19.
+Documentation is an integral part of any open source project. The Hugo docs were completely reworked in anticipation of the release of v0.19, but there is always room for improvement.
+
+## Edit Locally and Submit a Pull Request
+
+## How Content is Ordered in Hugo
+
+## Creating New Files from Archetypes
+
+### New Default Content
+
+### New Function
+
+### New Showcase
+
+### New Tutorial
+
+## Code Block Shortcodes
+
+### Input Code Block
+
+### Output Code Block
+
+### Example Site Code Block
+
+## Admonition Short Codes
+
+### Note Shortcode
+
+### Warning Shortcode
+
+## Example Site Shortcodes
+
+### Example File Shortcode
+
+### Example Front Matter Shortcode
+
+## Style Guide
+
+### How Content is Ordered in the Docs
+
+### Visual Style Samples
+
+
+
@@ -11,13 +11,32 @@ weight: 10
 draft: false
 slug:
 aliases: [/getting-started/using-the-docs/]
-toc: false
+toc: true
 notes:
 ---

 ## Example Site

-## Reading the Code Samples
+## Code Samples

-## Contribute to the Docs
+### Input Code Code Blocks

+### Output Code Code Blocks
+
+### Example Site Code Blocks
+
+## Admonitions
+
+### Note Admonitiion
+
+### Warning Admonition
+
+## Help Us Improve the Hugo Docs
+
+Interested in helping us improve the documentation?
+
+1. We've developed a [step-by-step guide for docs contributors][] on how to submit a pull request after making changes locally.
+2. If you're not up for git and GitHub, start a thread on the ["docs" category in the Hugo Forums][]
+
+["docs" category in the Hugo Forums]: https://discuss.gohugo.io/c/feature
+[step-by-step guide for docs contributors]: /contribute-to-hugo//contribute-to-hugo/contribute-to-the-hugo-docs/
@@ -1,6 +1,6 @@
 ---
-title: List and Section Templates
-linktitle: List and Section Templates
+title: List and Section Page Templates
+linktitle: List and Section Page Templates
 description:
 date: 2017-02-01
 publishdate: 2017-02-01
@@ -15,4 +15,6 @@ toc: false
 notes:
 ---

+## Understanding what is Meant by a "List" Page
+
 ## Lookup Order for List and Section Page Templates
@@ -0,0 +1,58 @@
+---
+title: Accented Characters in URLs
+linktitle: Accented Characters in URLs
+description:
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+tags: [urls,multilingual,special characters]
+categories: [troubleshooting]
+weight:
+draft: false
+slug:
+aliases: [/troubleshooting/categories-with-accented-characters/]
+toc: true
+notes: "All troubleshooting docs should include two h2-headings, one for 'Trouble:' and one for 'Solution:'. Additional h2-headings include 'Discussion Forum Threads', 'Related Hugo Issues', and 'Additional References'."
+---
+
+## Trouble: Categories with accented characters
+
+> One of my categories is named "Le-carré," but the link ends up being generated like this:
+>
+> ```bash
+> categories/le-carr%C3%A9
+> ```
+>
+> And not working. Is there an easy fix for this that I'm overlooking?
+
+## Solution
+
+Mac OS X user? If so, you are likely a victim of HFS Plus file system's insistence to store the "é" (U+00E9) character in Normal Form Decomposed (NFD) mode, i.e. as "e" + "  ́" (U+0065 U+0301).
+
+`le-carr%C3%A9` is actually correct, `%C3%A9` being the UTF-8 version of U+00E9 as expected by the web server. The problem is that OS X turns [U+00E9] into [U+0065 U+0301], and thus `le-carr%C3%A9` no longer works.  Instead, only `le-carre%CC%81` ending with `e%CC%81` would match that [U+0065 U+0301] at the end.
+
+This is unique to OS X.  The rest of the world does not do this, and most certainly not your web server which is most likely running Linux.  This is not a Hugo-specific problem either.  Other people have been bitten by this when they have accented characters in their HTML files.
+
+Note that this problem is not specific to Latin scripts. Japanese Mac users often run into the same issue; e.g., with `だ` decomposing into `た` and <code>&#x3099;</code> (read the [Japanese Perl users article][]).
+
+Rsync 3.x to the rescue! From [an answer posted on Server Fault][]:
+
+> You can use rsync's `--iconv` option to convert between UTF-8 NFC & NFD, at least if you're on a Mac. There is a special `utf-8-mac` character set that stands for UTF-8 NFD. So to copy files from your Mac to your web server, you'd need to run something like:
+>
+> `rsync -a --iconv=utf-8-mac,utf-8 localdir/ mywebserver:remotedir/`
+>
+> This will convert all the local filenames from UTF-8 NFD to UTF-8 NFC on the remote server. The files' contents won't be affected. - [Server Fault][]
+
+Please make sure you have the latest version of rsync 3.x installed. The rsync that ships with OS X is outdated. Even the version that comes packaged with 10.10 (Yosemite) is version 2.6.9 protocol version 29. The `--iconv` flag is new in rsync 3.x.
+
+### Discussion Forum References
+
+* http://discuss.gohugo.io/t/categories-with-accented-characters/505
+* http://wiki.apache.org/subversion/NonNormalizingUnicodeCompositionAwareness
+* https://en.wikipedia.org/wiki/Unicode_equivalence#Example
+* http://zaiste.net/2012/07/brand_new_rsync_for_osx/
+* https://gogo244.wordpress.com/2014/09/17/drived-me-crazy-convert-utf-8-mac-to-utf-8/
+
+[an Answer posted on Server Fault]: http://serverfault.com/questions/397420/converting-utf-8-nfd-filenames-to-utf-8-nfc-in-either-rsync-or-afpd "Converting UTF-8 NFD filenames to UTF-8 NFC in either rsync or afpd, Server Fault Discussion"
+[Japanese Perl users article]: http://perl-users.jp/articles/advent-calendar/2010/english/24 "Encode::UTF8Mac makes you happy while handling file names on MacOSX"
+[Server Fault]: http://serverfault.com/questions/397420/converting-utf-8-nfd-filenames-to-utf-8-nfc-in-either-rsync-or-afpd "Converting UTF-8 NFD filenames to UTF-8 NFC in either rsync or afpd, Server Fault Discussion"
@@ -1,6 +1,6 @@
 ---
 title: EOF Error
-linktitle:
+linktitle: EOF Error
 description:
 date: 2017-02-01
 publishdate: 2017-02-01
@@ -9,8 +9,41 @@ tags: [eof, end of file, error, faqs]
 categories: [troubleshooting]
 weight:
 draft: false
-slug:
 aliases: []
-toc: false
-notes:
---
+toc: true
+notes: "All troubleshooting docs should include two h2-headings, one for 'Trouble:' and one for 'Solution:'. Additional h2-headings include 'Discussion Forum Threads', 'Related Hugo Issues', and 'Additional References'."
+---
+
+## Trouble: `hugo new` Aborts with EOF error
+
+> I'm running into an issue where I cannot get archetypes working, when running `hugo new showcase/test.md`, for example, I see an `EOF` error thrown by Hugo.
+>
+> I have set up this test repository to show exactly what I've done, but it is essentially a vanilla installation of Hugo. https://github.com/polds/hugo-archetypes-test
+>
+> When in that repository, using Hugo v0.12 to run `hugo new -v showcase/test.md`, I see the following output:
+>
+> ```bash
+> INFO: 2015/01/04 Using config file: /private/tmp/test/config.toml
+> INFO: 2015/01/04 attempting to create  showcase/test.md of showcase
+> INFO: 2015/01/04 curpath: /private/tmp/test/archetypes/showcase.md
+> ERROR: 2015/01/04 EOF
+> ```
+>
+> Is there something that I am blatantly missing?
+
+## Solution: Carriage Returns
+
+The solution is to add a final newline (i.e., `EOL`) to the end of your default.md archetype file of your theme. You can do this by adding a carriage return after the closing `+++` or `---` of your TOML or YAML front matter, respectively.
+
+{{% note "Final EOL Unnecessary in v0.13+" %}}
+As of v0.13, Hugo's parser has been enhanced to accommodate archetype files without final EOL thanks to the great work by [@tatsushid](https://github.com/tatsushid).
+{{% /note %}}
+
+## Discussion Forum Threads
+
+* http://discuss.gohugo.io/t/archetypes-not-properly-working-in-0-12/544
+* http://discuss.gohugo.io/t/eol-f-in-archetype-files/554
+
+## Related Hugo Issues
+
+* https://github.com/spf13/hugo/issues/776
@@ -1,6 +0,0 @@
-<div class="caution">
-	<h2>{{if .Get 0}}{{.Get 0 | markdownify}}{{else}}Caution{{end}}</h2>
-	<div class="shortcode-content">
-	{{.Inner}}
-	</div>
-</div>
@@ -0,0 +1,11 @@
+{{ $file := .Get 0}}
+{{ $filepath := $file }}
+{{ $syntax := index (split $file ".") 1 }}
+{{ $syntaxoverride := eq (len .Params) 2 }}
+<div class="code-copy" id="{{$file | urlize}}">
+	<div class="code-copy-header"><div class="action-buttons"></div><span title="" class="filename">{{$filepath}}</span><i class="icon-{{$syntax}} input"></i></div>
+	<button class="copy-button" title="Copy to clipboard" data-clipboard-snippet>
+			<div class="copy-text"><i class="icon-clipboard"></i> COPY</div>
+	</button>
+	<pre><code class="language-{{if $syntaxoverride}}{{.Get 1}}{{else}}{{$syntax}}{{end}}">{{- readFile $file -}}</code></pre>
+</div>
@@ -1,12 +1,12 @@
 {{ $file := .Get 0}}
-{{ $filepath := replace $file "static/example" ""}}
+{{ $filepath := replace $file "static/" ""}}
 {{ $syntax := index (split $file ".") 1 }}
 {{ $syntaxoverride := eq (len .Params) 2 }}
 <div class="code-copy" id="{{$file | urlize}}">
-	<div class="code-copy-header"><div class="action-buttons"></div><span title="" class="filename">{{$filepath}}</span><i class="icon-{{$syntax}} input"></i></div>
+	<div class="code-copy-header examplesite"><div class="action-buttons"></div><span class="filename"><i class="icon-website"></i>{{$filepath}}</span><i class="icon-{{$syntax}} input"></i></div>
 	<button class="copy-button" title="Copy to clipboard" data-clipboard-snippet>
 			<div class="copy-text"><i class="icon-clipboard"></i> COPY</div>
 	</button>
 	<pre><code class="language-{{if $syntaxoverride}}{{.Get 1}}{{else}}{{$syntax}}{{end}}">{{- readFile $file -}}</code></pre>
-	<a role="button" target="_blank" href="{{$.Site.Params.ghdocsrepo}}{{$file}}" class="see-on-github">See on <i class="icon-github"></i></a>
+	<a role="button" target="_blank" href="{{$.Site.Params.ghdocsrepo}}{{$file}}" title="See {{$filepath}} source on GitHub" class="tooltip see-on-github" data-tooltip="See {{$filepath}} source on GitHub">Source<i class="icon-github"></i></a>
 </div>
@@ -0,0 +1,13 @@
+<!-- Similar to exfile.html but *only* pulls the front matter from the example/content/*md -->
+{{ $file := .Get 0}}
+{{ $filepath := replace $file "static/" ""}}
+{{ $syntax := index (split $file ".") 1 }}
+{{ $syntaxoverride := eq (len .Params) 2 }}
+<div class="code-copy" id="{{$file | urlize}}">
+	<div class="code-copy-header examplesite"><div class="action-buttons"></div><span title="" class="filename">{{$filepath}}</span><i class="icon-{{$syntax}} input"></i></div>
+	<button class="copy-button" title="Copy to clipboard" data-clipboard-snippet>
+			<div class="copy-text"><i class="icon-clipboard"></i> COPY</div>
+	</button>
+	<pre><code class="language-{{if $syntaxoverride}}{{.Get 1}}{{else}}{{$syntax}}{{end}}">{{- readFile $file -}}</code></pre>
+	<a role="button" target="_blank" href="{{$.Site.Params.ghdocsrepo}}{{$file}}" title="See {{$filepath}} on GitHub" class="see-on-github">Source<i class="icon-github"></i></a>
+</div>
@@ -1 +0,0 @@
-<a class="issue-link" href="{{.Site.Params.ghrepo}}issues/{{.Get 0}}">#{{.Get 0}}</a>
@@ -1,5 +1,6 @@
 ---
 publishdate: ""
 description: ""
-musician: ""
+tags: []
+categories: []
 ---
@@ -1,3 +1,13 @@
+//IIFE to remove all third-level li's from TOC so as not to negatively affect scrollspy
+(function() {
+  let levelFours = document.querySelectorAll('#TableOfContents > ul > li > ul > li > ul > li > ul');
+  if (levelFours) {
+    for (var i = 0; i < levelFours.length; i++) {
+      levelFours[i].remove();
+    }
+  }
+})();
+
 $(document).ready(function() {
  // Cache selectors
  var lastId,
@@ -0,0 +1 @@
+$(document).ready(function(){var a,b=$("#TableOfContents"),d=(b.outerHeight()+15,$("#site-header").height()),e=b.find("a"),f=e.map(function(){var a=$($(this).attr("href"));if(a.length)return a});$(window).scroll(function(b){b.preventDefault();var c=$(window).scrollTop()+$(window).height()==$(document).height(),g=$(this).scrollTop()+d+100,h=f.map(function(){if($(this).offset().top<g)return this});h=h[h.length-1];var i=h&&h.length?h[0].id:"";a!==i&&(a=i,e.parent().removeClass("active").end().filter("[href='#"+i+"']").parent().addClass("active"),history.replaceState({},"",e.filter("[href='#"+i+"']").attr("href"))),c&&(e.parent().removeClass("active"),"active"!==e.last().parent().attr("class")&&e.last().parent().addClass("active"))})});
@@ -1 +0,0 @@
-!function(e,n){function o(e){return"object"===n.type(e)}function i(e){return"string"===n.type(e)&&n.trim(e).length>0}function t(e,n,o,i){i(e[o])||(e[o]=n[o])}n.fn.extend({scrollspy:function(l,s){if(i(l)){var a=s;s=l,l=a}l=n.extend({},r,l),t(l,r,"container",o);var c=n(l.container);if(0===c.length)return this;if(t(l,r,"namespace",i),i(s)&&"DESTROY"===s.toUpperCase())return c.off("scroll."+l.namespace),this;t(l,r,"buffer",n.isNumeric),t(l,r,"max",n.isNumeric),t(l,r,"min",n.isNumeric),t(l,r,"onEnter",n.isFunction),t(l,r,"onLeave",n.isFunction),t(l,r,"onLeaveTop",n.isFunction),t(l,r,"onLeaveBottom",n.isFunction),t(l,r,"onTick",n.isFunction),n.isFunction(l.max)&&(l.max=l.max()),n.isFunction(l.min)&&(l.min=l.min());var u="VERTICAL"===e.String(l.mode).toUpperCase();return this.each(function(){var e=this,o=n(e),i=0,t=!1,r=0;c.on("scroll."+l.namespace,function(){var s=n(this),a={top:s.scrollTop(),left:s.scrollLeft()},f=c.height(),p=l.max,m=l.min,v=u?a.top+l.buffer:a.left+l.buffer;if(0===p&&(p=u?f:c.outerWidth()+o.outerWidth()),v>=m&&p>=v)t||(t=!0,i++,o.trigger("scrollEnter",{position:a}),null!==l.onEnter&&l.onEnter(e,a)),o.trigger("scrollTick",{position:a,inside:t,enters:i,leaves:r}),null!==l.onTick&&l.onTick(e,a,t,i,r);else if(t)t=!1,r++,o.trigger("scrollLeave",{position:a,leaves:r}),null!==l.onLeave&&l.onLeave(e,a),m>=v?(o.trigger("scrollLeaveTop",{position:a,leaves:r}),null!==l.onLeaveTop&&l.onLeaveTop(e,a)):v>=p&&(o.trigger("scrollLeaveBottom",{position:a,leaves:r}),null!==l.onLeaveBottom&&l.onLeaveBottom(e,a));else{var g=c.scrollTop(),L=o.height(),h=o.offset().top;f+g>h&&h>g-L&&(o.trigger("scrollView",{position:a}),null!==l.onView&&l.onView(e,a))}})})}});var r={buffer:0,container:e,max:0,min:0,mode:"vertical",namespace:"scrollspy",onEnter:null,onLeave:null,onLeaveTop:null,onLeaveBottom:null,onTick:null,onView:null}}(window,window.jQuery);
@@ -0,0 +1,13 @@
+---
+linktitle:
+description:
+publishdate: ""
+lastmod: ""
+tags: []
+categories: [troubleshooting]
+weight:
+draft: false
+aliases: []
+toc: true
+notes: "All troubleshooting docs should include two h2-headings, one for 'Trouble:' and one for 'Solution:'. Additional h2-headings include 'Discussion Forum Threads', 'Related Hugo Issues', and 'Additional References'."
+---
@@ -12,6 +12,6 @@
 	{{.Content}}
 	</div>
 	{{partial "content-footer.html" . }}
-	{{partial "table-of-contents.html" . }}
 </main>
+{{partial "table-of-contents.html" . }}
 {{ end }}
@@ -1,35 +1,45 @@
+<span class="last-modified">Last Updated: {{with .Lastmod}}{{.Format "2006-01-02"}}{{else}}{{.PublishDate.Format "2006-01-02"}}{{end}}</span>
 <footer id="content-footer">
-{{$section := replace (replace .Section "-" " " | title) "And" "and"}}
+{{$section := .Section}}
 {{ if .NextInSection }}
-<a href="{{.NextInSection.Permalink}}" data-tooltip="{{.NextInSection.Title}}" class="tooltip tooltip-right prev-and-next-link prev-page">
-	<div>
-		<span><i class="fa fa-chevron-left"></i> Previous</span>
-	</div>
+<a href="{{.NextInSection.Permalink}}" class="prev-and-next-link prev-page">
+		<i class="fa fa-chevron-left"></i>
+		<div class="page-info">
+			<span>Previous</span>
+			<h5 class="{{$section}}">{{.NextInSection.Title}}</h5>
+		</div>
 </a>
 {{ else if eq .Kind "page" }}
-	{{ with .Site.GetPage "section" .Section }}
-	<a href="{{.Permalink}}" data-tooltip="{{.Title}}" class="tooltip tooltip-right prev-and-next-link prev-page">
-		<div>
-			<span><i class="fa fa-chevron-left"></i> Previous</span>
-		</div>
+	{{ with .Site.GetPage "section" $section }}
+	<a href="{{.Permalink}}" class="prev-and-next-link prev-page">
+
+			<i class="fa fa-chevron-left"></i>
+			<div class="page-info">
+				<span>Previous</span>
+				<h5 class="{{$section}}">{{.Title}}</h5>
+			</div>
+
 	</a>
 	{{ end }}
 {{ end }}
-<span class="last-modified">Last Updated: {{with .Lastmod}}{{.Format "2006-01-02"}}{{else}}{{.PublishDate.Format "2006-01-02"}}{{end}}</span>
 {{ with .PrevInSection }}
-<a href="{{.Permalink}}" data-tooltip="{{.Title}}" class="tooltip prev-and-next-link next-page">
-	<div>
-		<span>Next <i class="fa fa-chevron-right"></i></span>
-	</div>
-</a>
+	<a href="{{.Permalink}}" class="prev-and-next-link next-page">
+		<div class="page-info">
+			<span>Next</span>
+			<h5 class="{{$section}}">{{.Title}}</h5>
+		</div>
+		<i class="fa fa-chevron-right"></i>
+	</a>
 {{ end }}
 {{if eq .Kind "section"}}
-{{ range first 1 .Data.Pages }}
-<a href="{{.Permalink}}" data-tooltip="{{.Title}}" class="tooltip prev-and-next-link next-page">
-	<div>
-		<span>Next <i class="fa fa-chevron-right"></i></span>
-	</div>
-</a>
-{{end}}
+	{{ range first 1 .Data.Pages }}
+	<a href="{{.Permalink}}" class="prev-and-next-link next-page">
+	  <div class="page-info">
+	    <span>Next</span>
+	    <h5 class="{{.Section}}">{{.Title}}</h5>
+	  </div>
+	  <i class="fa fa-chevron-right"></i>
+	</a>
+	{{end}}
 {{end}}
 </footer>
@@ -4,5 +4,5 @@
 		{{ partial "svg-icons/godoc-icon.html" .}}
 	</a>
 	{{- end -}}
-	<a target="_blank" class="tooltip edit-link" data-tooltip="Edit this page on GitHub" href="{{.Site.Params.ghrepo}}edit/master/content/{{.File.Path}}"><i class="icon-pencil" aria-hidden="true"></i></a>
+	<a target="_blank" class="tooltip right edit-link" data-tooltip="Edit this page on GitHub" href="{{.Site.Params.ghrepo}}edit/master/content/{{.File.Path}}"><i class="icon-pencil" aria-hidden="true"></i></a>
 </div>
@@ -6,10 +6,7 @@
 <a href="{{.Permalink}}">
 <article class="contents-list {{$kind}}">
 	<header>
-		<div class="contents-list-image-wrapper">
-			<img src="{{.Site.BaseURL}}images/{{.Section}}.svg" alt="">
-		</div>
-		<h3 class="{{.Section}}">{{with .LinkTitle}}{{. | markdownify}}{{else}}{{.Title | markdownify}}{{end}}</h3>
+		<h3 class="list-icon {{.Section}}">{{- partial "list-icon.html" . -}}{{with .LinkTitle}}{{. | markdownify}}{{else}}{{.Title | markdownify}}{{end}}</h3>
 	</header>
 	<p>{{.Description | markdownify }}</p>
 </article>
@@ -1,18 +1,17 @@
 <!-- Article-namespace metadata for OGP -->
-<!-- <meta property="og:type" content="article" />
+<meta property="og:type" content="article" />
 <meta property="og:article:published_time" content="{{.PublishDate.Format "2006-01-02T15:04:05Z07:00"}}" />
-<meta property="og:article:modified_time" content="{{.Params.lastmod}}" />
+<meta property="og:article:modified_time" content="{{.Lastmod}}" />
 {{- with .Params.tags -}}
 	{{- range . -}}
 	<meta property="og:article:tag" content="{{.}}" />
 	{{- end -}}
 {{- end -}}
 <meta property="og:locale" content="en_US">
-<meta property="og:title" content="{{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}">
+<meta property="og:title" content="{{ .Title }}">
 <meta property="og:image" content="{{.Site.BaseURL}}images/{{ .Site.Params.defaultsocialimage }}">
-<meta property="og:image:secure_url" content="{{.Site.BaseURL}}/assets/images/{{.Params.image | default .Site.Params.defaultsocialimage }}"/>
 <meta property="og:image:type" content="image/jpeg" />
 <meta property="og:image:width" content="800" />
 <meta property="og:image:height" content="533" />
-<meta property="og:description" content="{{ if .IsHome }}{{ .Site.Params.sitedescription }}{{ else }}{{ .Description }}{{end}}"/>
-<meta property="og:site_name" content="{{ .Site.Title }}"> -->
+<meta property="og:description" content="{{ .Description }}"/>
+<meta property="og:site_name" content="{{ $.Site.Title }}">
@@ -1,4 +1,4 @@
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<meta name="description" content="{{ if .IsHome }}{{ .Site.Params.sitedescription }}{{ else }}{{ .Description }}{{end}}" />
-<title>{{.Site.Title}}{{if not .IsHome}} | {{.Title}}{{end}}</title>
+<meta name="description" content="{{ .Description }}" />
+<title>{{.Title}}{{if not .IsHome}}| {{.Site.Title}}{{end}}</title>
@@ -0,0 +1,3 @@
+<div class="list-icon-wrapper">
+	<img src="{{$.Site.BaseURL}}images/{{.Section}}.svg" alt="">
+</div>
@@ -1,16 +1,15 @@
-<footer id="site-footer" class="site-footer">
-	<div>
+<footer id="site-footer" class="site-footer{{if .Params.toc}} withtoc{{end}}">
+	<div class="footer-content">
+	<div class="footer-info">
 		<span>By <a href="//spf13.com" target="_blank">spf13</a> and friends.</span>
 		<img src="/images/made-with-hugo-dark.png" alt="Made with Hugo Logo">
 	</div>
 	<div>
 		<ul class="footer-list">
-			{{with .Site.Params.ghdocsrepo}}
-			<li><a href="{{.}}"><i class="icon-github" target="_blank"></i><i class="icon-docs"></i> Docs Source</a></li>
-			{{end}}
 			<li><a href="{{.Site.Params.ghrepo}}" target="_blank"><i class="icon-github"></i> Project Source</a></li>
 			<li><a href="{{.Site.Params.discuss}}" target="_blank"><i class="icon-forum"></i> Discuss Hugo</a></li>
 			<li><a href="{{.Site.Params.gitter}}" target="_blank"><i class="icon-gitter"></i> Gitter (Dev Chat Only)</a></li>
 		</ul>
 	</div>
+	</div>
 </footer>
@@ -1,8 +1,9 @@
 <head>
 {{- partial "head/noindex.html" . -}}
 {{- partial "head/metadata-standard.html" . -}}
-{{- partial "head/metadata-prefetch.html" . -}}
+{{- partial "head/metadata-opengraph.html" . -}}
 {{- partial "head/metadata-schemaorg.html" . -}}
 {{- partial "head/metadata-favicons.html" . -}}
 {{- partial "head/site-style.html" . -}}
+{{- partial "head/metadata-prefetch.html" . -}}
 </head>
@@ -12,9 +12,8 @@
 		{{$.Scratch.Set "url" .URL }}
 		{{range $item, $params := sort ($.Site.Data.sitenavigation) "order"}}
 		{{$section := $params.url}}
-		<li class="top-menu-item"><a class="top-menu-item-link {{$params.haschildren}}{{if eq ($.Scratch.Get "currentsection") $section }} active-section{{end}}" href="{{if $params.haschildren}}#{{else}}{{$base}}{{$params.url}}{{end}}">{{$params.title}}
+		<li class="top-menu-item"><a class="list-icon top-menu-item-link {{$params.haschildren}}{{if eq ($.Scratch.Get "currentsection") $section }} active-section{{end}}" href="{{if $params.haschildren}}#{{else}}{{$base}}{{$params.url}}{{end}}"><div class="list-icon-wrapper"><img src="{{$base}}images/{{$section}}.svg" alt=""></div>{{$params.title}}</a>
 		{{if $params.haschildren}}
-		<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
 			<ul class="submenu">
 				{{- if eq $params.sortsubpagesby "title"}}
 					{{range (where $.Site.Pages "Section" $section).ByTitle}}
@@ -26,8 +25,6 @@
 					{{end}}
 				{{- end }}
 			</ul>
-		{{else}}
-		</a>
 		{{end}}
 		</li>
 		{{end}}
@@ -1,7 +1,6 @@
 <script src="{{.Site.BaseURL}}js/vendor/jquery-2.2.4.min.js"></script>
 <script src="{{.Site.BaseURL}}js/script.min.js"></script>
 {{ if ne .Params.toc "false" }}
-<script src="{{.Site.BaseURL}}js/vendor/scrollspy.min.js"></script>
 <script async defer src="{{.Site.BaseURL}}js/table-of-contents.js"></script>
 {{ end }}

@@ -10,7 +10,7 @@ $(document).ready(function() {
    // scroll to each target
    $(target).velocity('scroll', {
      duration: 500,
-      offset: -50,
+      offset: -80,
      easing: 'ease-in-out'
    });
    location.hash = hashid;
@@ -25,6 +25,11 @@ $hugo-gray-ultra-light:lighten($hugo-gray-light,23%);
 $hugo-green:#00A88A;
 $hugo-green-light:#33BA91;

+//Examples
+$examplesite-example-color:$hugo-pink;
+$input-example-color:$hugo-gray-dark;
+$output-example-color:$hugo-blue;
+
 //Document Body
 $body-bg-color:$hugo-white;

@@ -35,8 +40,9 @@ $heading-font-family: $base-font-family;
 $base-font-color: #222222;
 $base-line-height-content: 1.6;
 $base-font-weight: 300;
-$base-font-bold-weight: 700;
-$heading-font-weight: 700;
+$base-font-bold-weight: 600;
+$base-font-bold-color: $base-font-color;
+$heading-font-weight: 800;
 $systemfonts: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbols";

 //Anchors (in body copy)
@@ -51,11 +57,11 @@ $base-button-text-color: $hugo-white;
 $button-border-radius: .25em;

 //Codeblocks
-$code-font-family:'sourcecodepro',courier,monospace;
+$code-font-family:'courierprime',courier,monospace;
 $code-tooltip-bg-color: $hugo-pink;
 $code-block-base-font-color: #ffffff;
 $code-block-background-color: $hugo-black;
-$code-editor-header-bg-color: $hugo-gray-dark;
+$code-editor-header-base-bg-color: $input-example-color;
 $code-filename-color:#ffffff;
 $code-copy-button-color:#ffffff;
 $code-copy-button-text-color:$base-font-color;
@@ -71,12 +77,16 @@ $breadcrumb-navigation-bg-color:$hugo-blue-ultra-light;
 $breadcrumb-navigation-bg-color-active:$hugo-blue;
 $breadcrumb-navigation-text-color-active:$hugo-white;

-//Header
+//Headers
 $site-header-height:50px;

 //Toc
 $toc-bg-color:$body-bg-color;

+//Footers
+$site-footer-bg-color:$hugo-black;
+$site-footer-height: 100px;
+
 //Tags
 $tag-bg-color:$hugo-gray-ultra-light;

@@ -35,6 +35,11 @@ body {
  flex-direction: column;
 }

+strong {
+  font-weight:$base-font-bold-weight;
+  color:$base-font-bold-color;
+}
+
 p {
  margin-top: 0px;
  margin-bottom: 1.5em;
@@ -58,6 +58,7 @@
 .icon-angle-double-right:before { content: '\f101'; } /* '' */
 .icon-attach:before { content: '\e820'; } /* '' */
 .icon-attention:before { content: '\e80f'; } /* '' */
+.icon-bash:before { content: '\e804'; } /* '' */
 .icon-bell:before { content: '\e80d'; } /* '' */
 .icon-cancel:before { content: '\e81e'; } /* '' */
 .icon-caution:before { content: '\e80f'; } /* '' */
@@ -71,10 +72,7 @@
 .icon-facebook-official:before { content: '\f230'; } /* '' */
 .icon-firefox:before { content: '\e840'; } /* '' */
 .icon-flag:before { content: '\e813'; } /* '' */
-.icon-forum:before {
-content: '\f03d';
-margin-right:.3em;
-} /* '' */
+.icon-forum:before {content: '\f03d';margin-right:.3em;} /* '' */
 .icon-github:before { content: '\f09b'; } /* '' */
 .icon-gitter:before { content: '\e819'; } /* '' */
 .icon-go:before { content: '\e801'; } /* '' */
@@ -107,25 +105,14 @@ margin-right:.3em;
 .icon-quote-right:before { content: '\e80a'; } /* '' */
 .icon-sass:before { content: '\e803'; } /* '' */
 .icon-search:before { content: '\e80b'; } /* '' */
+.icon-sh:before { content: '\e804'; } /* '' */
 .icon-share:before { content: '\f1e0'; } /* '' */
 .icon-tag:before { content: '\e806'; } /* '' */
 .icon-tags:before { content: '\e805'; } /* '' */
-.icon-sh:before { content: '\e804'; } /* '' */
 .icon-terminal:before { content: '\e804'; } /* '' */
-.icon-bash:before { content: '\e804'; } /* '' */
 .icon-thumbs-up:before { content: '\e81a'; } /* '' */
 .icon-twitter:before { content: '\e807'; } /* '' */
 .icon-warn:before { content: '\e810'; } /* '' */
 .icon-warning:before { content: '\e810'; } /* '' */
 .icon-website:before { content: '\e818'; } /* '' */
-.icon-yaml:before,.icon-yml:before,.icon-toml:before {
-  font-family:$code-font-family;
-  left:-1em;
-  margin-right:1em;
-}
-.icon-yaml:before,.icon-yml:before {
-  content:'YAML';
-}
-.icon-toml:before{
-  content:'TOML';
-}
+.icon-yaml:before,.icon-yml:before,.icon-toml:before { content: '\f121'; } //same as .icon-code
@@ -1,5 +1,5 @@
-@include fonts('muli', $weights: 100 300 400 600 700);
-@include fonts('sourcecodepro', $weights: 400 700);
+@include fonts('muli', $weights: 100 300 400 600 700 800, $italic: true);
+@include fonts('courierprime', $weights: 400 700, $italic: true);
 h1,
 h2,
 h3,
@@ -8,15 +8,20 @@ h4 {
  margin: 0px;
  line-height: 1.4;
  position: relative;
+  > code {
+    font-weight: $heading-font-weight;
+  }
 }

 h1.page-title {
-  font-size: 1.8em;
+  font-size: 2.2em;
+  line-height:1.2;
  letter-spacing: -.021em;
  padding-bottom: 0px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
+  font-weight:$heading-font-weight;
  @include MQ(M) {
    padding-top: 0px;
  }
@@ -38,19 +43,19 @@ h3 {
 }

 h2 {
-  font-size: 1.3em;
+  font-size: 1.5em;
 }

 h3 {
-  font-size: 1.1em;
+  font-size: 1.3em;
 }

 h4 {
-  font-size: 1em;
+  font-size: 1.1em;
  margin-top: 1em;
  margin-bottom:1em;
  color: $hugo-gray;
-  text-transform: uppercase;
+  // text-transform: uppercase;
 }

 .functions {
@@ -14,11 +14,11 @@ a {
  li,
  p {
    a {
-      z-index:1;
-      color:$default-anchor-underline-color;
+      z-index: 1;
+      color: $default-anchor-underline-color;
      &:hover {
        // text-decoration: underline!important;
-        border-bottom:1px solid $default-anchor-underline-color;
+        border-bottom: 1px solid $default-anchor-underline-color;
      }
    }
  }
@@ -33,11 +33,10 @@ a.tooltip {
    position: absolute;
    line-height: 1;
    bottom: -1.4em;
-    right: 0px;
    font-size: 12px;
    color: white;
    font-family: 'fontello';
-    width: auto;
+    min-width: 80px;
    padding: .25em .33em;
    background-color: $base-font-color;
    content: attr(data-tooltip);
@@ -46,7 +45,13 @@ a.tooltip {
    font-weight: normal;
    border-radius: .25em;
  }
-  &.tooltip-right {
+  &.left {
+    &:hover::before {
+      right: 0px;
+      left: auto;
+    }
+  }
+  &.right {
    &:hover::before {
      left: 0px;
      right: auto;
@@ -7,8 +7,7 @@
    font-style: italic;
    background-color: $hugo-gray-ultra-light;
    padding: 16px;
-    // padding-top:16px;
-    // padding-bottom:16px;
+    margin-bottom:1em;
    p {
    	margin-bottom:0px;
    	margin-top:16px;
@@ -29,6 +28,9 @@
      // background-color: $body-bg-color;
      font-style: normal;
    }
+    code,pre {
+      font-style:normal;
+    }
    cite.blockquote-citation {
      position: absolute;
      bottom: .3em;
@@ -52,13 +52,6 @@ pre {
      }
    }
  }
-  h3 > code {
-    font-size:1.1em;
-    font-weight:normal;
-  }
-  h4 code {
-    text-transform:none;
-  }
  p > a code,
  li > a code,
  td > a code {
@@ -72,57 +65,64 @@ div.code-copy {
  margin-top: 1em;
  margin-bottom: 32px;
  background-color: $code-block-background-color;
-  &:hover {
-    button.copy-button {
-      transition: all .2s ease-in-out;
-      opacity: 1;
-    }
-  }
 }

 p + .code-copy {
  margin-top: 0em;
 }

+button.copy-button,
+a[role="button"].see-on-github {
+  display: block;
+  box-shadow: none;
+  padding: 0px;
+  transition: all .2s ease-in-out;
+  opacity: 1;
+  background-color: $code-copy-button-color;
+  box-sizing: border-box;
+  position: absolute;
+  bottom: 0px;
+  z-index: 4;
+  min-width: 90px;
+  width: auto;
+  padding: {
+    left: 4px;
+    right: 4px;
+  }
+  height: 1.5em;
+  border-width: 0px;
+  border-radius: 0px;
+  font-weight: bold;
+  color: $code-copy-button-text-color;
+  font-size: 14px;
+  display: block;
+  width: 80px;
+  line-height: 24px;
+  height: 24px;
+  vertical-align: middle;
+  text-align: center;
+  text-transform:uppercase;
+  &:hover {
+    background-color: $hugo-blue;
+    box-shadow: none;
+  }
+  &:active,
+  &:focus {
+    outline: none;
+    position: absolute;
+  }
+}
+
+a[role="button"].see-on-github {
+  left: 0px;
+}
+
 button.copy-button {
  display: none;
  @include MQ(M) {
    display: block;
-    padding: 0px;
-    transition: all .2s ease-in-out;
-    opacity: 1;
-    background-color: $code-copy-button-color;
-    box-sizing: border-box;
-    position: absolute;
-    bottom: 0px;
    right: 0px;
-    z-index: 4;
-    width: 80px;
-    height: 1.5em;
-    border-width: 0px;
-    border-radius: 0px;
-    color: $code-copy-button-text-color;
-    font-weight: bold;
-    &:hover {
-      background-color: $hugo-blue;
-    }
-    &:active,
-    &:focus {
-      outline: none;
-      position: absolute;
-    }
  }
-}
-
-.copy-text {
-  color: $code-copy-button-text-color;
-  font-size: 12px;
-  display: block;
-  width: 80px;
-  line-height: 1.5em;
-  height: 1.5em;
-  vertical-align: middle;
-  text-align: center;
  i.icon-clipboard {
    display: inline;
  }
@@ -148,34 +148,39 @@ div.code-copy-header {
  position: relative;
  height: 1.5em;
  line-height: 1.5em;
-  background-color: $code-editor-header-bg-color;
+  background-color: $code-editor-header-base-bg-color;
  border-radius: 0px;
  position: relative;
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
  &.output {
-    background-color: $hugo-blue;
+    background-color: $output-example-color;
+  }
+  &.examplesite {
+    background-color: $examplesite-example-color;
  }
  span.filename {
-    @include center;
    text-align: center;
-    max-width: 70%;
    color: $code-filename-color;
    font-weight: 100;
    font-size: 12px;
    font-family: $systemfonts;
+    i.icon-website {
+      color: inherit;
+      font-weight:bold;
+      font-size:18px;
+    }
  }
  [class^="icon-"] {
-    float: right;
-    position: relative;
-    top: -1.45em;
-    right: .5em;
    color: $code-filename-color;
  }
 }

 .action-buttons {
-  position: absolute;
+  // position: absolute;
+  position:relative;
  left: 10px;
-  margin-top: .35em;
  width: 12px;
  height: 12px;
  background: Crimson;
@@ -1,47 +1,68 @@
-#content-footer {
-  height: 40px;
-  line-height: 40px;
-  vertical-align: middle;
-  display:block;
-  border-top: 2px solid $hugo-gray-light;
-  margin-bottom: 3em;
-  width:100%;
-  .prev-and-next-link {
-    // width: 100%;
-    display: inline-block;
-    text-align: center;
-    margin-bottom: 1em;
-    span {
-      display: block;
-      font-size: .8em;
-    }
-    @include MQ(M) {
-      max-width: calc(48% - 100px);
-      margin-bottom: 1.5em;
-      &.next-page {
-        float: right;
-      }
-    }
-    &.prev-page {
-      text-align: left;
-      float:left;
-    }
-    &.next-page {
-      text-align: right;
-      float: right;
-      margin-right: 0px;
-    }
-  }
-}
-
 .last-modified {
  color: $hugo-gray;
-  display: inline-block;
-  width: 200px;
-  max-width: 200px;
-  font-size: .8em;
-  position: absolute;
-  left: calc(50% - 100px);
-  font-weight: normal;
+  display: block;
+  min-width: 200px;
+  width: 100%;
  text-align: center;
+  font-size: .8em;
+  position: relative;
+  bottom: -1.75em;
+}
+
+#content-footer {
+  min-height: 100px;
+  height: auto;
+  display:block;
+  border-top: 2px solid $hugo-gray-light;
+  width: 100%;
+  margin-bottom:2em;
+}
+
+.prev-and-next-link {
+  display:inline-block;
+  margin-top: 2em;
+  min-width: 45%;
+  .page-info {
+    display:inline-block;
+    h5 {
+      font-size: 16px;
+      padding: 0px;
+      margin: 0px;
+      line-height: 1.2;
+      margin-top: .5em;
+    }
+    span {
+      width: 100%;
+      padding: 0px;
+      margin: 0px;
+      display: block;
+      font-size: 14px;
+      text-align: center;
+      line-height: 1;
+      margin-top: .5em;
+    }
+  }
+  i.fa.fa-chevron-right,
+  i.fa.fa-chevron-left {
+    font-size: 24px;
+    display:inline-block;
+  }
+  i.fa.fa-chevron-left {
+    margin-right: .5em;
+  }
+  i.fa.fa-chevron-right {
+    margin-left: .5em;
+  }
+  &.prev-page {
+    text-align:left;
+    float:left;
+  }
+  &.next-page {
+    text-align:right;
+    float:right;
+  }
+  &:hover {
+    text-decoration: none;
+    border: 0px solid transparent;
+  }
 }
@@ -20,7 +20,6 @@
    margin-top:0px;
    padding-top:0px;
    padding-bottom: 2px;
-    padding-left:1.5em;
  }
  p {
    margin-top:8px;
@@ -35,24 +34,22 @@
  clear: both;
 }

-.contents-list-image-wrapper {
-  max-width: 30px;
-  position: absolute;
-  top: .2em;
-  left: 0px;
+.list-icon {
+  display:flex;
+  align-items:center;
+}
+
+.list-icon-wrapper {
+  max-width: 1em;
+  max-height: 1em;
+  margin-right: .2em;
  img {
-    max-width: 1.2em;
-    min-width: 1.2em;
+    width: 100%;
+    height: auto;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
-  span {
-    font-size: .7em;
-    display: block;
-    margin-top: 0px;
-    text-align: center;
-    line-height: 1.2;
-  }
 }
+
@@ -2,9 +2,9 @@ aside#toc {
  position: fixed;
  max-width: 280px;
  min-width: 200px;
-  overflow-y: auto;
+  overflow-y: scroll;
  padding: .5em;
-  bottom: 20px;
+  bottom: 40px;
  right: 20px;
  height: auto;
  @include card(1);
@@ -28,24 +28,32 @@ aside#toc {
  }
  @include MQ(XL) {
    box-shadow: none;
-    top: $site-header-height + 20px;
-    left: calc(#{$site-navigation-width} + #{$content-max-width} + 48px);
+    top: $site-header-height;
+    left: calc(#{$site-navigation-width} + #{$content-max-width} + 4em);
    bottom: auto;
    opacity: 1;
+    min-height: calc(100vh - #{$site-header-height});
+    max-height: calc(100vh - #{$site-header-height});
    transform: scale(1);
+    overflow-y:scroll;
+    border-left:1px solid $hugo-gray-light;
+    border-radius:0px;
  }
 }

 nav#TableOfContents {
-  float: left;
  position: relative;
-  overflow-y: scroll;
  margin-bottom: 20px;
+  height:auto;
+  li.active > a > code {
+    color:inherit;
+    font-weight:700;
+  }
  > ul:first-child {
    padding-left: 0px;
    margin-left: 0px;
    margin-top: .5em;
-    margin-bottom: .5em;
+    margin-bottom: 2em;
    > li {
      padding-left: 0px;
      margin-left: 0px;
@@ -55,7 +63,7 @@ nav#TableOfContents {
  ul > li > ul {
    li {
      line-height: 1.2;
-      font-size: .85em;
+      font-size: 16px;
      padding-left: 8px;
      position: relative;
      margin-top: .5em;
@@ -74,6 +82,9 @@ nav#TableOfContents {
              position: absolute;
              left: -8px;
            }
+            code {
+              color:inherit;
+            }
          }
        }
      }
@@ -97,6 +108,7 @@ nav#TableOfContents {
        margin-top: 8px;
        margin-bottom: 0px;
        > li {
+          font-size: 14px;
          a {
            @include MQ(L) {
              &:hover {
@@ -117,7 +129,7 @@ nav#TableOfContents {
              color: $hugo-blue;
              font-weight: 400;
              &::before {
-                border-left: 2px solid $hugo-blue;
+                border-left: 2px solid $hugo-pink;
                left: -16px;
              }
            }
@@ -138,7 +150,7 @@ a#toc-toggle {
 aside#toc + a#toc-toggle {
  display: block;
  position: fixed;
-  bottom: 20px;
+  bottom: 40px;
  right: 20px;
  background-color: $toc-bg-color;
  color: $hugo-white;
@@ -1,36 +1,51 @@
 #site-footer {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  background-color: $hugo-black;
-  min-height: 100px;
-  width: 100%;
-  color: $hugo-white;
-  transition: transform .3s ease-in-out;
-  div {
+  background-color: $site-footer-bg-color;
+  min-height: $site-footer-height;
+  max-height: $site-footer-height;
+  .footer-content {
+    min-height: $site-footer-height;
+    max-height: $site-footer-height;
    display: flex;
-    flex-direction: column;
-    justify-content: center;
    align-items: center;
-    img {
-      max-width: 200px;
-    }
-  }
-  &.navigation-open {
+    justify-content: space-around;
+    width: 90%;
+    color: $hugo-white;
    transition: transform .3s ease-in-out;
-    transform: translateX($site-navigation-width);
-    @include MQ(L) {
-      transform: translateX(0);
+    div {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+      max-height: 100px;
+      margin: 0px;
+      img {
+        max-width: 120px;
+      }
+    }
+    &.navigation-open {
+      transition: transform .3s ease-in-out;
+      transform: translateX($site-navigation-width);
+      @include MQ(L) {
+        transform: translateX(0);
+      }
+    }
+    i.icon-heart:before {
+      color: $hugo-pink;
+    }
+    @include MQ(L) {
+      margin-left: 2em;
    }
-  }
-  i.icon-heart:before {
-    color: $hugo-pink;
  }
  @include MQ(L) {
    width:calc(100% - #{$site-navigation-width});
    margin-left: $site-navigation-width;
  }
+  @include MQ(XL) {
+    &.withtoc {
+      max-width:calc(#{$content-max-width} + 4em);
+    }
+  }
 }

 ul.footer-list {
@@ -38,24 +53,25 @@ ul.footer-list {
  list-style: none;
  margin-left: 0px;
  padding-left: 0px;
+  margin: 0px;
  li a {
    color: $hugo-white;
-    font-size: .9em;
-    display:flex;
-    align-items:center;
+    display: flex;
+    align-items: center;
    &:not(i) {
      font-size: 14px;
    }
    i {
      font-size: 16px;
-      margin-right:.25em;
+      margin-right: .25em;
      &.icon-github:before {
        font-size: 22px;
-        margin-left:0px;
+        margin-left: 0px;
+        margin-right: 2px;
      }
    }
    &:hover {
-      color:$hugo-pink;
+      color: $hugo-pink;
    }
  }
 }
@@ -13,7 +13,6 @@
  display:flex;
  flex-direction:column;
  align-items:center;
-  // justify-content:center;
  &.navigation-open {
    transition: transform .3s ease-in-out;
    transform: translateX(0px);
@@ -21,6 +20,9 @@
  @include MQ(L) {
    transform: translateX(0px);
  }
+  ul li a {
+    display: flex;
+  }
  ul.top-menu {
    margin-top: $site-header-height + 30px;
    // display: inline-block;
@@ -32,7 +34,6 @@
      color: $base-font-color;
      font-weight: $base-font-weight;
      width:100%;
-      display:block;
      &:hover {
        color:$hugo-pink;
      }
@@ -59,12 +60,14 @@
        font-weight: 700;
        + ul.submenu {
          display: block;
-          border-left: 1px solid $hugo-pink;
+          border-left: 2px solid $hugo-pink;
        }
      }
    }
    ul.submenu {
      display: none;
+      margin-left: .4em;
+      padding-left: .5em;
      a.submenu-item-link {
        font-size: 14px;
        &:hover {
@@ -147,7 +150,6 @@
    border: 2px solid $hugo-pink;
  }
 }
-
 .top {
  left: 15%;
  top: 20%;
				`@@ -1 +0,0 @@`
				`<a class="issue-link" href="{{.Site.Params.ghrepo}}issues/{{.Get 0}}">#{{.Get 0}}</a>`
				`@@ -0,0 +1 @@`
				$(document).ready(function(){var a,b=$("#TableOfContents"),d=(b.outerHeight()+15,$("#site-header").height()),e=b.find("a"),f=e.map(function(){var a=$($(this).attr("href"));if(a.length)return a});$(window).scroll(function(b){b.preventDefault();var c=$(window).scrollTop()+$(window).height()==$(document).height(),g=$(this).scrollTop()+d+100,h=f.map(function(){if($(this).offset().top<g)return this});h=h[h.length-1];var i=h&&h.length?h[0].id:"";a!==i&&(a=i,e.parent().removeClass("active").end().filter("[href='#"+i+"']").parent().addClass("active"),history.replaceState({},"",e.filter("[href='#"+i+"']").attr("href"))),c&&(e.parent().removeClass("active"),"active"!==e.last().parent().attr("class")&&e.last().parent().addClass("active"))})});
				`@@ -1 +0,0 @@`
				!function(e,n){function o(e){return"object"===n.type(e)}function i(e){return"string"===n.type(e)&&n.trim(e).length>0}function t(e,n,o,i){i(e[o])\|\|(e[o]=n[o])}n.fn.extend({scrollspy:function(l,s){if(i(l)){var a=s;s=l,l=a}l=n.extend({},r,l),t(l,r,"container",o);var c=n(l.container);if(0===c.length)return this;if(t(l,r,"namespace",i),i(s)&&"DESTROY"===s.toUpperCase())return c.off("scroll."+l.namespace),this;t(l,r,"buffer",n.isNumeric),t(l,r,"max",n.isNumeric),t(l,r,"min",n.isNumeric),t(l,r,"onEnter",n.isFunction),t(l,r,"onLeave",n.isFunction),t(l,r,"onLeaveTop",n.isFunction),t(l,r,"onLeaveBottom",n.isFunction),t(l,r,"onTick",n.isFunction),n.isFunction(l.max)&&(l.max=l.max()),n.isFunction(l.min)&&(l.min=l.min());var u="VERTICAL"===e.String(l.mode).toUpperCase();return this.each(function(){var e=this,o=n(e),i=0,t=!1,r=0;c.on("scroll."+l.namespace,function(){var s=n(this),a={top:s.scrollTop(),left:s.scrollLeft()},f=c.height(),p=l.max,m=l.min,v=u?a.top+l.buffer:a.left+l.buffer;if(0===p&&(p=u?f:c.outerWidth()+o.outerWidth()),v>=m&&p>=v)t\|\|(t=!0,i++,o.trigger("scrollEnter",{position:a}),null!==l.onEnter&&l.onEnter(e,a)),o.trigger("scrollTick",{position:a,inside:t,enters:i,leaves:r}),null!==l.onTick&&l.onTick(e,a,t,i,r);else if(t)t=!1,r++,o.trigger("scrollLeave",{position:a,leaves:r}),null!==l.onLeave&&l.onLeave(e,a),m>=v?(o.trigger("scrollLeaveTop",{position:a,leaves:r}),null!==l.onLeaveTop&&l.onLeaveTop(e,a)):v>=p&&(o.trigger("scrollLeaveBottom",{position:a,leaves:r}),null!==l.onLeaveBottom&&l.onLeaveBottom(e,a));else{var g=c.scrollTop(),L=o.height(),h=o.offset().top;f+g>h&&h>g-L&&(o.trigger("scrollView",{position:a}),null!==l.onView&&l.onView(e,a))}})})}});var r={buffer:0,container:e,max:0,min:0,mode:"vertical",namespace:"scrollspy",onEnter:null,onLeave:null,onLeaveTop:null,onLeaveBottom:null,onTick:null,onView:null}}(window,window.jQuery);