harms-columns-front-page 1.1.1 → 2.0.0

data/_includes/css/vendor/jquery-ui.min.css

@@ -0,0 +1,7 @@
+/*! jQuery UI - v1.12.1 - 2017-07-02
+* http://jqueryui.com
+* Includes: core.css, accordion.css, theme.css
+* To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=base&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=aaaaaa&iconColorError=cc0000&fcError=5f3f3f&borderColorError=f1a899&bgTextureError=flat&bgColorError=fddfdf&iconColorHighlight=777620&fcHighlight=777620&borderColorHighlight=dad55e&bgTextureHighlight=flat&bgColorHighlight=fffa90&iconColorActive=ffffff&fcActive=ffffff&borderColorActive=003eff&bgTextureActive=flat&bgColorActive=007fff&iconColorHover=555555&fcHover=2b2b2b&borderColorHover=cccccc&bgTextureHover=flat&bgColorHover=ededed&iconColorDefault=777777&fcDefault=454545&borderColorDefault=c5c5c5&bgTextureDefault=flat&bgColorDefault=f6f6f6&iconColorContent=444444&fcContent=333333&borderColorContent=dddddd&bgTextureContent=flat&bgColorContent=ffffff&iconColorHeader=444444&fcHeader=333333&borderColorHeader=dddddd&bgTextureHeader=flat&bgColorHeader=e9e9e9&cornerRadius=3px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif
+* Copyright jQuery Foundation and other contributors; Licensed MIT */
+
+.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important;pointer-events:none}.ui-icon{display:inline-block;vertical-align:middle;margin-top:-.25em;position:relative;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-icon-block{left:50%;margin-left:-8px;display:block}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-accordion .ui-accordion-header{display:block;cursor:pointer;position:relative;margin:2px 0 0 0;padding:.5em .5em .5em .7em;font-size:100%}.ui-accordion .ui-accordion-content{padding:1em 2.2em;border-top:0;overflow:auto}.ui-widget{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget.ui-widget-content{border:1px solid #c5c5c5}.ui-widget-content{border:1px solid #ddd;background:#fff;color:#333}.ui-widget-content a{color:#333}.ui-widget-header{border:1px solid #ddd;background:#e9e9e9;color:#333;font-weight:bold}.ui-widget-header a{color:#333}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,.ui-button,html .ui-button.ui-state-disabled:hover,html .ui-button.ui-state-disabled:active{border:1px solid #c5c5c5;background:#f6f6f6;font-weight:normal;color:#454545}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited,a.ui-button,a:link.ui-button,a:visited.ui-button,.ui-button{color:#454545;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus,.ui-button:hover,.ui-button:focus{border:1px solid #ccc;background:#ededed;font-weight:normal;color:#2b2b2b}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited,a.ui-button:hover,a.ui-button:focus{color:#2b2b2b;text-decoration:none}.ui-visual-focus{box-shadow:0 0 3px 1px rgb(94,158,214)}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active,.ui-button:active,.ui-button.ui-state-active:hover{border:1px solid #003eff;background:#007fff;font-weight:normal;color:#fff}.ui-icon-background,.ui-state-active .ui-icon-background{border:#003eff;background-color:#fff}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#fff;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #dad55e;background:#fffa90;color:#777620}.ui-state-checked{border:1px solid #dad55e;background:#fffa90}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#777620}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #f1a899;background:#fddfdf;color:#5f3f3f}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#5f3f3f}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#5f3f3f}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("images/ui-icons_444444_256x240.png")}.ui-widget-header .ui-icon{background-image:url("images/ui-icons_444444_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon,.ui-button:hover .ui-icon,.ui-button:focus .ui-icon{background-image:url("images/ui-icons_555555_256x240.png")}.ui-state-active .ui-icon,.ui-button:active .ui-icon{background-image:url("images/ui-icons_ffffff_256x240.png")}.ui-state-highlight .ui-icon,.ui-button .ui-state-highlight.ui-icon{background-image:url("images/ui-icons_777620_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("images/ui-icons_cc0000_256x240.png")}.ui-button .ui-icon{background-image:url("images/ui-icons_777777_256x240.png")}.ui-icon-blank{background-position:16px 16px}.ui-icon-caret-1-n{background-position:0 0}.ui-icon-caret-1-ne{background-position:-16px 0}.ui-icon-caret-1-e{background-position:-32px 0}.ui-icon-caret-1-se{background-position:-48px 0}.ui-icon-caret-1-s{background-position:-65px 0}.ui-icon-caret-1-sw{background-position:-80px 0}.ui-icon-caret-1-w{background-position:-96px 0}.ui-icon-caret-1-nw{background-position:-112px 0}.ui-icon-caret-2-n-s{background-position:-128px 0}.ui-icon-caret-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-65px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-65px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:1px -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:3px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:3px}.ui-widget-overlay{background:#aaa;opacity:.3;filter:Alpha(Opacity=30)}.ui-widget-shadow{-webkit-box-shadow:0 0 5px #666;box-shadow:0 0 5px #666}

data/_includes/custom-colors.html

@@ -0,0 +1,92 @@
+<!-- CSS that overrides the defaults, when the theme user selected custom colors in the site's global configuration -->
+<style>
+
+  /* Custom header background-color */
+  {% if site.header-color %}
+    div.header {
+      background-color: {{ site.header-color }} !important;
+    }
+  {% endif %}
+
+  /* Custom background-color for the front page columns */
+  {% if site.columns-color %}
+    .dark-section .col {
+      background-color: {{ site.columns-color }} !important;
+      -webkit-box-shadow: none !important;
+      -moz-box-shadow: none !important;
+      box-shadow: none !important;
+    }
+  {% endif %}
+
+  /* Custom color for the site's h1 */
+  {% if site.h1-color %}
+    h1 {
+      color: {{ site.h1-color }} !important;
+    }
+  {% endif %}
+
+  /* Custom color for the site's h2 */
+  {% if site.h2-color %}
+    h2 {
+      color: {{ site.h2-color }} !important;
+    }
+  {% endif %}
+
+  /* Custom color for all of the site's links and buttons (except for the social buttons) */
+  {% if site.link-color %}
+    html body a {
+      color: {{ site.link-color }};
+    }
+
+    html body .wrapper .tag-list li a.selected {
+      background-color: {{ site.link-color }};
+      border-color: {{ site.link-color }};
+    }
+
+    html body .wrapper #accordion .ui-accordion-header.ui-state-active {
+      border-color: {{ site.link-color }};
+      background-color: {{ site.link-color }};
+    }
+
+    a.button {
+      border: 1px solid {{ site.link-color }};
+      color: {{ site.link-color }};
+    }
+
+    a.button:hover {
+      background-color: {{ site.link-color }};
+    }
+
+    html body nav ul .mobile.menu-button:hover .menu-button-container .menu-button-line {
+      background-color: {{ site.link-color }};
+    }
+
+    html body nav ul a:hover {
+      color: {{ site.link-color }};
+    }
+
+    html body nav ul.desktop-nav li.active {
+      border-bottom: 5px solid {{ site.link-color }};
+    }
+
+    html body nav ul.desktop-nav li.active a {
+      color: {{ site.link-color }};
+    }
+
+    html body nav ul.desktop-nav li a:hover {
+      color: {{ site.link-color }};
+    }
+
+    html body div.mobile-nav-content ul li.active {
+      border-bottom: 1px solid {{ site.link-color }};
+    }
+
+    html body div.mobile-nav-content ul li.active a {
+      color: {{ site.link-color }};
+    }
+
+    html body div.mobile-nav-content ul li a:hover {
+      color: {{ site.link-color }};
+    }
+  {% endif %}
+</style>

data/_includes/footer.html

@@ -1,49 +1,54 @@
-
 <footer>
-  <div class="social-container">
-    {% for item in site.social %}
 
+  <!-- only displays the social area when the corresponding site variable is set -->
+  {% if site.social %}
+    <div class="social-container">
+
+      <!-- Goes through every entry in the social var in site and displays a link for it. If there's an icon specified, then it's used instead of the title -->
+      {% for item in site.social %}
         {% if item.icon %}
-          <a href="{{ item.url }}" target="_blank"><img class="social-icon" src="{{ item.icon }}"></a>
-        {% else %}
+          <a href="{{ item.url }}" target="_blank"><img class="social-icon" src="{{ item.icon }}"></a> {
+        % else %}
           <a class="button light" href="{{ item.url }}" target="_blank">{{ item.title }}</a>
         {% endif %}
+      {% endfor %}
+    </div>
+  {% endif %}
+
+  <p>&copy;
 
-    {% endfor %}
-  </div>
+    <!-- displays the copyright text defined in the corresponding site variable -->
+    {{ site.footer-copyright }}
+    -
 
-  <p>&copy; {{ site.footer-copyright }} - <a href="/impressum">Impressum</a> - Webdesign by <a href="https://www.harms.design" target="_blank">Michael Harms</a></p>
+    <!-- goes through every page that has the value 'footer' for it's variable 'nav' and displays them as sorted links -->
+    {% assign sorted_pages = site.pages | sort:"nav-position" %}
+      {% for item in sorted_pages %}
+        {% if item.nav == 'footer' %}
+          <a href="{{ item.permalink }}">{{ item.title }}</a>
+          -
+        {% endif %}
+      {% endfor %}
+
+      Webdesign by <a href="https://www.harms.design" target="_blank">Michael Harms</a></p>
 
 </footer>
 
-<script
-  src="https://code.jquery.com/jquery-3.2.1.min.js"
-  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
-  crossorigin="anonymous">
+<!-- jQuery for DOM-Manipulation -->
+<script type="text/javascript">
+  {% include js/vendor/jquery-3.2.1.min.js %}
 </script>
-<script src="{{ "/assets/main.js " | relative_url }}"></script>
-<!-- <script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>
-{% raw %}
-<script id="search-results-template" type="text/mustache">
-  {{#entries}}
-    <article>
-        <a href="{{url}}">{{title}}</a>
-        {{#date}} - <small><time datetime="{{pubdate}}" pubdate>{{displaydate}}</time></small>{{/date}}
-    </article>
-  {{/entries}}
+
+<!-- jQuery UI for the Theme's Accordion -->
+<script type="text/javascript">
+  {% include js/vendor/jquery-ui.min.js %}
 </script>
-{% endraw %}
+
+<!-- Main JavaScript Functionalities -->
 <script type="text/javascript">
-  $(function() {
-    $('#search-query').lunrSearch({
-      indexUrl  : '/js/index.json',           // url for the .json file containing search index data
-      results   : '#search-results',          // selector for containing search results element
-      template  : '#search-results-template', // selector for Mustache.js template
-      titleMsg  : '<h3>Suchergebnisse</h3><p>Der Suchbegriff findet sich in:</p>',   // message attached in front of results (can be empty)
-      emptyMsg  : '<p>Keine Suchergebnisse gefunden.</p>'     // shown message if search returns no results
-    });
-  });
-</script> -->
+  {% include js/main.js %}
+</script>
+
 </body>
 
 </html>

data/_includes/header.html

@@ -1,169 +1,62 @@
 <!DOCTYPE html>
+
+<!-- gives the lang-attribute the same value as in the corresponding page variable. If that's not set, it uses the global site's configuration and if that isn't set either, it uses 'en' as a default value -->
 <html lang="{{ page.lang | default: site.lang | default: " en " }}">
 
 <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
-    <title>{{ site.title | escape }}{% if page.title %} | {{ page.title | escape }}{% endif %}</title>
-    <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
-
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
-    <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 }}">
-    <link rel="icon" type="image/png" href="{{ site.favicon }}" sizes="32x32">
-</head>
-
-<body>
-<nav>
-    <ul class="desktop-nav">
-
-      <div class="search-container">
-        <form action="" method="get">
-          <input type="text" id="search-query" name="q" placeholder="Suchen..." autocomplete="off">
-        </form>
-        <div class="close-search">
-          <div class="close-search-button">
-            <div class="close-search-line" id="line-a">
-
-            </div>
-            <div class="close-search-line" id="line-b">
-
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-      {% assign sorted_pages = site.pages | sort:"nav-order" %}
-      {% for item in sorted_pages %}
-        {% if item.nav == true %}
-          <li {% if item.url == page.url %} class="active" {% endif %}>
-            <a href="{{ item.permalink }}">{{ item.title }}</a>
-          </li>
-        {% endif %}
-      {% endfor %}
-
-        <li class="search-button">
-          <a href="#">
-            <svg id="search-icon" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="19.70711" height="20.49911" viewBox="0 0 19.70711 20.49911">
-              <defs>
-                <style>
-                  .cls-1, .cls-2 {
-                    fill: none;
-                  }
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
-                  .cls-2 {
-                    stroke-width: 2px;
-                  }
-                </style>
-              </defs>
-              <title>Gruppe 19</title>
-              <g id="Gruppe_19" data-name="Gruppe 19">
-                <g id="Ellipse_1" data-name="Ellipse 1">
-                  <circle class="cls-1" cx="7.521" cy="7.521" r="7.521"/>
-                  <circle class="cls-2" cx="7.521" cy="7.521" r="6.521"/>
-                </g>
-                <line id="Linie_1" data-name="Linie 1" class="cls-2" x1="11.875" y1="12.667" x2="19" y2="19.792"/>
-              </g>
-            </svg>
-          </a>
-        </li>
+  <!-- Displays the site title as set in the global configuration and then the title of the current page if set -->
+  <title>{{ site.title | escape }}{% if page.title %} | {{ page.title | escape }}{% endif %}</title>
 
-        <li class=" mobile menu-button">
+  <!-- Sets an excerpt of the page as the meta description, if that's not possible it uses the site's global description variable -->
+  <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
 
-          <div class="menu-button-container">
-            <div class="menu-button-line" id="line-1">
+  <!-- Stylesheet for the jQuery UI Library -->
+  <style media="screen">
+    {% include css/vendor/jquery-ui.min.css %}
+  </style>
 
-            </div>
-            <div class="menu-button-line" id="line-2">
+  <!-- Stylesheet for the site's font from Google Fonts -->
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
 
-            </div>
-            <div class="menu-button-line" id="line-3">
+  <!-- The Theme's main stylesheet -->
+  <link rel="stylesheet" href="{{ "/assets/css/main.css " | relative_url }}">
 
-            </div>
+  <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 }}">
 
-          </div>
+  <!-- The site's favicon -->
+  <link rel="icon" type="image/png" href="{{ site.favicon }}" sizes="32x32">
 
-        </li>
-        <li class="mobile search-button">
+  <!-- CSS that overrides the defaults, when the theme user selected custom colors in the site's global configuration -->
+  {% include custom-colors.html %}
 
-          <a href="#">
-            <svg id="search-icon" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="19.70711" height="20.49911" viewBox="0 0 19.70711 20.49911">
-              <defs>
-                <style>
-                  .cls-1, .cls-2 {
-                    fill: none;
-                  }
-
-                  .cls-2 {
-                    stroke-width: 2px;
-                  }
-                </style>
-              </defs>
-              <title>Gruppe 19</title>
-              <g id="Gruppe_19" data-name="Gruppe 19">
-                <g id="Ellipse_1" data-name="Ellipse 1">
-                  <circle class="cls-1" cx="7.521" cy="7.521" r="7.521"/>
-                  <circle class="cls-2" cx="7.521" cy="7.521" r="6.521"/>
-                </g>
-                <line id="Linie_1" data-name="Linie 1" class="cls-2" x1="11.875" y1="12.667" x2="19" y2="19.792"/>
-              </g>
-            </svg>
-          </a>
-
-        </li>
-    </ul>
-    <!-- <ul class="mobile-nav">
-
-    </ul> -->
-</nav>
+</head>
 
-<div id="search-results" style="display: none;"></div>
 
-<div class="mobile-nav-content">
-<ul>
-  {% assign sorted_pages = site.pages | sort:"nav-order" %}
-  {% for item in sorted_pages %}
-    {% if item.nav == true %}
-      <li {% if item.url == page.url %} class="active" {% endif %}>
-        <a href="{{ item.permalink }}">{{ item.title }}</a>
-      </li>
-    {% endif %}
-  {% endfor %}
-</ul>
-</div>
+<body>
 
-{% if page.featured-image %}
-  <div class="header" style="height: 120px; background-image: url({{ page.featured-image }}); background-size: cover; background-position: center">
-{% else %}
-<div class="header">
-  <div class="header-content">
-    <div class="header-left">
-      {% if site.profile-image %}
-      <div class="profile-image" style="background-image: url('{{ site.profile-image }}')"></div>
-      {% endif %}
-      <div class="header-text">
-        <h1>{{ site.title | escape }}</h1>
-        <p class="sub-title">{{ site.subtitle | escape }}</p>
+  <!-- displays the main desktop and the main mobile navigation menu -->
+  {% include nav.html %}
+
+  <!-- displays the header (If the page has a featured-image set it uses it as the header. If not, it shows the default header with the profile/logo image and the site's title and subtitle) -->
+  {% if page.featured-image %}
+    <div class="header" style="height: 120px; background-image: url({{ page.featured-image }}); background-size: cover; background-position: center">
+  {% else %}
+  <div class="header">
+    <div class="header-content">
+      <div class="header-left">
+        {% if site.profile-image %}
+        <a href="{{ site.url }}"><div class="profile-image" style="background-image: url('{{ site.profile-image }}')"></div></a>
+        {% endif %}
+        <div class="header-text">
+          <a href="{{ site.url }}"><h1>{{ site.title | escape }}</h1></a>
+          <a href="{{ site.url }}"><p class="sub-title">{{ site.subtitle | escape }}</p></a>
+        </div>
       </div>
     </div>
-
-    <!-- <div class="header-right">
-      {% for item in site.social %}
-
-          {% if item.icon %}
-            <a href="{{ item.url }}" target="_blank"><img class="social-icon" src="{{ item.icon }}"></a>
-          {% else %}
-            <a class="button light" href="{{ item.url }}" target="_blank">{{ item.title }}</a>
-          {% endif %}
-
-      {% endfor %}
-    </div> -->
-
+    {% endif %}
   </div>
-  {% endif %}
-
-</div>

data/_includes/js/main.js

@@ -0,0 +1,97 @@
+
+// executes the following functions after the document has beeen loaded
+$(document).ready(function() {
+
+
+
+
+  // -- TAG-FILTER --------
+
+    //if a button with the class 'tag' is clicked...
+    $('.tag').on('click', function(e){
+
+      // ...don't redirect the browser
+      e.preventDefault();
+
+      // ...save the id of the button in a variable (it contains the name of the tag)
+      var selectedTag = this.id;
+
+      // ...remove the class 'selected' (which highlights the buttons) from all buttons with the class 'tag'
+      $('.tag').removeClass('selected');
+
+      // ...add the class 'selected' (which highlights the buttons) to the button that has been clicked on
+      $(this).addClass('selected');
+
+      // ...if the clicked button is the 'show-all'-button, then show all posts (by removing the class 'hidden' from all posts) in the post list
+      if ( $(this).hasClass('show-all') ) {
+          $('.post').removeClass('hidden');
+      // ...if the clicked button is not the 'show-all'-button, then hide all posts (by adding the class 'hidden' to all posts) and then show (by removing the class 'hidden' again) the posts only, which have the id of the clicked button (which is the selected tag value) in there class list (and therefore belong to that tag)
+      } else {
+        $('.post').addClass('hidden');
+        $('.' + selectedTag).removeClass('hidden');
+      }
+
+    });
+
+
+
+
+  // -- ACCORDION --------
+
+    // initializes the jQuery UI Accordion Functionality for every element with the id of 'accordion'
+    $( function() {
+      $( "#accordion" ).accordion({
+        heightStyle: "content"
+      });
+    });
+
+
+
+
+  // -- TOGGLE BUTTON FOR THE MOBILE NAV --------
+
+    // if the toggle button is clicked...
+    $('.menu-button').on('click', function() {
+
+      // ...close the mobile nav if the html element has the class 'mobile-menu-open' (which means, that the mobile nav is open)
+      if ( $('html').hasClass('mobile-menu-open') ) {
+        $('.mobile-nav-content li').css('opacity', '0');
+        $('.mobile-nav-content').fadeOut();
+        $('.mobile-nav-content li').css('transform', 'translateX(-10px)');
+
+      // ...open the mobile nav if the html element doesn't have the class 'mobile-menu-open' (which means, that the mobile nav is closed)
+      } else {
+        // fades in the container
+        $('.mobile-nav-content').fadeIn();
+        // fades in and slides in the nav links with a timeout that gets bigger with each link, so that they are displayed one after another
+        $('.mobile-nav-content li').each(function(i) {
+
+          setTimeout(function() {
+            $('.mobile-nav-content li').eq(i).css('opacity', '1').css('transform', 'translateX(0)');
+          }, 100 * (i+1));
+
+        });
+      }
+
+      // toggles the class 'mobile-menu-open' on the html element, which is used for case sensitive (nav open or closed) styling of child elements and for determining wether the mobile nav is visible or not
+      $('html').toggleClass('mobile-menu-open');
+
+    });
+
+
+
+
+  // -- WINDOW RESIZE EVENTS --------
+
+    // when the window is resized while the mobile nav is open, the mobile nav gets closed. This is for preventing bugs when having the mobile menu opened and then crossing responsive breakpoints while resizing the window
+    $(window).resize(function() {
+      $('html').removeClass('mobile-menu-open');
+      $('.mobile-nav-content li').css('opacity', '0');
+      $('.mobile-nav-content').fadeOut();
+      $('.mobile-nav-content li').css('transform', 'translateX(-10px)');
+    });
+
+
+
+
+});