classic-jekyll-theme 1.9.4 → 2.0.0

data/_data/text-for.yml

@@ -12,6 +12,9 @@ tCategories: Categories
 # Title on categories page
 tCategory: Category
 
+# When no categories are present
+tNoCategories: None
+
 # Message on category page if no posts have been found
 tNoBlogpostFound: No blogposts found for this category
 

data/_includes/banner-area.html

@@ -0,0 +1,57 @@
+
+<!-- include banner-area.html -->
+{%- comment -%}<!--
+
+Layout of the banner area.
+
+The banner area is complex in the sense that some elements are out of the DOM permanently and some elements are out of the DOM depending on the settings in the site.data.setup file.
+
+The height of the 'banner' class must be specified explicitly in the theme.scss file.
+
+The icon, title and label are placed on top of the banner using relative/absolute positioning.
+
+The conditional part for 'top-fixed' is present to make sure that the content of the column-panel is properly offset from the top of the screen such that no partion of it is positioned behind the banner-area. It has the same classes and structure as the banner-area so that it auto-adjusts for menubar switching (using the banner-menu-symbol).
+
+If changes are made to this file that increase the height of the banner-area that is placed outside the DOM, the HTML code can compensate for the height increase by specifying a height for the add-to-banner-area-height class.
+
+-->{%- endcomment -%}
+
+{%- if site.data.setup.banner-position == 'top-fixed' -%}
+	{%- assign banner-classes = 'banner-area banner-area-outside-dom' -%}
+{%- else -%}
+	{% assign banner-classes = 'banner-area banner-area-in-dom' -%}
+{%- endif %}
+<input type="checkbox" id="banner-menu-symbol">
+<div class="{{ banner-classes }}">
+	<div class="banner"></div>
+	{%- comment -%}<!-- The following elements are permanently outside the DOM -->{%- endcomment %}
+	<div class="icon-container">
+		{% include banner-icon.html %}
+	</div>
+	<div class="title-area-container">
+		{% include banner-title-area.html %}
+	</div>
+	<div class="label-container"><label for="banner-menu-symbol"><p><!-- empty but necessary! --></p></label></div>
+	{%- comment -%}<!-- This is part of the DOM again (unless the banner area is outside the DOM) -->{%- endcomment %}
+	<div class="menubar-top-separator"></div>
+	{% include menubar.html %}
+	<div class="menubar-bottom-separator"></div>
+</div>
+{%- if site.data.setup.banner-position == 'top-fixed' %}
+<div class="banner-area invisible">
+	<div class="banner"></div>
+	<div class="menubar-top-separator"></div>
+	<div class="menubar">
+		{% include menubar-icon.html %}
+		<div class="item">
+			<div class="title">
+				<div class=symbol><p></p></div>
+				<div class="text"><a><p>Home</p></a></div>
+			</div>
+		</div>
+	</div>
+	<div class="menubar-bottom-separator"></div>
+	<div class="add-to-banner-area-height"></div>
+</div>
+{% endif -%}
+<!-- end of include banner-area.html -->

data/_includes/banner-icon.html

