add: 美化标题栏

This commit is contained in:
jackfiled 2024-01-25 19:54:54 +08:00
parent b6e672c6eb
commit e6f5f5a051
2 changed files with 39 additions and 15 deletions

View File

@ -17,33 +17,53 @@
<FluentSpacer/>
<a href="/" style="margin: auto 0 auto 0">
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight">
首页
</FluentLabel>
<div class="quick-link">
<FluentIcon Value="@(new Icons.Regular.Size16.Home())" Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
Style="margin-left: 0.2rem">
首页
</FluentLabel>
</div>
</a>
<a href="/archives" style="margin: auto 0 auto 0">
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight">
归档
</FluentLabel>
<div class="quick-link">
<FluentIcon Value="@(new Icons.Regular.Size16.Archive())" Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
Style="margin-left: 0.2rem">
归档
</FluentLabel>
</div>
</a>
<a href="/tags" style="margin: auto 0 auto 0">
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight">
标签
</FluentLabel>
<div class="quick-link">
<FluentIcon Value="@(new Icons.Regular.Size16.Tag())" Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
Style="margin-left: 0.2rem">
标签
</FluentLabel>
</div>
</a>
<a href="/about" style="margin: auto 0 auto 0">
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight">
关于
</FluentLabel>
<div class="quick-link">
<FluentIcon Value="@(new Icons.Regular.Size16.PersonInfo())" Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
Style="margin-left: 0.2rem">
关于
</FluentLabel>
</div>
</a>
<a href="/links" style="margin: auto 0 auto 0">
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight">
友链
</FluentLabel>
<div class="quick-link">
<FluentIcon Value="@(new Icons.Regular.Size16.LinkMultiple())" Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
Style="margin-left: 0.2rem">
友链
</FluentLabel>
</div>
</a>
<div style="width: 20px"></div>

View File

@ -0,0 +1,4 @@
.quick-link {
display: flex;
align-items: center;
}