UPDATES:

* Custom link handlers for profile (icon-links.html)
* Custom classes for homepage styles (border, tables, etc)

README.md

@@ -86,3 +86,14 @@ Adblocker easyfilter has some filter on “plausible.js” string, especially if
 - `static/js/pdf.js`
 - `static/js/pdf.worker.js`
 
+### Layout & CSS
+
+#### Homepage `layout/index.html`
+
+Homepage splited into two main section, Greetings section and Recent Post section. Both of the section is wrapped using  `inf-border` class to give them borders. The Greetings section now has subsection of important links which is paritally loaded from custom layout of `icon-links.html`. 
+
+The Recent Posts section is managed by `inf-patterns-list` class, using html table instead of html lists format. 
+
+
+
+

assets/css/template-styles.css

@@ -442,6 +442,22 @@ caption {
     margin-top: 0.5rem;
 }
 
+
+/* Infidel borders */
+.inf-border {
+    font-size: 1rem;
+    border: 2px solid;
+    padding: 1.5rem;
+    box-shadow: 5px 10px;
+}
+.inf-border nav {
+  margin-top: 1rem;
+}
+.inf-border ol {
+    margin-left: 0.75rem;
+    margin-top: 0.5rem;
+}
+
 /* Disqus Comments */
 #disqus-container {
   text-align: center;
@@ -454,6 +470,62 @@ caption {
   display: none; 
 }
 
+/* infidel Pattern lists */
+.inf-patterns-list {
+    list-style: none;
+    margin-left: 0;
+}
+.inf-patterns-list h2 {
+    font-size: 1.0;
+    line-height: 1.6;
+}
+
+.inf-patterns-list span {
+    font-size: 1.0;
+    line-height: 1.6;
+}
+
+.inf-patterns-list li + li {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 2px solid;
+}
+.inf-patterns-list a {
+    border-bottom: none !important;
+}
+
+.inf-patterns-list table,th,td {
+
+    border: none !important;
+}
+
+.inf-patterns-list table,tr:first-child {
+
+    border: none !important;
+}
+
+
+.inf-patterns-list table,tr {
+
+    border-top: 2px solid !important;
+}
+
+.inf-patterns-list th, td:first-child {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    text-align: left;
+}
+
+.inf-patterns-list th, td {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    text-align: right;
+}
+
+.inf-patterns-list td, a {
+    border-bottom: none !important;
+}
+
 /* Pattern lists */
 .patterns-list {
     list-style: none;
@@ -898,6 +970,12 @@ h1 svg {
 
 /* Media queries */
 @media screen and (max-width: 45em) {
+    /* Infidel Customs for mobile screen */
+
+    .inf-td-hide {
+        display: none;
+    }
+
     body a {
       hyphens: auto;
     }

layouts/index.html

@@ -1,6 +1,36 @@
 {{ define "main" }}
   <main id="main">
-    <h1>{{ .Title }}</h1>
-    {{ .Content }}
+
+        <nav class="inf-border" aria-labelledby="toc-heading">
+    	    <h3>{{ .Title }}</h3>
+    	    {{ .Content }}
+            {{ partial "icon-links.html" . }}
+        </nav>
+        <nav class="inf-border" aria-labelledby="toc-heading">
+	        <h3> Check My Recent Posts </h3>
+            <table>
+            <ul class="inf-patterns-list" id="list">
+	            {{ range (.Paginator 4).Pages.ByPublishDate.Reverse }}
+                <tr> 
+                        
+                          <td>
+                            <a href="{{ .RelPermalink }}" >
+                                <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
+                                <span class="text">{{ .Name }}</span>
+                            </a>
+                          </td>
+                          <td class="inf-td-hide">
+                            <a href="{{ .RelPermalink }}" >
+                                <span class="text">{{ .PublishDate.Format "January 2, 2006" }}</span>
+                            </a>
+                          </td>
+                </tr>
+                {{ end }}
+	        </ul>
+            </table>
+        </nav>
+
   </main>
 {{ end }}

layouts/partials/head.html

@@ -16,6 +16,11 @@
     <meta name="description" content="{{ $summary }}">
   {{ end }}
 
+  <!-- Font Awsome External Request -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/brands.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/fontawesome.min.css" integrity="sha512-R+xPS2VPCAFvLRy+I4PgbwkWjw1z5B5gNDYgJN5LfzV4gGNeRQyVrY7Uk59rX+c8tzz63j8DeZPLqmXvBxj8pA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/solid.min.css" integrity="sha512-EvFBzDO3WBynQTyPJI+wLCiV0DFXzOazn6aoy/bGjuIhGCZFh8ObhV/nVgDgL0HZYC34D89REh6DOfeJEWMwgg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
   <link rel="apple-touch-icon" sizes="180x180" href="{{ "apple-touch-icon.png" | absURL }}">
   <link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32x32.png" | absURL }}"> 
   <link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | absURL }}"> 

layouts/partials/icon-links.html

@@ -0,0 +1,14 @@
+<div role="">
+  <nav class="inf-border" aria-labelledby="toc-heading">
+    <strong id="toc-heading"> Important Links : </strong>
+    <ul class="inf-patterns-list" id="list">
+
+        <li> <a target="_blank" href="https://linkedin.com/in/yosafat-marselino-agus-739235a7"><span><i class="fa-brands fa-linkedin" aria-hidden="true"></i></span> LinkedIn </a></li>
+        <li> <a target="_blank" href="https://scholar.google.com/citations?hl=en&user=pqn6fm0AAAAJ"><span><i class="fa-solid fa-graduation-cap" aria-hidden="true"></i></span>  Google Scholar </a></li>
+        <li> <a target="_blank" href="https://www.researchgate.net/profile/Yosafat-Agus"><span><i class="fa-brands fa-researchgate" aria-hidden="true"></i></span>  Research Gate </a></li>
+        <li> <a target="_blank" href="https://git.nnag.me"><span><i class="fa-solid fa-code-branch" aria-hidden="true"></i></span>  Codes </a></li>
+
+    </ul>
+
+  </nav>
+</div>