fix: category tags flush right instead of wrapping onto their own line
grid-column:3 + justify-self:end put name and tags in the same cell but grid stacks co-located items instead of placing them side by side, so the tag wrapped to a second line. wrapped both in a flex row (justify-content:space-between) inside that grid cell instead.
This commit is contained in:
@@ -147,6 +147,10 @@ body:not(.home) .menu { display: none; }
|
|||||||
color: var(--color-text-primary);
|
color: var(--color-text-primary);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
/* name + tags share the grid's last column but need their own row to put
|
||||||
|
the tag flush right without wrapping onto a second line — two grid items
|
||||||
|
left in the same cell just stack instead of sitting side by side */
|
||||||
|
.tui__row3 { display: flex; justify-content: space-between; align-items: baseline; gap: 1ch; min-width: 0; }
|
||||||
.tui__perm,
|
.tui__perm,
|
||||||
.tui__date,
|
.tui__date,
|
||||||
.tui__tags { color: var(--color-text-muted); }
|
.tui__tags { color: var(--color-text-muted); }
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
data-img="{{ with $p.Params.thumbnail }}{{ . | relURL }}{{ end }}"
|
data-img="{{ with $p.Params.thumbnail }}{{ . | relURL }}{{ end }}"
|
||||||
data-name="{{ $p.Slug }}"
|
data-name="{{ $p.Slug }}"
|
||||||
{{ if eq $i 0 }}class="is-selected"{{ end }}>
|
{{ if eq $i 0 }}class="is-selected"{{ end }}>
|
||||||
<span class="tui__perm">drwxr-xr-x</span><span class="tui__date">{{ $p.Date.Format "2006" }}</span><span class="tui__name">{{ $p.Slug }}/{{ with $p.Params.categories }} <span class="tui__tags">{{ range . }}[{{ . }}]{{ end }}</span>{{ end }}</span>
|
<span class="tui__perm">drwxr-xr-x</span><span class="tui__date">{{ $p.Date.Format "2006" }}</span><span class="tui__row3"><span class="tui__name">{{ $p.Slug }}/</span>{{ with $p.Params.categories }}<span class="tui__tags">{{ range . }}[{{ . }}]{{ end }}</span>{{ end }}</span>
|
||||||
</a></li>
|
</a></li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
Reference in New Issue
Block a user