@apply text-text hover:text-accent transition-colors;
}
+ /* Breadcrumb navigation */
+ .breadcrumb {
+ @apply flex items-center gap-2 text-sm text-text-dim;
+ }
+
+ .breadcrumb a {
+ @apply hover:text-accent transition-colors;
+ }
+
+ .breadcrumb-separator {
+ @apply opacity-50;
+ }
+
/* Article metadata styling (with icons) */
.article-meta {
@apply flex flex-wrap items-center gap-4 text-sm text-text-dim;
opacity: 1;
}
+/* Breadcrumb navigation */
+
+.breadcrumb {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ color: var(--text-dim);
+}
+
+.breadcrumb a {
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+}
+
+.breadcrumb a:hover {
+ color: var(--accent);
+}
+
+.breadcrumb-separator {
+ opacity: 0.5;
+}
+
/* Article metadata styling (with icons) */
/* Hero typography with fluid sizing */
<div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto content-grid">
<!-- Article section -->
<div class="md:col-span-2">
+ <!-- Breadcrumb -->
+ {{ partial "breadcrumb.html" . }}
+
<!-- Article header -->
{{ partial "article-header.html" . }}
--- /dev/null
+<nav class="breadcrumb mb-6" aria-label="Breadcrumb">
+ {{ $currentLang := .Page.Language }}
+
+ <!-- Home link -->
+ <a href="/">Home</a>
+ <span class="breadcrumb-separator">/</span>
+
+ <!-- Articles section -->
+ {{ if eq .Page.Type "article" }}
+ {{ if eq $currentLang "it" }}
+ <a href="/it/articles/">{{ i18n "articles" }}</a>
+ {{ else }}
+ <a href="/articles/">{{ i18n "articles" }}</a>
+ {{ end }}
+ <span class="breadcrumb-separator">/</span>
+
+ <!-- Current article title -->
+ <span>{{ .Page.Title }}</span>
+ {{ end }}
+</nav>