Internalise theme

61 files changed, 993 insertions, 140 deletions

diff --git a/.gitmodules b/.gitmodules
deleted file mode 100644
index 8de1c3b..0000000
--- a/.gitmodules
+++ /dev/null
@@ -1,3 +0,0 @@
-[submodule "themes/lowkey"]
-	path = themes/lowkey
-	url = https://github.com/nixentric/Lowkey-Hugo-Theme.git
diff --git a/README.md b/README.md
index 1d16d2a..bd49130 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,6 @@
 - Cleanup articles
 - Move to drafts
 - Revisiter le thème
-- Fix srcset
 - SEO
 - Page speed insights
 - Tables may overflow body width on mobile
diff --git a/archetypes/default.md b/archetypes/default.md
index 00e77bd..95a90cb 100644
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -1,6 +1,14 @@
 ---
-title: "{{ replace .Name "-" " " | title }}"
+title: "{{ replace .Name '-' ' ' | title }}"
 date: {{ .Date }}
-draft: true
+draft: true # Set 'false' to publish
+description: ''
+categories:
+  - Uncategories
+tags:
+  -
 ---
 
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
diff --git a/archetypes/posts.md b/archetypes/posts.md
new file mode 100644
index 0000000..5413dc2
--- /dev/null
+++ b/archetypes/posts.md
@@ -0,0 +1,11 @@
+---
+title: "{{ replace .Name '-' ' ' | title }}"
+date: {{ .Date }}
+draft: true # Set 'false' to publish
+tableOfContents: false # Enable/disable Table of Contents
+description: ''
+categories:
+  - Sem categoria
+tags:
+  -
+---
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
new file mode 100644
index 0000000..6181ea6
--- /dev/null
+++ b/assets/css/tailwind.css
@@ -0,0 +1,372 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  /* inter-100 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 100;
+    src: local(''),
+         url('../fonts/inter-v12-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-200 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 200;
+    src: local(''),
+         url('../fonts/inter-v12-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-300 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 300;
+    src: local(''),
+         url('../fonts/inter-v12-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-regular - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 400;
+    src: local(''),
+         url('../fonts/inter-v12-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-500 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 500;
+    src: local(''),
+         url('../fonts/inter-v12-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-600 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 600;
+    src: local(''),
+         url('../fonts/inter-v12-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-700 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 700;
+    src: local(''),
+         url('../fonts/inter-v12-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-800 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 800;
+    src: local(''),
+         url('../fonts/inter-v12-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  /* inter-900 - latin */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 900;
+    src: local(''),
+         url('../fonts/inter-v12-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../fonts/inter-v12-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  body {
+    @apply bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 text-lg text-justify;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-bold text-gray-900 dark:text-gray-300 mb-5 pt-2;
+  }
+
+  h1 {
+    @apply text-4xl leading-10;
+  }
+
+  h2 {
+    @apply text-3xl leading-10;
+  }
+
+  h3 {
+    @apply text-2xl;
+  }
+
+  h4 {
+    @apply text-xl;
+  }
+
+  h5 {
+    @apply text-lg;
+  }
+
+  h6 {
+    @apply text-base;
+  }
+
+  hr {
+    @apply border-gray-200 dark:border-gray-700;
+  }
+
+  p, hr, pre, dl {
+    @apply mb-5 text-justify;
+  }
+
+  article > h1 {
+    @apply mb-1;
+  }
+
+  code {
+    @apply bg-gray-100 dark:bg-gray-800 rounded-lg text-sm border dark:border-gray-700 px-2 py-1;
+  }
+
+  pre {
+    @apply rounded-lg border dark:border-gray-700 p-5 overflow-auto text-base;
+  }
+
+  pre code {
+    @apply bg-transparent border-0 px-0;
+  }
+
+  figure {
+    @apply mb-5;
+  }
+
+  figcaption {
+    @apply text-base text-gray-500 dark:text-gray-400 mt-2;
+  }
+
+  blockquote {
+    @apply text-xl text-gray-500 dark:text-gray-400 italic border-l-4 border-gray-300 dark:border-gray-700 pl-4 mb-5;
+  }
+
+  ul, ol {
+    @apply mb-5 ml-6;
+  }
+
+  ol {
+    @apply list-decimal;
+  }
+
+  ul {
+    @apply list-disc;
+  }
+
+  nav ul, footer ul {
+    @apply list-none ml-0;
+  }
+
+  header h1 {
+    @apply mb-0;
+  }
+
+  table {
+    @apply w-full border rounded-md border-separate border-spacing-0 mb-5;
+  }
+
+  thead th {
+    @apply border-b-2 border-r last:border-r-0 py-2 px-3;
+  }
+
+  tbody td {
+    @apply py-2 px-3 border-b text-base border-r last:border-r-0;
+  }
+
+  tbody tr:last-child td {
+    @apply border-b-0;
+  }
+
+  dt {
+    @apply font-bold italic;
+  }
+
+  dd {
+    @apply pl-10;
+  }
+
+  header nav > ul {
+    @apply flex flex-wrap justify-center uppercase text-xs font-semibold gap-7;
+  }
+
+  nav a, footer a {
+    @apply text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 font-semibold;
+  }
+
+  footer {
+    @apply text-xs;
+  }
+}
+
+@layer utilities {
+  nav a.active {
+    @apply text-gray-900 dark:text-gray-100;
+  }
+
+  /* Content overrides */
+  #content {
+    @apply leading-normal;
+  }
+
+  #content a {
+    @apply underline font-bold text-emerald-700 hover:text-emerald-600 dark:text-emerald-300 dark:hover:text-emerald-200;
+  }
+
+  #content .date {
+    @apply py-2 text-sm font-semibold text-gray-400;
+  }
+
+  #content h1 > a {
+    @apply no-underline text-xl font-bold hover:underline text-gray-900 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100;
+  }
+
+  #content .meta {
+    @apply text-sm font-semibold text-gray-500 dark:text-gray-400 flex gap-3 mt-2
+  }
+
+  #content .meta a {
+    @apply no-underline;
+  }
+
+  #content .description {
+    @apply text-gray-600 dark:text-gray-300 text-base;
+  }
+
+  #content .read-more {
+    @apply no-underline inline-flex gap-2 text-sm font-semibold items-center text-emerald-700 hover:text-emerald-600 dark:text-emerald-300 dark:hover:text-emerald-200;
+  }
+
+  #content .footnotes {
+    @apply text-sm;
+  }
+
+  #content .footnotes p {
+    @apply inline-block mb-0;
+  }
+
+  #content .footnotes ol {
+    @apply block;
+  }
+
+  #content .footnotes li {
+    @apply mb-3;
+  }
+
+  #content .alert-box {
+    @apply px-4 pt-4 pb-1 mb-5 border-t-4;
+  }
+
+  #content .alert-box .alert-title {
+    @apply text-inherit font-semibold text-lg py-0 px-0 mb-2;
+  }
+
+  #content .alert-box a {
+    @apply text-inherit hover:text-inherit;
+  }
+
+  #content .alert-box .alert-icon {
+    @apply w-7 h-7 mr-2;
+  }
+
+  #content .alert-box.warning {
+    @apply bg-yellow-100 border-yellow-500 text-yellow-900;
+  }
+
+  #content .alert-box.info {
+    @apply bg-blue-100 border-blue-500 text-blue-900;
+  }
+
+  #content .alert-box.success {
+    @apply bg-green-100 border-green-500 text-green-900;
+  }
+
+  #content .alert-box.error {
+    @apply bg-red-100 border-red-500 text-red-900;
+  }
+
+  #content .table-of-contents {
+    @apply bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 p-4 border dark:border-gray-700 rounded-lg;
+  }
+
+  #content .table-of-contents #TableOfContents ul {
+    @apply list-decimal list-inside ml-4;
+  }
+
+  #content .table-of-contents #TableOfContents ul li {
+    @apply my-2 text-base;
+  }
+
+  #content .table-of-contents #TableOfContents ul li a {
+    @apply font-normal no-underline text-gray-700 dark:text-gray-300 hover:underline hover:text-emerald-600 dark:hover:text-emerald-200;
+  }
+
+  #content .pagination-button {
+    @apply no-underline inline-flex items-center gap-2 px-3 py-2 border border-gray-300 dark:border-gray-700 text-sm rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100;
+  }
+
+  #content .taxonomy-list {
+    @apply flex flex-row flex-wrap gap-x-2 gap-y-6 list-none ml-0;
+  }
+
+  #content .taxonomy-list a {
+    @apply font-normal no-underline text-base text-gray-800 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 py-2 px-3 rounded-lg;
+  }
+
+  #content .tags-list {
+    @apply gap-y-2;
+  }
+
+  #content span.task-list + ul {
+    @apply list-none;
+  }
+
+  /* Misc */
+  #site-title {
+    @apply text-center sm:text-left text-4xl font-extrabold text-gray-800 dark:text-gray-100;
+  }
+
+  .header {
+    @apply flex flex-row items-center justify-between;
+  }
+
+  .header .toggle-theme {
+    @apply w-6 h-6;
+  }
+
+  .title-large {
+    @apply text-4xl leading-snug font-bold text-gray-900 dark:text-gray-300;
+  }
+
+  .title-small {
+    @apply text-2xl font-extrabold text-gray-900 dark:text-gray-300;
+  }
+}
diff --git a/assets/icons/arrow-left.svg b/assets/icons/arrow-left.svg
new file mode 100644
index 0000000..7c88198
--- /dev/null
+++ b/assets/icons/arrow-left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+</svg>
diff --git a/assets/icons/arrow-right.svg b/assets/icons/arrow-right.svg
new file mode 100644
index 0000000..1894958
--- /dev/null
+++ b/assets/icons/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+</svg>
diff --git a/assets/icons/favicon.ico b/assets/icons/favicon.ico
new file mode 100644
index 0000000..2f2d0ee
--- /dev/null
+++ b/assets/icons/favicon.ico
diff --git a/assets/icons/moon.svg b/assets/icons/moon.svg
new file mode 100644
index 0000000..4c7aa89
--- /dev/null
+++ b/assets/icons/moon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+</svg>
\ No newline at end of file
diff --git a/assets/icons/sun.svg b/assets/icons/sun.svg
new file mode 100644
index 0000000..52b1257
--- /dev/null
+++ b/assets/icons/sun.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+</svg>
\ No newline at end of file
diff --git a/config/_default/hugo.toml b/config/_default/hugo.toml
index 4f444de..51c1e5e 100644
--- a/config/_default/hugo.toml
+++ b/config/_default/hugo.toml
@@ -1,13 +1,14 @@
 baseURL = 'https://blog.kagamino.dev/'
 copyright = "{year}"                   # To make 2007 - 2022. Just add before {year} example: 2007 - {year}
 languageCode = 'en-us'
