Skip to content

Commit 0798331

Browse files
linkdotnetlinkdotnet
committed
Restyled whole site and made background optional
1 parent 465f29a commit 0798331

File tree

12 files changed

+71
-55
lines changed

12 files changed

+71
-55
lines changed

‎Readme.md

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -58,30 +58,30 @@ The appsettings.json file has a lot of options to customize the content of the b
5858

5959
```
6060

61-
| Property | Type | Description |
62-
| ------------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
63-
| BlogName | string | Name of your blog. Is used in the navbar and is used as the title of the page. Will not be shown when `BlogBrandUrl` is set |
64-
| BlogBrandUrl | string | The url to an image which is used as a brand image in the navigation bar. If not set or `null` the `BlogName` will be shown |
65-
| GithubAccountUrl | string | Url to your github account. If not set the navigation link is not shown |
66-
| LinkedInAccountUrl | string | Url to your LinkedIn account. If not set the navigation link is not shown |
67-
| Introduction | | Is used for the introduction part of the blog |
68-
| Description | MarkdownString | Small introduction text for yourself. This is also used for `<meta name="description">` tag. For this the markup will be converted to plain text |
69-
| BackgroundUrl | string | Url or path to the background image |
70-
| ProfilePictureUrl | string | Url or path to your profile picture |
71-
| PersistenceProvider | string | Declares the type of the storage provider (one of the following: `SqlServer`, `SqliteServer`, `RavenDb`, `InMemory`). More in-depth explanation down below |
72-
| ConnectionString | string | Is used for connection to a database. Not used when `InMemoryStorageProvider` is used |
73-
| DatabaseName | string | Name of the database. Only used with `RavenDbStorageProvider` |
74-
| Auth0 | | Configuration for setting up Auth0 |
75-
| Domain | string | See more details here: https://manage.auth0.com/dashboard/ |
76-
| ClientId | string | See more details here: https://manage.auth0.com/dashboard/ |
77-
| ClientSecret | string | See more details here: https://manage.auth0.com/dashboard/ |
78-
| BlogPostsPerPage | int | Gives the amount of blog posts loaded and display per page. For more the user has to use the navigation |
79-
| AboutMeProfileInformation | node | Sets information for the About Me Page. If omitted the page is disabled completely |
80-
| Name | string | Name, which is displayed on top of the profile card |
81-
| Heading | string | Displayed under the name. For example job title |
82-
| ProfilePictureUrl | string | Displayed profile picture |
83-
| Giscus | node | Enables the comment section via giscus. If left empty the comment secion will not be shown. For more information checkout the section about comments down below |
84-
| Disqus | node | Enables the comment section via disqus. If left empty the comment secion will not be shown. For more information checkout the section about comments down below |
61+
| Property | Type | Description |
62+
| ------------------------- | -------------- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
63+
| BlogName | string | Name of your blog. Is used in the navbar and is used as the title of the page. Will not be shown when `BlogBrandUrl` is set |
64+
| BlogBrandUrl | string | The url to an image which is used as a brand image in the navigation bar. If not set or `null` the `BlogName` will be shown |
65+
| GithubAccountUrl | string | Url to your github account. If not set the navigation link is not shown |
66+
| LinkedInAccountUrl | string | Url to your LinkedIn account. If not set the navigation link is not shown |
67+
| Introduction | | Is used for the introduction part of the blog |
68+
| Description | MarkdownString | Small introduction text for yourself. This is also used for `<meta name="description">` tag. For this the markup will be converted to plain text |
69+
| BackgroundUrl | string | Url or path to the background image. (Optional) |
70+
| ProfilePictureUrl | string | Url or path to your profile picture |
71+
| PersistenceProvider | string | Declares the type of the storage provider (one of the following: `SqlServer`, `SqliteServer`, `RavenDb`, `InMemory`). More in-depth explanation down below |
72+
| ConnectionString | string | Is used for connection to a database. Not used when `InMemoryStorageProvider` is used |
73+
| DatabaseName | string | Name of the database. Only used with `RavenDbStorageProvider` |
74+
| Auth0 | | Configuration for setting up Auth0 |
75+
| Domain | string | See more details here: https://manage.auth0.com/dashboard/ |
76+
| ClientId | string | See more details here: https://manage.auth0.com/dashboard/ |
77+
| ClientSecret | string | See more details here: https://manage.auth0.com/dashboard/ |
78+
| BlogPostsPerPage | int | Gives the amount of blog posts loaded and display per page. For more the user has to use the navigation |
79+
| AboutMeProfileInformation | node | Sets information for the About Me Page. If omitted the page is disabled completely |
80+
| Name | string | Name, which is displayed on top of the profile card |
81+
| Heading | string | Displayed under the name. For example job title |
82+
| ProfilePictureUrl | string | Displayed profile picture |
83+
| Giscus | node | Enables the comment section via giscus. If left empty the comment secion will not be shown. For more information checkout the section about comments down below |
84+
| Disqus | node | Enables the comment section via disqus. If left empty the comment secion will not be shown. For more information checkout the section about comments down below |
8585

8686
## Storage Provider
8787
Currently there are 4 Storage-Provider:

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838

3939
private IPagedList<BlogPost> currentPage = new PagedList<BlogPost>(null, 1, 1);
4040

41-
private string ImageUrl => appConfiguration.Introduction.BackgroundUrl.ToAbsoluteUrl(navigationManager.BaseUri);
41+
private string ImageUrl => appConfiguration.Introduction.ProfilePictureUrl.ToAbsoluteUrl(navigationManager.BaseUri);
4242

4343
protected override async Task OnParametersSetAsync()
4444
{

‎src/LinkDotNet.Blog.Web/Shared/AccessControl.razor.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
}
44

55
.original a:hover {
6-
color: var(--link-hover) !important;
6+
/*color: var(--link-hover) !important;*/
77
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
@using LinkDotNet.Blog.Domain
22
@inherits MarkdownComponentBase
33

4-
<div style="--profile-background: url(@Introduction.BackgroundUrl)"
5-
class="inverted-colors introduction-background">
4+
<div style="--profile-background: url(@Introduction.BackgroundUrl)" class="@IntroductionClass">
65
<div class="introduction-container">
76
<div class="profile-picture" style="--profile-image: url(@Introduction.ProfilePictureUrl)">
8-
97
</div>
108
<div class="profile-text">
119
@RenderMarkupString(Introduction.Description)
@@ -15,4 +13,6 @@
1513
@code {
1614
[Parameter]
1715
public Introduction Introduction { get; set; }
16+
17+
private string IntroductionClass => Introduction.BackgroundUrl != null ? "introduction-background" : string.Empty;
1818
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@
3535
margin: auto;
3636
grid-area: profile-text;
3737
font-size: clamp(0.9rem, 0.6479rem + 1.1268vw, 1.5rem);
38-
color: var(--text-color-inverted);
3938
line-height: clamp(1.5em, 0.6479rem + 1.1268vw, 2.25em);
4039
text-align: center
4140
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
@inject NavigationManager navigationManager
33
@implements IDisposable
44

5-
<nav class="navbar navbar-expand-lg navbar-background inverted-colors navbar-dark w-100">
5+
<nav class="navbar navbar-expand-lg navbar-dark w-100">
66
<div class="container-fluid">
77
@if (configuration.BlogBrandUrl != null)
88
{
99
<a class="nav-brand ms-5" href="/">
10-
<img style="max-height: 62px;"
10+
<img style="max-height: 70px;"
1111
src="@configuration.BlogBrandUrl.ToAbsoluteUrl(navigationManager.BaseUri)"
1212
alt="brand" />
1313
</a>

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

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,3 @@
1-
/* TODO: There has to be a better way */
2-
.navbar-background {
3-
background: linear-gradient(
4-
rgba(0, 0, 0, 0.44),
5-
rgba(0, 0, 0, 0.44)
6-
) !important;
7-
backdrop-filter: blur(6px) !important;
8-
}
9-
101
.barcode {
112
font-family: 'Libre Barcode 128 Text', cursive;
123
text-decoration: none;
@@ -17,4 +8,4 @@
178
::deep .navbar-nav li {
189
padding-left: 1.25rem;
1910
white-space: nowrap;
20-
}
11+
}

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

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

2929
.search-bar-input:focus {
3030
outline: 0;
3131
}
3232

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

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
--white: #ffffff;
1414
--wild-sand: #f4f4f4;
15+
--silver: #DADADA;
1516

1617
/* Fonts */
1718
--default-font: 'Quicksand';
@@ -44,8 +45,8 @@
4445

4546
--blog-post-background-color: var(--big-stone);
4647

47-
--background-gradient-start: var(--white);
48-
--background-gradient-end: var(--wild-sand);
48+
--background-gradient-start: var(--wild-sand);
49+
--background-gradient-end: var(--silver);
4950
}
5051

5152
html {
@@ -73,10 +74,6 @@ a {
7374
color: var(--active-link) !important;
7475
}
7576

76-
a:visited {
77-
color: var(--disabled-link) !important;
78-
}
79-
8077
a:hover {
8178
color: var(--link-hover) !important;
8279
}

0 commit comments

Comments
 (0)