Blog/layouts/about/list.html

{{ define "title" }}
{{ .Title }} | {{ .Site.Params.author.name }}
{{ end }}

{{ define "main" }}
<div>
    <div class="listHeader">
        <div class="header-content">
            <div></div>
            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
        </div>
    </div>

    {{ with .Content }}
    <div class="listContent">
        {{- . -}}
    </div>
    {{ end }}
</div>

<style>
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tags-link {
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: bold;
}

.highlight {
    background: var(--accent-color);
    color: var(--bg-color);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.tags-link:hover .highlight {
    opacity: 0.8;
}
</style>
{{ end }}