-theme = 'lowkey'
 title = "Kagamino's Blog"
 enableRobotsTXT = true
 
 # List Config
 summaryLength = 15
-paginate = 5
+
+[pagination]
+pagerSize = 5
 
 [markup.highlight]
 codeFences = true
diff --git a/config/_default/params.toml b/config/_default/params.toml
index 995e343..24f47ea 100644
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -3,6 +3,7 @@ isSinglePage = true
 
 # Meta Config
 description = "Hello"
+favicon = "img/profile-picture.jpg"
 
 # Header Configuration
 avatar = "img/profile-picture.jpg"
@@ -14,7 +15,7 @@ disqusShortname = ""
 enableEmoji = true
 
  # giscus is a comment system based on GitHub Discussions. see https://giscus.app
-[giscus]       
+[giscus]
     enable = false
     repo = ""
     repoId = ""
@@ -27,4 +28,4 @@ enableEmoji = true
     # inputPosition = "top"
     # theme = "light"
     # lang = "zh-CN"
-    # lazyLoading = true
\ No newline at end of file
+    # lazyLoading = true
diff --git a/config/postcss.config.js b/config/postcss.config.js
new file mode 100644
index 0000000..ee0749c
--- /dev/null
+++ b/config/postcss.config.js
@@ -0,0 +1,21 @@
+const themeDir = __dirname + "/../";
+
+const cssnanoPlugin = require("cssnano")({
+  path: [themeDir],
+  preset: [
+    "default",
+    {
+      discardComments: {
+        removeAll: true,
+      },
+    },
+  ],
+});
+
+module.exports = {
+  plugins: [
+    require("tailwindcss")(themeDir + "./config/tailwind.config.js"),
+    require("autoprefixer")({ path: [themeDir] }),
+    ...(process.env.HUGO_ENVIRONMENT === "production" ? [cssnanoPlugin] : []),
+  ],
+};
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
new file mode 100644
index 0000000..791ce8c
--- /dev/null
+++ b/config/tailwind.config.js
@@ -0,0 +1,27 @@
+const path = require('path');
+
+// When deploying to production, set the base directory to your Hugo project's root directory.
+const baseDir = path.join(__dirname, '..');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: [
+    `${baseDir}/themes/**/layouts/**/*.html`,
+    `${baseDir}/content/**/layouts/**/*.html`,
+    `${baseDir}/layouts/**/*.html`,
+    `${baseDir}/content/**/*.html`,
+    `${baseDir}/content/**/*.md`,
+    `${baseDir}/public/**/*.html`,
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        'sans': ['"Inter"', '-apple-system', 'BlinkMacSystemFont', 'avenir next', 'avenir', 'segoe ui', 'helvetica neue', 'helvetica', 'Cantarell', 'Ubuntu', 'roboto', 'noto', 'arial', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+  variants: ['group-hover'],
+}
+
diff --git a/layouts/404.html b/layouts/404.html
index d042ff8..6bed926 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,12 +1,13 @@
 {{ define "main" }}
 
 <article class="flex flex-col gap-3">
-    <header>
-        <h2 class="text-2xl font-extrabold text-gray-900">{{ .Title }}</h2>
-    </header>
-    <section class="content text-lg text-gray-800">
-        Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
-    </section>
+  <header>
+    <h2 class="title-small">{{ i18n "404_title" }}</h2>
+  </header>
+
+  <section>
+    <p>{{ i18n "404_text" }}</p>
+  </section>
 </article>
-    
-{{ end }}
\ No newline at end of file
+
+{{ end }}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 69be8f7..aa39a42 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,13 +1,20 @@
 <!DOCTYPE html>
-<html lang="{{ .Site.LanguageCode | default `en` }}" class="scroll-smooth">
-    <head>
-    {{- partial "head.html" . -}}
-    </head>
-    <body class="max-w-screen-md px-10 mx-auto">
-        {{ partial "header.html" . }}
-        <main id="content">
-        {{- block "main" . }}{{- end }}
-        </main>
-        {{- partial "footer.html" . -}}
-    </body>
+<html lang="{{ .Site.LanguageCode | default `en` }}" class="scroll-smooth dark">
+  <head>
+    {{- partial "head/index" . -}}
+  </head>
+
+  <body class="max-w-screen-md mx-auto px-2.5">
+    <div class="header">
+      {{ partial "header/index" . }}
+      {{ partial "header/theme-button" . }}
+    </div>
+
+    <main id="content">
+      {{- block "main" . -}}
+      {{- end }}
+    </main>
+
+    {{- partial "footer/index" . -}}
+  </body>
 </html>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 577852f..d366d53 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,17 +1,30 @@
 {{ define "main" }}
+
 {{ $pages := .Pages }}
-{{ $paginator := .Paginate $pages  }}
+{{ $paginator := .Paginate $pages }}
+
 <div class="flex flex-col gap-1">
-<h1 class="text-2xl font-extrabold">{{ if .Params.header }}{{ .Params.header }}{{ else }}{{ .Title }}{{ end }}</h1>
-{{ if .Content }}<p class="content text-lg text-gray-900">{{ .Content }}</p>{{ end }}
+  <h1 class="text-2xl font-extrabold">
+    {{ if .Params.header }}
+      {{ .Params.header }}
+    {{ else }}
+      {{ .Title }}
+      {{ end }}
+    </h1>
+  
+  {{ with .Content }}
+    {{ . }}
+  {{ end }}
 </div>
 
-<section class="py-10 flex flex-col gap-10 ">
-{{ range $index, $pages := $paginator.Pages }}
+<section class="flex flex-col gap-10">
+  {{ range $index, $pages := $paginator.Pages }}
     {{ partial "list/default" . }}
-{{ end }}
+  {{ end }}
 </section>
 
-{{ partial "list/components/pagination" . }}
+{{ if gt $paginator.TotalPages 1 }}
+  {{ partial "list/pagination" . }}
+{{ end }}
 
 {{ end }}
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 13aa7d0..80c3bee 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,3 +1,43 @@
 {{ define "main" }}
-{{ partial "single/default" . }}
-{{ end }}
\ No newline at end of file
+
+<article class="flex flex-col gap-10">
+  <header class="flex flex-col gap-2">
+    <h2 class="title-large">{{ .Title }}</h2>
+
+    <div class="meta">
+      {{/* Publish date */}}
+      <time datetime="{{ .PublishDate }}" title='{{ .PublishDate.Format "Mon, Jan 2, 2006, 3:04 PM MST" }}'>
+        {{ .PublishDate.Format "02/01/2006" }} - {{ printf (i18n "estimatedReadingTime") .ReadingTime }}
+      </time>
+
+      {{/* Categories */}} 
+      {{ with (.GetTerms "categories") }} — 
+        {{ range . }}
+          <a class="categories" href="{{ .RelPermalink }}" alt="{{ .LinkTitle }}">
+            {{ .LinkTitle }}
+          </a>
+        {{ end }} 
+      {{ end }}
+    </div>
+  </header>
+
+  {{ partial "single/table-of-contents" . }}
+
+  <section>{{ .Content | emojify }}</section>
+
+  {{ partial "single/comments/index" . }}
+
+  <footer>
+    {{ with (.GetTerms "tags") }}
+      <div class="pb-14 taxonomy-list tags-list">
+      {{ range . }}
+        <a href="{{ .RelPermalink }}" alt="{{ .LinkTitle }}">
+          {{ .LinkTitle }}
+        </a>
+      {{ end }}
+      </div>
+    {{ end }}
+  </footer>
+</article>
+
+{{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index 7f31f64..7cf7b9d 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,17 +1,9 @@
-{{ define "main" }}
-{{ if site.Params.isSinglePage }}
-{{ partial "single/homepage" . }}
-{{ else }}
-{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
-{{ $paginator := .Paginate $pages  }}
-<div class="flex flex-col gap-1">
-<h3 class="text-2xl font-extrabold">Latest Posts</h3>
+{{ define "main" }} 
+
+<div class="py-2 flex flex-col gap-1">
+  <h3 class="title-small">{{ .Title }}</h3>
 </div>
-<section class="py-10 flex flex-col gap-10 ">
-{{ range $index, $pages := $paginator.Pages }}
-    {{ partial "list/default" . }}
-{{ end }}
-</section>
-{{ partial "list/components/pagination" . }}
-{{ end }}
+
+    <section>{{ .Content }} </section>
+
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/footer/copyright.html b/layouts/partials/footer/copyright.html
index b24cc2c..d2c9828 100644
--- a/layouts/partials/footer/copyright.html
+++ b/layouts/partials/footer/copyright.html
@@ -1,3 +1,12 @@
-<div class="text-xs font-semibold text-gray-500 order-2 sm:order-1 ">
-    © {{ replace .Site.Copyright "{year}" now.Year }} — <a class="hover:text-gray-500" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> <span class=" font-normal ">with</span> <a class="hover:text-gray-500" href="https://github.com/nixentric/Lowkey-Hugo-Theme" target="_blank" rel="noopener noreferrer">Lowkey</a>
-</div>
\ No newline at end of file
+<div class="text-xs font-semibold text-gray-500 order-2 sm:order-1">
+  © {{ replace .Site.Copyright "{year}" now.Year }} —
+  <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> 
+  <span class="font-normal">with</span>
+  <a
+    href="https://github.com/nixentric/Lowkey-Hugo-Theme"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    Lowkey
+  </a>
+</div>
diff --git a/layouts/partials/footer/index.html b/layouts/partials/footer/index.html
new file mode 100644
index 0000000..73f32ae
--- /dev/null
+++ b/layouts/partials/footer/index.html
@@ -0,0 +1,4 @@
+<footer class="pt-5 pb-10 grid gap-3 sm:grid-cols-2">
+    {{ partial "footer/copyright" . }}
+    {{ partial "footer/social" . }}
+</footer>
\ No newline at end of file
diff --git a/layouts/partials/footer/social.html b/layouts/partials/footer/social.html
index 0b70dd6..ddf867c 100644
--- a/layouts/partials/footer/social.html
+++ b/layouts/partials/footer/social.html
@@ -1,5 +1,11 @@
-<div class="text-xs font-semibold text-gray-500 order-1 sm:order-2">
-    <ul class="flex sm:justify-end gap-5">
-    {{ with site.Menus.social }}{{ range . }}<li><a class="hover:text-gray-500" href="{{ .URL }}" target="_blank" rel="noopener noreferrer">{{ .Name }}</a></li>{{ end }}{{ end }}
-    </ul>
-</div>
\ No newline at end of file
+<div class="order-1 sm:order-2">
+  <ul class="flex sm:justify-end gap-5">
+    {{ with site.Menus.social }}
+    {{ range . }}
+    <li>    
+      <a href="{{ .URL }}" target="_blank" rel="me noopener noreferrer">{{ .Name }}</a>
+    </li>
+    {{ end }}
+    {{ end }}
+  </ul>
+</div>
diff --git a/layouts/partials/head/index.html b/layouts/partials/head/index.html
new file mode 100644
index 0000000..eb096b8
--- /dev/null
+++ b/layouts/partials/head/index.html
@@ -0,0 +1,2 @@
+{{- partial "head/meta" . -}}
+{{- partial "head/styles" . -}}
diff --git a/layouts/partials/head/meta.html b/layouts/partials/head/meta.html
index 23a770a..329d9bf 100644
--- a/layouts/partials/head/meta.html
+++ b/layouts/partials/head/meta.html
@@ -1,12 +1,32 @@
-<meta charset="UTF-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+{{ $favicon := resources.GetMatch .Site.Params.favicon }}
+
+<meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}</title>
-<meta name="description"
-  content="{{ if .IsPage }}{{ or .Params.description .Summary }}{{ else if .IsHome }}{{ .Site.Params.description }}{{ else if .IsNode }}{{ or .Params.description .Summary }}{{ end }}">
-<link rel="canonical" href="{{ .Permalink }}">
-<link rel="robots" href="/robots.txt" />
-{{ with .OutputFormats.Get "rss" -}}
-{{ printf `
-<link rel=%q type=%q href=%q title=%q>` .Rel .MediaType.Type .Permalink site.Title | safeHTML }}
-{{ end }}
\ No newline at end of file
+<meta
+  name="description"
+  content="{{ if .IsPage }}{{ or .Params.description .Summary }}{{ else if .IsHome }}{{ .Site.Params.description }}{{ else if .IsNode }}{{ or .Params.description .Summary }}{{ end }}"
+/>
+<link rel="canonical" href="{{ .Permalink }}" />
+<link rel="robots" href="/robot.txt" />
+
+<link rel="icon" type="image/x-icon" href="{{ $favicon.RelPermalink }}" />
+
+{{ if .Site.Config.Services.GoogleAnalytics.ID }}
+<!-- Google Analytics -->
+<script
+  defer
+  src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Config.Services.GoogleAnalytics.ID }}"
+></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', '{{ .Site.Config.Services.GoogleAnalytics.ID }}');
+</script>
+<!-- End Google Analytics -->
+{{ end }}
diff --git a/layouts/partials/head/styles.html b/layouts/partials/head/styles.html
index 68577ce..cfab45a 100644
--- a/layouts/partials/head/styles.html
+++ b/layouts/partials/head/styles.html
@@ -1,13 +1,17 @@
-{{/*  Resources  */}}
-{{- $tailwind := resources.Get "css/tailwind.css"  | postCSS (dict "config" "./config/postcss.config.js") -}}
+{{/* Resources */}} 
+{{- $tailwind := resources.Get "css/tailwind.css" | postCSS (dict "config" "./config/postcss.config.js") -}}
 
-{{/*  Processor  */}}
-{{- $styles := slice $tailwind | resources.Concat "css/app.css" -}}
+{{/* MathJax */}}
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+<script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] } });</script>
 
