diff options
| -rw-r--r-- | _includes/breadcrumbs.html | 23 | ||||
| -rw-r--r-- | _layouts/default.html | 16 | ||||
| -rw-r--r-- | _layouts/post.html | 2 | ||||
| -rw-r--r-- | _posts/2026-11-02-my-certification.md | 8 |
4 files changed, 39 insertions, 10 deletions
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> |