Skip to content

Commit a3b58b9

Browse files
committed
style(breadcrumbs): update markup to use <nav> for improved semantics and add SVG seperator
1 parent 1d9e109 commit a3b58b9

2 files changed

Lines changed: 25 additions & 16 deletions

File tree

assets/css/common/post-single.css

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,15 @@
2323
display: flex;
2424
flex-wrap: wrap;
2525
align-items: center;
26+
gap: 0.2rem;
27+
}
28+
29+
.breadcrumbs a {
30+
font-size: 16px;
31+
}
32+
33+
.breadcrumbs svg {
34+
height: 1em;
2635
}
2736

2837
.i18n_list {
@@ -34,10 +43,6 @@
3443
margin: auto 3px;
3544
}
3645

37-
.breadcrumbs a {
38-
font-size: 16px;
39-
}
40-
4146
.post-meta .i18n_list li a,
4247
.toc a:hover {
4348
box-shadow: 0 1px 0;

layouts/partials/breadcrumbs.html

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
{{- if (.Param "ShowBreadCrumbs") -}}
2-
<div class="breadcrumbs">
2+
<nav class="breadcrumbs" role="navigation" aria-label="Breadcrumb">
3+
<a href='{{ "" | absLangURL }}'>
4+
{{- i18n "home" | default "Home" -}}
5+
</a>
36
{{- $url := replace .Parent.Permalink (printf "%s" site.Home.Permalink) "" }}
47
{{- $lang_url := strings.TrimPrefix (printf "%s/" .Lang) $url -}}
5-
6-
<a href="{{ "" | absLangURL }}">{{ i18n "home" | default "Home" }}</a>
78
{{- $scratch := newScratch }}
89
{{- range $index, $element := split $lang_url "/" }}
9-
10-
{{- $scratch.Add "path" (printf "%s/" $element )}}
11-
{{- $bc_pg := site.GetPage ($scratch.Get "path") -}}
12-
13-
{{- if (and ($bc_pg) (gt (len . ) 0))}}
14-
{{- print "&nbsp;»&nbsp;" | safeHTML -}}<a href="{{ $bc_pg.Permalink }}">{{ $bc_pg.Name }}</a>
15-
{{- end }}
16-
10+
{{- $scratch.Add "path" (printf "%s/" $element )}}
11+
{{- $bc_pg := site.GetPage ($scratch.Get "path") -}}
12+
{{- if (and ($bc_pg) (gt (len . ) 0))}}
13+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
14+
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
15+
<polyline points="9 18 15 12 9 6"></polyline>
16+
</svg>
17+
<a href="{{ $bc_pg.Permalink }}">
18+
{{- $bc_pg.Name -}}
19+
</a>
20+
{{- end }}
1721
{{- end -}}
18-
</div>
22+
</nav>
1923
{{- end -}}

0 commit comments

Comments
 (0)