-{{/* Output */}}
+{{/* Processor */}} 
+{{- $styles := slice $tailwind | resources.Concat "css/app.css" -}} 
+
+{{/* Output */}} 
 {{- if eq hugo.Environment "development" -}}
-<link rel="stylesheet" href="{{ $styles.Permalink | absURL }}">
-{{- else -}}
-{{- $styles := $styles | minify | fingerprint | resources.PostProcess -}}
-<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" >
+    <link rel="stylesheet" href="{{ $styles.Permalink | absURL }}" />
+{{- else -}} 
+    {{- $styles := $styles | minify | fingerprint | resources.PostProcess -}}
+    <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" />
 {{- end -}}
diff --git a/layouts/partials/header/avatar.html b/layouts/partials/header/avatar.html
index e3c1021..5c9447d 100644
--- a/layouts/partials/header/avatar.html
+++ b/layouts/partials/header/avatar.html
@@ -1,7 +1,14 @@
-{{ $avatar := resources.GetMatch .Site.Params.avatar }}
+{{ $avatar := resources.GetMatch .Site.Params.avatar }} 
 {{ $tiny := ($avatar.Fill "80x80 q90") }}
-<div class="flex-none w-20 h-20 rounded-full overflow-hidden" >
-    <a href="{{ .Site.BaseURL }}">
-        <img srcset="{{- with $tiny.RelPermalink -}}{{.}} 80w{{- end -}}" src="{{ $avatar.RelPermalink }}" width="{{ $avatar.Width }}" height="{{ $avatar.Height }}" alt="{{ .Site.Title }}">
-    </a>
+
+<div class="flex-none w-20 h-20 rounded-full overflow-hidden">
+  <a href="{{ .Site.BaseURL }}">
+    <img
+      srcset="{{- with $tiny.RelPermalink -}}{{.}} 80w{{- end -}}"
+      src="{{ $avatar.RelPermalink }}"
+      width="{{ $avatar.Width }}"
+      height="{{ $avatar.Height }}"
+      alt="{{ .Site.Title }}"
+    />
+  </a>
 </div>
