Skip to content

Commit 8871b8a

Browse files
linkdotnetlinkdotnet
committed
Further styling
1 parent a94e80c commit 8871b8a

File tree

8 files changed

+88
-83
lines changed

8 files changed

+88
-83
lines changed

‎LinkDotNet.Blog.Web/Pages/Index.razor

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,32 @@
1010
<OgData Title="@(Markdown.ToPlainText(appConfiguration.BlogName))"
1111
AbsolutePreviewImageUrl="@GetAbsolutePreviewImageUrl()"
1212
Description="@(Markdown.ToPlainText(appConfiguration.Introduction.Description))"></OgData>
13-
<section>
14-
<div class="background-image" style="background-image: url(@appConfiguration.Introduction.BackgroundUrl);">
15-
</div>
13+
<section class="background-image" style="background-image: url(@appConfiguration.Introduction.BackgroundUrl);">
1614
</section>
1715

1816
<section class="introduction">
1917
<IntroductionCard Introduction="appConfiguration.Introduction"></IntroductionCard>
2018
</section>
2119

2220
<section>
23-
<div class="content px-4">
24-
@for (var i = 0; i < currentPage.Count; i++)
25-
{
26-
<ShortBlogPost BlogPost="currentPage[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
27-
}
21+
<div class="blogpost-cards">
22+
<header>
23+
<div class="recent-posts">
24+
<h1>Recent Posts</h1>
25+
</div>
26+
</header>
27+
<div>
28+
@for (var i = 0; i < currentPage.Count; i++)
29+
{
30+
<ShortBlogPost BlogPost="currentPage[i]" UseAlternativeStyle="@(i % 2 != 0)"></ShortBlogPost>
31+
}
32+
</div>
2833
</div>
2934
<BlogPostNavigation CurrentPage="@currentPage" OnPageChanged="@GetPage"></BlogPostNavigation>
3035
</section>
36+
3137
@code {
32-
IPagedList<BlogPost> currentPage = new PagedList<BlogPost>(Array.Empty<BlogPost>(), 1, 1);
38+
IPagedList<BlogPost> currentPage = new PagedList<BlogPost>(null, 1, 1);
3339

3440
protected override async Task OnInitializedAsync()
3541
{

‎LinkDotNet.Blog.Web/Pages/Index.razor.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.blogpost-cards {
2+
background-color: var(--big-stone);
3+
margin: 1rem auto 1.6%;
4+
}
5+
6+
.recent-posts {
7+
text-align:center;
8+
padding-top: 10px;
9+
}
10+
11+
.recent-posts h1 {
12+
color: var(--header1-inverted);
13+
font-size: 1.75em;
14+
vertical-align:middle;
15+
margin: auto;
16+
}
17+
18+
.background-image {
19+
background-repeat: no-repeat;
20+
background-size: cover;
21+
min-height:55vh;
22+
}
23+
24+
.introduction {
25+
padding-top: 35px;
26+
}

‎LinkDotNet.Blog.Web/Shared/IntroductionCard.razor

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
@inherits MarkdownComponentBase
33

44
<div>
5-
<h1 style="text-align: center">About me</h1>
6-
<br/>
7-
<div style="text-align: center">
5+
<div class="profile-picture" style="background-image: url(@Introduction.ProfilePictureUrl)">
6+
</div>
7+
<div class="profile-text">
88
@RenderMarkupString(Introduction.Description)
99
</div>
1010
</div>

‎LinkDotNet.Blog.Web/Shared/IntroductionCard.razor.css

Lines changed: 7 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,19 @@
1-
.introduction-container {
2-
background-repeat: no-repeat;
3-
background-size: cover;
4-
height: 350px;
5-
display: grid;
6-
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
7-
grid-template-rows: 1fr 1fr 1fr;
8-
gap: 10px;
9-
grid-template-areas: ". . . . . ." ". profile-picture profile-text profile-text profile-text ." ". . . . . .";
10-
}
11-
12-
.profile-picture {
13-
grid-area: profile-picture;
1+
.profile-picture {
142
width: 175px;
153
height: 175px;
164
border-radius: 50%;
175
border: white;
18-
margin: 4px 0 0 4px;
6+
margin: auto;
197
box-shadow: 0 0 0 4px white;
208
background-repeat: no-repeat;
219
background-position: center center;
2210
background-size: cover;
2311
}
2412

2513
.profile-text {
26-
grid-area: profile-text;
27-
font-size: clamp(1rem, 0.6479rem + 1.1268vw, 1.5rem);
28-
color: white;
29-
line-height: clamp(1.5rem, 0.6479rem + 1.1268vw, 2.25rem);
30-
}
31-
32-
@media only screen and (max-width: 700px) {
33-
.introduction-container {
34-
grid-template-columns: .5fr 1fr 1fr 1fr 1fr .5fr;
35-
grid-template-rows: 1fr 1fr 1fr;
36-
grid-template-areas:
37-
". . profile-picture profile-picture . ."
38-
". profile-text profile-text profile-text profile-text ."
39-
". profile-text profile-text profile-text profile-text .";
40-
}
41-
42-
.introduction-container .profile-picture {
43-
margin-top: 10px;
44-
margin-left: 0;
45-
}
14+
padding-top: 15px;
15+
width: 60%;
16+
margin: auto;
17+
font-size: 1.5em;
18+
line-height: 1.5em;
4619
}

‎LinkDotNet.Blog.Web/Shared/NavMenu.razor.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,16 @@
1313
font-weight: 400;
1414
font-size: 3rem;
1515
}
16+
17+
.navbar a {
18+
font-weight: 500;
19+
color: var(--active-link-inverted) !important;
20+
}
21+
22+
.navbar a:hover {
23+
color: var(--link-hover-inverted) !important;
24+
}
25+
1626
::deep .navbar-nav li {
1727
padding-left: 1.25rem;
1828
white-space: nowrap;

‎LinkDotNet.Blog.Web/Shared/SearchInput.razor.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.search-bar {
2-
border: 2px solid var(--active-link);
2+
border: 2px solid var(--active-link-inverted);
33
display: flex;
44
border-radius: 100vh;
55
overflow: hidden;
@@ -22,7 +22,7 @@
2222
left: 0;
2323
z-index: 2;
2424
cursor: pointer;
25-
color:var(--active-link);
25+
color:var(--active-link-inverted);
2626
font-weight: 800;
2727
}
2828

@@ -31,7 +31,7 @@
3131
}
3232

3333
.search-bar-button {
34-
color:var(--active-link);
34+
color:var(--active-link-inverted);
3535
border: 0;
3636
border-radius: 100vh;
3737
margin-left: auto;

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

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
:root {
1+
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
2+
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128+Text&display=swap');
3+
4+
:root {
25
/* Color definitions */
36
--ceramic: #FCFFF5;
47
--tana: #D1DBBD;
@@ -10,20 +13,21 @@
1013
--wild-sand: #f4f4f4;
1114

1215
/* Usages */
13-
--active-link: var(--ceramic);
16+
--active-link: var(--big-stone);
1417
--disabled-link: var(--pewter);
1518
--link-hover: var(--tana);
16-
--active-link-inverse: var(--pewter);
17-
--disabled-link-inverse: var(--tana);
18-
--link-hover-inverse: var(--ceramic);
19+
--active-link-inverted: var(--ceramic);
20+
--link-hover-inverted: var(--tana);
1921

20-
--header1: var(--pewter);
22+
--header1: var(--william);
23+
--header1-inverted: var(--ceramic);
2124
--header2: var(--pewter);
25+
--text-color: var(--big-stone);
2226

2327
--navbar-background: #f4f4f4d0;
2428

2529
--blockquote-background: var(--wild-sand);
26-
--blockquote-border: var(--pewter);
30+
--blockquote-border: var(--william);
2731

2832
--button-text-color: var(--wild-sand);
2933
--button-primary-color: var(--william);
@@ -42,29 +46,30 @@ body {
4246
margin: 0;
4347
background-repeat: no-repeat;
4448
background-attachment: fixed;
49+
font-family: "Roboto", monospace;
4550
}
4651

4752
a {
4853
font-weight: 500;
4954
color: var(--active-link) !important;
5055
}
5156

57+
a:hover {
58+
color: var(--link-hover) !important;
59+
}
60+
5261
.disabled a {
5362
font-weight: 400;
5463
color: var(--disabled-link) !important;
5564
}
5665

57-
a:hover {
58-
color: var(--link-hover) !important;
59-
}
60-
6166
a.inverse {
6267
font-weight: 400;
63-
color: var(--active-link-inverse) !important;
68+
color: var(--active-link-inverted) !important;
6469
}
6570

6671
a.inverse:hover {
67-
color: var(--link-hover-inverse) !important;
72+
color: var(--link-hover-inverted) !important;
6873
}
6974

7075
h1 {
@@ -101,10 +106,8 @@ blockquote p {
101106
display: inline;
102107
}
103108

104-
.background-image {
105-
background-repeat: no-repeat;
106-
background-size: cover;
107-
min-height:55vh;
109+
p {
110+
color: var(--text-color);
108111
}
109112

110113
section {
@@ -114,3 +117,7 @@ section {
114117
.page {
115118
padding-top: 100px;
116119
}
120+
121+
body::-webkit-scrollbar {
122+
display: none;
123+
}

‎LinkDotNet.Blog.Web/wwwroot/css/site.css

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,3 @@
1-
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');
2-
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
3-
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128+Text&display=swap');
4-
5-
html, body {
6-
font-family: "Roboto";
7-
background: #F7F7F7;
8-
}
9-
10-
body::-webkit-scrollbar {
11-
display: none;
12-
}
13-
14-
.content {
15-
padding-top: 1.1rem;
16-
}
17-
181
.valid.modified:not([type=checkbox]) {
192
outline: 1px solid #26b050;
203
}

0 commit comments

Comments
 (0)