【网站美化】标签美化

1
2
3
4
5
6
7

.terms-tags{
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<ul class="terms-tags">
    {{- $type := .Type }}
    {{- range $key, $value := .Data.Terms.Alphabetical }}
    {{- $name := .Name }}
    {{- $count := .Count }}
    {{- with site.GetPage (printf "/%s/%s" $type $name) }}
    <li>
        <a data-weight="{{$count}}" href="{{ .Permalink }}">{{ .Name }} <sup><strong><sup>{{ $count }}</sup></strong></sup> </a>
    </li>
    {{- end }}
    {{- end }}
</ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

.terms-tags a[data-weight="1"] { --size: 1; }
.terms-tags a[data-weight="2"] { --size: 2; }
.terms-tags a[data-weight="3"] { --size: 3; }
.terms-tags a[data-weight="4"] { --size: 4; }
.terms-tags a[data-weight="5"] { --size: 5; }
.terms-tags a[data-weight="6"] { --size: 6; }
.terms-tags a[data-weight="7"] { --size: 7; }
.terms-tags a[data-weight="8"] { --size: 8; }
.terms-tags a[data-weight="9"] { --size: 9; }

.terms-tags a {
    --size: 4;
    font-size: calc(var(--size) * 0.25rem + 1rem);

    /* font-size: 1.4rem; */
    display: block;
    padding: 3px 10px;
    background: var(--tertiary);
    border-radius: 6px;
    transition: transform 0.1s;
}

1
2
3
4
5

.terms-tags li:nth-child(2n+1) a {color:#f7a400;}
.terms-tags li:nth-child(3n+1) a {color:#3a9efd;}
.terms-tags li:nth-child(4n+1) a {color:#3e4491;}
.terms-tags li:nth-child(5n+1) a {color:#3e4491;}
.terms-tags li:nth-child(6n+1) a {color:#3e4491;}