@@ -0,0 +1,23 @@
+
+<!-- include banner-icon.html -->
+{%- comment -%}<!--
+
+This file is for customization of the banner icon.
+
+Do not change the name of the class of this div!
+
+If no icon is needed, don't put anything in here, but keep the file.
+
+Note that a simple banner icon can also be assigned through the settings in the classic-jekyll-theme.scss file.
+
+Be aware that this banner-icon is arranged outside the DOM and as such does not drive the size of the the banner.
+
+To display/not-display and elements use the '.display-flex-...' classes en '.display-block-...' classes. (See _sass/_theme-library.scss for more.
+
+Example: <div class='myclass display-block-narrow'><p>Hello</p></div>
+
+Will display the text "Hello" only when the narrow layout is in use.
+
+-->{%- endcomment %}
+<div class="banner-icon"></div>
+<!-- end of include banner-icon.html -->

data/_includes/banner-title-area.html

@@ -0,0 +1,30 @@
+
+<!-- include banner-title-area.html -->
+{%- comment -%}<!--
+
+This file is for customization of the title and subtitle in the banner.
+
+Do not change the name of any of the classes!
+
+If customization is needed, don't put anything in here, but keep the file.
+
+Note that simple title & subtitle can also be assigned through the settings in the classic-jekyll-theme.scss file.
+
+Be aware that this title-area is arranged outside the DOM and as such does not drive the size of the the banner.
+
+To display/not-display and elements use the '.display-flex-...' classes en '.display-block-...' classes. (See _sass/_theme-library.scss for more.
+
+Example: <div class='myclass display-block-narrow'><p>Hello</p></div>
+
+Will display the text "Hello" only when the narrow layout is in use.
+
+-->{%- endcomment %}
+<div class="title-area">
+	<div class="title">
+		<p>{{ site.title }}</p>
+	</div>
+	<div class="subtitle">
+		<p>{{ site.data.setup.subtitle }}</p>
+	</div>
+</div>
+<!-- end of include banner-title-area.html -->

data/_includes/cblock-row.html

@@ -1,6 +1,18 @@
+
+<!-- include cblock-row.html -->
+{% comment %}<!--
+
+Layout of a single 'cblock'.
+
+Parameters:
+	title: The title for the row of cblocks to be displayed.
+	cblocks: A sequence of cblock's that must be displayed in a row.
+
+-->{%- endcomment -%}
 <h2 class="cblock-row-title">{{ include.title }}</h2>
 <div class="cblock-row">
-{% for cblock in include.cblocks %}
-	{% include cblock.html name=cblock.name image=cblock.image description=cblock.description link=cblock.link %}
-{% endfor %}
+{%- for cblock in include.cblocks -%}
+	{%- include cblock.html name=cblock.name image=cblock.image description=cblock.description link=cblock.link -%}
+{%- endfor %}
 </div>
+<!-- end of include cblock-row.html -->

data/_includes/cblock.html

@@ -1,5 +1,20 @@
+
+<!-- include cblock.html -->
+{% comment %}<!--
+
+Layout of a single 'cblock'.
+
+Parameters:
+	link: A link for more information about the item.
+	image: A link that points to an image to be displayed for the item.
+	name: The name of the item.
+	description: A short description of the item.
+
+-->{%- endcomment -%}
+
 <div class="cblock">
 	<a href={{ include.link }}><img class="cblock-image" src={{ include.image }}></a>
 	<p class="cblock-name"><a href={{ include.link }}>{{ include.name }}</a></p>
 	<p class="cblock-description">{{ include.description }}</p>
-</div>
+</div>
+<!-- end of include cblock.html -->

data/_includes/disqus-comments.html

@@ -0,0 +1,39 @@
+
+<!-- include disqus-comments.html -->
+{%- comment -%}<!--
+
+Layout of a disqus comment section.
+
+Include this in a layout where the disqus comments must be placed.
+
+Control:
+	page.comments: (yes | no) Turn the comment section on or of.
+	jekyll.environment: The disqus comments are only created for 'production' code.
+	site.url: Is prepended to the page.url to build the required disqus-url that allows disqus to mange the comments.
+	site.github.url: Same as site.url, but for sites hosted on github.
+	site.disqus.shortname: The disqus identifier for the site (user)
+	
+-->{%- endcomment -%}
+
+{%- if page.comments != false and jekyll.environment == "production" -%}
+	{%- if site.url -%}
+		{%- assign disqus_url = page.url | prepend: site.url -%}
+	{%- elsif site.github.url -%}
+		{%- assign disqus_url = page.url | prepend: site.github.url -%}
+	{%- endif %}
+	<div id="disqus_thread"></div>
+	<script>
+		var disqus_config = function () {
+			this.page.url = '{{ disqus_url }}';
+			this.page.identifier = '{{ disqus_url }}';
+		};
+
+		(function() {
+			var d = document, s = d.createElement('script');
+			s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
+			s.setAttribute('data-timestamp', +new Date());
+			(d.head || d.body).appendChild(s);
+		})();
+	</script>
+	<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+{% endif -%}

data/_includes/footer.html

@@ -1,5 +1,16 @@
+
+<!-- include footer.html -->
+{%- comment -%}<!--
+
+Layout of the footer.
+
+Configuration:
+	site.description: The text to be displayed.
+
+-->{%- endcomment %}
 <footer>
 	<div>
 		<p>{{ site.description | escape }}</p>
 	</div>
 </footer>
+<!-- end of include footer.html -->

data/_includes/google-analytics.html

@@ -1,11 +1,21 @@
-<script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
-  ga('create', '{{ site.google_analytics }}', 'auto');
-  ga('send', 'pageview');
+<!-- include google-analytics.html -->
+{% comment %}<!--
+
+The script that allows the use of google analytics.
+
+Configuration:
+	site.google_analytics: The site-id for the site issued by google analytics.
 
+-->{%- endcomment -%}
+<script>
+	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+	ga('create', '{{ site.google_analytics }}', 'auto');
+	ga('send', 'pageview');
 </script>
-  
+<!-- end of include google-analytics.html -->
+

data/_includes/head.html

@@ -1,33 +1,74 @@
+
+<!-- include head.html -->
+{%- comment -%}<!--
+
+Layout of the header included in all html pages.
+
+The favicons are generated by http://realfavicongenerator.net.
+To use your own set of favicons, visit that site, upload your favicon image and select the option that the favicons
+are stored inside a folder called 'icons'. The download that folder and replace the contents of the 'icons' folder
+with the files generated by the realfavicongenerator.
+
+Alternatively disable the favicons by setting site.data.setup.realfavicongenerator to 'no'.
+
+Configuration:
+	site.title: The title to be used when page.title is not set.
+	page.title: The title to be used for the <title> element.
+	site.description: The description to be used when the page.excerpt is not set.
+	page.excerpt: The description for the <meta> element with the name 'description'.
+	site.data.setup.use-separate-banner-menubar-file: Used to determine if JQuery must be loaded.
+	site.data.setup.drop-down-menu: Used to determine if JQuery must be loaded.
+	site.data.setup.enable-cookies-policy: Used to determine if the cookies consent must be used.
+	site.google_analytics: Used to determine if google-analytics must be used.
+	
+-->{%- endcomment %}
 <head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
-
-  {% if page.excerpt %}{% assign description = page.excerpt %}{% else %}{% assign description = site.description %}{% endif %}
-  <meta name="description" content="{{ description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
-
-  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
-  <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
-  <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | relative_url }}">
-  
-  <!-- Include JQuery from google -->
-  {% if site.data.setup.use-separate-navbanner %}
-  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-  {% endif %}
-  
-  <!-- Include google analytics for production build and if necessary -->
-  {% if jekyll.environment == 'production' and site.google_analytics %}
-	{% include google-analytics.html %}
-  {% endif %}
-  
-  <!-- Include cookie consent for production build when enabled -->
-  {% if jekyll.environment == 'production' %}
-  	{% if site.data.setup.enable-cookies-policy %}
-	  {% include widgets/cookie-consent.html %}
-    {% endif %}
-  {% endif %}
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 
-</head>
+	{%- if site.data.setup.realfavicongenerator %}
+	<link rel="apple-touch-icon" sizes="180x180" href="{{ "/icons/apple-touch-icon.png" | relative_url }}">
+	<link rel="icon" type="image/png" sizes="32x32" href="{{ "/icons/favicon-32x32.png" | relative_url }}">
+	<link rel="icon" type="image/png" sizes="16x16" href="{{ "/icons/favicon-16x16.png" | relative_url }}">
+	<link rel="manifest" href="{{ "/icons/manifest.json" | relative_url }}">
+	<link rel="mask-icon" href="{{ "/icons/safari-pinned-tab.svg" | relative_url }}" color="#5bbad5">
+	<link rel="shortcut icon" href="{{ "/icons/favicon.ico" | relative_url }}">
+	<meta name="msapplication-config" content="{{ "/icons/browserconfig.xml" | relative_url }}">
+	<meta name="theme-color" content="#ffffff">
+	{%- endif %}
+
+	<title>{%- if page.title -%}{{ page.title | escape }}{%- else -%}{{ site.title | escape }}{%- endif -%}</title>
 
