feat(home_page): created template for homepage

This template created two column layout with articles and handy links.
Capability was added so that on a mobile device, the columns would drop to one only.

MR !6

pages/index.md

@@ -1,4 +1,5 @@
 ---
+template: home.html
 title: No Fuss Computing
 description: Here at No Fuss Computing we predominately do research and development into, making your computing experience a more enjoyable one. See our projects page to find out what we are working on.
 

pages/stylesheets/extra.css

@@ -70,3 +70,50 @@ a.tags:hover {
 .mdx-author p > span {
   display: block;
 }
+
+
+.container{
+  width: 100%;
+}
+.container .row {
+  width: 95%; 
+  margin: 0 auto;
+  height: fit-content;
+}
+
+.container .row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.container .column {
+  float:  left;
+  width: 50%;
+  
+}
+
+.container .column .mdx-author {
+  padding-left: 30px;
+}
+
+.container .column h2 {
+  margin: 0px;
+}
+
+.container .column ul {
+  margin: 0px;
+}
+
+.container .column h3 {
+  margin: 0px;
+}
+
+.container .column img {
+  height: 22px;
+}
+@media screen and ( max-width: 700px ) { 
+  .container .column { 
+    float: none;
+    width: 100%;
+  }
+}

theme-overrides/home.html

@@ -0,0 +1,62 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div itemscope itemtype="https://schema.org/WebSite">
+  {{ page.content }}
+  {% set blog_posts = [] %}
+  {% for page in nav.pages %}
+    {% if page.url.startswith(config.extra.blog.dir) and page.meta.date is defined %}
+      <!-- or "" suppresses "None" output-->
+      {{ blog_posts.append( page ) or "" }}
+    {% endif %}
+  {% endfor %}
+
+<div class="container">
+  <div class="row" >
+    <div itemprop="hasPart" itemscope itemtype="https://schema.org/Blog" class="column">
+      <a itemprop="url" href="articles/index.html"><h2 itemprop="name">Articles</h2></a>
+      <ul>
+      {% for page in (blog_posts|sort(attribute="meta.date", reverse=True))[:config.extra.blog.list_length] %}
+      <li itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+        <p>
+          <h3><a itemprop="url" href="{{ page.url|url }}"><span itemprop="name">{{ page.title }}</span></a></h3>
+          <aside class="mdx-author">
+            <span>
+              <span itemprop="author" itemscope itemtype="https://schema.org/Person">
+                <img itemprop="image" alt={{ config.extra.blog.author }} src={{ config.extra.blog.author_image }} style="vertical-align: middle;"> 
+                <strong style="padding-left: 5px;" itemprop="name" >{{ config.extra.blog.author }}</strong>
+              </span>
+              <span class="twemoji">
+                {% include ".icons/octicons/calendar-24.svg" %}
+              </span>
+              <span itemprop="dateCreated">{{ page.meta.date.strftime("%Y-%m-%d") }}</span> ·
+              <span class="twemoji">
+                {% include ".icons/octicons/clock-24.svg" %}
+              </span>
+              <!--Min reading time is 1 minute-->
+              {% set read_time = page.content | wordcount // config.extra.blog.words_read_per_minute|default(300, true) %}
+              {% if read_time == 0 %}
+                {% set read_time = 1 %}
+              {% endif %}
+              <span itemprop="timeRequired">{{ read_time }} min</span> read
+            </span>
+          </aside>
+        </p>
+      </li>
+      {% endfor %}
+    </ul>
+    </div>
+    <div class="column">
+      <h2>Quick Links</h2>
+      <ul>
+        <li><h3>About us</h3></li>
+        <li><h3><a href="operations/index.html">Operations</a></h3></li>
+        <li><h3><a href="projects/index.html">Our Projects</a></h3></li>
+        <li><h3>link 4</h3></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+</div>
+{% endblock %}