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

add: 博客主页

Browse Source
This commit is contained in:
jackfiled
2024-01-21 19:57:14 +08:00
parent b16ae3209a
commit 50306e2943
7 changed files with 168 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
YaeBlog.Theme.FluentUI/Pages/Home.razor
View File

@@ -1,7 +1,81 @@
@page "/"
<h3>Home</h3>
@using YaeBlog.Core.Models
@inject BlogOptions BlogOptionsInstance
<div style="height: 100%">
<div class="banner" style="background-image: url('@BlogOptionsInstance.BannerImage')">
<div class="blog-title">
<FluentLabel Typo="@Typography.H1" Style="color: white">
@(BlogOptionsInstance.Author)'s Blog
</FluentLabel>
</div>
<div class="scroll-down">
<i class="scroll-down-tag"></i>
</div>
</div>
<div style="margin: 0 15% 0 15%">
<FluentCard>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
</FluentCard>
</div>
</div>
<p class="test">Color Text</p>
@code {

55
YaeBlog.Theme.FluentUI/Pages/Home.razor.css
View File

@@ -1,3 +1,54 @@
.test {
color: purple;
.banner {
position: relative;
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.blog-title {
color: white;
text-align: center;
top: 43%;
position: absolute;
width: 100%;
}
.scroll-down {
position: absolute;
bottom: 0;
width: 100%;
}
.scroll-down-tag::before {
content: "V";
}
.scroll-down-tag {
font-family: "Font Awesome 6 Free", sans-serif;
font-size: 36px;
color: white;
text-align: center;
position: relative;
display: inline-block;
width: 100%;
animation: scroll-down-animation 1.5s infinite;
}
@keyframes scroll-down-animation {
0% {
top: 0;
opacity: 0.4;
}
50% {
top: -20px;
opacity: 1;
}
100% {
top: 0;
opacity: 0.4;
}
}