+	{%- if page.excerpt -%}
+		{%- assign description = page.excerpt -%}
+	{%- else -%}
+		{%- assign description = site.description -%}
+	{%- endif %}
+
+	<meta name="description" content="{{ description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
+
+	<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+	<link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
+	<link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | relative_url }}">
+
+	{%- comment -%}<!-- Include JQuery from google -->{%- endcomment -%}
+	
+	{%- if site.data.setup.use-separate-banner-menubar-file %}
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+  	{%- endif -%}
+
+	{%- comment -%}<!-- Include google analytics for production build and if necessary -->{%- endcomment -%}
+	
+	{%- if jekyll.environment == 'production' and site.google_analytics -%}
+		{%- include google-analytics.html -%}
+	{%- endif -%}
+
+	{%- comment -%}<!-- Include cookie consent for production build when enabled -->{%- endcomment -%}
+	{%- if jekyll.environment == 'production' -%}
+		{%- if site.data.setup.enable-cookies-policy -%}
+			{%- include widgets/cookie-consent.html -%}
+		{%- endif -%}
+	{%- endif %}
+</head>
+<!-- end of include head.html -->

data/_includes/menubar-icon.html

@@ -0,0 +1,23 @@
+
+<!-- include menubar-icon.html -->
+{%- comment -%}<!--
+
+This file is for customization of the menubar icon.
+
+Do not change the name of the class of this div!
+
+If no icon is needed, don't put anything in here, but keep the file.
+
+Note that a simple menubar icon can also be assigned through the settings in the classic-jekyll-theme.scss file.
+
+The content here will drive the height of the menubar if the '$menubar-height-...' is set to 'auto'.
+
+To display/not-display and elements use the '.display-flex-...' classes en '.display-block-...' classes. (See _sass/_theme-library.scss for more.
+
+Example: <div class='myclass display-block-narrow'><p>Hello</p></div>
+
+Will display the text "Hello" only when the narrow layout is in use.
+
+-->{%- endcomment %}
+<div class="menubar-icon"></div>
+<!-- end of include menubar-icon.html -->

data/_includes/menubar.html

@@ -0,0 +1,428 @@
+
+<!-- include menubar.html -->
+<nav class="menubar">
+
+	{%- comment -%}<!-- include the menu icon -->{%- endcomment -%}
+	
+	{%- include menubar-icon.html -%}
+	
+	{%- comment -%}<!-- Create a list of top menu item titles -->{%- endcomment -%}
+	
+	{%- assign topTitles = "" | split: "" -%}
+	{%- assign sortedPages = site.pages | where:'menuInclude', true | where_exp:'item', 'item.menuTopTitle != nil' | sort: 'menuTopIndex', 'last' -%}
+	{%- for ape in sortedPages -%}{%- assign topTitles = topTitles | push: ape.menuTopTitle -%}{%- endfor -%}
+	{%- assign topTitles = topTitles | uniq -%}
+
+	{%- comment -%}<!-- Home page -->{%- endcomment -%}
+	{%- assign home = 'Home' -%}
+	{%- if site.data.text-for.tHome -%}{%- assign home = site.data.text-for.tHome -%}{%- endif -%}
+	{%- if page.url == '/' %}
+	<div class="item isActiveSelection">
+	{%- else %}
+	<div class="item">
+	{%- endif %}
+		<div class="title">
+			<label class="symbol"><p></p></label>
+			<div class="text"><a href="{{ site.url }}{{ site.baseurl }}/index.html"><p>{{ home }}</p></a></div>
+		</div>
+	</div>
+	
+	{%- comment -%}<!-- Page menus -->{%- endcomment -%}
+	{%- for topTitle in topTitles -%}
+
+		{%- if jekyll.environment != 'production' and site.data.setup.fast-content-build -%}{%- else -%}
+			
+			{%- comment -%}<!-- note: the html comment tags are for editor coloring support
+			
+			Due to the poor support for variables in Liquid we have to resort to some fairly laborious code.
+			
+			First determine all pages that contain sub menu information for the running top menu item. These are collected in "titlePages"
+			
+			Then create four lists containing the sub menu title, index, url and link respectively. These lists are all in the same sequence such that entry [n] is applicable to the same sub menu in all lists. (I.e. they are synchronous)
+			
+			Then sort the lists into four new lists. Again these lists must be kept synchronous.
+			
+			Lastly, step through the lists to create the actual sub menu's
+			
+			-->{%- endcomment -%}
+			
+			{%- assign titlePages = site.pages | where:'menuInclude', true | where:'menuTopTitle', topTitle -%}
+			
+			{%- assign subMenuTitles = "" | split: "" -%}
+			{%- assign subMenuIndexes = "" | split: "" -%}
+			{%- assign subMenuUrls = "" | split: "" -%}
+			{%- assign subMenuLinks = "" | split: "" -%}
+
+			{%- for ape in titlePages -%}
+				{%- if ape.menuSubTitle != nil -%}
+					{%- assign subMenuTitles = subMenuTitles | push: ape.menuSubTitle -%}
+					{%- if ape.menuSubIndex != nil -%}
+						{%- assign subMenuIndexes = subMenuIndexes | push: ape.menuSubIndex -%}
+					{%- else -%}
+						{%- assign subMenuIndexes = subMenuIndexes | push: -1 -%}
+					{%- endif -%}
+					{%- assign subMenuUrls = subMenuUrls | push: ape.url -%}
+					{%- if ape.menuLink != nil -%}
+						{%- assign subMenuLinks = subMenuLinks | push: ape.menuLink -%}
+					{%- else -%}
+						{%- assign subMenuLinks = subMenuLinks | push: true -%}
+					{%- endif -%}
+				{%- endif -%}
+				{%- if ape.menuSubs != nil -%}
+					{%- for sub in ape.menuSubs -%}
+						{%- assign subMenuTitles = subMenuTitles | push: sub.title -%}
+						{%- if sub.index != nil -%}
+							{%- assign subMenuIndexes = subMenuIndexes | push: sub.index -%}
+						{%- else -%}
+							{%- assign subMenuIndexes = subMenuIndexes | push: -1 -%}
+						{%- endif -%}
+						{%- if sub.url != nil -%}
+							{%- if sub.anchorId != nil -%}
+								{%- assign urlWithAnchorId = sub.url | append: '#' | append: sub.anchorId -%}
+							{%- else -%}
+								{%- assign urlWithAnchorId = sub.url -%}
+							{%- endif -%}
+						{%- else -%}
+							{%- if sub.anchorId != nil -%}
+								{%- assign urlWithAnchorId = ape.url | append: '#' | append: sub.anchorId -%}
+							{%- else -%}
+								{%- assign urlWithAnchorId = ape.url -%}
+							{%- endif -%}
+						{%- endif -%}
+						{%- assign subMenuUrls = subMenuUrls | push: urlWithAnchorId -%}
+						{%- if sub.link != nil -%}
+							{%- assign subMenuLinks = subMenuLinks | push: sub.link -%}
+						{%- else -%}
+							{%- assign subMenuLinks = subMenuLinks | push: true -%}
+						{%- endif -%}
+					{%- endfor -%}
+				{%- endif -%}
+			{%- endfor -%}
+
+			{%- assign sortedSubMenuTitles = "" | split: "" -%}
+			{%- assign sortedSubMenuIndexes = subMenuIndexes | sort -%}
+			{%- assign sortedSubMenuUrls = "" | split: "" -%}
+			{%- assign sortedSubMenuLinks = "" | split: "" -%}
+
+			{%- for menuIndex in sortedSubMenuIndexes -%}
+				{%- if menuIndex != -1 -%}
+					{%- for aMenuIndex in subMenuIndexes -%}
+						{%- if aMenuIndex == menuIndex -%}
+							{%- assign sortedSubMenuTitles = sortedSubMenuTitles | push: subMenuTitles[forloop.index0] -%}
+							{%- assign sortedSubMenuUrls = sortedSubMenuUrls | push: subMenuUrls[forloop.index0] -%}
+							{%- assign sortedSubMenuLinks = sortedSubMenuLinks | push: subMenuLinks[forloop.index0] -%}
+							{%- continue -%}
+						{%- endif -%}
+					{%- endfor -%}
+				{%- endif -%}
+			{%- endfor -%}
+			{%- for aMenuIndex in subMenuIndexes -%}
+				{%- if aMenuIndex == -1 -%}
+					{%- assign sortedSubMenuTitles = sortedSubMenuTitles | push: subMenuTitles[forloop.index0] -%}
+					{%- assign sortedSubMenuUrls = sortedSubMenuUrls | push: subMenuUrls[forloop.index0] -%}
+					{%- assign sortedSubMenuLinks = sortedSubMenuLinks | push: subMenuLinks[forloop.index0] -%}
+					{%- continue -%}
+				{%- endif -%}
+			{%- endfor -%}
+
+		{%- endif %}
+	<div class="item-separator"><p><!-- empty but necessary --></p></div>
+		
+		{%- comment -%}<!-- If the menu selection and active page are the same, show it -->{%- endcomment -%}
+		
+		{%- if page.menuTopTitle == topTitle  -%}
+			{%- if page.menuLink == false %}
+	<div class="item">
+			{%- else %}
+	<div class="item isActiveSelection">
+			{%- endif -%}
+		{%- else %}
+	<div class="item">
+		{%- endif -%}
+
+		{%- comment -%}<!-- Create top menu item -->{%- endcomment %}
+		<input type="checkbox" id="{{ topTitle | append:'-checkbox'}}">
+		<div class="title">
+			<label class="symbol" for="{{ topTitle | append:'-checkbox'}}">
+		{%- if sortedSubMenuTitles.size > 0 %}
+				<p class="code"><!-- will be filled by disclosure indicator --></p>
+		{%- else %}
+				<p></p>
+		{%- endif %}
+			</label>
+			<div class="text">
+					
+		{%- comment -%}<!-- Find page to link to -->{%- endcomment -%}
+					
+		{%- assign pageFound = false -%}
+		{%- for ape in site.pages -%}
+			{%- if ape.menuTopTitle == topTitle and ape.menuSubTitle == nil and ape.menuSubs == nil -%}
+				{%- if ape.menuLink == false %}
+				<p class="paddingAsLink">{{ topTitle }}</p>
+				{%- else %}
+				<a href="{{ ape.url | relative_url }}"><p>{{ topTitle }}</p></a>
+				{%- endif -%}
+				{%- assign pageFound = true -%}
+				{%- break -%}
+			{%- endif -%}
+		{%- endfor -%}
+		{%- if pageFound == false -%}
+			{%- for ape in site.pages -%}
+				{%- if ape.menuTopTitle == topTitle and ape.menuTopIndex -%}
+					{%- if ape.menuLink == false %}
+				<p class="paddingAsLink">{{ topTitle }}</p>
+					{%- else %}
+				<a href="{{ ape.url | relative_url }}"><p>{{ topTitle }}</p></a>
+					{%- endif -%}
+					{%- assign pageFound = true -%}
+					{%- break -%}
+				{%- endif -%}
+			{%- endfor -%}
+			{%- if pageFound == false %}
+				<p class="paddingAsLink">{{ topTitle }}</p>
+			{%- endif -%}
+		{%- endif %}
+			</div>
+		</div>
+				
+
+		{%- if jekyll.environment != 'production' and site.data.setup.fast-content-build -%}{%- else %}
+				
+			{%- comment -%}<!-- Create sub menu items -->{%- endcomment -%}
+				
+			{% if sortedSubMenuTitles.size > 0 -%}
+				{%- if site.data.setup.drop-down-menu %}
+		<div class="dropdown">
+				{%- else %}
+		<div class="dropdown-narrow">
+				{%- endif -%}
+				{%- for subMenuTitle in sortedSubMenuTitles %}
+						
+					{%- comment -%}<!-- Build the sub-sub tables for {{ subMenuTitle }} -->{%- endcomment -%}
+						
+					{% assign subsubMenuTitles = "" | split: "" -%}
+					{%- assign subsubMenuIndexes = "" | split: "" -%}
+					{%- assign subsubMenuUrls = "" | split: "" -%}
+					{%- assign subsubMenuLinks = "" | split: "" -%}
+
+					{%- for ape in titlePages %}
+						{%- if ape.menuSubs != nil %}
+							{%- for sub in ape.menuSubs -%}
+								{%- if sub.title == subMenuTitle %}
+									{%- if sub.sub != nil %}
+										{%- for subsub in sub.sub %}
+											{%- assign subsubMenuTitles = subsubMenuTitles | push: subsub.title -%}
+											{%- if subsub.index != nil -%}
+												{%- assign subsubMenuIndexes = subsubMenuIndexes | push: subsub.index -%}
+											{%- else -%}
+												{%- assign subsubMenuIndexes = subsubMenuIndexes | push: -1 -%}
+											{%- endif -%}
+											{%- if subsub.url != nil -%}
+												{%- if subsub.anchorId != nil -%}
+													{%- assign urlWithAnchorId = subsub.url | append: '#' | append: subsub.anchorId -%}
+												{%- else -%}
+													{%- assign urlWithAnchorId = subsub.url -%}
+												{%- endif -%}
+											{%- else -%}
+												{%- if subsub.anchorId != nil -%}
+													{%- assign urlWithAnchorId = ape.url | append: '#' | append: subsub.anchorId -%}
+												{%- else -%}
+													{%- assign urlWithAnchorId = ape.url -%}
+												{%- endif -%}
+											{%- endif -%}
+											{%- assign subsubMenuUrls = subsubMenuUrls | push: urlWithAnchorId -%}
+											{%- if subsub.link != nil -%}
+												{%- assign subsubMenuLinks = subsubMenuLinks | push: subsub.link -%}
+											{%- else -%}
+												{%- assign subsubMenuLinks = subsubMenuLinks | push: true -%}
+											{%- endif -%}
+										{%- endfor -%}
+									{%- endif -%}
+								{%- endif -%}
+							{%- endfor -%}
+						{%- endif -%}
+					{%- endfor %}
+
+					{%- comment -%}<!-- Sort all 4 the lists based on the index of the subMenu that was read -->{%- endcomment -%}
+							
+					{% assign sortedSubsubMenuTitles = "" | split: "" -%}
+					{%- assign sortedSubsubMenuIndexes = subsubMenuIndexes | sort -%}
+					{%- assign sortedSubsubMenuUrls = "" | split: "" -%}
+					{%- assign sortedSubsubMenuLinks = "" | split: "" -%}
+
+					{%- for menuIndex in sortedSubsubMenuIndexes -%}
+						{%- if menuIndex != -1 -%}
+							{%- for aMenuIndex in subsubMenuIndexes -%}
+								{%- if aMenuIndex == menuIndex -%}
+									{%- assign sortedSubsubMenuTitles = sortedSubsubMenuTitles | push: subsubMenuTitles[forloop.index0] -%}
+									{%- assign sortedSubsubMenuUrls = sortedSubsubMenuUrls | push: subsubMenuUrls[forloop.index0] -%}
+									{%- assign sortedSubsubMenuLinks = sortedSubsubMenuLinks | push: subsubMenuLinks[forloop.index0] -%}
+									{%- continue -%}
+								{%- endif -%}
+							{%- endfor -%}
+						{%- endif -%}
+					{%- endfor -%}
+					{%- for aMenuIndex in subsubMenuIndexes -%}
+						{%- if aMenuIndex == -1 -%}
+							{%- assign sortedSubsubMenuTitles = sortedSubsubMenuTitles | push: subsubMenuTitles[forloop.index0] -%}
+							{%- assign sortedSubsubMenuUrls = sortedSubsubMenuUrls | push: subsubMenuUrls[forloop.index0] -%}
+							{%- assign sortedSubsubMenuLinks = sortedSubsubMenuLinks | push: subsubMenuLinks[forloop.index0] -%}
+							{%- continue -%}
+						{%- endif -%}
+					{%- endfor %}
+
+					{%- comment -%}<!-- Create the sub menu -->{%- endcomment %}
+			<div class="subitem-separator"><p></p></div>
+					{%- if sortedSubMenuLinks[forloop.index0] != false -%}
+						{%- if sortedSubMenuUrls[forloop.index0] == page.url %}
+			<div class="subitem isActiveSelection">
+						{%- else -%}
+							{%- assign urlFound = false -%}
+							{%- for url in sortedSubSubMenuUrls -%}
+								{%- if url == page.url -%}{%- assign urlFound = true -%}{%- endif -%}
+							{%- endfor -%}
+							{%- if urlFound %}
+			<div class="subitem isActiveSelection">
+							{%- else %}
+			<div class="subitem">
+							{%- endif -%}
+						{%- endif %}
+				<input type="checkbox" id="{{ subMenuTitle | append:'-checkbox'}}">
+				<div class="title">
+					<label class="symbol" for="{{ subMenuTitle | append:'-checkbox'}}">
+						{%- if sortedSubsubMenuTitles.size > 0 %}
+						<p class="code"><!-- will be filled by disclosure indicator --></p>
+						{%- else %}
+						<p></p>
+						{%- endif %}
+					</label>
+					<div class="text">
+						<a href="{{ sortedSubMenuUrls[forloop.index0] | relative_url }}"><p>{{ subMenuTitle }}</p></a>
+					</div>
+				</div>
+					{%- else -%}
+						{%- assign urlFound = false -%}
+						{%- for url in sortedSubSubMenuUrls -%}
+							{%- if url == page.url -%}{%- assign urlFound = true -%}{%- endif -%}
+						{%- endfor -%}
+						{%- if urlFound %}
+			<div class="subitem isActiveSelection">
+						{%- else %}
+			<div class="subitem">
+						{%- endif %}
+				<input type="checkbox" id="{{ subMenuTitle | append:'-checkbox'}}">
+				<div class="title">
+					<label class="symbol" for="{{ subMenuTitle | append:'-checkbox'}}">
+						{%- if sortedSubsubMenuTitles.size > 0 %}
+						<p class="code"><!-- will be filled by disclosure indicator --></p>
+						{%- else %}
+						<p></p>
+						{%- endif %}
+					</label>
+					<div class="text"><p class="paddingAsLink">{{ subMenuTitle }}</p></div>
+				</div>
+					{%- endif -%}
+							
+					{%- comment -%}<!-- sub sub menu item build -->{%- endcomment -%}
+
+					{% if sortedSubsubMenuTitles.size > 0 -%}
+						{%- if site.data.setup.drop-down-menu %}
+				<div class="sub-dropdown">
+						{%- else %}
+				<div class="sub-dropdown-narrow">
+						{%- endif -%}
+						{%- for subsubMenuTitle in sortedSubsubMenuTitles %}
+					<div class="subsubitem-separator"><p></p></div>
+							{%- if sortedSubsubMenuLinks[forloop.index0] != false -%}
+								{%- if sortedSubsubMenuUrls[forloop.index0] == page.url %}
+					<div class="subsubitem isActiveSelection">
+								{%- else %}
+					<div class="subsubitem">
+								{%- endif %}
+						<div class="title">
+							<div class="symbol"><p></p></div>
+							<div class="text">
+								<a href="{{ sortedSubsubMenuUrls[forloop.index0] | relative_url }}"><p>{{ subsubMenuTitle }}</p></a>
+							</div>
+						</div>
+							{%- else %}
+					<div class="subsubitem">
+						<div class="title">
+							<div class="symbol"><p></p></div>
+							<div class="text"><p class="paddingAsLink">{{ subsubMenuTitle }}</p></div>
+						</div>
+							{%- endif %}
+					</div>
+						{%- endfor %}
+				</div>
+					{%- endif %}
+			</div>
+				{%- endfor %}
+		</div>			
+			{%- endif -%}
+		{%- endif %}
+	</div>
+	{%- endfor -%}
+
+
+	{%- comment -%}<!-- Categories menu -->{%- endcomment -%}
+	
+	{%- if jekyll.environment != 'production' and site.data.setup.fast-content-build -%}{%- else -%}
+		{%- if site.data.setup.generate-categories-menu -%}
+			{%- assign cats = site.pages | where:'layout', 'category-page' | sort:'title' -%}
+			{%- if cats.size > 0 -%}
+				{%- assign categories = 'Categories' -%}
+				{%- if site.data.text-for.tCategories -%}{%- assign categories = site.data.text-for.tCategories -%}{%- endif %}
+	<div class="item-separator"><p><!-- empty but necessary --></p></div>
+				
+				{%- comment -%}<!-- Check if a category page is selected -->{%- endcomment -%}
+				
+				{%- assign selected = false -%}
+				{%- for cat in cats -%}{%- if cat.url == page.url -%}{%- assign selected = true -%}{%- endif -%}{%- endfor -%}
+				{%- if selected -%}
+					{%- if site.data.setup.drop-down-menu %}
+	<div class="item isActiveSelection">
+					{%- else %}
+	<div class="item-narrow-only isActiveSelection">
+					{%- endif -%}
+				{%- else -%}
+					{%- if site.data.setup.drop-down-menu %}
+	<div class="item">
+					{%- else %}
+	<div class="item-narrow-only">
+					{%- endif -%}
+				{%- endif %}
+		<input type="checkbox" id="category-checkbox">
+		<div class="title">
+			<label class="symbol" for="category-checkbox">
+				{%- if cats.size > 0 %}
+				<p class="code"><!-- will be filled by disclosure indicator --></p>
+				{%- else -%}
+				<p></p>
+				{%- endif -%}
+			</label>
+			<div class="text"><p class="paddingAsLink">{{ categories }}</p></div>
+		</div>
+		<div class="dropdown">
+				{%- for cat in cats %}
+			<div class="subitem-separator"><p></p></div>
+					{%- if cat.url == page.url %}
+			<div class="subitem isActiveSelection">
+					{%- else %}
+			<div class="subitem">
+					{%- endif %}
+				<div class="title">
+					<div class="symbol"></div>
+					<div class="text">
+						<a href="{{ cat.url | relative_url }}"><p>{{ cat.title | capitalize }}</p></a>
+					</div>
+				</div>
+			</div>
+				{%- endfor %}
+		</div>
+	</div>
+			{%- endif -%}
+		{%- endif -%}
+	{%- endif %}
+</nav>
+<!-- end of include menubar.html -->