Wrap tags list in a .taxonomies <div>

Put two <ul.tags> elements inside so there's not an <li> with a triangle in it.
This commit is contained in:
Eryn Wells 2023-08-20 09:52:05 -07:00
parent ea9fb02aaa
commit 8aed72a94d
2 changed files with 40 additions and 33 deletions

View file

@ -1,5 +1,15 @@
.taxonomies {
align-items: first baseline;
display: flex;
grid-column: content-start / content-end;
height: min-content;
position: relative;
}
ul.tags {
display: flex;
flex-wrap: wrap;
gap: 1rem 1rem;
height: min-content;
margin-inline-start: 0;
padding-inline-start: 0;
@ -12,10 +22,7 @@ ul.tags > li {
display: inline-block;
font-size: 75%;
letter-spacing: 1px;
}
ul.tags > li:first-child {
margin-inline-start: 0;
margin: 0;
}
ul.tags > li:hover {
@ -28,6 +35,7 @@ ul.tags > li > a {
height: 100%;
width: 100%;
padding: 0.6rem 1rem;
text-decoration: none;
}
ul.tags > li > a:hover {
@ -35,10 +43,9 @@ ul.tags > li > a:hover {
text-decoration: none;
}
ul.tags > li + li { margin-inline-start: 1rem; }
ul.tags > li.chevron + li { margin-inline-start: 0 }
ul.tags > li + li { margin-inline-start: 0; }
ul.tags > .chevron {
.taxonomies > .chevron {
align-items: center;
border: 0;
border-radius: 0;
@ -47,11 +54,7 @@ ul.tags > .chevron {
display: flex;
justify-content: center;
margin-inline-start: 0;
padding-inline-start: 1px;
position: relative;
top: 2px;
width: 2rem;
}
ul.tags > .chevron:hover {
color: var(--tag-spacer-foreground-color);
background-color: inherit;
}

View file

@ -1,24 +1,28 @@
{{- if or .Params.categories .Params.tags -}}
<ul class="tags">
{{- if .Params.categories -}}
{{- $categories := .GetTerms "categories" -}}
{{- if gt (len $categories) 1 -}}
{{- errorf "More than one category for %q" .Path -}}
<div class="taxonomies">
{{- if or .Params.categories .Params.tags -}}
<ul class="tags">
{{- if .Params.categories -}}
{{- $categories := .GetTerms "categories" -}}
{{- if gt (len $categories) 1 -}}
{{- errorf "More than one category for %q" .Path -}}
{{- end -}}
{{- with index (.GetTerms "categories") 0 -}}
<li class="category"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
{{- end -}}
{{- end -}}
</ul>
{{- if and .Params.categories .Params.tags -}}
<div class="chevron noselect"></div>
{{- end -}}
{{- with index (.GetTerms "categories") 0 -}}
<li class="category"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
<ul class="tags">
{{- if .Params.tags -}}
{{- range .GetTerms "tags" -}}
<li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
{{- end -}}
{{- end -}}
</ul>
{{- end -}}
{{- if and .Params.categories .Params.tags -}}
<li class="chevron noselect"></li>
{{- end -}}
{{- if .Params.tags -}}
{{- range .GetTerms "tags" -}}
<li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
{{- end -}}
{{- end -}}
</ul>
{{- end -}}
</div>