diff --git a/layouts/partials/header/index.html b/layouts/partials/header/index.html
new file mode 100644
index 0000000..43debba
--- /dev/null
+++ b/layouts/partials/header/index.html
@@ -0,0 +1,8 @@
+<header class="flex flex-col sm:flex-row items-center gap-5 sm:gap-10 pt-16 py-12">
+  {{ partial "header/avatar" . }}
+  
+  <div class="flex flex-col gap-5">
+    {{ partial "header/title" . }} 
+    {{ partial "header/nav" . }}
+  </div>
+</header>
diff --git a/layouts/partials/header/nav.html b/layouts/partials/header/nav.html
index c0c20b3..94b073d 100644
--- a/layouts/partials/header/nav.html
+++ b/layouts/partials/header/nav.html
@@ -1,10 +1,14 @@
 <nav>
-    <ul class="flex flex-wrap justify-center uppercase text-xs font-semibold gap-7 text-gray-500 ">
-        {{ $currentPage := . }}
-        {{ range site.Menus.main }}
-        {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
-        {{- $page_url:= $currentPage.Permalink | absLangURL }}
-        <li class="{{- if eq $menu_item_url $page_url }}text-gray-900{{else}}hover:text-gray-500{{ end -}}"><a href="{{ .URL }}">{{ .Name }}</a></li>
-        {{ end }}
-    </ul>
-</nav>
\ No newline at end of file
+  <ul>
+    {{ $currentPage := . }} 
+    {{ range site.Menus.main }} 
+    {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }} 
+    {{- $page_url := $currentPage.Permalink | absLangURL }}
+    <li>
+      <a href="{{ .URL }}" class="{{ if eq $menu_item_url $page_url }} active {{ end }}">
+        {{ .Name }}
+      </a>
+    </li>
+    {{ end }}
+  </ul>
+</nav>
diff --git a/layouts/partials/header/theme-button.html b/layouts/partials/header/theme-button.html
new file mode 100644
index 0000000..0a8313b
--- /dev/null
+++ b/layouts/partials/header/theme-button.html
@@ -0,0 +1,47 @@
+<button class="toggle-theme" aria-label="Toggle Theme" title="Toggle Theme" onclick="toggleTheme()">
+  <span class="theme-icon light"> {{ partial "utils/icon" "sun" }} </span>
+  <span class="theme-icon dark"> {{ partial "utils/icon" "moon" }} </span>
+</button>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const theme = localStorage.getItem('theme');
+
+    if (!theme || theme === 'light') {
+      setTheme('light');
+    } else {
+      setTheme(theme);
+    }
+  });
+
+  function setTheme(theme) {
+    const html = document.querySelector('html');
+    localStorage.setItem('theme', theme);
+
+    if (theme === 'light') {
+      if (html.classList.contains('dark')) {
+        document.querySelector('html').classList.remove('dark');
+      }
+
+      document.querySelector('.theme-icon.light').style.display = 'none';
+      document.querySelector('.theme-icon.dark').style.display = 'block';
+    } else {
+      if (!html.classList.contains('dark')) {
+        document.querySelector('html').classList.add('dark');
+      }
+
+      document.querySelector('.theme-icon.dark').style.display = 'none';
+      document.querySelector('.theme-icon.light').style.display = 'block';
+    }
+  }
+
+  function toggleTheme() {
+    const theme = localStorage.getItem('theme');
+
+    if (theme === 'light') {
+      setTheme('dark');
+    } else {
+      setTheme('light');
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/layouts/partials/header/title.html b/layouts/partials/header/title.html
index d6e6ba3..11bc434 100644
--- a/layouts/partials/header/title.html
+++ b/layouts/partials/header/title.html
@@ -1,7 +1,3 @@
 <a href="{{ .Site.BaseURL }}">
-    {{ if .IsHome }}
-    <h1 class="text-center sm:text-left text-4xl font-extrabold text-gray-800 ">{{ .Site.Title }}</h1>
-    {{ else }}
-    <h3 class="text-center sm:text-left text-4xl font-extrabold text-gray-800 ">{{ .Site.Title }}</h3>
-    {{ end }}
-</a>
\ No newline at end of file
+  <h1 id="site-title">{{ .Site.Title }}</h1>
+</a>
diff --git a/layouts/partials/list/default.html b/layouts/partials/list/default.html
index a965ce5..f3fd20e 100644
--- a/layouts/partials/list/default.html
+++ b/layouts/partials/list/default.html
@@ -1,11 +1,28 @@
 <article class="flex flex-col gap-1">
-    <h1 class="text-xl font-bold hover:underline"> <a href=" {{ .Permalink }} ">{{ .Title }}</a></h1>
-    <div class="text-gray-600">
+  <h1>
+    <a href="{{ .Permalink }}">{{ .Title }}</a>
+  </h1>
+  
+  <span class="date">
+    <time datetime="{{ .PublishDate }}" title='{{ .PublishDate.Format "Mon, Jan 2, 2006, 3:04 PM MST" }}'>
+      {{ .PublishDate.Format "02/01/2006" }}
+    </time>
+  </span>
+
+  <div class="description">
     {{ if .Params.description }}
-    {{ .Params.description }}    
-    {{ else if .Summary  }}
-    {{ .Summary }}
+      {{ .Params.description }}
+    {{ else if .Summary }}
+      {{ .Summary }}
     {{ end }}
-    </div>
-    <div class="mt-2"><a class="inline-flex  gap-2 text-sm font-semibold items-center text-emerald-700 hover:text-emerald-600" href="{{ .Permalink }}">Read This Article <span class="w-4 h-4 stroke-2">{{ partial "handler/svg" "arrow-right" }}</span> </a> </div>
-</article>
\ No newline at end of file
+  </div>
+
+  <div class="mt-2">
+    <a class="read-more" href="{{ .Permalink }}">
+      {{ i18n "readMore" }}
+      <span class="w-4 h-4 stroke-2">
+        {{ partial "utils/icon" "arrow-right" }}
+      </span>
+    </a>
+  </div>
+</article>
diff --git a/layouts/partials/list/pagination.html b/layouts/partials/list/pagination.html
new file mode 100644
index 0000000..2e9487c
--- /dev/null
+++ b/layouts/partials/list/pagination.html
@@ -0,0 +1,23 @@
+{{ $paginator := .Paginator }}
+
+<div class="pb-10 grid grid-cols-2 font-semibold">
+  <!-- Previous page. -->
+  <div>
+    {{ if $paginator.HasPrev }}
+      <a href="{{ $paginator.Prev.URL }}" class="pagination-button">
+        <span class="h-4 w-4 stroke-2"> {{ partial "utils/icon" "arrow-left" }} </span>
+        Newer Posts
+      </a>
+    {{ end }}
+  </div>
+
+  <!-- Next page. -->
+  <div class="flex justify-end">
+    {{ if $paginator.HasNext }}
+      <a href="{{ $paginator.Next.URL }}" class="pagination-button">
+        Older Posts
+        <span class="h-4 w-4 stroke-2"> {{ partial "utils/icon" "arrow-right" }} </span>
+      </a>
+    {{ end }}
+  </div>
+</div>
diff --git a/layouts/partials/single/comments/disqus.html b/layouts/partials/single/comments/disqus.html
new file mode 100644
index 0000000..b794098
--- /dev/null
+++ b/layouts/partials/single/comments/disqus.html
@@ -0,0 +1,4 @@
+<div class="disqus-comment">
+    {{/*  https://gohugo.io/templates/internal/#disqus  */}}
+    {{- template "_internal/disqus.html" . -}}
+</div>
\ No newline at end of file
diff --git a/layouts/partials/single/comments/giscus.html b/layouts/partials/single/comments/giscus.html
new file mode 100644
index 0000000..00cfec1
--- /dev/null
+++ b/layouts/partials/single/comments/giscus.html
@@ -0,0 +1,22 @@
+<div class="giscus-comment">
+    <script
+      src="https://giscus.app/client.js"
+      data-repo="{{ .Site.Params.giscus.repo }}"
+      data-repo-id="{{ .Site.Params.giscus.repoId }}"
+      data-category="{{ .Site.Params.giscus.category }}"
+      data-category-id="{{ .Site.Params.giscus.categoryId }}"
+      data-mapping="{{ .Site.Params.giscus.mapping | default `pathname` }}"
+      data-strict="{{ (string .Site.Params.giscus.strict) | default 0 }}"
+      data-reactions-enabled="{{ (string .Site.Params.giscus.reactionsEnabled) |  default 1 }}"
+      data-emit-metadata="{{ (string .Site.Params.giscus.emitMetadata) | default 0 }}"
+      data-input-position="{{ .Site.Params.giscus.inputPosition | default `top` }}"
+      data-theme="{{ .Site.Params.giscus.theme | default `light` }}"
+      data-lang="{{ .Site.Params.giscus.lang | default `en` }}"
+      {{ if .Site.Params.giscus.lazyLoading }}
+        data-loading="lazy"
+      {{ end }}
+      crossorigin="anonymous"
+      async
+    >
+    </script>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/single/comments/index.html b/layouts/partials/single/comments/index.html
new file mode 100644
index 0000000..5a4a1c3
--- /dev/null
+++ b/layouts/partials/single/comments/index.html
@@ -0,0 +1,11 @@
+{{ if .IsPage }}
+    <!-- giscus -->
+  {{ if .Site.Params.giscus.enable }}
+    {{ partial "single/comments/giscus" . }}
+  {{ end }}
+
+    <!-- disqus -->
+  {{ if .Site.Params.disqusShortname }}
+    {{ partial "single/comments/disqus" . }}
+  {{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/single/table-of-contents.html b/layouts/partials/single/table-of-contents.html
new file mode 100644
index 0000000..b8489bc
--- /dev/null
+++ b/layouts/partials/single/table-of-contents.html
@@ -0,0 +1,6 @@
+{{ if and .TableOfContents .Params.tableOfContents }}
+  <aside class="table-of-contents">
+    <h2 class="title-small">{{ i18n "summary" }}</h2>
+    {{ .TableOfContents }}
+  </aside>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/utils/icon.html b/layouts/partials/utils/icon.html
new file mode 100644
index 0000000..7f72418
--- /dev/null
+++ b/layouts/partials/utils/icon.html
@@ -0,0 +1,7 @@
+{{- $iconFile := resources.GetMatch (printf "icons/%s.svg" .) -}}
+
+{{- if $iconFile -}}
+    {{- $iconFile.Content | safeHTML -}}
+{{- else -}}
+    {{- errorf "Error: icon '%s.svg' is not found under 'assets/icons' folder" . -}}
+{{- end -}}
\ No newline at end of file
diff --git a/layouts/shortcodes/alert.html b/layouts/shortcodes/alert.html
new file mode 100644
index 0000000..3a55964
--- /dev/null
+++ b/layouts/shortcodes/alert.html
@@ -0,0 +1,73 @@
+{{ $severity := .Get 0 }}
+{{ $title := .Get 1 }}
+
+<div class="alert-box {{ $severity }}">
+  {{ if $title }}
+    <h3 class="alert-title">{{ $title }}</h3>
+  {{ end }}
+  <p class="flex flex-row items-center gap-2">
+    {{ if eq $severity "info" }}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="alert-icon"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+      />
+    </svg>
+    {{ else if eq $severity "warning" }}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="alert-icon"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+      />
+    </svg>
+    {{ else if eq $severity "error" }}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="alert-icon"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+      />
+    </svg>
+    {{ else if eq $severity "success" }}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="alert-icon"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+
+    {{ end }}
+    {{.Inner}}
+  </p>
+</div>
diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html
new file mode 100644
index 0000000..ca524f7
--- /dev/null
+++ b/layouts/shortcodes/details.html
@@ -0,0 +1,75 @@
+{{- /*
+Renders an HTML details element.
+
+@param {string} [class] The value of the element's class attribute.
+@param {string} [name] The value of the element's name attribute.
+@param {string} [summary] The content of the child summary element.
+@param {string} [title] The value of the element's title attribute.
+@param {bool} [open=false] Whether to initially display the content of the details element.
+
+@reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
+
+@examples
+
+  {{< details >}}
+  A basic collapsible section.
+  {{< /details >}}
+
+  {{< details summary="Custom Summary Text" >}}
+  Showing custom `summary` text.
+  {{< /details >}}
+
+  {{< details summary="Open Details" open=true >}}
+  Contents displayed initially by using `open`.
+  {{< /details >}}
+
+  {{< details summary="Styled Content" class="my-custom-class" >}}
+  Content can be styled with CSS by specifying a `class`.
+
+  Target details element:
+
+  ```css
+  details.my-custom-class { }
+  ```
+
+  Target summary element:
+
+  ```css
+  details.my-custom-class > summary > * { }
+  ```
+
+  Target inner content:
+
+  ```css
+  details.my-custom-class > :not(summary) { }
+  ```
+  {{< /details >}}
+
+  {{< details summary="Grouped Details" name="my-details" >}}
+  Specifying a `name` allows elements to be connected, with only one able to be open at a time.
+  {{< /details >}}
+
+*/}}
+
+{{- /* Get arguments. */}}
+{{- $class := or (.Get "class") "" }}
+{{- $name := or (.Get "name") "" }}
+{{- $summary := or (.Get "summary") "Details" }}
+{{- $title := or (.Get "title") "" }}
+{{- $open := false }}
+{{- if in (slice "false" false 0) (.Get "open") }}
+  {{- $open = false }}
+{{- else if in (slice "true" true 1) (.Get "open") }}
+  {{- $open = true }}
+{{- end }}
+
+{{- /* Render. */}}
+<details
+  {{- with $class }} class="{{ . }}" {{- end }}
+  {{- with $name }} name="{{ . }}" {{- end }}
+  {{- with $open }} open {{- end }}
+  {{- with $title }} title="{{ . }}" {{- end -}}
+>
+  <summary>{{ $summary | .Page.RenderString }}</summary>
+  {{ .Inner | .Page.RenderString (dict "display" "block") -}}
+</details>
\ No newline at end of file
diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index a0673a3..45ce3da 100644
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -1,23 +1,16 @@
-{{/*  Image Resources  */}}
-{{ $img := .Page.Resources.GetMatch (printf "%s" (.Get "src" | safeURL ))}}
-{{ $alt := .Get "alt"}}
+{{ $img := .Page.Resources.GetMatch (printf "%s" (.Get "src" | safeURL )) }}
+{{ $alt := .Get "alt" }}
+{{ $caption := .Get "caption" }}
+{{ $captionPosition := .Get "caption-position" }}
 
-{{/*  Image Processing  */}}
-{{ $command := .Get "size-method" }}
-{{ $options := .Get "size-format" }}
-{{ if eq $command "Fit"}}
-  {{ $img = $img.Fit $options }}
-{{ else if eq $command "Resize"}}
-  {{ $img = $img.Resize $options }}
-{{ else if eq $command "Fill"}}
-  {{ $img = $img.Fill $options }}
-{{ else if eq $command "Crop"}}
-  {{ $img = $img.Crop $options }}
-{{ end }}
-
-{{/*  Position  */}}
-{{ $position := .Get "position" }}
-
-<figure class='mb-5{{ if eq $position "center" }} flex justify-center{{ end }}'>
-    <img src="{{ $img.RelPermalink }}" {{ with $alt }}alt="{{ . }}"{{end}} width="{{ $img.Width }}" height="{{ $img.Height }}" >
+<figure class='mb-5'>
+  <img src="{{ $img.RelPermalink }}" {{ with $alt }} alt="{{ . }}" {{ end }} width="{{ $img.Width }}" height="{{ $img.Height }}" />
+  
+  {{ with $caption }}
+    <figcaption 
+      class='{{ if eq $captionPosition "center" }} flex justify-center {{ else if eq $captionPosition "end" }} flex justify-end {{ end }}'
+    >
+      {{ . }}
+    </figcaption>
+  {{ end }}
 </figure>
\ No newline at end of file
diff --git a/layouts/shortcodes/task-list.html b/layouts/shortcodes/task-list.html
new file mode 100644
index 0000000..fe4ffe7
--- /dev/null
+++ b/layouts/shortcodes/task-list.html
@@ -0,0 +1 @@
+<span class="task-list"></span>
diff --git a/layouts/taxonomies/home.html b/layouts/taxonomies/home.html
index 6a7dce5..0ee22c5 100644
--- a/layouts/taxonomies/home.html
+++ b/layouts/taxonomies/home.html
@@ -1,17 +1,29 @@
-{{ define "main" }}
-{{ $pages := .Pages }}
+{{ define "main" }} 
+
 <div class="flex flex-col gap-1">
-<h1 class="text-2xl font-extrabold">{{ if .Params.header }}{{ .Params.header }}{{ else }}{{ .Title }}{{ end }}</h1>
-{{ if .Content }}<p class="content text-lg text-gray-900">{{ .Content }}</p>{{ end }}
+  <h1 class="title-small">
+    {{ if .Params.header }}
+      {{ .Params.header }}
+    {{ else }}
+      {{ .Title }}
+    {{ end }}
+  </h1>
+
+  {{ with .Content }}
+    {{ . }}
+  {{ end }}
 </div>
 
-<section class="py-10 flex flex-col gap-10 ">
-<ul class="taxonomy-list">
-    {{ range $index, $pages}}
-    {{ partial "list/categories" . }}
+<section class="py-10 flex flex-col gap-10">
+  <ul class="taxonomy-list">
+    {{ range $index, $pages := .Pages }} 
+      <li>
+        <a href=" {{ .Permalink }} ">
+          {{ .Title }} ({{ len .Pages }})
+        </a>
+      </li>
     {{ end }}
-</ul>
+  </ul>
 </section>
 
-
 {{ end }}
diff --git a/static/fonts/inter-v12-latin-100.woff b/static/fonts/inter-v12-latin-100.woff
new file mode 100644
index 0000000..ae5e660
--- /dev/null
+++ b/static/fonts/inter-v12-latin-100.woff
diff --git a/static/fonts/inter-v12-latin-100.woff2 b/static/fonts/inter-v12-latin-100.woff2
new file mode 100644
index 0000000..1ef2357
--- /dev/null
+++ b/static/fonts/inter-v12-latin-100.woff2
diff --git a/static/fonts/inter-v12-latin-200.woff b/static/fonts/inter-v12-latin-200.woff
new file mode 100644
index 0000000..30ec28e
--- /dev/null
+++ b/static/fonts/inter-v12-latin-200.woff
diff --git a/static/fonts/inter-v12-latin-200.woff2 b/static/fonts/inter-v12-latin-200.woff2
new file mode 100644
index 0000000..ca591ae
--- /dev/null
+++ b/static/fonts/inter-v12-latin-200.woff2
diff --git a/static/fonts/inter-v12-latin-300.woff b/static/fonts/inter-v12-latin-300.woff
new file mode 100644
index 0000000..f3fe81e
--- /dev/null
+++ b/static/fonts/inter-v12-latin-300.woff
diff --git a/static/fonts/inter-v12-latin-300.woff2 b/static/fonts/inter-v12-latin-300.woff2
new file mode 100644
index 0000000..e085aa8
--- /dev/null
+++ b/static/fonts/inter-v12-latin-300.woff2
diff --git a/static/fonts/inter-v12-latin-500.woff b/static/fonts/inter-v12-latin-500.woff
new file mode 100644
index 0000000..19c7bf8
--- /dev/null
+++ b/static/fonts/inter-v12-latin-500.woff
diff --git a/static/fonts/inter-v12-latin-500.woff2 b/static/fonts/inter-v12-latin-500.woff2
new file mode 100644
index 0000000..6fc94ad
--- /dev/null
+++ b/static/fonts/inter-v12-latin-500.woff2
diff --git a/static/fonts/inter-v12-latin-600.woff b/static/fonts/inter-v12-latin-600.woff
new file mode 100644
index 0000000..b606a87
--- /dev/null
+++ b/static/fonts/inter-v12-latin-600.woff
diff --git a/static/fonts/inter-v12-latin-600.woff2 b/static/fonts/inter-v12-latin-600.woff2
new file mode 100644
index 0000000..bc76d10
--- /dev/null
+++ b/static/fonts/inter-v12-latin-600.woff2
diff --git a/static/fonts/inter-v12-latin-700.woff b/static/fonts/inter-v12-latin-700.woff
new file mode 100644
index 0000000..097e23e
--- /dev/null
+++ b/static/fonts/inter-v12-latin-700.woff
diff --git a/static/fonts/inter-v12-latin-700.woff2 b/static/fonts/inter-v12-latin-700.woff2
new file mode 100644
index 0000000..8fcc432
--- /dev/null
+++ b/static/fonts/inter-v12-latin-700.woff2
diff --git a/static/fonts/inter-v12-latin-800.woff b/static/fonts/inter-v12-latin-800.woff
new file mode 100644
index 0000000..83d445c
--- /dev/null
+++ b/static/fonts/inter-v12-latin-800.woff
diff --git a/static/fonts/inter-v12-latin-800.woff2 b/static/fonts/inter-v12-latin-800.woff2
new file mode 100644
index 0000000..27db054
--- /dev/null
+++ b/static/fonts/inter-v12-latin-800.woff2
diff --git a/static/fonts/inter-v12-latin-900.woff b/static/fonts/inter-v12-latin-900.woff
new file mode 100644
index 0000000..aa007e6
--- /dev/null
+++ b/static/fonts/inter-v12-latin-900.woff
diff --git a/static/fonts/inter-v12-latin-900.woff2 b/static/fonts/inter-v12-latin-900.woff2
new file mode 100644
index 0000000..b1c208a
--- /dev/null
+++ b/static/fonts/inter-v12-latin-900.woff2
diff --git a/static/fonts/inter-v12-latin-regular.woff b/static/fonts/inter-v12-latin-regular.woff
new file mode 100644
index 0000000..1866261
--- /dev/null
+++ b/static/fonts/inter-v12-latin-regular.woff
diff --git a/static/fonts/inter-v12-latin-regular.woff2 b/static/fonts/inter-v12-latin-regular.woff2
new file mode 100644
index 0000000..c659f5e
--- /dev/null
+++ b/static/fonts/inter-v12-latin-regular.woff2
diff --git a/themes/lowkey b/themes/lowkey
deleted file mode 160000
-Subproject aa01db51e69f2ec27f5841be15a4a47ab29c930