jackfiled/YaeBlog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: customize font size.

Browse Source
This commit is contained in:
jackfiled 2024-06-26 21:54:51 +08:00
parent cc2def38c0
commit 4c939ae353
6 changed files with 67 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
YaeBlog/Components/App.razor
View File

@ -1,5 +1,4 @@
@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens <!DOCTYPE html>
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -8,7 +7,7 @@
<base href="/"/> <base href="/"/>
<link rel="stylesheet" href="YaeBlog.styles.css"/> <link rel="stylesheet" href="YaeBlog.styles.css"/>
<link rel="icon" href="images/favicon.ico"/> <link rel="icon" href="images/favicon.ico"/>
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" /> <link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet"/>
<link href="globals.css" rel="stylesheet"/> <link href="globals.css" rel="stylesheet"/>
<HeadOutlet/> <HeadOutlet/>
</head> </head>
@ -22,6 +21,7 @@
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script> <script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script>
<script src="_framework/blazor.web.js"></script> <script src="_framework/blazor.web.js"></script>
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script> <script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>
<script src="themes.js" type="module"></script>
</body> </body>
</html> </html>

36
YaeBlog/Components/WebsiteCard.razor Normal file
View File

@ -0,0 +1,36 @@
<FluentGridItem md="3" sm="6" xs="12">
<FluentStack Orientation="@Orientation.Horizontal" HorizontalAlignment="@HorizontalAlignment.Center">
<div style="margin: 10px 20px; width: 75%; height: 90%">
<a href="@Address" target="_blank">
<FluentCard Width="100%" Height="100%">
<FluentStack Orientation="@Orientation.Horizontal">
<div style="width: 25%; margin: 5px 0">
<img src="@ImageAddress" alt="@Name" width="100%"/>
</div>
<FluentStack Orientation="@Orientation.Vertical">
<FluentLabel Typo="@Typography.H3">
@Name
</FluentLabel>
<FluentLabel Typo="@Typography.Body">
@Description
</FluentLabel>
</FluentStack>
</FluentStack>
</FluentCard>
</a>
</div>
</FluentStack>
</FluentGridItem>
@code {
[Parameter] public string Name { get; set; } = string.Empty;
[Parameter] public string Description { get; set; } = string.Empty;
[Parameter] public string ImageAddress { get; set; } = string.Empty;
[Parameter] public string Address { get; set; } = string.Empty;
}

0
YaeBlog/Components/WebsiteCard.razor.css Normal file
View File

7
YaeBlog/Layout/MainLayout.razor
View File

@ -1,7 +1,8 @@
@inherits LayoutComponentBase @inherits LayoutComponentBase
<FluentLayout Style="min-height: 100vh"> <FluentLayout Style="min-height: 100vh">
<FluentHeader> <FluentHeader Height="60">
<a href="/"> <a href="/">
<FluentLabel Typo="@Typography.H3" Color="@Color.Lightweight"> <FluentLabel Typo="@Typography.H3" Color="@Color.Lightweight">
Ricardo's Index Ricardo's Index
@ -15,7 +16,3 @@
</main> </main>
</FluentBodyContent> </FluentBodyContent>
</FluentLayout> </FluentLayout>
@code {
}

24
YaeBlog/Pages/Index.razor
View File

@ -5,7 +5,7 @@
</PageTitle> </PageTitle>
<FluentStack Orientation="@Orientation.Vertical" Width="100%" Style="background-color: #f0f2f5; height: 100%"> <FluentStack Orientation="@Orientation.Vertical" Width="100%" Style="background-color: #f0f2f5; height: 100%">
<div style="width: 100%; height: 100%"> <div style="width: 100%; height: auto">
<FluentGrid> <FluentGrid>
<FluentGridItem md="3" xs="12"> <FluentGridItem md="3" xs="12">
<FluentStack Orientation="@Orientation.Horizontal" HorizontalAlignment="@HorizontalAlignment.Center"> <FluentStack Orientation="@Orientation.Horizontal" HorizontalAlignment="@HorizontalAlignment.Center">
@ -48,20 +48,32 @@
</FluentStack> </FluentStack>
</FluentStack> </FluentStack>
</FluentGridItem> </FluentGridItem>
<FluentGridItem md="4" xs="12">
</FluentGridItem>
</FluentGrid> </FluentGrid>
</div> </div>
<FluentStack Orientation="@Orientation.Horizontal" HorizontalAlignment="@HorizontalAlignment.Center">
<FluentDivider Style="width: 90%" Orientation="@Orientation.Horizontal" Role="@DividerRole.Separator"/>
</FluentStack>
<div style="width: 100%; height: auto">
<FluentGrid Justify="@JustifyContent.Center">
<WebsiteCard Name="部落格" Address="/blog/" ImageAddress="/images/blog-icon.png"
Description="奇奇怪怪东西的聚集地"/>
<WebsiteCard Name="笔记本" Address="https://jackfiled.github.io/wiki/" ImageAddress="/images/wiki-icon.png"
Description="技校学习笔记"/>
<WebsiteCard Name="给提啊" Address="https://git.rrricardo.top" ImageAddress="/images/git-icon.png"
Description="宅男自用99成新"/>
</FluentGrid>
</div>
<div style="flex: 1"></div> <div style="flex: 1"></div>
<FluentStack Orientation="@Orientation.Horizontal" HorizontalAlignment="@HorizontalAlignment.Center"> <FluentStack Orientation="@Orientation.Horizontal" HorizontalAlignment="@HorizontalAlignment.Center">
<FluentStack Orientation="@Orientation.Vertical" HorizontalAlignment="@HorizontalAlignment.Center" <FluentStack Orientation="@Orientation.Vertical" HorizontalAlignment="@HorizontalAlignment.Center"
Style="padding: 20px"> Style="padding: 20px">
<FluentLabel> <FluentLabel>
2021 - 2023 By <a href="https://rrricardo.top">Ricardo Ren</a> 2021 - @(DateTimeOffset.Now.Year) By <a href="https://rrricardo.top">Ricardo Ren</a>
</FluentLabel> </FluentLabel>
<FluentLabel> <FluentLabel>

8
YaeBlog/wwwroot/themes.js Normal file
View File

@ -0,0 +1,8 @@
import * as fluentUI
from '/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js';
fluentUI.typeRampBaseFontSize.withDefault("16px");
fluentUI.typeRampBaseLineHeight.withDefault("16px");