jekyll-theme-horizon-flow 1.0.2 → 1.1.0

data/_layouts/post.html

@@ -4,6 +4,7 @@ layout: default
 
 <main id="post">
 	<article>
+
 		{% if page.display_toc %}
 		<div class="toc">
 			<input type="checkbox" id="tocMenuButton">
@@ -16,58 +17,72 @@ layout: default
 			</div>
 		</div>
 		{% endif %}
-		{% if page.no_header != true %}
-		<div class="post_header">
-			<h1>{{page.title}}</h1>
-			<h3>{{page.subtitle}}</h3>
-			
+
+		<div class="grid">
 			
-			{% if page.show_supplements != false %}
-			  <p class="supplements">
-			    <span>
-			      <i class="fa fa-calendar"></i> {{ page.date | date: "%B %d, %Y" }}
-			    </span>
-			    <span class="supplements-sep"></span>
-			    <span class="reading-time" title="Estimated read time">
-			      {% include read_time.html %}
-			    </span>
-			    {% if page.categories != nil and page.categories.size > 0 %}
-			      <span class="supplements-sep"></span>
-			      <span class="supplements-category">
-			        <i class="fa fa-bars"></i>
-			        {% for category in page.categories %}
-			          <a href="{{ site.baseurl }}/categories#{{ category | slugify }}">{{ category }}</a>{% if forloop.last == false %},{% endif %}
-			        {% endfor %}
-			      </span>
-			    {% endif %}
-			    {% if page.tags != nil and page.tags.size > 0 %}
-			      <span class="supplements-sep"></span>
-			      <span>
-			        <i class="fa fa-tags"></i>
-			        {% for tag in page.tags %}
-			          <a href="{{ site.baseurl }}/tags#{{ tag | slugify }}">{{ tag }}</a>{% if forloop.last == false %},{% endif %}
-			        {% endfor %}
-			      </span>
-			    {% endif %}
-			    {%- if page.last_modified_at -%}
-			      <br /> <br />
-			      <span class="last_modified_at">{% if site.data.configurable_lables.last_modified_at %}{{site.data.configurable_lables.last_modified_at}}{% else %}Last Modified at:{% endif %} {{ page.last_modified_at }}</span>
-			    {% endif %}
-			  </p>
+
+			{% if page.no_header != true %}
+			<div class="post_header">
+				<h1>{{page.title}}</h1>
+				<h3>{{page.subtitle}}</h3>
+				
+				
+				{% if page.show_supplements != false %}
+				  <p class="supplements">
+				    <span>
+				      <i class="fa fa-calendar"></i> {{ page.date | date: "%B %d, %Y" }}
+				    </span>
+				    <span class="supplements-sep"></span>
+				    <span class="reading-time" title="Estimated read time">
+				      {% include read_time.html %}
+				    </span>
+				    {% if page.categories != nil and page.categories.size > 0 %}
+				      <span class="supplements-sep"></span>
+				      <span class="supplements-category">
+				        <i class="fa fa-bars"></i>
+				        {% for category in page.categories %}
+				          <a href="{{ site.baseurl }}/categories#{{ category | slugify }}">{{ category }}</a>{% if forloop.last == false %},{% endif %}
+				        {% endfor %}
+				      </span>
+				    {% endif %}
+				    {% if page.tags != nil and page.tags.size > 0 %}
+				      <span class="supplements-sep"></span>
+				      <span>
+				        <i class="fa fa-tags"></i>
+				        {% for tag in page.tags %}
+				          <a href="{{ site.baseurl }}/tags#{{ tag | slugify }}">{{ tag }}</a>{% if forloop.last == false %},{% endif %}
+				        {% endfor %}
+				      </span>
+				    {% endif %}
+				    {%- if page.last_modified_at -%}
+				      <br /> <br />
+				      <span class="last_modified_at">{% if site.data.configurable_lables.last_modified_at %}{{site.data.configurable_lables.last_modified_at}}{% else %}Last Modified at:{% endif %} {{ page.last_modified_at }}</span>
+				    {% endif %}
+				  </p>
+				{% endif %}
+			</div>
 			{% endif %}
 
