Skip to content

Commit 922318d

Browse files
committed
refact: converted to bootstrap 5 utility
1 parent f24e92b commit 922318d

File tree

3 files changed

+35
-64
lines changed

3 files changed

+35
-64
lines changed

src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@
44
@inject IOptions<ProfileInformation> ProfileInformation
55
@inject IOptions<SupportMeConfiguration> SupportConfiguration
66

7-
<footer id="footer" class="text-center">
8-
<span class="py-2 mb-0 text-body-secondary"@DateTime.Now.Year @CopyrightName</span>
7+
<footer class="position-absolute bottom-0 w-100 text-center" style="height:2.5rem;">
8+
<span class="py-2 mb-0 text-body-secondary d-block"@DateTime.Now.Year @CopyrightName</span>
99
@if (SupportConfiguration.Value.ShowInFooter)
1010
{
11-
<div class="pb-2" style="display:flex;justify-content:center">
11+
<div class="pb-2 d-flex justify-content-center">
1212
<DonationSection />
1313
</div>
1414
}
1515
</footer>
16+
1617
@code {
1718
private string CopyrightName => AppConfiguration.Value.IsAboutMeEnabled
1819
? ProfileInformation.Value.Name

src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,40 @@
44
@inject IOptions<Social> Social
55
@inject IOptions<SupportMeConfiguration> SupportConfiguration
66

7-
<div style="@IntroductionStyle" class="@IntroductionClass">
8-
<div class="introduction-container">
9-
<div class="profile-picture" style="--profile-image: url(@Introduction.Value.ProfilePictureUrl)">
10-
</div>
11-
<div class="profile-text d-flex flex-column">
12-
<div>@MarkdownConverter.ToMarkupString(Introduction.Value.Description)</div>
13-
<SocialAccounts Social="@Social.Value"></SocialAccounts>
14-
@if (SupportConfiguration.Value.ShowUnderIntroduction)
15-
{
16-
<DonationSection />
17-
}
7+
<div class="@IntroductionClass py-4 bg-dark bg-opacity-50 text-white">
8+
<div class="container text-center">
9+
<div class="row justify-content-center">
10+
<!-- Profile Picture -->
11+
<div class="col-12 d-flex justify-content-center">
12+
<div class="rounded-circle border border-white shadow"
13+
style="width: 175px; height: 175px; background-image: url(@Introduction.Value.ProfilePictureUrl); background-repeat: no-repeat; background-position: center; background-size: cover;">
14+
</div>
15+
</div>
16+
17+
<!-- Profile Text -->
18+
<div class="col-md-8 mt-4">
19+
<div class="fs-5 lh-base text-center">
20+
@MarkdownConverter.ToMarkupString(Introduction.Value.Description)
21+
</div>
22+
23+
<!-- Social Links -->
24+
<div class="mt-3">
25+
<SocialAccounts Social="@Social.Value"></SocialAccounts>
26+
</div>
27+
28+
<!-- Donation Section (optional) -->
29+
@if (SupportConfiguration.Value.ShowUnderIntroduction)
30+
{
31+
<div class="mt-3">
32+
<DonationSection />
33+
</div>
34+
}
35+
</div>
1836
</div>
1937
</div>
2038
</div>
39+
40+
2141
@code {
2242
private string IntroductionClass => !string.IsNullOrEmpty(Introduction.Value.BackgroundUrl)
2343
? "introduction-background"

src/LinkDotNet.Blog.Web/wwwroot/css/basic.css

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -174,13 +174,6 @@ code {
174174
top: 0.5rem;
175175
}
176176

177-
#footer {
178-
position: absolute;
179-
bottom: 0;
180-
width: 100%;
181-
height: 2.5rem;
182-
}
183-
184177
.barcode {
185178
text-decoration: none;
186179
font-weight: 400;
@@ -370,49 +363,6 @@ i {
370363
}
371364
/*#endregion */
372365

373-
/*#region home */
374-
.introduction-background {
375-
background-repeat: no-repeat;
376-
background-size: cover;
377-
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--profile-background);
378-
}
379-
380-
.introduction-container {
381-
height: 438px;
382-
display: grid;
383-
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
384-
grid-template-rows: 0.5fr 1fr 1fr 1fr;
385-
gap: 10px;
386-
grid-template-areas:
387-
". . . . ."
388-
". . profile-picture . ."
389-
". profile-text profile-text profile-text ."
390-
". profile-text profile-text profile-text .";
391-
}
392-
393-
.profile-picture {
394-
grid-area: profile-picture;
395-
width: 175px;
396-
height: 175px;
397-
border-radius: 50%;
398-
border: white;
399-
margin: auto;
400-
box-shadow: 0 0 0 4px white;
401-
background-image: var(--profile-image);
402-
background-repeat: no-repeat;
403-
background-position: center center;
404-
background-size: cover;
405-
}
406-
407-
.profile-text {
408-
margin: auto;
409-
grid-area: profile-text;
410-
font-size: clamp(1.0rem, 0.6479rem + 1vw, 1.4rem);
411-
line-height: clamp(1.5em, 0.6479rem + 1.1268vw, 2.25em);
412-
text-align: center;
413-
}
414-
/*#endregion */
415-
416366
/*#region Components */
417367
.actions {
418368
float:right;

0 commit comments

Comments
 (0)