Upgrade highlightjs

Add canonical URL link in header.html

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "assets/scss/font-awesome"]
+	path = assets/scss/font-awesome
+	url = git@github.com:FortAwesome/font-awesome-sass.git

CHANGELOG.md

@@ -1,33 +1,73 @@
 # Changelog
 
-## Version 2.0
+This changelog mainly documented some major changes, updates or fixes (with credits) for reference purposes. It by no means covers all contributors. Nonetheless, to the bottom of my heart, I truly appreciate all of your time and contributions.
 
-* The main styles are refactored and redeveloped using SCSS (see [_static-src/scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss))
+__2018-11__
+
+* Per PR [#56](https://github.com/htr3n/hyde-hyde/commit/5ed13e17400bbc09a342b60fd50cd9fe3e6f1525), Gravatar pics can be used exclusively to `.Site.Params.authorimage` via the parameter `.Site.Params.social.gravatar`
+
+  * ```toml
+    [params.social]
+    	gravatar = "your.email@domain.com"
+    ```
+
+* Fix Hugo demo (issue [#53](https://github.com/htr3n/hyde-hyde/issues/53))
+
+* Fix mobile header (PR [#51](https://github.com/htr3n/hyde-hyde/pull/51): credits to [@gamingrobot](https://github.com/gamingrobot))
+
+* Add Utterances comments (PR [#50](https://github.com/htr3n/hyde-hyde/pull/50): credits to [@gamingrobot](https://github.com/gamingrobot))
+
+__2018-10__
+
+* Enable `hyde-hyde` to work directly with SCSSs instead of generated CSSs (PR [#45](https://github.com/htr3n/hyde-hyde/pull/45): credits to [@jd4no](https://github.com/jd4no))
+* Patch potential vulnerabilities of `target="_blank"` (PR [#48](https://github.com/htr3n/hyde-hyde/pull/48): credits to [@gfrcsd](https://github.com/gfrcsd))
+
+__2018-09__
+
+* Add _Table of Contents_ 
+  * Configure using `.Site.Params.toc` with two possible value: "hugo" (using Hugo `{{ .TableOfContents }}`, and "tocbot" (using [Tocbot](https://tscanlin.github.io/tocbot/)), remove `.Site.Params.toc` to disable TOC
+  * Change [_layouts/partials/header/styles.html_](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/header/styles.html) to check `.Site.Params.toc` and add the corresponding styles
+  * Change [_layouts/partials/page-single/content.html_](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/page-single/content.html )  to add TOC per `.Site.Params.toc`
+  * Add styles [_static-src/scss/hugo-toc.scss_](https://github.com/htr3n/hyde-hyde/blob/v2.0.2/static-src/scss/hugo-toc.scss) and [_static-src/scss/tocbot.scss_](https://github.com/htr3n/hyde-hyde/blob/v2.0.2/static-src/scss/tocbot.scss) that generate `hugo-toc.css` and `tocbot.css`, respectively
+  * Tocbot can be configured in [_layouts/partials/page-single/footer.html_](layouts/partials/page-single/footer.html) with options as described in [its documentation](https://tscanlin.github.io/tocbot/#api)
+
+__2018-07__
+
+* Revise the shortcode ['fig.html'](https://github.com/htr3n/hyde-hyde/blob/master/layouts/shortcodes/fig.html)
+* Rename `header/font-awesome.html` to `header/font-awesome-css.html` and adds [_footer/font-awesome-js.html_](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/footer/font-awesome-js.html), uses Font-Awesome 5 deferred JavaScript loading to reduce CSS rendering blocking
+* Refactor and consolidate all responsive breakpoints and creates a new style  [_\_responsive.scss_](https://github.com/htr3n/hyde-hyde/blob/v2.0.1/static-src/scss/hyde-hyde/_responsive.scss)
+* Refactor portfolio's projects into [_\_project.scss_](https://github.com/htr3n/hyde-hyde/blob/v2.0.1/static-src/scss/hyde-hyde/_project.scss)
+* Refactor styles for a list of posts into [_\_list.scss_](https://github.com/htr3n/hyde-hyde/blob/v2.0.1/static-src/scss/hyde-hyde/_list.scss)
+* Refactor misc. styles into [_\_misc.scss_](https://github.com/htr3n/hyde-hyde/blob/v2.0.1/static-src/scss/hyde-hyde/_misc.scss)
+* Remove  [_\_customised.scss_](https://github.com/htr3n/hyde-hyde/blob/v2.0.0/static-src/scss/hyde-hyde/_customised.scss)
+
+__Version 2.0__
+
+* The main styles are refactored and redeveloped using SCSS (see [_static-src/scss_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/static-src/scss))
   and we no longer need `poole.css` and `hyde.css` because `hyde-hyde.scss` already incorporates relevant elements
-  * `Hyde-hyde` can be customised using [_static-src/scss/hyde-hyde/\_customised.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_customised.scss) and [_static-src/scss/hyde-hyde/\_variables.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_variables.scss) 
-  * To generate `hyde-hyde.css`, please use any SCSS compiler to compile `hyde-hyde.scss`
-* Restructuring/modularising further the layouts (see [_layouts_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts))
+  * `Hyde-hyde` can be customised by changing SCSS styles in [_static-src/scss/hyde-hyde_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/static-src/scss/hyde-hyde) and layouts in [_layouts_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts) 
+  * To generate `hyde-hyde.css`, please use any SCSS compiler to compile the main file  `hyde-hyde.scss`
+* Restructure/modularise further the layouts (see [_layouts_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts))
 * Add '[_Portfolio_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/portfolio)' page inspired by Xiaoying Riley ([@3rdwave_themes](https://twitter.com/3rdwave_themes)) [Developer-Theme](https://github.com/xriley/developer-theme)
-* Setting the main body font to use system fonts (see [_static-src/scss/hyde-hyde/\_variables.css_](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/static-src/scss/hyde-hyde/_variables.css))
+* Change the main body font to use system fonts (see [_\_variables.scss_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/static-src/scss/hyde-hyde/_variables.scss))
 	* In case you prefer Web fonts, just include the template "[web-fonts.html](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/header/web-fonts.html)" to "[header.html](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/header.html)"
-* Switching to main fixed width font [Source Code Pro](https://fonts.google.com/specimen/Source+Code+Pro)
-* Adding OpenGraph and TwitterCard templates (for SEO)
-* Adding '_Related Articles_' (see [_layouts/partials/post-related.html_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/post-related.html))
-* Adding page navigation _NEXT / PREVIOUS_
-* Switching datetime format to `"Jan 02 '06"` in the list of posts (see [_layouts/partials/post-list.html_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/post-list.html)) to save some space
-* Changing styles for links, tags, text
-* Adding some handy shortcodes for `<kbd></kbd>` and `<blockquote></blockquote>`
+* Switch to main fixed width font [Source Code Pro](https://fonts.google.com/specimen/Source+Code+Pro)
+* Add OpenGraph and TwitterCard templates (for SEO)
+* Add '_Related Articles_' (see [_layouts/partials/post-related.html_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/post-related.html))
+* Add page navigation _NEXT / PREVIOUS_
+* Switch datetime format to `"Jan 02 '06"` in the list of posts (see [_layouts/partials/post-list.html_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/post-list.html)) to save some space
+* Change styles for links, tags, text
+* Add some handy shortcodes for `<kbd></kbd>` and `<blockquote></blockquote>`
 * The License under '_Some Rights Reversed_' in the sidebar is switched from [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/) to [Creative Commons Attribution-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-sa/4.0/).
 
-## Version 1.0
+__Version 1.0__
 
 * Color tones and layouts are inspired by [Nate Finch's blog](https://npf.io)
-* Restructuring/modularising the layouts (see [`layouts/_default/baseof.html`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/_default/baseof.html), [`layouts/_default/single.html`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/_default/single.html), [`layouts/_default/list.html`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/_default/list.html) and [`layouts/partials`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/partials/))
-* Using [highlight.js](https://highlightjs.org) for code highlighting
-* Using [Font-Awesome 5](https://fontawesome.com)'s icons
-* Using main font [Fira-Sans](https://fonts.google.com/specimen/Fira+Sans) + fixed width font [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono)
-* Adding [GraphComment](https://graphcomment.com) for replacing the built-in [Disqus](https://disqus.com)
+* Restructure/modularise the layouts (see [`layouts/_default/baseof.html`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/_default/baseof.html), [`layouts/_default/single.html`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/_default/single.html), [`layouts/_default/list.html`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/_default/list.html) and [`layouts/partials`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/partials/))
+* Use [highlight.js](https://highlightjs.org) for code highlighting
+* Use [Font-Awesome 5](https://fontawesome.com)'s icons
+* Use main font [Fira-Sans](https://fonts.google.com/specimen/Fira+Sans) + fixed width font [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono)
+* Add [GraphComment](https://graphcomment.com) for replacing the built-in [Disqus](https://disqus.com)
 * Fork from [Hyde](https://github.com/spf13/hyde) 
-* Adapt to [Nate Finch's blog](https://npf.io)'s colors and fonts.
 * Refactor `basedof.html` and corresponding pages `index.html`, `single.html`, `list.html`
     - define blocks `content` and `footer` that will be fulfilled by each different type of layout.

README.md

@@ -1,27 +1,30 @@
-# hyde-hyde
+[![MIT license](https://img.shields.io/badge/License-MIT-blue.svg?style=flat)](https://github.com/htr3n/hyde-hyde/blob/master/LICENSE.md) ![GitHub release](https://img.shields.io/github/release/htr3n/hyde-hyde.svg) ![GitHub stars](https://img.shields.io/github/stars/htr3n/hyde-hyde.svg) ![GitHub forks](https://img.shields.io/github/forks/htr3n/hyde-hyde.svg) ![GitHub issues](https://img.shields.io/github/issues/htr3n/hyde-hyde.svg) ![GitHub issues closed](https://img.shields.io/github/issues-closed/htr3n/hyde-hyde.svg)
 
-__`Hyde-hyde`__ is a [Hugo](https://gohugo.io)'s theme inspired and derived from @spf13's [Hyde](https://github.com/spf13/hyde.git) and its variant [Nate Finch's blog](https://npf.io). 
+# Hyde-hyde
+
+__`Hyde-hyde`__ is a [Hugo](https://gohugo.io)'s theme inspired and derived from @spf13's [Hyde](https://github.com/spf13/hyde.git) and [Nate Finch's blog](https://npf.io). 
+
+> NOTICE: Maintainers / collaborators seeking: As I'm underwater with my full time job at the moment, I'm actively looking for and welcome any new maintainers or collaborators. If you are interested, comment on [#130](https://github.com/htr3n/hyde-hyde/issues/130) and I can add you to the project. TIA.
 
 ## Breaking Changes
 
 Since version 2.0, __`hyde-hyde`__ has been overhauled and, therefore, might cause some disruptions.
 
-* The main styles are refactored and redeveloped using SCSS (see [_static-src/scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss)),  `poole.css` and `hyde.css` are no longer needed because `hyde-hyde.scss` already incorporates relevant elements (I still keep them there for compatibility)
+* The main styles are refactored and redeveloped using SCSS (see [_assets/scss_](https://github.com/htr3n/hyde-hyde/blob/master/assets/scss)),  `poole.css` and `hyde.css` are no longer needed because `hyde-hyde.scss` already incorporates relevant elements (I still keep them there for reference purpose)
+  * Per PR [#45 by [@jd4no](https://github.com/jd4no), `hyde-hyde` can use SCSSs directly in the templates instead of the generated CSSs. The generated CSSs and the generated resources are still kept in `hyde-hyde` in order to ensure the demo on [Hugo theme site](https://themes.gohugo.io) working.
 * The layouts have been heavily restructured and modularised further (see [_layouts_](https://github.com/htr3n/hyde-hyde/blob/master/layouts))
 * Adding '[_Portfolio_](https://github.com/htr3n/hyde-hyde/blob/master/layouts/portfolio)' page inspired by Xiaoying Riley (@3rdwave_themes) [Developer-Theme](https://github.com/xriley/developer-theme)
 * Switching to use system fonts instead of Web fonts (e.g. privacy issues)
+* Experimenting a collapsible menu in mobile mode
+* Adding _Table of Contents_
+  * Configure using `.Site.Params.toc` with two possible value: "hugo" (using Hugo `{{ .TableOfContents }}`, and "tocbot" (using [Tocbot](https://tscanlin.github.io/tocbot/)), remove `.Site.Params.toc` to disable TOC
+  * Tocbot can be configured in [layouts/partials/page-single/footer.html](layouts/partials/page-single/footer.html) with options as described in [its documentation](https://tscanlin.github.io/tocbot/#api)
 
-For more details, please refer to [CHANGELOG](CHANGELOG.md). 
+For more details, please refer to [CHANGELOG](https://github.com/htr3n/hyde-hyde/blob/master/CHANGELOG.md).  A real site in action can be found [here](https://htr3n.github.io) and its [WIP source](https://github.com/htr3n/htr3n-blog) for reference.
 
-A real site in action can be found [here](https://htr3n.github.io) and its [WIP source](https://github.com/htr3n/htr3n-blog) for reference.
+## Usage
 
-Some screenshots:
-
-![hyde-hyde main screen](https://github.com/htr3n/hyde-hyde/blob/master/images/main.png)
-
-![A post in hyde-hyde](https://github.com/htr3n/hyde-hyde/blob/master/images/post.png)
-
-## Installation
+### Installation
 
 __`Hyde-hyde`__ can be easily installed as many other Hugo themes:
 
@@ -49,28 +52,151 @@ theme = "hyde-hyde"
 theme : "hyde-hyde"
 ```
 
-That's all. You can render your site using `hugo` and see the template in action.
+That's all. You can render your site using `hugo` and see `hyde-hyde` in action.
 
-## Options
+### Options
 
-* __`Hyde-hyde`__ essentially inherits most of Hyde's [options](https://github.com/spf13/hyde#options).
+__`Hyde-hyde`__ essentially inherits most of Hyde's [options](https://github.com/spf13/hyde#options). There are some extra options though
 
-## Customisations
+* `highlightjs = true`: use [highlight.js](https://highlightjs.org) instead of Hugo built-in support for code highlighting
 
-* Most of the newly added customisations are in the files [_static-src/scss/hyde-hyde/\_customised.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_customised.scss) and [_static-src/scss/hyde-hyde/\_variables.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_variables.scss) 
-* The layouts for a single post or a list/table of content in [`hyde-hyde/layouts`](https://github.com/htr3n/hyde-hyde/blob/master/layouts) are modularised and can be changed easily.
+  * `highlightjsstyle="highlight-style"`: only when `highlightjs = true`, please choose one of many _highlight.js_'s [styles](https://highlightjs.org/static/demo).
+  * Since [v2.0.1](https://github.com/htr3n/hyde-hyde/tree/v2.0.1), highlighting for each page can be fine-tuned in the front matter, for example
+    * `highlight = false`  (default `true`)
+    * `highlightjslanguages = ["swift", "objectivec"]` 
+
+* `postNavigation = true|false` (default `true`): Setting to `false` will disable the navigation _Previous Post_/ _Next Post_
+
+* `relatedPosts = false|true` (default `false`): Setting to `true` allows related posts. Please refer [here](https://gohugo.io/content-management/related) for more details on related contents with Hugo.
+
+* `GraphCommentId = "your-graphcomment-id"`: to use [GraphComment](https://graphcomment.com) instead of the built-in [Disqus](https://disqus.com). This option should be used exclusively with `disqusShortname = "disqus-shortname"`.
+
+* `UtterancesRepo = "owner/repo-name"`: to use [Utterances](https://utteranc.es/) instead of the built-in [Disqus](https://disqus.com). This option should be used exclusively with `disqusShortname = "disqus-shortname"`.
+  * `UtterancesIssueTerm = "pathname"` Method for Utterances to match issue's to posts (pathname, url, title, og:title)
+  * `UtterancesTheme = "github-light"` Theme for Utterances (github-light, github-dark)
+
+* `Commento = true`: to use [Commento](https://commento.io/) instead of the built-in [Disqus](https://disqus.com). This option should be used exclusively with `disqusShortname = "disqus-shortname"`.
+  * `CommentoHost = "your-commento-instance"` [Self-hosted Commento](https://docs.commento.io/installation/self-hosting/) instance. This is not required if you're a [Commento.io](https://commento.io) user.
+
+* `[params.social]`: in this section, you can set many social identities such as Twitter, Facebook, Github, Bitbucket, Gitlab, Instagram, LinkedIn, StackOverflow, Medium, Xing, Keybase.
+
+  ```toml
+  [params.social]
+  	twitter = "htr3n"
+  	keybase = "htr3n"
+  	github = "htr3n"
+  	...
+  ```
+  
+*  `include_toc = false`: Setting to `false` in FrontMatter will disable too short TOC data as your want. 
+
+  * Per PR [#56](https://github.com/htr3n/hyde-hyde/commit/5ed13e17400bbc09a342b60fd50cd9fe3e6f1525), Gravatar pics can be used exclusively to `.Site.Params.authorimage` via the parameter `.Site.Params.social.gravatar`
+
+    * ```toml
+      [params.social]
+      	gravatar = "your.email@domain.com"
+      ```
+
+### Customisations
+
+* Most of the customisable SCSS styles in [_assets/scss/hyde-hyde_](https://github.com/htr3n/hyde-hyde/blob/master/assets/scss/hyde-hyde) and Hugo templates in [_hyde-hyde/layouts_](https://github.com/htr3n/hyde-hyde/blob/master/layouts) are modularised and can be altered/adapted easily.
+
+## Portfolio
+
+Since version 2.0+, I added a portfolio page just in case. If you need it, simply add a menu section '_Portfolio_' in `config.toml` as following.
+
+```toml
+[[menu.main]]
+    name = "Portfolio"
+    identifier = "portfolio"
+    weight = xyz
+    url = "/portfolio/"
+```
+
+In the folder `content` , create a subfolder `portfolio` and use the following folder/content structure as reference.
+
+```
+$ tree portfolio
+portfolio
+├── _index.md
+├── p1.md
+├── p1.png
+├── p2.md
+├── p2.png
+    ...
+├── pn.md
+└── pn.png
+```
+
+As I design the section _portfolio_ to be rendered as _list_,  `_index.md` can be used to set the title for your portfolio (you can read more about `_index.md` [here](https://gohugo.io/content-management/organization/#index-pages-index-md)). For instance, when I want to set the title of my portfolio "_Projects_", the front matter of `_index.md` will be:
+
+```markdown
+---
+title: 'Projects'
+---
+```
+The remaining of `_index.md` will be ignored.
+
+For each project, just create a Markdown file with the following parameters in the front matter:
+
+```markdown
+---
+title: "Project P1's Title"
+description: "A short description"
+date: '2018-01-02'
+link: 'https://project-p1.com'
+screenshot: 'p1.png'
+layout: 'portfolio'
+featured: true
+---
+Here is a longer summary of the project. You can write as long as you wish.
+```
+
+> __Note__:
+>
+> * `date` is important to sort the project chronologically
+> * `layout 'portfolio'` is important as you don't want your project's page appear in the list of posts in the main page of your Web site but only in the _Portfolio_ ;)
+> * `featured: true` : when you want to show a project as featured project. It is default to `false`. Note that only one project should be marked `featured: true` , otherwise, the result could be random as [the Hugo template](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/portfolio/content.html) will take the first one.
+> * The body of the Markdown file will be the summary of the project.
+
+If you want to adjust the portfolio page to your needs, please have a look at the [main template](https://github.com/htr3n/hyde-hyde/blob/master/layouts/portfolio/list.html), that uses this [partial template](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/portfolio/content.html) and [this SCSS style](https://github.com/htr3n/hyde-hyde/blob/master/assets/scss/hyde-hyde/_project.scss).
+
+### Posts in home page
+By default hugo will show in your home page the most populated section.
+This means that if you have more projects than posts, by default your home page will list your projects instead of your posts.
+If you want to change this behaviour you can change the [mainsections](https://gohugo.io/functions/where/#mainsections).
+For example, for the [exampleSite](https://github.com/htr3n/hyde-hyde/tree/master/exampleSite) this is how you should change the `config.toml` file:
+```
+[params]
+    mainSections = ["posts"]
+```
+
+## Some Screenshots
+
+### Main page
+
+![hyde-hyde main screen](https://github.com/htr3n/hyde-hyde/raw/master/images/main.png)
+
+### A post
+
+![A post in hyde-hyde](https://github.com/htr3n/hyde-hyde/raw/master/images/post.png)
+
+### Portfolio
+
+![Portfolio hyde-hyde](https://github.com/htr3n/hyde-hyde/raw/master/images/portfolio.png)
+
+
+
+### Mobile Mode with Collapsible Menu
+
+<img src='https://github.com/htr3n/hyde-hyde/raw/master/images/mobile.png' alt='hyde-hyde in mobile mode' width='60%'>
 
 ## Author(s)
 
-### Original Developed by Mark Otto
+* Original developed by [Mark Otto](https://github.com/mdo)
 
-- <https://github.com/mdo>
-- <https://twitter.com/mdo>
-
-### Hugo's Hyde Ported by Steve Francia
-- <https://github.com/spf13>
-- <https://twitter.com/spf13>
+* Hugo's `hyde` ported by [Steve Francia](https://github.com/spf13)
 
 ## License
 
-Open sourced under the [MIT license](LICENSE.md).
+Open sourced under the [MIT license](LICENSE.md)

archetypes/default.md

@@ -5,6 +5,8 @@ lastmod: {{ .Date }}
 tags : [ "dev", "hugo", "hyde-hyde"]
 categories : [ "dev" ]
 layout: post
+type:  "post"
+highlight: false
 draft: true
 ---
 

assets/scss/hugo-toc.scss

@@ -0,0 +1,43 @@
+// Hugo {{ .TableOfContents }}
+$toc-background-color: #eee;
+$toc-font-size: .9rem;
+
+.toc-wrapper {
+  font-size: $toc-font-size;
+  padding: 0.5em 0.5em 0.5em 0em;
+  background: $toc-background-color;
+  label {
+    background: url(/img/menu-close-dark.svg) no-repeat right center;
+    display: block;
+    cursor: pointer;
+    padding-left: 1em;
+  }
+}
+#TableOfContents {
+  overflow: hidden;
+  margin-top: 0;
+  max-height: 100%;
+  > ul {
+    list-style-type: none;
+    padding-left: 0;
+    > li ul {
+      list-style-type: none;
+      padding-left: 1em;
+    }
+  }
+}
+
+input#tocToggle {
+  display: none;
+  + label {
+    font-weight: bold;
+  }
+  &:checked {
+    + label {
+      background-image: url(/img/menu-open-dark.svg);
+    }
+    ~ #TableOfContents {
+      max-height: 0;
+    }
+  }
+}

assets/scss/hyde-hyde.scss

@@ -0,0 +1,19 @@
+@import "hyde-hyde/variables";
+// poole
+@import "poole/base";
+@import "poole/layout";
+@import "poole/posts";
+// hyde-hyde
+@import 'hyde-hyde/mixins';
+@import 'hyde-hyde/base';
+@import 'hyde-hyde/sidebar';
+@import 'hyde-hyde/list';
+@import 'hyde-hyde/post';
+@import 'hyde-hyde/code';
+@import 'hyde-hyde/gist';
+@import 'hyde-hyde/navigation';
+@import 'hyde-hyde/taxonomies';
+@import 'hyde-hyde/project';
+@import 'hyde-hyde/responsive';
+@import 'hyde-hyde/misc';
+@import 'hyde-hyde/theme';

assets/scss/hyde-hyde/_base.scss

@@ -0,0 +1,140 @@
+* {
+	box-sizing: border-box;
+}
+
+html {
+	-webkit-text-size-adjust: 100%; // for iOS
+	box-direction: normal;
+	font-family: $root-font-family;
+	font-size: $small-device-font-size;
+	line-height: $root-line-height;
+	font-weight: $root-font-weight;
+}
+
+html, body {
+	margin: 0;
+	padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4 {
+	font-weight: $heading-font-weight;
+}
+
+h1 {
+	font-size: $h1-font-size;
+	line-height: $h1-line-height;
+	margin-bottom: 1rem;
+}
+
+h2 {
+	font-size: $h2-font-size;
+	margin-bottom: .5rem;
+}
+
+h3 {
+	font-size: $h3-font-size;
+}
+
+h4 {
+	font-size: $h4-font-size;
+}
+
+h5 {
+	font-size: $h5-font-size;
+}
+
+figure {
+	max-width: 100%;
+	margin: 0;
+	padding: 0;
+}
+
+%quotebox {
+	padding: .8889rem;
+	margin-top: 1rem;
+	margin-left: 0px;
+	margin-right: 0px;
+	//border-radius: 6px;
+	border-left: 6px solid;
+	border-right: 6px solid transparent;
+	border-right-width: 6px;
+	border-right-style: solid;
+	border-right-color: rgba(0, 0, 0, 0) transparent;
+	color: #7a7a7a;
+}
+
+blockquote {
+	background-color: #fafafa;
+	border-left-color: #e6e6e6;
+	@extend %quotebox;
+}
+
+.important {
+	background-color: #fbf8e8;
+	border-left-color: #fee450;
+	@extend %quotebox;
+}
+
+.warning {
+	background-color: #f2dbdc;
+	border-left-color: #ae272f;
+	@extend %quotebox;
+}
+
+kbd {
+	font-family: $root-font-family;
+	padding: 2px 7px;
+	border: 1px solid $gray-4;
+	font-size: 0.8em;
+	line-height: 1.4;
+	background-color: #f3f3f3;
+	color: $gray-9;
+	box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset;
+	border-radius: 3px;
+	display: inline-block;
+	text-shadow: 0 1px 0 $white;
+	white-space: nowrap;
+}
+
+a {
+	//border-bottom: 1px dotted;
+	color: $link-color;
+	text-decoration: none;
+	word-wrap: break-word;
+	&.sidebar-nav-item {
+		&:hover {
+			@include link-no-decoration();
+		}
+		&:focus {
+			@include link-no-decoration();
+		}
+	}
+	&:focus {
+		@include link-hover();
+		&.tag {
+			@include link-no-decoration();
+		}
+	}
+	&:hover {
+		@include link-hover();
+		&.tag {
+			@include link-no-decoration();
+		}
+	}
+	&.tag {
+		@include link-no-decoration();
+	}
+	&.read-more-symbol {
+		text-decoration: none;
+		@include link-no-decoration();
+	}
+}
+
+
+.content {
+	padding-bottom: 2rem;
+	padding-top: 2rem;
+}

assets/scss/hyde-hyde/_code.scss

@@ -0,0 +1,58 @@
+pre {
+	//border: 1px solid $gray-1;
+	//border-radius: 2px;
+	tab-size: 2;
+	//width: 111%;
+	//margin-left: -11%;
+	//padding-left: 9%;
+	//padding-right: 2%;
+	//background: #29292e;
+	code {
+		white-space: pre-wrap;
+	}
+}
+
+%code-font {
+	font-family: $code-font-family;
+	font-size: $code-font-size;
+}
+
+%code-in-rounded-box {
+	border-radius: 4px;
+	padding: 2px 4px;
+	color: #bf616a;
+	background-color: #f9f2f4;
+}
+
+%code-style-codersblock {
+	padding: 2px 4px;
+	border: 1px dotted #adb5db;
+	background-color: $gray-1;
+}
+
+%code-style-npf {
+	padding: .1em .1em;
+	color: #ab5979;
+	border-radius: 3px;
+}
+
+a {
+	code {
+		color: $link-color;
+	}
+}
+
+code {
+	@extend %code-font;
+	@extend %code-style-npf;
+}
+
+// highlight.js
+.hljs {
+	font-family: $code-font-family;
+	font-size: $code-fence-font-size;
+	line-height: $root-line-height;
+	white-space: pre;
+	border: 1px solid $gray-3;
+	border-radius: 4px;
+}

assets/scss/hyde-hyde/_gist.scss

@@ -0,0 +1,56 @@
+// https://codersblock.com/blog/customizing-github-gists
+/*
+body .gist {
+	.gist-file {
+		margin-bottom: 0;
+		border-radius: 0;
+	}
+	.gist-data {
+		border-bottom: none;
+		border-radius: 0;
+		background-color: $gray-3;
+	}
+	.blob-wrapper {
+		border-radius: 0;
+	}
+	.highlight {
+		background-color: transparent;
+		font-family: Droid Sans Mono, monospace;
+		font-size: 14px;
+		td {
+			border: none;
+			padding: 5px 15px !important;
+			line-height: 1;
+			font-family: inherit;
+			font-size: inherit;
+		}
+	}
+	tr {
+		&:first-child td {
+			padding-top: 15px !important;
+		}
+		&:last-child td {
+			padding-bottom: 15px !important;
+		}
+	}
+	.blob-num {
+		color: #ced4da;
+		background-color: #495057;
+		pointer-events: none;
+	}
+	.gist-meta {
+		//display: none;
+	}
+}
+*/
+body .gist {
+	.gist-data {
+		background-color: $gray-0;
+	}
+	.highlight {
+		background-color: transparent;
+	}
+	td {
+		border: none;
+	}
+}

assets/scss/hyde-hyde/_list.scss

@@ -0,0 +1,27 @@
+// for the list of posts
+
+.section__title {
+	font-size: $section__title-font-size;
+}
+
+.post-list__item {
+	margin-bottom: 3em;
+}
+
+.item__title--big {
+	display: block;
+	font-size: $item__title-big-font-size;
+	line-height: 1.25;
+}
+
+.item__title--small {
+	font-size: 1rem;
+}
+
+.item__date {
+	color: $item__date-color;
+	display: block;
+	font-size: $item__date-font-size;
+	margin-bottom: .2rem;
+	margin-top: .2rem;
+}

assets/scss/hyde-hyde/_misc.scss

@@ -0,0 +1,25 @@
+// some misc styles
+.element--center {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.menu {
+	background-color: #f3f3f3;
+	color: #333;
+	border-radius: 2px;
+	padding: 1px 5px;
+}
+
+.text-center {
+	text-align: center;
+}
+
+.pull-right {
+	float: right;
+}
+
+.draft {
+    color: #999 !important;
+}

assets/scss/hyde-hyde/_mixins.scss

@@ -10,3 +10,17 @@
 	-ms-transform: 		 rotate($deg);
 	-o-transform: 		 rotate($deg);
 }
+
+@mixin link-no-decoration() {
+	border-style: none;
+	text-decoration: none;
+}
+
+@mixin link-hover() {
+	color: $link-hover-color;
+	border-bottom: 1px dotted $gray-4;
+	text-decoration: none;
+	background: transparent;
+	background-color: transparent;
+	word-wrap: break-word;
+}

assets/scss/hyde-hyde/_navigation.scss

@@ -0,0 +1,66 @@
+ul.pagination {
+  list-style: none;
+  li.page-item {
+    display: inline-block;
+    a {
+      padding: 0.05em 0.4em;
+    }
+    &.active {
+      a {
+        color: $navigation-color;
+        border-bottom: 3px solid $navigation-color;
+      }
+    }
+  }
+}
+
+.navigation {
+  max-width: calc(100% - 0px);
+  margin: 0 auto;
+  margin-top: 60px;
+  a {
+    font-size: 0.8rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 15px;
+    color: $navigation-color;
+    border: 2px solid $navigation-color;
+    line-height: 1.25;
+    text-transform: uppercase;
+    &:hover {
+      padding: 14px;
+      border-width: 3px;
+    }
+    &:nth-child(2) {
+      margin-top: 10px;
+    }
+    &:first-child:last-child {
+      width: 100%;
+    }
+  }
+  .fa {
+    font-size: 0.8rem;
+  }
+  .navigation-prev {
+    text-align: left;
+    .fa {
+      padding-right: 10px;
+    }
+    .navigation-tittle {
+      padding-left: 4px;
+    }
+  }
+  .navigation-next {
+    text-align: right;
+    .fa {
+      padding-left: 10px;
+    }
+    .navigation-tittle {
+      padding-right: 4px;
+    }
+  }
+}
+.navigation-single a {
+  text-transform: none;
+}

assets/scss/hyde-hyde/_post.scss

@@ -0,0 +1,42 @@
+.post__meta {
+  font-size: $meta-font-size;
+  color: $meta-color;
+  font-weight: $meta-font-weight;
+}
+
+.post__category {
+  font-weight: bold;
+}
+
+.post__tag {
+  background: $tag-background-color;
+  border-radius: 2px;
+  color: $tag-color;
+  font-size: $tag-font-size;
+  font-weight: bold;
+  padding: 2px 6px;
+}
+
+.post__title {
+  background-image: -webkit-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For Chrome and Safari */
+  background-image:    -moz-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For old Fx (3.6 to 15) */
+  background-image:     -ms-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For pre-releases of IE 10*/
+  background-image:      -o-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For old Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to right, $gradient-color-1, $gradient-color-2); /* Standard syntax; must be last */
+  color:transparent;
+  -webkit-background-clip: text;
+  background-clip: text; 
+ }
+ 
+.post__subtitle {
+  display: block;
+  font-size: $post__subtitle-font-size;
+  font-style: italic;
+  padding: 0 0 1rem 0;
+}
+
+#references {
+  li {
+    font-size: 0.9rem;
+  }
+}

assets/scss/hyde-hyde/_print.scss

@@ -0,0 +1,53 @@
+@page {
+  margin: 1cm !important;
+}
+body {
+  font-size: $small-device-font-size;
+  line-height: 1.3;
+  background: #fff;
+  color: #000;
+}
+
+.content {
+  margin: 0 auto;
+  width: 100%;
+  float: none;
+  display: initial;
+}
+
+.container {
+  width: 100%;
+  float: none;
+  display: initial;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin: 0 auto;
+}
+img {
+  max-width: 100%;
+}
+blockquote,
+ul {
+  margin: 0;
+}
+
+.sidebar {
+  display: none !important;
+}
+
+.navigation {
+  display: none !important;
+}
+
+.post__related {
+  display: none !important;
+}
+
+.gist-meta {
+  display: none !important;
+}
+
+#disqus_thread {
+	display: none !important;
+}
+

assets/scss/hyde-hyde/_project.scss

@@ -0,0 +1,93 @@
+.portfolio__content {
+  section {
+    margin-bottom: 1.765rem;
+  }
+}
+
+.portfolio__featured-project {
+  margin: 0 0 1.765rem;
+  img {
+    margin: 0 0 1rem;
+    box-shadow: 1px 1px $gray-2;
+  }
+}
+
+.project__image {
+  border: 1px solid $gray-2;
+  box-shadow: 1px 1px $gray-2;
+}
+
+.project__title {
+  margin-top: 1.765rem;
+  letter-spacing: 1px;
+  font-size: $project__title-font-size;
+}
+
+%subtitle {
+  font-style: $project__subtitle-font-style;
+  color: $project__subtitle-color;
+  display: block;
+  margin-top: 0.5rem;
+  margin: 0 0 1rem;
+}
+
+.project__subtitle-big {
+  @extend %subtitle;
+  font-size: $project__subtitle-font-size-big;
+}
+
+.project__subtitle-small {
+  @extend %subtitle;
+  font-size: $project__subtitle-font-size-small;
+}
+
+.project__featured-image {
+  position: relative;
+}
+
+.project__summary {
+  margin-bottom: 1.765rem;
+  text-align: left;
+}
+
+.divider {
+  margin-bottom: 3.5rem;
+}
+.row-space {
+  margin-bottom: 1rem;
+}
+
+// only needs some pieces from Bootstrap
+%col_extend {
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+  position: relative;
+}
+
+.row {
+  margin-left: -15px;
+  margin-right: -15px;
+}
+.col-xs-12 {
+  width: 100%;
+  @extend %col_extend;
+}
+.col-sm-4 {
+  @extend %col_extend;
+}
+.col-md-4 {
+  @extend %col_extend;
+}
+.col-sm-8 {
+  @extend %col_extend;
+}
+.col-md-8 {
+  @extend %col_extend;
+}
+
+.img-responsive {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}

assets/scss/hyde-hyde/_responsive.scss

@@ -0,0 +1,162 @@
+// mobile ~320..480px
+// 320px ~ 16rem/16px ~ 18.8235/17px ~ 17.7778/18px
+// 480px ~ 30rem/16px ~ 28.2353rem/17px ~ 26.6667rem/18px
+@media (min-width: 320px) and (max-width: 767px) {
+  html,
+  body {
+    font-size: $small-device-font-size;
+  }
+  .sidebar {
+    li {
+      padding: .1rem 0;
+    }
+    .container {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+  .hidden-tablet {
+    display: none;
+  }
+  .sidebar-about,
+  .copyright {
+    display: none;
+  }
+  .sidebar {
+    margin: 0;
+    padding: 0;
+  }
+  .menu-content {
+    padding: 0 0 0 0px;
+    max-height: 0;
+    overflow: hidden;
+    margin-top: 0; }
+  .collapsible-menu {
+    padding: 0px 0px;
+  }
+  .collapsible-menu ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  .collapsible-menu li {
+    display: block;
+  }
+  .collapsible-menu a {
+    text-decoration: none;
+    cursor: pointer; }
+  .collapsible-menu label {
+    background: url(/img/menu-open.svg) no-repeat left center;
+    background-position: 1.5rem;
+    display: block;
+    cursor: pointer;
+    color: #fff;
+    padding: 10px 0 10px 0px; }
+
+  input#menuToggle {
+    display: none;
+  }
+  input#menuToggle + label {
+    font-weight: bold;
+  }
+
+  input#menuToggle:checked + label {
+    background-image: url(/img/menu-close.svg);
+    background-position: 1.5rem;
+    color: #fff;
+  }
+
+  input#menuToggle:checked ~ .menu-content {
+    max-height: 100% !important;
+  }
+  .social {
+    padding: 1em 0 1em 0;
+  }
+}
+
+// tablet/medium device ~768px+
+// 768px ~ 48em/16px ~ 45.1765em/17px ~ 42.6667/18px
+@media (min-width: 768px) {
+  html,
+  body {
+    font-size: $small-device-font-size;
+  }
+  .sidebar {
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    text-align: left;
+    top: 0;
+    width: $sidebar-width;
+  }
+  .sidebar-sticky {
+    left: 1rem;
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+  }
+  .content {
+    margin-left: $content-margin-left;
+    margin-right: $content-margin-right;
+    max-width: $content-max-width;
+  }
+  .layout-reverse {
+    .sidebar {
+      left: auto;
+      right: 0;
+    }
+    .content {
+      margin-left: $content-margin-right;
+      margin-right: $content-margin-left;
+    }
+  }
+  .col-sm-8 {
+    width: 66.66666667%;
+  }
+  .project__title {
+    margin-top: 0.2rem;
+  }
+  .navigation {
+    display: flex;
+    justify-content: space-between;
+    a {
+      width: calc(50% - 10px);
+      &:nth-child(2) {
+        margin-top: 0;
+      }
+    }
+  }
+  input#menuToggle,
+  input#menuToggle + label {
+    display: none;
+  }
+}
+
+// Large devices (laptops/desktops, 992px and up)
+// ~ 62rem/16px ~ 58.3529rem/17px ~ 55.1111rem/18px
+@media (min-width: 992px) {
+  html,
+  body {
+    font-size: $large-device-font-size;
+  }
+  .layout-reverse .content {
+    margin-left: 4rem;
+    margin-right: 22rem;
+  }
+  .col-md-4 {
+    float: left;
+    width: 33.33333333%;
+  }
+  .col-md-8 {
+    float: left;
+    width: 66.66666667%;
+  }
+  .portfolio-container {
+    width: 68rem;
+  }
+}
+
+// Large device ~1024px
+// 1024px ~  64rem/16px ~ 60.2353rem/17px 56.8889rem/18px
+@media (min-width: 1024px) {
+  // styles
+}

assets/scss/hyde-hyde/_sidebar.scss

@@ -0,0 +1,88 @@
+.sidebar {
+  background-color: $sidebar-color;
+  color: rgb(255, 255, 255);
+  color: rgba(255, 255, 255, 0.5);
+  padding: 2rem 1rem;
+  text-align: center;
+  a {
+    color: $gray-1;
+    border: none;
+    &:hover {
+      color: $link-color;
+    }
+    &:focus {
+      color: $link-color;
+    }
+  }
+  .sidebar-about {
+    text-align: center;
+  }
+  .author-image {
+    display: block;
+    margin-top: 4px;
+  }
+}
+
+.sidebar-nav {
+  text-align: center;
+  list-style: none;
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+  padding-left: 0;
+}
+
+.sidebar-nav-item {
+  display: block;
+  line-height: 1.75;
+  .active {
+    font-weight: bold;
+  }
+}
+.site__title {
+  font-size: $site__title-font-size;
+  margin-bottom: 0.5rem;
+  a:hover {
+    border: none;
+  }
+}
+
+.site__description {
+  font-size: 1.285rem;
+  font-weight: 300;
+}
+
+.social {
+  text-align: center;
+  a {
+    padding: 0 4px;
+    @include link-no-decoration();
+  }
+}
+
+.img--circle {
+	border-radius: 50%;
+}
+
+.img--headshot {
+	height: 115px;
+	width: 115px;
+}
+
+.img--caption {
+	font-style: italic;
+}
+
+%small-center-text {
+  font-size: $font-scale-dot7;
+  line-height: 1.1rem;
+  text-align: center;
+}
+
+.copyright {
+  padding-top: 1rem;
+	@extend %small-center-text;
+}
+.builtwith {
+  padding-top: .2rem;
+  @extend %small-center-text;
+}

assets/scss/hyde-hyde/_taxonomies.scss

@@ -0,0 +1,37 @@
+.badge-category,
+a.badge-category {
+  color: #fff !important;
+  background-color: #0088cc;
+  &:hover, &:focus {
+    color: #0088cc !important;
+    background: transparent;
+    background-color: transparent;
+    text-decoration: none;
+    border-bottom: none;
+  }
+}
+
+.badge-tag,
+a.badge-tag {
+  color: #fff !important;
+  background-color: #7766cc;
+  &:hover, &:focus {
+    color: #7766cc !important;
+    background: transparent;
+    background-color: transparent;
+    text-decoration: none;
+    border-bottom: none;
+  }
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.25em 0.4em;
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25rem;
+}

assets/scss/hyde-hyde/_variables.scss

@@ -0,0 +1,112 @@
+$gray-0: #fafafa;
+$gray-1: #f9f9f9;
+$gray-2: #eee;
+$gray-3: #ddd;
+$gray-4: #ccc;
+$gray-5: #bbb;
+$gray-6: #878787;
+$gray-7: #767676;
+$gray-8: #515151;
+$gray-9: #313131;
+
+$white: #fff;
+$red: #ac4142;
+$orange: #d28445;
+$yellow: #f4bf75;
+$green: #90a959;
+$cyan: #75b5aa;
+$blue: #268bd2;
+$brown: #8f5536;
+
+//https://www.client9.com/css-system-font-stack-sans-serif-v3
+$root-font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Droid Sans", "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
+
+// poole's variables
+$root-font-size: 17px;
+$root-font-weight: 400;
+// golden ratio https://grtcalculator.com
+// 18px @ 33 px, 20px @ 33 px ~ 1.667em
+$root-line-height: 1.667em;
+
+$body-color: $gray-8;
+$body-bg: #fff;
+
+$border-color: #e5e5e5;
+
+$large-breakpoint: 38em;
+$large-font-size: 19px;
+$font-scale-dot7: .7rem;
+$font-scale-dot8: .8rem;
+//
+
+// hyde-hyde
+$small-device-font-size: $root-font-size;
+$large-device-font-size: $large-font-size;
+
+// https://www.client9.com/css-system-font-stack-monospace-v2
+$code-font-family: "SFMono-Regular", "SF-Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Roboto Mono", "Ubuntu Mono", "Courier New", Courier, monospace;
+$code-font-size: .9rem;
+$code-fence-font-size: .8rem;
+//$code-color: #bf616a;
+//$code-background-color: #f9f2f4;
+$code-line-height: 1.4;
+
+// links
+$link-color: $blue;
+$link-hover-color: $body-color;
+
+// section
+$section__title-font-size: 2.15rem;
+
+// post
+$post__subtitle-font-size: 1.5rem;
+$gradient-color-1: #ff2c2c;
+$gradient-color-2: #7a5e91;
+
+// post meta
+$meta-font-size: $font-scale-dot8;
+$meta-font-weight: 300;
+$meta-color: $gray-6;
+
+// post tags
+$tag-background-color: $gray-2;
+$tag-color: #606570;
+$tag-font-size: .667rem;
+
+// list of posts
+$item__date-color: #9a9a9a;
+$item__date-font-size: 1rem;
+$item__title-big-font-size: 1.785rem;
+
+// heading
+$heading-font-weight: 400;
+$h1-font-size: 2.15rem;
+$h1-line-height: 1.25;
+$h2-font-size: 1.85rem;
+$h3-font-size: 1.5rem;
+$h4-font-size:1.3rem;
+$h5-font-size:1rem;
+
+
+// sidebar
+$sidebar-color: #300030;
+$sidebar-width: 16rem;
+$site__title-font-size: 2.5rem;
+$copyright-font-size: $font-scale-dot7;
+
+// content
+$content-max-width: 38rem; // @ ~70 CPL
+$content-margin-left: $sidebar-width + 2rem;
+$content-margin-right: 2rem;
+
+// navigation
+$navigation-color: #c2255c;
+
+// portfolio
+$project__title-font-size: $h2-font-size;
+$project__subtitle-font-size-big: $h3-font-size;
+$project__subtitle-font-size-small: $h4-font-size;
+$project__subtitle-font-style: italic;
+$project__subtitle-color: #778492;
+$ribbon-color: #276582;
+$ribbon-background-color: #479fc8;

assets/scss/print.scss

@@ -0,0 +1,2 @@
+@import "hyde-hyde/variables";
+@import 'hyde-hyde/print';

assets/scss/tocbot.scss

@@ -0,0 +1,31 @@
+@import 'hugo-toc';
+
+.toc {
+  font-size: $toc-font-size;
+  overflow-y: auto;
+  background: $toc-background-color;
+  padding-left: 0rem;
+  padding-top: 1em;
+  > .toc-list {
+    overflow: hidden;
+    position: relative;
+    li {
+      list-style: none;
+    }
+  }
+}
+.toc-list {
+  margin: 0;
+  padding-left: 1rem;
+}
+.is-collapsible {
+  max-height: 1000px;
+  overflow: hidden;
+}
+.is-collapsed {
+  max-height: 0;
+}
+.is-position-fixed {
+  position: fixed;
+  top: 0;
+}

exampleSite/config.toml

@@ -2,6 +2,7 @@
 baseurl = "https://example.com/"
 languageCode = "en"
 
+title = "Title"
 theme = "hyde-hyde"
 
 ## Hugo Built-in Features
@@ -9,6 +10,10 @@ theme = "hyde-hyde"
 # googleAnalytics = "your-google-analytics-id"
 # enableRobotsTXT = true
 
+# summarylength = 30
+
+#paginate = 5
+
 ## Site Settings
 [params]
     author = "Author"
@@ -16,12 +21,27 @@ theme = "hyde-hyde"
     # description = "..."
     authorimage = "/img/hugo.png"
     dateformat = "Jan 2, 2006"
+
+    # sidebar, copyright & license
+    #logoimage = "/img/hugo.png"
+    copyright = "htr3n"
+    since = 2019
+    license = "CC BY-SA 4.0"
+    licenseURL = "https://creativecommons.org/licenses/by-sa/4.0"
+    showBuiltWith = true
+
+    # https://highlightjs.org
     highlightjs = true
-    # highlightjsstyle = "github"
-    # please choose either GraphComment or Disqus
-    # GraphCommentId = "your-graph-comment-id"
-    # layoutReverse = true
-    # sidebarSticky = true
+    highlightjsstyle = "github"
+    
+    # please choose either GraphComment or Disqus or Utterances
+    #GraphCommentId = "..."
+    #UtterancesRepo = "..." # https://utteranc.es/
+    #UtterancesIssueTerm = "..." # pathname, url, title, og:title
+    #UtterancesTheme = "..." # github-light or github-dark
+
+    # Table of contents
+    #toc = none, "hugo", or "tocbot"
 
 ## Social Accounts
 [params.social]
@@ -31,8 +51,13 @@ theme = "hyde-hyde"
     linkedin = "<username>"
     twitter = "<username>"
     facebook = "<username>"
+    microblog = "<username>"
     stackoverflow = "<username>"
+    telegram = "<username>"
+    # orcid = "<xxxx-xxxx-xxxx-xxxx>"
     email = "your-email@example.com"
+    # gravatar = "your-email@example.com"
+    # pgpkey = "<path-to-your-key-in-/static>"
 
 ## Main Menu
 [[menu.main]]
@@ -40,8 +65,13 @@ theme = "hyde-hyde"
     weight = 100
     identifier = "posts"
     url = "/posts/"
+[[menu.main]]
+    name = "Portfolio"
+    identifier = "portfolio"
+    weight = 200
+    url = "/portfolio/"
 [[menu.main]]
     name = "About"
     identifier = "about"
-    weight = 200
+    weight = 300
     url = "/about/"

exampleSite/content/portfolio/_index.md

@@ -0,0 +1,3 @@
+---
+title: 'Projects'
+---

exampleSite/content/portfolio/dera.md

@@ -0,0 +1,10 @@
+---
+title: "DERA"
+description: "Dynamic Event-Driven Actors"
+link: https://github.com/htr3n/dera
+screenshot: dera.png
+date: '2018-06-21'
+layout: 'portfolio'
+---
+
+This is a Java reference implementation of dynamic event-driven actors runtime aiming at providing adequate abstraction levels and mechanisms for modelling and developing (distributed) event-based systems. DERA leverages the intrinsic loose coupling of event-driven communication styles to support various kinds of _run-time evolution and adaptation_ (i.e., enabling run-time flexibility) while _minimizing the non-deterministic nature of traditional event-based applications_ (i.e., supporting formal analysis).

exampleSite/content/portfolio/hyde-hyde.md

@@ -0,0 +1,11 @@
+---
+title: "hyde-hyde"
+description: "A simple and cool Hugo theme"
+date: '2018-01-27'
+link: 'https://github.com/htr3n/hyde-hyde'
+screenshot: 'hyde-hyde.png'
+layout: 'portfolio'
+featured: 'true'
+---
+
+[_Hyde-hyde_](https://github.com/htr3n/hyde-hyde) is a responsive [Hugo](https://gohugo.io) theme inspired by @spf13's [Hyde](https://github.com/spf13/hyde.git) and its variant [Nate Finch's blog](https://npf.io). It was heavily restructured with modularised page layouts for easier maintenance and modification. _Hyde-hyde_ offers awesome features such as nice colour tone, [code highlighting](https://highlightjs.org), [Font-Awesome 5's sidebar icons](https://fontawesome.com)), a cool portfolio page, more choices for commenting (e.g. [GraphComment](https://graphcomment.com), [Disqus](https://disqus.com)).

exampleSite/content/portfolio/laramod.md

@@ -0,0 +1,10 @@
+---
+title: "LaraMod"
+description: "A modularised Laravel framework"
+link: https://github.com/htr3n/laramod
+screenshot: laramod.png
+date: '2018-01-19'
+layout: portfolio
+---
+
+[LaraMod](https://github.com/htr3n/laramod) is another modularisation effort to systematically organising a [Laravel](https://laravel.com) based project. The idea stems from my struggle to structure a Laravel-based project so that I can work effectively on individual modules whilst keeping Laravel codebase intact as much as possible and also keeping the project's codebase separate from Laravel.

exampleSite/content/posts/creating-a-new-theme.md

@@ -3,6 +3,8 @@ author: "Michael Henderson"
 date: 2014-09-28
 linktitle: Creating a New Theme
 title: Creating a New Theme
+categories: [ "Development", "hugo" ]
+tags: ["hugo", "theme", "html", "css"]
 weight: 10
 ---
 

exampleSite/content/posts/migrate-from-jekyll.md

@@ -3,6 +3,8 @@ date: 2014-03-10
 linktitle: Migrating from Jekyll
 title: Migrate to Hugo from Jekyll
 weight: 10
+categories: [ "Development", "golang" ]
+tags: ["hugo", "jekyll", "migration"]
 ---
 
 ## Move static content to `static`

layouts/404.html

@@ -1,11 +1,11 @@
-{{ define "header" -}}
+{{ define "header" }}
   {{ partial "header.html" . }}
-{{- end }}
+{{ end }}
 
-{{ define "content" -}}
+{{ define "content" }}
 <h1>404: Page not found</h1>
 <p class="lead">Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. <a href="{{ .Site.BaseURL }}">Head back home</a> to try finding it again.</p>
-{{- end }}
+{{ end }}
 
-{{ define "footer" -}}
-{{- end }}
+{{ define "footer" }}
+{{ end }}

layouts/_default/baseof.html

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="{{ .Site.LanguageCode }}">
-    {{ block "header" . -}}{{- end }}
-    <body {{- if .Site.Params.themeColor }}class="{{ .Site.Params.themeColor }} {{if .Site.Params.layoutReverse}}layout-reverse{{ end }}"{{end}}>
-        {{ partial "sidebar.html" . -}}
+    {{ block "header" . }}{{ end }}
+    <body class="{{ .Site.Params.themeColor }} {{if .Site.Params.layoutReverse}}layout-reverse{{end}}">
+    {{ partial "sidebar.html" . }}
         <div class="content container">
-            {{ block "content" . -}}{{- end }}
+            {{ block "content" . }}{{ end }}
         </div>
-        {{ block "footer" . -}}{{- end }}
+        {{ block "footer" . }}{{ end }}
     </body>
 </html>

layouts/_default/list.html

@@ -1,11 +1,11 @@
-{{ define "header" -}}
+{{ define "header" }}
     {{ partial "header.html" . }}
-{{- end -}}
+{{ end }}
 
-{{ define "content" -}}
-    {{ partial "page_list.html" . }}
-{{- end -}}
+{{ define "content" }}
+    {{ partial "page-list/content.html" . }}
+{{ end }}
 
-{{ define "footer" -}}
-    {{ partial "footer.html" . }}
-{{- end }}
+{{ define "footer" }}
+    {{ partial "page-list/footer.html" . }}
+{{ end }}

layouts/_default/single.html

@@ -1,15 +1,13 @@
-{{ define "header" -}}
+{{ define "header" }}
+    {{ partial "page-single/variables-init.html" . }}
     {{ partial "header.html" . }}
-{{- end -}}
+{{ end }}
 
-{{ define "content" -}}
-    {{ partial "page_single.html" . }}
-{{- end -}}
+{{ define "content" }}
+    {{ partial "page-single/content.html" . }}
+{{ end }}
 
-{{ define "footer" -}}
-    <div class="container content">
-        {{- partial "highlight-js.html" . -}}
-        {{- partial "commenting.html" . -}}
-    </div>
-    {{ partial "footer.html" . }}
-{{- end -}}
+{{ define "footer" }}
+    {{ partial "page-single/footer.html" . }}
+    {{ partial "page-single/variables-deinit.html" . }}
+{{ end }}

layouts/about/single.html

@@ -1,13 +1,14 @@
-{{- define "header" -}}
-    {{- partial "header.html" . -}}
-{{- end -}}
+{{ define "header" }}
+    {{ partial "header.html" . }}
+{{ end }}
 
-{{- define "content" -}}
+{{ define "content" }}
     <div class="post">
         <h1>{{ .Title }}</h1>
         {{ .Content }}
   </div>
-{{- end -}}
+{{ end }}
 
-{{- define "footer" -}}
-{{- end -}}
+{{ define "footer" }}
+{{ partial "footer/font-awesome-js.html" . }}
+{{ end }}

layouts/index.html

@@ -1,29 +1,44 @@
-{{ define "header" -}}
+{{ define "header" }}
   {{ partial "header.html" . }}
-{{- end }}
+{{ end }}
 
-{{ define "content" -}}
+{{ define "content" }}
   <div class="post-list">
-    {{ range (where .Data.Pages "Type" "not in" (slice "about" "portfolio")).GroupBy "Section" -}}
-    {{ range .Pages }}
+    {{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" site.Params.mainSections) }}
+    {{ range $paginator.Pages }}
+      {{ if .Draft }}
+        {{ .Scratch.Set "draftPage" true }}
+      {{ else }}
+        {{ .Scratch.Set "draftPage" false }}
+      {{ end }}
       <div class="post-list__item">
         <span class="item__title--big">
-          <a href="{{ .RelPermalink }}">{{ .Title }}</a>{{ if .Draft }}<sup> <i class="fas fa-pen-square fa-xs"></i></sup>{{ end }}
+          <a href="{{ .RelPermalink }}" {{if .Scratch.Get "draftPage" }}class="draft"{{end}}>{{ .Title }}</a>
         </span>
         <span class="item__date">
           {{ .Date.Format (.Site.Params.dateformat | default "Jan 02, 2006") }}
         </span>
+        <span {{if .Scratch.Get "draftPage" }}class="draft"{{end}}>
+        {{ if .Description }}
+        {{ .Description }}
+        {{ else }}
         {{ .Summary }}
-        {{ if .Truncated -}}
-        <div class="read-more-link">
-            <a href="{{ .RelPermalink }}">Read More…</a>
+        {{ end }}
+        </span>
+        {{ if .Truncated }}
+          ... <a class="read-more-symbol" href="{{ .RelPermalink }}">➦</a>
+        {{ end }}
         </div>
-        {{- end }}
-        </div>
-        {{- end -}}
-     {{- end }}
+        {{ .Scratch.Delete "draftPage" }}
+     {{ end }}
   </div>
-{{- end }}
+  {{ partial "pagination.html" . }}
+{{ end }}
 
-{{ define "footer" -}}
-{{- end }}
+{{ define "footer" }}
+  {{ if .Site.GoogleAnalytics }}
+    <!-- Google Analytics -->
+    {{ template "_internal/google_analytics_async.html" . }}
+  {{ end }}
+  {{ partial "footer/font-awesome-js.html" . }}
+{{ end }}

layouts/partials/commenting.html

@@ -1,7 +0,0 @@
-{{- if ne .Params.showcomments false -}}
-    {{ if .Site.DisqusShortname -}}
-        {{- partial "commenting/disqus.html" . -}}
-    {{- else if .Site.Params.GraphCommentId -}}
-        {{- partial "commenting/graphcomment.html" . -}}
-    {{- end -}}
-{{- end }}

layouts/partials/commenting/disqus.html

@@ -1,25 +0,0 @@
-<div id="disqus_thread"></div>
-<script type="text/javascript">
-      (function () {
-            // Check and don't inject Disqus on localhost/127.0.0.1
-            // however, it does not work for customised local domains, 
-            // e.g. example.test, example.dev
-            if (location.hostname === "localhost" || 
-            	location.hostname === "127.0.0.1" || 
-            	location.hostname === "") {
-                return;
-			}
-            var dsq = document.createElement('script');
-            dsq.type = 'text/javascript';
-            dsq.async = true;
-            var disqus_shortname = '{{ .Site.DisqusShortname }}';
-            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(
-                  dsq);
-      })();
-</script>
-
-<noscript>
-	Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
-</noscript>
-<a href="http://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

layouts/partials/debug.html

@@ -1,3 +0,0 @@
-<span style="color:red">
-  {{ printf "%#v" . }}
-</span>

layouts/partials/footer.html

@@ -1,4 +0,0 @@
-{{ if and (not .Site.BuildDrafts) (.Site.GoogleAnalytics) -}}
-{{ "<!-- Google Analytics -->" | safeHTML }}
-{{ template "_internal/google_analytics_async.html" . }}
-{{- end }}

layouts/partials/footer/font-awesome-js.html

@@ -0,0 +1 @@
+<script defer src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" integrity="sha384-ZbbbT1gw3joYkKRqh0kWyRp32UAvdqkpbLedQJSlnI8iLQcFVxaGyrOgOJiDQTTR" crossorigin="anonymous"></script>

layouts/partials/header.html

@@ -1,12 +1,12 @@
 <head>
-    <link href="http://gmpg.org/xfn/11" rel="profile">
+    <link href="https://gmpg.org/xfn/11" rel="profile">
+    {{ if .Params.canonicalUrl }}
+    <link rel="canonical" href="{{ .Params.canonicalUrl }}">
+    {{ else }}
+    <link rel="canonical" href="{{ .Permalink }}">
+    {{ end }}
     {{ partial "header/meta.html" . }}
-    {{ "<!-- Font-Awesome -->" | safeHTML }}
-    {{ partial "header/font-awesome.html" . }}
-    {{ "<!-- highlighting -->" | safeHTML }}
-    {{ partial "header/highlight-css.html" . }}
-    <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/print.min.css" media="print">
-    <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/hyde-hyde.css">
+    {{ partial "header/styles.html" . }}
     {{ `<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -15,7 +15,6 @@
     {{ "<!-- Icons -->" | safeHTML }}
     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
     <link rel="shortcut icon" href="/favicon.png">
-    {{- if .RSSLink -}}
-        {{ partial "header/feeds.html" . }}
-    {{- end -}}
+    {{ partial "header/feeds.html" . }}
+    {{ partial "header/custom.html" }}
 </head>

layouts/partials/header/custom.html

@@ -0,0 +1 @@
+

layouts/partials/header/feeds.html

@@ -1,3 +1,3 @@
-<!-- RSS -->
-<link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
-<link href="{{ .RSSLink }}" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}" />
+{{ range .AlternativeOutputFormats -}}
+    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
+{{ end -}}

layouts/partials/header/highlight-css.html

@@ -1,7 +0,0 @@
-{{- if .Site.Params.highlightjs -}}
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/{{ .Site.Params.highlightjsstyle | default "default" }}.min.css">
-{{- end -}}
-{{ if .Site.Params.PygmentsUseClasses -}}
-<!-- Pygments Syntax -->
-<link rel="stylesheet" href="{{ .Site.BaseURL }}/css/syntax.min.css">
-{{- end }}

layouts/partials/header/meta.html

@@ -1,18 +1,17 @@
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta http-equiv="Cache-Control" content="public" />
 {{ "<!-- Enable responsiveness on mobile devices -->" | safeHTML }}
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
-{{ .Hugo.Generator }}
-{{- if .IsHome }}
-    {{ $.Scratch.Set "theTitle" .Site.Title -}}
+{{ hugo.Generator }}
+{{ if .IsHome }}
+    {{ $.Scratch.Set "theTitle" .Site.Title }}
 {{else}}
-    {{ $.Scratch.Add "theTitle" .Title}}
+    {{ $.Scratch.Set "theTitle" .Title}}
     {{ $.Scratch.Add "theTitle" " • "}}
     {{ $.Scratch.Add "theTitle" .Site.Title}}
-{{- end -}}
+{{ end }}
 <title>{{ $.Scratch.Get "theTitle" }}</title>
-{{ with .Site.Params.meta.description -}}<meta name="description" content="{{ . }}">{{- end }}
-{{ with .Site.Params.meta.keywords -}}<meta name="keywords" content="{{.}}">{{- end }}
+{{ with .Site.Params.meta.description }}<meta name="description" content="{{ . }}">{{ end }}
+{{ with .Site.Params.meta.keywords }}<meta name="keywords" content="{{.}}">{{ end }}
 {{ template "_internal/twitter_cards.html" . }}
 {{ template "_internal/opengraph.html" . }}

layouts/partials/header/styles-highlight.html

@@ -0,0 +1,10 @@
+{{ if .Site.Params.highlightjs }}
+{{ if or (not (isset .Params "highlight")) (.Params.highlight) }}
+<!-- highlightjs -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/{{ .Site.Params.highlightjsstyle | default "default" }}.min.css">
+{{ end }}
+{{ end }}
+{{ if .Site.Params.PygmentsUseClasses }}
+<!-- Pygments Syntax -->
+<link rel="stylesheet" href="{{ "css/syntax.min.css" | relURL }}">
+{{ end }}

layouts/partials/header/styles.html

@@ -0,0 +1,19 @@
+{{ partial "header/styles-highlight.html" . }}
+
+{{ $options := (dict "outputStyle" "compressed" "enableSourceMap" true) }}
+
+{{ $style := resources.Get "scss/hyde-hyde.scss" | toCSS $options | fingerprint }}
+<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
+
+{{ $printStyle := resources.Get "scss/print.scss" | toCSS $options | fingerprint }}
+<link rel="stylesheet" href="{{ $printStyle.RelPermalink }}" integrity="{{ $printStyle.Data.Integrity }}" media="print">
+
+{{ with .Site.Params.toc }}
+{{ if eq . "hugo" }}
+{{ $hugoToc := resources.Get "scss/hugo-toc.scss" | toCSS $options | fingerprint }}
+<link rel="stylesheet" href="{{ $hugoToc.RelPermalink }}" integrity="{{ $hugoToc.Data.Integrity }}">
+{{ else if eq . "tocbot"}}
+{{ $tocbot := resources.Get "scss/tocbot.scss" | toCSS $options | fingerprint }}
+<link rel="stylesheet" href="{{ $tocbot.RelPermalink }}" integrity="{{ $tocbot.Data.Integrity }}">
+{{ end }}
+{{ end }}

layouts/partials/header/web-fonts.html

@@ -1,2 +1,2 @@
-<link rel="dns-prefetch" href="//fonts.googleapis.com">
+<link rel="dns-prefetch" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,300i,400,400i,700|Source+Code+Pro:400,400i" rel="stylesheet">

layouts/partials/highlight-js.html

@@ -1,10 +1,18 @@
-{{ if .Site.Params.highlightjs -}}
-<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
-{{ with .Site.Params.highlightjslanguages }}
-    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/{{.}}.min.js"></script>
+{{- if (.Site.Params.highlightjs) -}}
+{{ if (or (not (isset .Params "highlight")) (and (isset .Params "highlight") .Params.highlight)) }}
+    {{ $.Scratch.Set "hl_languages" (union (.Site.Params.highlightjslanguages) (.Params.highlightjslanguages)) }}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
+        {{ with $.Scratch.Get "hl_languages" }}
+            {{ range . }}
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/languages/{{.}}.min.js"></script>
+            {{ end }}
+        {{ end }}
+    <script type="text/javascript">
+        {{ with $.Scratch.Get "hl_languages" }}
+        hljs.configure({languages: [{{(delimit . ", ")}}]});
+        {{ end }}
+        hljs.initHighlightingOnLoad();
+    </script>
+    {{ $.Scratch.Delete "hl_languages" }}
 {{ end }}
-<script type="text/javascript">
-    hljs.configure({languages: []});
-    hljs.initHighlightingOnLoad();
-</script>
-{{- end }}
+{{- end -}}

layouts/partials/page-list/content.html

@@ -1,6 +1,6 @@
 <span class="section__title">{{ .Title }}</span>
 <ul class="posts">
-    {{- with .Data.Pages -}}
+    {{ with .Data.Pages }}
         {{ partial "posts-list.html" . }}
-    {{- end }}
+    {{ end }}
 </ul>

layouts/partials/page-list/footer.html

@@ -0,0 +1,5 @@
+{{ if .Site.GoogleAnalytics }}
+  <!-- Google Analytics -->
+  {{ template "_internal/google_analytics_async.html" . }}
+{{ end }}
+{{ partial "footer/font-awesome-js.html" . }}

layouts/partials/page-single/comment/commento.html

@@ -0,0 +1,25 @@
+<div id="commento"></div>
+<script type="text/javascript">
+    /* 
+      Check and don't inject Commento on localhost/127.0.0.1, however, it does not
+      work for customised local domains, e.g. example.test, example.dev
+    */
+    (function () {
+    if (location.hostname === "localhost" ||
+      location.hostname === "127.0.0.1" ||
+      location.hostname === "") {
+      return;
+    }
+    var cmt = document.createElement('script');
+    cmt.type = 'text/javascript';
+    cmt.async = true;
+    var commento_host = '{{ with .Site.Params.CommentoHost }}{{ . }}{{else}}https://cdn.commento.io{{ end }}';
+    cmt.src = commento_host + '/js/commento.js';
+    (document.getElementsByTagName('head')[0] || 
+      document.getElementsByTagName('body')[0]).appendChild(cmt);
+  })();
+</script>
+
+<noscript>
+  Please enable JavaScript to load the comments.
+</noscript>

layouts/partials/page-single/comment/disqus.html

@@ -0,0 +1,29 @@
+<div id="disqus_thread"></div>
+<script type="text/javascript">
+    /* 
+      Check and don't inject Disqus on localhost/127.0.0.1, however, it does not
+      work for customised local domains, e.g. example.test, example.dev
+    */
+    (function () {
+    if (location.hostname === "localhost" ||
+      location.hostname === "127.0.0.1" ||
+      location.hostname === "") {
+      return;
+    }
+    var dsq = document.createElement('script');
+    dsq.type = 'text/javascript';
+    dsq.async = true;
+    var disqus_shortname = '{{ .Site.DisqusShortname }}';
+    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+    (document.getElementsByTagName('head')[0] || 
+      document.getElementsByTagName('body')[0]).appendChild(dsq);
+  })();
+</script>
+
+<noscript>
+  Please enable JavaScript to view the
+  <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
+</noscript>
+<a href="http://disqus.com/" class="dsq-brlink">comments powered by
+  <span class="logo-disqus">Disqus</span>
+</a>

layouts/partials/page-single/comment/utterances.html

@@ -0,0 +1,7 @@
+<script src="https://utteranc.es/client.js"
+        repo="{{ .Site.Params.UtterancesRepo }}"
+        issue-term="{{ .Site.Params.UtterancesIssueTerm }}"
+        theme="{{ with .Site.Params.UtterancesTheme }}{{ . }}{{else}}github-light{{ end }}"
+        crossorigin="anonymous"
+        async>
+</script>

layouts/partials/page-single/content.html

@@ -0,0 +1,32 @@
+{{ $include_toc := .Params.include_toc}}
+<article>
+  <header>
+    <h1>{{ .Title }}</h1>
+    {{ with .Params.subtitle }}
+    <span class="post__subtitle">
+      {{.}}
+    </span>
+    {{ end }}
+    {{ partial "page-single/post-meta.html" . }}
+  </header>
+  {{ $tableOfContents := .TableOfContents }}
+  {{ with .Site.Params.toc }}
+  {{ if ne $include_toc false }}
+    <div class="toc-wrapper">
+      <input type="checkbox" id="tocToggle">
+      <label for="tocToggle">Table of Content</label>
+      {{ if eq . "hugo" }}
+          {{ $tableOfContents }}
+      {{ else if eq . "tocbot"}}
+        <div class="toc" id="TableOfContents"></div>
+      {{ end }}
+    </div>
+  {{ end }}
+  {{ end }}
+  <div class="post">
+    {{ .Content }}
+  </div>
+  {{ partial "page-single/post-navigation.html" . }}
+  {{ partial "page-single/post-related.html" . }}
+  {{ partial "page-single/post-comment.html" . }}
+</article>

layouts/partials/page-single/footer.html

@@ -0,0 +1,25 @@
+{{ $include_toc := .Params.include_toc}}
+{{ if .Site.GoogleAnalytics }}
+  <!-- Google Analytics -->
+  {{ template "_internal/google_analytics_async.html" . }}
+{{ end }}
+{{ partial "footer/font-awesome-js.html" . }}
+{{ partial "highlight-js.html" . }}
+{{ with .Site.Params.toc }}
+{{ if and (eq . "tocbot") (ne $include_toc false) }}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.js"></script>
+<script type="text/javascript">
+  if (tocbot) {
+    tocbot.init({
+      // Where to render the table of contents.
+      tocSelector: '.toc',
+      // Where to grab the headings to build the table of contents.
+      contentSelector: '.post',
+      // Which headings to grab inside of the contentSelector element.
+      headingSelector: 'h2, h3, h4',
+      collapseDepth: 4
+    });
+  }
+</script>
+{{ end }}
+{{ end }}

layouts/partials/page-single/post-comment.html

@@ -0,0 +1,11 @@
+{{ if ne .Params.showcomments false }}
+    {{ if .Site.DisqusShortname }}
+        {{ partial "page-single/comment/disqus.html" . }}
+    {{ else if .Site.Params.GraphCommentId }}
+        {{ partial "page-single/comment/graphcomment.html" . }}
+    {{ else if .Site.Params.UtterancesRepo }}
+        {{ partial "page-single/comment/utterances.html" . }}
+    {{ else if .Site.Params.Commento }}
+        {{ partial "page-single/comment/commento.html" . }}
+    {{ end }}
+{{ end }}

layouts/partials/page-single/post-meta.html

@@ -0,0 +1,34 @@
+{{ if ne .Params.showpagemeta false }}
+<div class="post__meta">
+    <!-- published date -->
+    {{ if not .Date.IsZero }}
+      <i class="fas fa-calendar-alt"></i> {{ .Date.Format (.Site.Params.dateformat | default "Jan 02, 2006") }}
+    {{ end }}
+    <!-- categories -->
+    {{ with .Params.categories }}
+      {{ $total := len . }}
+      {{ if gt $total 0 }}
+          in
+          {{ $total := sub $total 1 }}
+          {{ range $i, $cat := sort . }}
+              <a class="badge badge-category" href="{{ "/categories/" | relURL }}{{ $cat | urlize }}">{{ $cat | upper }}</a>
+              {{ if lt $i $total }}•{{ end }}
+          {{ end }}
+      {{ end }}
+    {{ end }}
+    <!-- tags -->
+    {{ with .Params.tags }}
+      {{ $total := len . }}
+      {{ if gt $total 0 }}
+          <br/>
+          {{ $subtotal := sub $total 1 }} <i class="fas fa-tags"></i>
+          {{ range $i, $tag := . }}
+          <a class="badge badge-tag" href="{{ "/tags/" | relURL }}{{ $tag | urlize }}">{{ $tag | lower }}</a>
+          {{ if lt $i $subtotal }} {{ end }}
+      {{ end }}
+    {{ end }}
+    {{ end }}
+    <br/>
+    <i class="fas fa-clock"></i> {{ .ReadingTime }} min read
+</div>
+{{ end }}

layouts/partials/page-single/post-navigation.html

@@ -0,0 +1,17 @@
+{{ $enabledPostNavigation := .Site.Params.postNavigation | default true }}
+{{ if $enabledPostNavigation }}
+<div class="navigation navigation-single">
+    {{ with .PrevInSection }}
+    <a href="{{ .RelPermalink }}" class="navigation-prev">
+      <i aria-hidden="true" class="fa fa-chevron-left"></i>
+      <span class="navigation-tittle">{{ .Title }}</span>
+    </a>
+    {{ end }}
+    {{ with .NextInSection }}
+    <a href="{{ .RelPermalink }}" class="navigation-next">
+      <span class="navigation-tittle">{{ .Title }}</span>
+      <i aria-hidden="true" class="fa fa-chevron-right"></i>
+    </a>
+    {{ end }}
+</div>
+{{ end }}

layouts/partials/page-single/post-related.html

@@ -1,10 +1,12 @@
+{{ if .Site.Params.relatedPosts }}
+{{ $related := .Site.RegularPages.Related . | first 5 }}
+{{ with $related }}
 <div class="post__related">
     <!-- related content -->
-    {{ $related := .Site.RegularPages.Related . | first 5 }}
-    {{ with $related }}
     <h2>Related Articles</h2>
     <ul class="related-posts">
         {{ partial "posts-list.html" . }}
     </ul>
-    {{ end }}
-</div>
+</div>
+{{ end }}
+{{ end }}

layouts/partials/page-single/variables-deinit.html

@@ -0,0 +1,2 @@
+{{ $.Page.Scratch.Delete "fig" }}
+{{ $.Page.Scratch.Delete "table" }}

layouts/partials/page-single/variables-init.html

@@ -0,0 +1,2 @@
+{{ $.Page.Scratch.Set "fig" 1 }}
+{{ $.Page.Scratch.Set "table" 1 }}

layouts/partials/page_single.html

@@ -1,16 +0,0 @@
-<article>
-  <header>
-    <h1>{{ .Title }}</h1>
-    {{ with .Params.subtitle }}
-    <span class="post__subtitle">
-      {{.}}
-    </span>
-    {{ end }} 
-    {{ partial "post-meta-before.html" . }}
-  </header>
-  <div class="post">
-    {{ .Content }}
-  </div>
-  {{ partial "post-meta-after.html" . }}
-  {{ partial "post-related.html" . }}
-</article>

layouts/partials/pagination.html

@@ -0,0 +1,39 @@
+{{ $pag := $.Paginator }}
+{{ if gt $pag.TotalPages 1 }}
+<ul class="pagination">
+    {{ with $pag.First }}
+    <li class="page-item">
+        <a href="{{ .URL }}" class="page-link" aria-label="First"><span aria-hidden="true">&laquo;&laquo;</span></a>
+    </li>
+    {{ end }}
+    <li class="page-item{{ if not $pag.HasPrev }} disabled{{ end }}">
+    <a href="{{ if $pag.HasPrev }}{{ $pag.Prev.URL }}{{ end }}" class="page-link" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
+    </li>
+    {{ $.Scratch.Set "__paginator.ellipsed" false }}
+    {{ range $pag.Pagers }}
+    {{ $right := sub .TotalPages .PageNumber }}
+    {{ $showNumber := or (le .PageNumber 3) (eq $right 0) }}
+    {{ $showNumber := or $showNumber (and (gt .PageNumber (sub $pag.PageNumber 2)) (lt .PageNumber (add $pag.PageNumber 2)))  }}
+    {{ if $showNumber }}
+        {{ $.Scratch.Set "__paginator.ellipsed" false }}
+        {{ $.Scratch.Set "__paginator.shouldEllipse" false }}
+    {{ else }}
+        {{ $.Scratch.Set "__paginator.shouldEllipse" (not ($.Scratch.Get "__paginator.ellipsed") ) }}
+        {{ $.Scratch.Set "__paginator.ellipsed" true }}
+    {{ end }}
+    {{ if $showNumber }}
+    <li class="page-item{{ if eq . $pag }} active{{ end }}"><a class="page-link" href="{{ .URL }}">{{ .PageNumber }}</a></li>
+    {{ else if ($.Scratch.Get "__paginator.shouldEllipse") }}
+    <li class="page-item disabled"><span aria-hidden="true">&nbsp;&hellip;&nbsp;</span></li>
+    {{ end }}
+    {{ end }}
+    <li class="page-item{{ if not $pag.HasNext }} disabled{{ end }}">
+    <a href="{{ if $pag.HasNext }}{{ $pag.Next.URL }}{{ end }}" class="page-link" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
+    </li>
+    {{ with $pag.Last }}
+    <li class="page-item">
+        <a href="{{ .URL }}" class="page-link" aria-label="Last"><span aria-hidden="true">&raquo;&raquo;</span></a>
+    </li>
+    {{ end }}
+</ul>
+{{ end }}

layouts/partials/portfolio/content.html

@@ -1,12 +1,12 @@
-<span class="section__title">{{ .Title }}</span>    
+<span class="section__title">{{ .Title | default "Projects" }}</span>
 <div class="portfolio__content">
-    {{ range first 1 (where .Data.Pages "Params.featured" "==" "true") }}
+    {{ range first 1 (where .Data.Pages "Params.featured" "==" true) }}
         <section class="portfolio__featured-project">
             <div class="section-inner">
                 <div class="portfolio_content">
                     <div class="item featured text-center">
                         <span class="project__title">
-                            <a href="{{ .Params.Link }}" target="_blank">{{ .Title }}</a>
+                            <a href="{{ .Params.Link }}" target="_blank" rel="noopener noreferrer">{{ .Title }}</a>
                         </span>
                         <p class="project__subtitle-big">
                             <sup><i class="fa fa-quote-left" aria-hidden="true"></i></sup>
@@ -14,10 +14,9 @@
                             <sup><i class="fa fa-quote-right" aria-hidden="true"></i></sup>
                         </p>
                         <div class="project__featured-image">
-                            <img src="{{ .Params.screenshot }}"  alt="{{ .Title }}">
-                            <div class="ribbon">
-                                <div class="text">New</div>
-                            </div>
+                            {{ if .Params.screenshot }}
+                                <img src="{{ .Params.screenshot }}"  alt="{{ .Title }}">
+                            {{ end }}
                         </div>
                         <div class="project__summary">
                                 {{ .Content }}
@@ -30,15 +29,17 @@
     <section>
         <div class="portfolio_content">
             <hr class="divider">
-            {{ range (where .Data.Pages "Params.featured" "!=" "true").ByDate.Reverse }}
+            {{ range (where .Data.Pages "Params.featured" "!=" true).ByDate.Reverse }}
             <div class="row">
-                <a class="col-md-4 col-sm-4 col-xs-12" href="{{ .Params.link }}" 
-                    target="_blank">
-                    <img class="img-responsive project-image" src="{{ .Params.screenshot }}" alt="{{ .Title }}">
-                </a>
-                <div class="desc col-md-8 col-sm-8 col-xs-12">
+                <div class="col-md-4 col-sm-4 col-xs-12" href="{{ .Params.link }}"
+                    target="_blank" rel="noopener noreferrer">
+                    {{ if .Params.screenshot }}
+                        <img class="project__image img-responsive" src="{{ .Params.screenshot }}" alt="{{ .Title }}">
+                    {{ end }}
+                </div>
+                <div class="col-md-8 col-sm-8 col-xs-12">
                     <span class="project__title">
-                        <a href="{{ .Params.link }}" target="_blank">{{ .Title }}</a>
+                        <a href="{{ .Params.link }}" target="_blank" rel="noopener noreferrer">{{ .Title }}</a>
                     </span>
                     <span class="project__subtitle-small">
                         <sup><i class="fa fa-quote-left" aria-hidden="true"></i></sup>

layouts/partials/portfolio/footer.html

@@ -0,0 +1,5 @@
+{{ if .Site.GoogleAnalytics }}
+  <!-- Google Analytics -->
+  {{ template "_internal/google_analytics_async.html" . }}
+{{ end }}
+{{ partial "footer/font-awesome-js.html" . }}

layouts/partials/post-meta-after.html

@@ -1,22 +0,0 @@
-<div>
-    <ul class="post__nav">
-        <li class="post__nav--next">
-            {{ with .NextInSection -}}
-            <a href="{{ .RelPermalink }}">                
-                <span class="next__heading">NEXT</span>
-                <span>{{ .Title }}</span>
-            </a>
-            <i class="fas fa-chevron-right"></i>
-            {{- end }}
-        </li>
-        <li class="post__nav--previous">
-            {{ with .PrevInSection -}}            
-            <i class="fas fa-chevron-left"></i>
-            <a href="{{ .RelPermalink }}">                
-                <span class="previous__heading">PREVIOUS</span>
-                <span class="previous__title">{{ .Title }}</span>
-            </a>
-            {{- end }}
-        </li>
-    </ul>
-</div>

layouts/partials/post-meta-before.html

@@ -1,34 +0,0 @@
-{{ if ne .Params.showpagemeta false }}
-<div class="post__meta">
-    <!-- published date -->
-    {{ if not .Date.IsZero -}}
-      <i class="fas fa-calendar-alt"></i> {{ .Date.Format (.Site.Params.dateformat | default "Jan 02, 2006") -}}
-    {{- end }}
-    <!-- categories -->
-    {{- with .Params.categories -}}
-      {{- $total := len . -}}
-      {{ if gt $total 0 -}}
-          in
-          {{- $total := sub $total 1 -}}
-          {{- range $i, $cat := sort . }}
-              <a class="post__category" href="{{ "/categories/" | relURL }}{{ $cat | urlize }}">{{ $cat | upper }}</a>
-              {{ if lt $i $total }},{{ end }}
-          {{- end -}}
-      {{- end -}}
-    {{- end -}}
-    <!-- tags -->
-    {{ with .Params.tags }}
-      {{ $total := len . }}
-      {{ if gt $total 0 }}
-          <br/>
-          {{ $subtotal := sub $total 1 }} <i class="fas fa-tags"></i>
-          {{ range $i, $tag := . }}
-          <a class="post__tag" href="{{ "/tags/" | relURL }}{{ $tag | urlize }}">#{{ $tag | lower }}</a>
-          {{ if lt $i $subtotal }} {{ end }}
-      {{ end }}
-    {{ end }}
-    {{ end }}
-    <br/>
-    <i class="fas fa-clock"></i> {{ .ReadingTime }} min read
-</div>
-{{ end }}

layouts/partials/posts-list.html

@@ -1,10 +1,10 @@
 {{ range . }}
 <li>
   <span class="list__title--small">
-    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+    <a href="{{ .RelPermalink }}" {{if .Draft}}class="draft"{{end}}>{{ .Title }}</a>
       {{if not .Date.IsZero}}
-      <time class="pull-right hidden-tablet">{{.Date.Format ("Jan 02 '06")}}</time>
+      <time class="pull-right hidden-tablet">{{ .Date.Format (.Site.Params.dateformat | default "Jan 02 '06") }}</time>
       {{end}}
   </span>
 </li>
-{{ end }}
+{{ end }}

layouts/partials/sidebar.html

@@ -1,33 +1,44 @@
 <!-- Sidebar -->
-<div class="sidebar text-center">
-  <div class="container {{ with .Site.Params.sidebarSticky -}}sidebar-sticky{{- end }}">
+<div class="sidebar">
+  <div class="container {{ with .Site.Params.sidebarSticky }}sidebar-sticky{{ end }}">
     <div class="sidebar-about">
-      <div class="site__title">
-        <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
-      </div>
-      {{ with .Site.Params.authorimage }}
-      {{ $strippedSlash := ($.Site.Params.authorimage | replaceRE "^(/)+(.*)" "$2") }}
-      {{ $authorImage := (printf "%s%s" $.Site.BaseURL $strippedSlash) }}
-      <p>
-        <img src="{{$authorImage}}" alt="Author Image" class="img--circle img--headshot element--center"> 
-      </p>
+      <span class="site__title">
+        <a href="{{ .Site.BaseURL }}">
+        {{ with .Site.Params.logoimage }}
+        {{ $strippedSlash := ($.Site.Params.logoimage | replaceRE "^(/)+(.*)" "$2") }}
+        {{ $logoImage := (printf "%s%s" $.Site.BaseURL $strippedSlash) }}
+          <img src="{{$logoImage}}" alt="Logo Image" class="element--center">
+        {{ else }}
+          {{ .Site.Title }}
+        {{ end }}
+        </a>
+      </span>
+      {{ if and (isset .Site.Params "authorimage") (not (isset .Site.Params.social "gravatar")) }}
+        {{ with .Site.Params.authorimage }}
+        {{ $strippedSlash := ($.Site.Params.authorimage | replaceRE "^(/)+(.*)" "$2") }}
+        {{ $authorImage := (printf "%s%s" $.Site.BaseURL $strippedSlash) }}
+        <div class="author-image">
+          <img src="{{$authorImage}}" alt="Author Image" class="img--circle img--headshot element--center">
+        </div>
+        {{ end }}
+      {{ end }}
+      {{ with .Site.Params.social.gravatar}}
+        <div class="author-image">
+          <img src="https://www.gravatar.com/avatar/{{md5 .}}?s=240&d=mp" class="img--circle img--headshot element--center" alt="gravatar">
+        </div>
       {{ end }}
       <p class="site__description">
-        {{ with .Site.Params.description }} {{.}} {{ else }} Your site's description {{end}}
+        {{ with .Site.Params.description }} {{.}} {{end}}
       </p>
     </div>
-    {{ partial "sidebar/menu.html" . }}
-    <p>
-      {{ partial "sidebar/social.html" . }}
-    </p>
-    <p class="copyright">
-      {{ with .Site.Params.copyright }}{{.|safeHTML}}{{ else }}&copy; {{ now.Format "2006"}} {{.Site.Params.author}}.
-      <a href="https://creativecommons.org/licenses/by-sa/4.0">Some Rights Reserved</a>.
-      <br/>Built with
-      <a href="https://gohugo.io">Hugo</a> ❤️ <a href="https://github.com/htr3n/hyde-hyde">hyde-hyde</a>.
-      {{end}}
-    </p>
-  </div>
-  <div>
+    <div class="collapsible-menu">
+      <input type="checkbox" id="menuToggle">
+      <label for="menuToggle">{{ .Site.Title }}</label>
+      <div class="menu-content">
+        {{ partial "sidebar/menu.html" . }}
+        {{ partial "sidebar/social.html" . }}
+      </div>
+    </div>
+    {{ partial "sidebar/copyright.html" . }}
   </div>
 </div>

layouts/partials/sidebar/about.html

@@ -0,0 +1,15 @@
+<div class="sidebar-about">
+  <span class="site__title">
+    <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
+  </span>
+  {{ with .Site.Params.authorimage }}
+  {{ $strippedSlash := ($.Site.Params.authorimage | replaceRE "^(/)+(.*)" "$2") }}
+  {{ $authorImage := (printf "%s%s" $.Site.BaseURL $strippedSlash) }}
+  <div class="author-image">
+    <img src="{{$authorImage}}" alt="Author Image" class="img--circle img--headshot element--center">
+  </div>
+  {{ end }}
+  <p class="site__description">
+    {{ with .Site.Params.description }} {{.}} {{end}}
+  </p>
+</div>

layouts/partials/sidebar/copyright.html

@@ -0,0 +1,13 @@
+{{ with .Site.Params.copyright }}
+<div class="copyright">
+  &copy; {{ with $.Site.Params.since }}{{ if lt . now.Year }}{{ . | safeHTML }} - {{ end }}{{ end }}{{ now.Format "2006"}} {{ . | safeHTML }}
+  {{ with $.Site.Params.license }}
+    <a href="{{$.Site.Params.licenseURL | safeHTML}}">{{ . | safeHTML }}</a>
+  {{end}}
+</div>
+{{ end }}
+{{ with .Site.Params.showBuiltWith }}
+<div class="builtwith">
+Built with <a href="https://gohugo.io">Hugo</a> ❤️ <a href="https://github.com/htr3n/hyde-hyde">hyde-hyde</a>.
+</div>
+{{ end }}

layouts/partials/sidebar/menu.html

@@ -1,27 +1,27 @@
 <div>
 	<ul class="sidebar-nav">
 		{{ $currentPage := . }} 
-		{{- range .Site.Menus.main -}} 
-			{{ if .HasChildren -}}
+		{{ range .Site.Menus.main }} 
+			{{ if .HasChildren }}
 			<li {{ if $currentPage.HasMenuCurrent "main" . }}class="active"{{ end }}>
 				<a href="#">{{ .Pre }}
 					<span>{{ .Name }}</span>
 				</a>
 				<ul class="sidebar-nav">
-					{{- range .Children -}}
+					{{ range .Children }}
 					<li {{ if $currentPage.IsMenuCurrent "main" . }}class="active"{{ end }}>
 						<a href="{{ .URL }}">{{ .Name | title }}</a>
 					</li>
-					{{- end -}}
+					{{ end }}
 				</ul>
-			{{- else -}} <!-- No children -->
+			</li>
+			{{ else }} <!-- No children -->
 				<li>
 					<a href="{{.URL}}">{{ .Pre }}
 						<span>{{ .Name | title }}</span>
 					</a>
 				</li>
-			{{- end -}} 
-		{{- end }}
-		</li>
+			{{ end }} 
+		{{ end }}
 	</ul>
 </div>

layouts/partials/sidebar/social.html

@@ -1,38 +1,66 @@
-<section class="social text-center">
-	{{ with .Site.Params.social.twitter -}}
-	<a href="https://twitter.com/{{.}}"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a>
-	{{- end }}
-	{{ with .Site.Params.social.facebook -}}
-	&nbsp;<a href="https://facebook.com/{{.}}"><i class="fab fa-facebook-f"></i></a>
-	{{- end }}
-	{{ with .Site.Params.social.github -}}
-	&nbsp;<a href="https://github.com/{{.}}"><i class="fab fa-github fa-lg" aria-hidden="true"></i></a>
-	{{- end }}
-	{{ with .Site.Params.social.bitbucket -}}
-	&nbsp;<a href="https://bitbucket.org/{{.}}"><i class="fab fa-bitbucket fa-lg" aria-hidden="true"></i></a>
-	{{- end }}
-	{{ with .Site.Params.social.gitlab -}}
-	&nbsp;<a href="https://gitlab.com/{{.}}"><i class="fab fa-gitlab fa-lg" aria-hidden="true"></i></a>
-	{{- end }}
-	{{ with .Site.Params.social.instagram -}}
-	&nbsp;<a href="https://instagram.com/{{.}}"><i class="fab fa-instagram fa-lg" aria-hidden="true"></i></a>
-	{{- end }}
-	{{ with .Site.Params.social.linkedin -}}
-	&nbsp;<a href="https://linkedin.com/in/{{.}}"><i class="fab fa-linkedin fa-lg" aria-hidden="true"></i></a>
-	{{- end }}
-	{{ with .Site.Params.social.stackoverflow -}}
-	&nbsp;<a href="https://stackoverflow.com/users/{{.}}"><i class="fab fa-stack-overflow fa-lg" aria-hidden="true"></i></a>
-	{{- end }}
+<section class="social">
+	{{ with .Site.Params.social.twitter }}
+	<a href="https://twitter.com/{{.}}" rel="me"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.microblog }}
+	<a href="https://micro.blog/{{.}}" rel="me"><i class="fab fa-microblog fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.facebook }}
+	<a href="https://facebook.com/{{.}}" rel="me"><i class="fab fa-facebook-f"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.github }}
+	<a href="https://github.com/{{.}}" rel="me"><i class="fab fa-github fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.bitbucket }}
+	<a href="https://bitbucket.org/{{.}}" rel="me"><i class="fab fa-bitbucket fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ $gitlab_domain := "gitlab.com" }}
+	{{ with .Site.Params.social.custom_gitlab_domain }}
+		{{ $gitlab_domain = . }}
+	{{ end }}
+	{{ with .Site.Params.social.gitlab }}
+	<a href="https://{{ $gitlab_domain }}/{{.}}" rel="me"><i class="fab fa-gitlab fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.instagram }}
+	<a href="https://instagram.com/{{.}}" rel="me"><i class="fab fa-instagram fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.linkedin }}
+	<a href="https://linkedin.com/in/{{.}}" rel="me"><i class="fab fa-linkedin fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.googlescholar}}
+	<a href="https://scholar.google.com/citations?user={{.}}" rel="me"><i class="fas fa-graduation-cap fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.stackoverflow }}
+	<a href="https://stackoverflow.com/users/{{.}}" rel="me"><i class="fab fa-stack-overflow fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
 	{{ with .Site.Params.social.medium}}
-	&nbsp;<a href="https://medium.com/{{.}}"><i class="fab fa-medium fa-lg" aria-hidden="true"></i></a>
-	{{- end }}
-	{{ with .Site.Params.social.xing -}}
-	&nbsp;<a href="https://www.xing.com/profile/{{.}}"><i class="fab fa-xing fa-lg" aria-hidden="true"></i></a>
-	{{- end }}
-	{{ with .Site.Params.social.keybase -}}
-	&nbsp;<a href="https://keybase.io/{{.}}"><i class="fab fa-keybase fa-lg" aria-hidden="true"></i></a>
-	{{- end }}
-	{{ with .Site.Params.social.email -}}
-	&nbsp;<a href="mailto:{{.}}"><i class="fas fa-at fa-lg" aria-hidden="true"></i></a>
-	{{- end }}
+	<a href="https://medium.com/@{{.}}" rel="me"><i class="fab fa-medium fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.xing }}
+	<a href="https://www.xing.com/profile/{{.}}" rel="me"><i class="fab fa-xing fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.keybase }}
+	<a href="https://keybase.io/{{.}}" rel="me"><i class="fab fa-keybase fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.telegram }}
+	<a href="https://t.me/{{.}}" rel="me"><i class="fab fa-telegram fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.aboutme }}
+	&nbsp;<a href="https://about.me/{{.}}"><i class="fas fa-address-card fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.orcid }}
+	<a href="https://orcid.org/{{.}}" rel="me"><i class="fab fa-orcid fa-lg" aria-hidden="true"></i></a>
+	{{end}}
+	{{ with .Site.Params.social.email }}
+	<a href="mailto:{{.}}" rel="me"><i class="fas fa-at fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.pgpkey }}
+	<a href="{{.}}" rel="pgpkey"><i class="fa fa-key fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.reddit }}
+	<a href="https://www.reddit.com/user/{{.}}" rel="me"><i class="fab fa-reddit-alien fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
+	{{ with .Site.Params.social.rss }}
+	<a href="{{.}}" rel="me"><i class="fas fa-rss fa-lg" aria-hidden="true"></i></a>
+	{{ end }}
 </section>

layouts/portfolio/list.html

@@ -1,11 +1,11 @@
-{{ define "header" -}}
+{{ define "header" }}
     {{ partial "header.html" . }}
-{{- end -}}
+{{ end }}
 
-{{ define "content" -}}
+{{ define "content" }}
     {{ partial "portfolio/content.html" . }}
-{{- end -}}
+{{ end }}
 
-{{ define "footer" -}}
-    {{ partial "footer.html" . }}
-{{- end }}
+{{ define "footer" }}
+    {{ partial "portfolio/footer.html" . }}
+{{ end }}

layouts/shortcodes/fig.html

@@ -1,15 +1,43 @@
+{{ if .Get "caption" }}
+  {{ $.Scratch.Set "caption" (.Get "caption") }}
+{{ else if .Get "alt" }}
+  {{ $.Scratch.Set "caption" (.Get "alt") }}
+{{ end }}
+<!-- resolve absolute image path -->
+{{ $permalink := $.Page.Permalink }}
+{{ $image := .Get "src" }}
+{{ $image_link_absolute := (findRE "^/" $image) }}
 <figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
-    {{ with .Get "link"}}<a href="{{.}}">{{ end }}
-        <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} />
-    {{ if .Get "link"}}</a>{{ end }}
-    {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
+  {{ if .Get "link"}}
+    <a href="{{ .Get "link" }}"
+    {{ with .Get "target" }} target="{{ . }}"{{ end }}
+    {{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+  {{ end }}
+  <img
+      {{ if $image_link_absolute }}
+        src="{{ $image | absURL }}"
+      {{ else }}
+        src="{{ (printf "%s%s" $permalink $image) }}"
+      {{ end }}
+        {{ if .Get "alt" }}alt="{{ .Get "alt" | markdownify | plainify }}"
+        {{ else if .Get "caption" }}alt="{{ .Get "caption" | markdownify | plainify }}"
+        {{ end }}
+        {{ with .Get "align" }}align="{{ . }}"{{ end }}
+        {{ with .Get "height" }}width="{{ . }}"{{ end }}
+        {{ with .Get "width" }}width="{{ . }}"{{ end }} style="max-width: 100%;"
+         />
+  {{ if .Get "link"}}</a>{{ end }}
+  <!-- caption and attr-->
+  {{ if ($.Scratch.Get "caption") }}
     <figcaption>
-        {{ with .Get "title" }}
-            <span class="img--caption">{{ . }}</span>
-        {{ end }}
-        {{ with (.Get "caption")}}
-            <span class="img--caption">{{ . }}</span>
+      <span class="img--caption">
+        Figure {{ $.Page.Scratch.Get "fig" }}. {{ $.Scratch.Get "caption" | markdownify | plainify }}
+        {{ if .Get "attr" }}
+          [{{- with .Get "attrlink"}}<a href="{{ . }}">{{ end }}{{ .Get "attr" | markdownify }}{{ if .Get "attrlink"}}</a>{{ end -}}]
         {{ end }}
+      </span>
     </figcaption>
-    {{ end }}
+  {{ end }}
 </figure>
+{{ .Page.Scratch.Add "fig" 1 }}
+{{ $.Scratch.Delete "caption"}}

layouts/shortcodes/kbd.html

@@ -1 +1 @@
-<kbd>{{- .Get 0 -}}</kbd> 
+<kbd>{{ .Get 0 }}</kbd>