+			<div class ="post_content">
+				{{content}}
+				{% if page.toTop != false %}
+				<a href="#" id="toTopButton">
+				  <i class="fa fa-arrow-circle-o-up"></i>
+				</a>
+				{% endif %}
+			</div>
 
-		</div>
-		{% endif %}
-		<div class ="post_content">
-			{{content}}
-			{% if page.toTop != false %}
-			<a href="#" id="toTopButton">
-			  <i class="fa fa-arrow-circle-o-up"></i>
-			</a>
+			{% if page.display_toc2 %}
+			<div id="toc2">
+			 	{% include toc.html html=content %}
+			</div>
 			{% endif %}
+
+
 		</div>
-		
 
 	</article>
+	{% if page.comments_id %}
+  		{% include comments.html issue_id=page.comments_id %}
+	{% endif %}
 </main>

data/_layouts/search.html

@@ -9,7 +9,7 @@ layout: default
   * Copyright 2015-2020, Christian Fei
   * Licensed under the MIT License.
   */
-!function(){"use strict";var f={compile:function(r){return i.template.replace(i.pattern,function(t,e){var n=i.middleware(e,r[e],i.template);return void 0!==n?n:r[e]||t})},setOptions:function(t){i.pattern=t.pattern||i.pattern,i.template=t.template||i.template,"function"==typeof t.middleware&&(i.middleware=t.middleware)}};const i={pattern:/\{(.*?)\}/g,template:"",middleware:function(){}};var n=function(t,e){var n=e.length,r=t.length;if(n<r)return!1;if(r===n)return t===e;t:for(var i=0,o=0;i<r;i++){for(var u=t.charCodeAt(i);o<n;)if(e.charCodeAt(o++)===u)continue t;return!1}return!0},e=new function(){this.matches=function(t,e){return n(e.toLowerCase(),t.toLowerCase())}},r=new function(){this.matches=function(e,t){return!!e&&(e=e.trim().toLowerCase(),(t=t.trim().toLowerCase()).split(" ").filter(function(t){return 0<=e.indexOf(t)}).length===t.split(" ").length)}},d={put:function(t){if(l(t))return a(t);if(function(t){return Boolean(t)&&"[object Array]"===Object.prototype.toString.call(t)}(t))return function(n){const r=[];s();for(let t=0,e=n.length;t<e;t++)l(n[t])&&r.push(a(n[t]));return r}(t);return undefined},clear:s,search:function(t){return t?function(e,n,r,i){const o=[];for(let t=0;t<e.length&&o.length<i.limit;t++){var u=function(t,e,n,r){for(const i in t)if(!function(n,r){for(let t=0,e=r.length;t<e;t++){var i=r[t];if(new RegExp(i).test(n))return!0}return!1}(t[i],r.exclude)&&n.matches(t[i],e))return t}(e[t],n,r,i);u&&o.push(u)}return o}(u,t,c.searchStrategy,c).sort(c.sort):[]},setOptions:function(t){c=t||{},c.fuzzy=t.fuzzy||!1,c.limit=t.limit||10,c.searchStrategy=t.fuzzy?e:r,c.sort=t.sort||o,c.exclude=t.exclude||[]}};function o(){return 0}const u=[];let c={};function s(){return u.length=0,u}function l(t){return Boolean(t)&&"[object Object]"===Object.prototype.toString.call(t)}function a(t){return u.push(t),u}c.fuzzy=!1,c.limit=10,c.searchStrategy=c.fuzzy?e:r,c.sort=o,c.exclude=[];var p={load:function(t,e){const n=window.XMLHttpRequest?new window.XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");n.open("GET",t,!0),n.onreadystatechange=h(n,e),n.send()}};function h(e,n){return function(){if(4===e.readyState&&200===e.status)try{n(null,JSON.parse(e.responseText))}catch(t){n(t,null)}}}var m=function y(t){if(!(e=t)||!("undefined"!=typeof e.required&&e.required instanceof Array))throw new Error("-- OptionsValidator: required options missing");var e;if(!(this instanceof y))return new y(t);const r=t.required;this.getRequiredOptions=function(){return r},this.validate=function(e){const n=[];return r.forEach(function(t){"undefined"==typeof e[t]&&n.push(t)}),n}},w={merge:function(t,e){const n={};for(const r in t)n[r]=t[r],"undefined"!=typeof e[r]&&(n[r]=e[r]);return n},isJSON:function(t){try{return t instanceof Object&&JSON.parse(JSON.stringify(t))?!0:!1}catch(e){return!1}}};!function(t){let i={searchInput:null,resultsContainer:null,json:[],success:Function.prototype,searchResultTemplate:'<div class="single_result"><div class="search_findresults"><span class="search_date"><a href="{url}"><i class="search_day">{date_day}</i></a><a href="{url}">{date_my}</a></span><span class="search_summary"><h3><a href="{url}">{title}</a></h3>{summary}</span></div></div>',templateMiddleware:Function.prototype,sortMiddleware:function(){return 0},noResultsText:"No results found",limit:10,fuzzy:!1,debounceTime:null,exclude:[]},n;const e=function(t,e){e?(clearTimeout(n),n=setTimeout(t,e)):t.call()};var r=["searchInput","resultsContainer","json"];const o=m({required:r});function u(t){d.put(t),i.searchInput.addEventListener("input",function(t){-1===[13,16,20,37,38,39,40,91].indexOf(t.which)&&(c(),e(function(){l(t.target.value)},i.debounceTime))})}function c(){i.resultsContainer.innerHTML=""}function s(t){i.resultsContainer.innerHTML+=t}function l(t){var e;(e=t)&&0<e.length&&(c(),function(e,n){var r=e.length;if(0===r)return s(i.noResultsText);for(let t=0;t<r;t++)e[t].query=n,s(f.compile(e[t]))}(d.search(t),t))}function a(t){throw new Error("SimpleJekyllSearch --- "+t)}t.SimpleJekyllSearch=function(t){var n;0<o.validate(t).length&&a("You must specify the following required options: "+r),i=w.merge(i,t),f.setOptions({template:i.searchResultTemplate,middleware:i.templateMiddleware}),d.setOptions({fuzzy:i.fuzzy,limit:i.limit,sort:i.sortMiddleware,exclude:i.exclude}),w.isJSON(i.json)?u(i.json):(n=i.json,p.load(n,function(t,e){t&&a("failed to get JSON ("+n+")"),u(e)}));t={search:l};return"function"==typeof i.success&&i.success.call(t),t}}(window)}();
+!function(){"use strict";var f={compile:function(r){return i.template.replace(i.pattern,function(t,e){var n=i.middleware(e,r[e],i.template);return void 0!==n?n:r[e]||t})},setOptions:function(t){i.pattern=t.pattern||i.pattern,i.template=t.template||i.template,"function"==typeof t.middleware&&(i.middleware=t.middleware)}};const i={pattern:/\{(.*?)\}/g,template:"",middleware:function(){}};var n=function(t,e){var n=e.length,r=t.length;if(n<r)return!1;if(r===n)return t===e;t:for(var i=0,o=0;i<r;i++){for(var u=t.charCodeAt(i);o<n;)if(e.charCodeAt(o++)===u)continue t;return!1}return!0},e=new function(){this.matches=function(t,e){return n(e.toLowerCase(),t.toLowerCase())}},r=new function(){this.matches=function(e,t){return!!e&&(e=e.trim().toLowerCase(),(t=t.trim().toLowerCase()).split(" ").filter(function(t){return 0<=e.indexOf(t)}).length===t.split(" ").length)}},d={put:function(t){if(l(t))return a(t);if(function(t){return Boolean(t)&&"[object Array]"===Object.prototype.toString.call(t)}(t))return function(n){const r=[];s();for(let t=0,e=n.length;t<e;t++)l(n[t])&&r.push(a(n[t]));return r}(t);return undefined},clear:s,search:function(t){return t?function(e,n,r,i){const o=[];for(let t=0;t<e.length&&o.length<i.limit;t++){var u=function(t,e,n,r){for(const i in t)if(!function(n,r){for(let t=0,e=r.length;t<e;t++){var i=r[t];if(new RegExp(i).test(n))return!0}return!1}(t[i],r.exclude)&&n.matches(t[i],e))return t}(e[t],n,r,i);u&&o.push(u)}return o}(u,t,c.searchStrategy,c).sort(c.sort):[]},setOptions:function(t){c=t||{},c.fuzzy=t.fuzzy||!1,c.limit=t.limit||10,c.searchStrategy=t.fuzzy?e:r,c.sort=t.sort||o,c.exclude=t.exclude||[]}};function o(){return 0}const u=[];let c={};function s(){return u.length=0,u}function l(t){return Boolean(t)&&"[object Object]"===Object.prototype.toString.call(t)}function a(t){return u.push(t),u}c.fuzzy=!1,c.limit=10,c.searchStrategy=c.fuzzy?e:r,c.sort=o,c.exclude=[];var p={load:function(t,e){const n=window.XMLHttpRequest?new window.XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");n.open("GET",t,!0),n.onreadystatechange=h(n,e),n.send()}};function h(e,n){return function(){if(4===e.readyState&&200===e.status)try{n(null,JSON.parse(e.responseText))}catch(t){n(t,null)}}}var m=function y(t){if(!(e=t)||!("undefined"!=typeof e.required&&e.required instanceof Array))throw new Error("-- OptionsValidator: required options missing");var e;if(!(this instanceof y))return new y(t);const r=t.required;this.getRequiredOptions=function(){return r},this.validate=function(e){const n=[];return r.forEach(function(t){"undefined"==typeof e[t]&&n.push(t)}),n}},w={merge:function(t,e){const n={};for(const r in t)n[r]=t[r],"undefined"!=typeof e[r]&&(n[r]=e[r]);return n},isJSON:function(t){try{return t instanceof Object&&JSON.parse(JSON.stringify(t))?!0:!1}catch(e){return!1}}};!function(t){let i={searchInput:null,resultsContainer:null,json:[],success:Function.prototype,searchResultTemplate:'<div class="single_result"><div class="search_findresults"><a href="{url}" class="search_date"><i class="search_day">{date_day}</i>{date_my}</a><span class="search_summary"><h3><a href="{url}">{title}</a></h3>{summary}</span></div></div>',templateMiddleware:Function.prototype,sortMiddleware:function(){return 0},noResultsText:"No results found",limit:10,fuzzy:!1,debounceTime:null,exclude:[]},n;const e=function(t,e){e?(clearTimeout(n),n=setTimeout(t,e)):t.call()};var r=["searchInput","resultsContainer","json"];const o=m({required:r});function u(t){d.put(t),i.searchInput.addEventListener("input",function(t){-1===[13,16,20,37,38,39,40,91].indexOf(t.which)&&(c(),e(function(){l(t.target.value)},i.debounceTime))})}function c(){i.resultsContainer.innerHTML=""}function s(t){i.resultsContainer.innerHTML+=t}function l(t){var e;(e=t)&&0<e.length&&(c(),function(e,n){var r=e.length;if(0===r)return s(i.noResultsText);for(let t=0;t<r;t++)e[t].query=n,s(f.compile(e[t]))}(d.search(t),t))}function a(t){throw new Error("SimpleJekyllSearch --- "+t)}t.SimpleJekyllSearch=function(t){var n;0<o.validate(t).length&&a("You must specify the following required options: "+r),i=w.merge(i,t),f.setOptions({template:i.searchResultTemplate,middleware:i.templateMiddleware}),d.setOptions({fuzzy:i.fuzzy,limit:i.limit,sort:i.sortMiddleware,exclude:i.exclude}),w.isJSON(i.json)?u(i.json):(n=i.json,p.load(n,function(t,e){t&&a("failed to get JSON ("+n+")"),u(e)}));t={search:l};return"function"==typeof i.success&&i.success.call(t),t}}(window)}();
 </script>
 
 

data/_layouts/tags.html

@@ -17,7 +17,7 @@ layout: default
 
     {% if sortedTags.size > 0 %}
     <!-- Show all tags sorted by count -->
-    <div class="tags_all{% if site.layouts.tags.columns and site.layouts.tags.columns >= 1 and site.layouts.tags.columns <= 5 %}{{site.layouts.tags.columns}}{% else %}4{% endif %}">
+    <div class="tags_all tags_all{% if site.layouts.tags.columns and site.layouts.tags.columns >= 1 and site.layouts.tags.columns <= 5 %}{{site.layouts.tags.columns}}{% else %}4{% endif %}">
       <ul>
         {% for tag in sortedTags %}
           {% assign tagParts = tag | split: '&#x1F;' %}
@@ -53,14 +53,11 @@ layout: default
 
           {% for post in tag[1] %}
             <div class="tags_findresult">
-              <span class="tags_date">
-                <a href="{{ site.baseurl }}{{ post.url }}">
-                  <i class="tags_day">{{ post.date | date: "%d" }}</i>
-                </a>
-                <a href="{{ site.baseurl }}{{ post.url }}">
-                  <span>{{ post.date | date: "%b/%Y" }}</span>
-                </a>
-              </span>
+
+              <a href="{{ site.baseurl }}{{ post.url }}" class="tags_date">
+                <i class="tags_day">{{ post.date | date: "%d" }}</i>
+                <span>{{ post.date | date: "%b/%Y" }}</span>
+              </a>
 
               <span class="tags_summary">
                 <h3>

data/_posts/2021-01-01-markdown-test-page.md

@@ -4,6 +4,7 @@ title: "Markdown Test Page"
 date: 2021-01-01
 tags: markdown test
 subtitle: "copied from https://github.com/fullpipe/markdown-test-page/tree/master"
+comments_id: 1
 ---
 # **bold title**
 

data/_posts/2022-12-12-chatgpt-testpost-all-markdown-elements.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: "Chatgpt Testpost all markdown elements"
+title: "Supercalifragilisticexpialidocious: A Comprehensive Guide to the Longest Word in the English Language"
 date: 2022-12-12
 tags: champion test
 subtitle: "testing can be fun"

data/_posts/2023-07-13-title-for-champions.md

@@ -6,6 +6,9 @@ tags: champion test
 subtitle: "You're going to love this."
 categories: rest
 last_modified_at: 10.09.202
+display_toc2: true
+display_toc: false
+toTop: false
 ---
 # Code Block tests
 

data/_sass/default/_base.scss

@@ -6,7 +6,6 @@
 
 html {
   height: 100%;
-  //overflow-x: hidden;
 }
 
 body {
@@ -14,18 +13,47 @@ body {
   width: 100%;
   position: relative;
   margin: 0;
-  display: flex;
-  flex-direction: column;
   background-color: $background-color;
   overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  word-break: break-word;
+  color: $primary-color;
 }
 
-img {
-  max-width: 100%;
-  height: auto;
+header {
+  position: fixed;
+  margin: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  font-size: 1.1em;
+  z-index: 100;
 }
 
 main {
   max-width: 70%;
   margin: 5rem auto;
+  flex: 1;
+}
+
+
+footer {
+  width: 100%;
+  color: $background-color;
+  margin-top: 4em;
+  flex-shrink: 0;
+}
+
+
+// @media (width >= $small) and (max-width: $large) 
+@media screen and (max-width: $large) {
+  body {
+      font-size: 2.5em;
+  }
+
+  main {
+    margin-top: 8rem;
+  }
 }

data/_sass/default/_footer.scss

@@ -1,20 +1,9 @@
-footer {
-  width: 100%;
-  color: $background-color;
-  font-size: 0.8em;
-  margin-top: auto;
-}
-
 footer ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-footer ul li {
-  padding-bottom: 0.2em;
-}
-
 footer a {
   @include links($background-color);
   padding: 0;
@@ -53,6 +42,7 @@ footer .social-icons .divider::before {
   font-size: 0.8em;
 }
 
+
 /* ---------------------------------------------------- */
 /* ---------------------------------------------------- */
 /* footer sidebar */
@@ -67,96 +57,180 @@ footer aside {
   max-height: max-content;
 }
 
+footer .footer_aside_auto section {
+  padding: 0 0 0 1em;
+  flex-grow: 1;
+  max-width: fit-content;
+}
 
 /* one item */
-footer aside section:first-child:nth-last-child(1) {
+footer .footer_aside section:first-child:nth-last-child(1) {
   padding: 0 0 0 1em;
   flex-grow: 1;
   max-width: 100%;
 }
 
 /* two items */
-footer aside section:first-child:nth-last-child(2),
-footer aside section:first-child:nth-last-child(2) ~ section {
+footer .footer_aside section:first-child:nth-last-child(2),
+footer .footer_aside section:first-child:nth-last-child(2) ~ section {
   padding: 0 0 0 1em;
   flex-grow: 1;
   max-width: 50%;
 }
 
 /* three items */
-footer aside section:first-child:nth-last-child(3),
-footer aside section:first-child:nth-last-child(3) ~ section {
+footer .footer_aside section:first-child:nth-last-child(3),
+footer .footer_aside section:first-child:nth-last-child(3) ~ section {
   padding: 0 0 0 1em;
   flex-grow: 1;
   max-width: 33%;
 }
 
 /* four items */
-footer aside section:first-child:nth-last-child(4),
-footer aside section:first-child:nth-last-child(4) ~ section {
+footer .footer_aside section:first-child:nth-last-child(4),
+footer .footer_aside section:first-child:nth-last-child(4) ~ section {
   padding: 0 0 0 1em;
   flex-grow: 1;
   max-width: 25%;
 }
 
 /* five items */
-footer aside section:first-child:nth-last-child(5),
-footer aside section:first-child:nth-last-child(5) ~ section {
+footer .footer_aside section:first-child:nth-last-child(5),
+footer .footer_aside section:first-child:nth-last-child(5) ~ section {
   padding: 0 0 0 1em;
   flex-grow: 1;
   max-width: 20%;
 }
 
-footer aside section:first-child {
-  padding: 0;
+/* six items */
+footer .footer_aside section:first-child:nth-last-child(6),
+footer .footer_aside section:first-child:nth-last-child(6) ~ section {
+  padding: 0 0 0 1em;
+  flex-grow: 1;
+  max-width: 16%;
 }
 
+footer .footer_aside section:first-child {
+  padding: 0;
+}
 
-
-.footer_categories, .footer_tags {
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    columns: 5;
+.footer_sitedescription0, 
+.footer_customcontent0, 
+.footer_customcontent20, 
+.footer_recentposts0, 
+.footer_categories0, 
+.footer_tags0 {
+  @include footer_elements_auto();
+}
+
+.footer_sitedescription1, 
+.footer_customcontent1, 
+.footer_customcontent21, 
+.footer_recentposts1, 
+.footer_categories1, 
+.footer_tags1 {
+  @include footer_elements(1);
+}
+
+.footer_sitedescription2, 
+.footer_customcontent2, 
+.footer_customcontent22, 
+.footer_recentposts2, 
+.footer_categories2, 
+.footer_tags2 {
+  @include footer_elements(2);
+}
+
+.footer_sitedescription3, 
+.footer_customcontent3, 
+.footer_customcontent23, 
+.footer_recentposts3, 
+.footer_categories3, 
+.footer_tags3 {
+  @include footer_elements(3);
+}
+
+.footer_sitedescription4, 
+.footer_customcontent4, 
+.footer_customcontent24, 
+.footer_recentposts4, 
+.footer_categories4, 
+.footer_tags4 {
+  @include footer_elements(4);
+}
+
+.footer_sitedescription5, 
+.footer_customcontent5, 
+.footer_customcontent25, 
+.footer_recentposts5, 
+.footer_categories5, 
+.footer_tags5 {
+  @include footer_elements(5);
+}
+
+.footer_recentposts, 
+.footer_recentposts0, 
+.footer_recentposts1, 
+.footer_recentposts2, 
+.footer_recentposts3, 
+.footer_recentposts4, 
+.footer_recentposts5 {
+  ul li a {
+    text-transform: none;
+    border: none;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
+}
 
-  a {
-    text-decoration: none;
-    color: $background-color;
-    letter-spacing: -1px;
-    width: 100%;
-    cursor: pointer;
+.footer_recentposts0, .footer_recentposts1 {
+  ul li {
+    flex-basis: 100%;
+  }
+  ul li a {
+    border: none;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
 }
 
-.footer_categories1, .footer_tags1, .footer_tags, .footer_recentposts1  {
+@media (width >= $small) and (max-width: $large) {
+  footer {
+    font-size: 1.5em;
+  }
+
+  footer .social-icons {
+    flex-wrap: wrap; /* Allow the icons to wrap to the next line */
+  }
 
-}
+  footer .social-icons > * {
+    margin: 0.5em 0.5em; /* Adjust the margin as needed */
+  }
 
-.footer_recentposts {
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    columns: 2;
+  footer aside  {
+    flex-direction: column;
   }
 
-  a {
-    text-decoration: none;
-    color: $background-color;
-    letter-spacing: -1px;
-    width: 100%;
-    cursor: pointer;
+  footer li {
+      width: 100%;
+    }
+
+  .footer_sitedescription, .footer_customcontent, .footer_customcontent2, .footer_recentposts, .footer_categories, .footer_tags {
+    ul li {
+      width: 100%;
+    }
   }
-}
 
-.footer_sitedescription, .footer_extracontent {
-    a {
-    text-decoration: none;
-    color: $background-color;
-    letter-spacing: -1px;
-    width: 100%;
-    cursor: pointer;
+  footer aside section:first-child:nth-last-child(1),
+  footer aside section:first-child:nth-last-child(2),
+  footer aside section:first-child:nth-last-child(2) ~ section,
+  footer aside section:first-child:nth-last-child(3),
+  footer aside section:first-child:nth-last-child(3) ~ section,
+  footer aside section:first-child:nth-last-child(4),
+  footer aside section:first-child:nth-last-child(4) ~ section,
+  footer aside section:first-child:nth-last-child(5),
+  footer aside section:first-child:nth-last-child(5) ~ section,
+  footer aside section:first-child {
+    padding: 0 0 0 1em;
+    flex-grow: 1;
+    max-width: 100%;
   }
 }

data/_sass/default/_header.scss

@@ -1,15 +1,3 @@
-header {
-  position: fixed;
-  margin: auto;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  font-size: 1.1em;
-  z-index: 100;
-}
-
-
 header nav {
 	background-color: $primary-color;
 	width: fit-content;
@@ -60,3 +48,9 @@ nav li a {
 	margin: 0;
 	padding: 0;
 }
+
+@media (width >= $small) and (max-width: $large) {
+	header {
+		font-size: 1em;
+	}
+}

data/_sass/external/_comments.scss

@@ -0,0 +1,106 @@
+/*
+<main id="post">
+<section id="comments">
+<div class="comment-actions">
+    <h2>
+    <a>
+    <i>
+</div>
+<div id="comments-wrapper">
+    <ol>
+        <li class="comment">
+            <div class="commenter">
+                <img>
+                <a>
+                <div class="date-posted">
+                <span class="author-badge">
+            <div class="comment-body">
+                <p>
+        <li class="comment">
+</div>
+</section>
+</main>
+
+$primary-color:#032539;
+$secondary-color: #1c768f;
+$background-color: #fbf3f2;
+$accent-color: #fa991c;
+*/
+
+
+#comments {
+    word-break: keep-all;
+}
+
+.comment-actions {
+    display: flex;
+    align-items: center;
+
+
+    a {
+        background-color: $primary-color;
+        color: $background-color;
+        padding: 12px;
+        margin-left: auto;
+        border-radius: 4px;
+        text-decoration: none;
+    }
+}
+
+#comments-wrapper {
+
+    ol {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    .commenter {
+
+        display: flex;
+        align-items: center;
+
+        img {
+            border-radius: 50%;
+            width: 50px;
+            margin-right: 10px;
+            vertical-align: middle;
+        }
+
+        a {
+            font-weight: bold;
+            color: $primary-color;
+            margin-right: 10px;
+        }
+
+        .date-posted {
+            font-style: italic;
+        }
+
+        .author-badge {
+            margin-left: auto;
+            padding: 8px;
+            background-color: $secondary-color;
+            border-radius: 24px;
+            font-weight: bold;
+        }
+    }
+
+    .comment-body {
+        margin-left: 70px; //50px width of image + 10px margin +10px???
+    }
+
+}
+
+
+@media screen and (max-width: $large) {
+    .comment-actions, #comments-wrapper .commenter, #comments-wrapper .commenter .date-posted {
+        display: block;
+        font-size: 0.9em;
+    }
+
+    #comments-wrapper .commenter .date-posted {
+        margin-bottom: 16px;
+        margin-top: 8px;
+    }
+
+}

data/_sass/external/_normalize.scss

@@ -145,7 +145,10 @@ sup {
  * Remove the border on images inside links in IE 10.
  */
 
+
 img {
+  max-width: 100%;
+  height: auto;
   border-style: none;
 }