From 71b798c1d322a275ac42c082a30377e560432a83 Mon Sep 17 00:00:00 2001
From: Hizbu Azka <hanifan.azka@gmail.com>
Date: Wed, 4 Nov 2026 14:38:39 +0700
Subject: add breadcrumb

---
 _includes/breadcrumbs.html            | 23 +++++++++++++++++++++++
 _layouts/default.html                 | 16 ++++++++++------
 _layouts/post.html                    |  2 ++
 _posts/2026-11-02-my-certification.md |  8 ++++----
 4 files changed, 39 insertions(+), 10 deletions(-)
 create mode 100644 _includes/breadcrumbs.html

diff --git a/_includes/breadcrumbs.html b/_includes/breadcrumbs.html
new file mode 100644
index 0000000..a4f992e
--- /dev/null
+++ b/_includes/breadcrumbs.html
@@ -0,0 +1,23 @@
+<nav aria-label="Breadcrumb" id="breadcrumbs" style="font-size: 0.8em">
+  {% assign crumbs = page.url | remove:'/index.html' | split: '/' %}
+  <a href="/">Home</a>
+  {% for crumb in crumbs offset: 1 %} {% if forloop.last %} / {{ page.title }}
+  {% else %} {% assign crumb_limit = forloop.index | plus: 1 %} /
+  <a
+    href="{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}"
+  >
+    {{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}
+  </a>
+  {% endif %} {% endfor %}
+</nav>
+
+<style>
+  nav[aria-label="Breadcrumb"] {
+    display: inline-block;
+    opacity: 0.5;
+    transition: opacity 0.1s;
+  }
+  nav[aria-label="Breadcrumb"]:hover {
+    opacity: 1;
+  }
+</style>
diff --git a/_layouts/default.html b/_layouts/default.html
index d7dd799..2eef0c8 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -7,18 +7,22 @@
     <title>{{ page.title }} - {{ site.title }}</title>
     <style>
       :root {
-        --bg-color: #ffffff;
-        --text-color: #000000;
+        --color-background-page: #ffffff;
+        --color-background-primary: #f8f9fa;
+        --color-text-primary: #000000;
+        --color-border-primary: #a2a9b1;
       }
       @media (prefers-color-scheme: dark) {
         :root {
-          --bg-color: #000000;
-          --text-color: #ffffff;
+          --color-background-page: #000000;
+          --color-background-primary: #202122;
+          --color-text-primary: #ffffff;
+          --color-border-primary: #72777d;
         }
       }
       body {
-        background: var(--bg-color);
-        color: var(--text-color);
+        background: var(--color-background-page);
+        color: var(--color-text-primary);
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
           sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
diff --git a/_layouts/post.html b/_layouts/post.html
index 948eb51..154260e 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,6 +2,8 @@
 layout: default
 ---
 
+{% include breadcrumbs.html %}
+
 <h1>{{ page.title }}</h1>
 <!-- _layout/post.html BEGIN_CONTENT -->
 {{ content -}}
diff --git a/_posts/2026-11-02-my-certification.md b/_posts/2026-11-02-my-certification.md
index fb95f36..abcebee 100644
--- a/_posts/2026-11-02-my-certification.md
+++ b/_posts/2026-11-02-my-certification.md
@@ -289,8 +289,8 @@ highlights:
 
 <style>
   details {
-    background: #f8f9fa;
-	border: 1px solid #a2a9b1;
+    background: var(--color-background-primary);
+	border: 1px solid var(--color-border-primary);
 	padding: 1ex;
   }
   table a {
@@ -298,8 +298,8 @@ highlights:
   }
   @media (prefers-color-scheme: dark) {
     details {
-	  background: #202122;
-	  border-color: #72777d;
+	  background: var(--color-background-primary);
+	  border-color: var(--color-border-primary);
 	}
   }
 </style>
-- 
cgit