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:
		
							parent
							
								
									ea9fb02aaa
								
							
						
					
					
						commit
						8aed72a94d
					
				
					 2 changed files with 40 additions and 33 deletions
				
			
		| 
						 | 
				
			
			@ -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;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue