style(breadcrumbs): update markup to use <nav> for improved semantics and add SVG seperator

This commit is contained in:
Aditya Telange
2026-04-11 20:12:11 +05:30
parent 1d9e109808
commit a3b58b9e95
2 changed files with 25 additions and 16 deletions
+9 -4
View File
@@ -23,6 +23,15 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: 0.2rem;
}
.breadcrumbs a {
font-size: 16px;
}
.breadcrumbs svg {
height: 1em;
} }
.i18n_list { .i18n_list {
@@ -34,10 +43,6 @@
margin: auto 3px; margin: auto 3px;
} }
.breadcrumbs a {
font-size: 16px;
}
.post-meta .i18n_list li a, .post-meta .i18n_list li a,
.toc a:hover { .toc a:hover {
box-shadow: 0 1px 0; box-shadow: 0 1px 0;
+16 -12
View File
@@ -1,19 +1,23 @@
{{- if (.Param "ShowBreadCrumbs") -}} {{- if (.Param "ShowBreadCrumbs") -}}
<div class="breadcrumbs"> <nav class="breadcrumbs" role="navigation" aria-label="Breadcrumb">
<a href='{{ "" | absLangURL }}'>
{{- i18n "home" | default "Home" -}}
</a>
{{- $url := replace .Parent.Permalink (printf "%s" site.Home.Permalink) "" }} {{- $url := replace .Parent.Permalink (printf "%s" site.Home.Permalink) "" }}
{{- $lang_url := strings.TrimPrefix (printf "%s/" .Lang) $url -}} {{- $lang_url := strings.TrimPrefix (printf "%s/" .Lang) $url -}}
<a href="{{ "" | absLangURL }}">{{ i18n "home" | default "Home" }}</a>
{{- $scratch := newScratch }} {{- $scratch := newScratch }}
{{- range $index, $element := split $lang_url "/" }} {{- range $index, $element := split $lang_url "/" }}
{{- $scratch.Add "path" (printf "%s/" $element )}}
{{- $scratch.Add "path" (printf "%s/" $element )}} {{- $bc_pg := site.GetPage ($scratch.Get "path") -}}
{{- $bc_pg := site.GetPage ($scratch.Get "path") -}} {{- if (and ($bc_pg) (gt (len . ) 0))}}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
{{- if (and ($bc_pg) (gt (len . ) 0))}} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
{{- print "&nbsp;»&nbsp;" | safeHTML -}}<a href="{{ $bc_pg.Permalink }}">{{ $bc_pg.Name }}</a> <polyline points="9 18 15 12 9 6"></polyline>
{{- end }} </svg>
<a href="{{ $bc_pg.Permalink }}">
{{- $bc_pg.Name -}}
</a>
{{- end }}
{{- end -}} {{- end -}}
</div> </nav>
{{- end -}} {{- end -}}