Skip to content

Commit a7adc6a

Browse files
linkdotnetlinkdotnet
committed
New navbar and styling options
1 parent e80e244 commit a7adc6a

File tree

11 files changed

+140
-40
lines changed

11 files changed

+140
-40
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,16 @@
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>
16+
</section>
17+
1318
<section>
1419
<IntroductionCard Introduction="appConfiguration.Introduction"></IntroductionCard>
20+
</section>
1521

22+
<section>
1623
<div class="content px-4">
1724
@for (var i = 0; i < currentPage.Count; i++)
1825
{

‎LinkDotNet.Blog.Web/Pages/_Host.cshtml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
<meta name="theme-color" content="#ffffff">
2323
<link rel="preload" href="css/bootstrap/bootstrap.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"></noscript>
2424
<link href="css/site.css" rel="stylesheet"/>
25+
<link href="css/basic.css" rel="stylesheet"/>
2526
<link href="LinkDotNet.Blog.Web.styles.css" rel="stylesheet"/>
2627
<link rel="preload" href="_content/Blazored.Toast/blazored-toast.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="_content/Blazored.Toast/blazored-toast.min.css"></noscript>
2728
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

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

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

4-
<div style="background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(@Introduction.BackgroundUrl);" class="introduction-container">
5-
<div class="profile-picture" style="background-image: url(@Introduction.ProfilePictureUrl)">
6-
7-
</div>
8-
<div class="profile-text">
4+
<div>
5+
<h1 style="text-align: center">About me</h1>
6+
<br/>
7+
<div style="text-align: center">
98
@RenderMarkupString(Introduction.Description)
109
</div>
1110
</div>
11+
1212
@code {
1313
[Parameter]
1414
public Introduction Introduction { get; set; }

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
@inherits LayoutComponentBase
33

44
<BlazoredToasts Position="ToastPosition.BottomRight" />
5-
<NavMenu/>
6-
<div>
5+
<div class="position-relative">
6+
<NavMenu/>
7+
8+
<div>
79
@Body
10+
</div>
811
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@inject AppConfiguration configuration
22
@inject NavigationManager navigationManager
33

4-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top navbar-background">
4+
<nav class="navbar navbar-expand-lg position-absolute navbar-background" style="width: 100%">
55
<div class="container-fluid">
66
<a class="nav-brand barcode ms-5" href="#">@configuration.BlogName</a>
77
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

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

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,19 @@
11
/* TODO: There has to be a better way */
2-
.navbar-background {
3-
background-color: rgba(0, 0, 0, 0.8) !important;
2+
.navbar-background {
3+
background: linear-gradient(
4+
rgba(0, 0, 0, 0.44),
5+
rgba(0, 0, 0, 0.44)
6+
) !important;
47
backdrop-filter: blur(6px) !important;
58
}
69

710
.barcode {
811
font-family: 'Libre Barcode 128 Text', cursive;
912
text-decoration: none;
13+
font-weight: 400;
1014
font-size: 3rem;
11-
color: white;
12-
font-weight: 300;
1315
}
1416
::deep .navbar-nav li {
1517
padding-left: 1.25rem;
1618
white-space: nowrap;
17-
}
18-
19-
::deep .nav-link {
20-
text-decoration: none;
21-
font-size: 1.25rem;
22-
color: white;
23-
}
24-
25-
::deep .nav-item .nav-link:hover {
26-
color: #66C3CC;
2719
}

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

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

2829
.search-bar-input:focus {
2930
outline: 0;
3031
}
3132

3233
.search-bar-button {
33-
color: white;
34+
color:var(--active-link);
3435
border: 0;
3536
border-radius: 100vh;
3637
margin-left: auto;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<ul>
1515
@foreach (var tag in BlogPost.Tags.Select(t => t.Content))
1616
{
17-
<li><a class="goto-tag" href="/searchByTag/@(Uri.EscapeDataString(tag))">@tag</a></li>
17+
<li><a class="goto-tag inverse" href="/searchByTag/@(Uri.EscapeDataString(tag))">@tag</a></li>
1818
}
1919
</ul>
2020
</li>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,6 @@
101101
text-align: right;
102102
}
103103
.blog-card .description .read-more a {
104-
color: #5ad67d;
105104
display: inline-block;
106105
position: relative;
107106
}
@@ -129,7 +128,7 @@
129128
content: "";
130129
position: absolute;
131130
height: 5px;
132-
background: #5ad67d;
131+
background: var(--active-link);
133132
width: 35px;
134133
top: -0.75rem;
135134
border-radius: 3px;

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

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
:root {
2+
/* Color definitions */
3+
--ceramic: #FCFFF5;
4+
--tana: #D1DBBD;
5+
--pewter: #91AA9D;
6+
--william: #3E606F;
7+
--big-stone: #193441;
8+
9+
--white: #ffffff;
10+
--wild-sand: #f4f4f4;
11+
12+
/* Usage */
13+
--active-link: var(--ceramic);
14+
--disabled-link: var(--pewter);
15+
--link-hover: var(--tana);
16+
--active-link-inverse: var(--pewter);
17+
--disabled-link-inverse: var(--tana);
18+
--link-hover-inverse: var(--ceramic);
19+
20+
--header1: var(--pewter);
21+
--header2: var(--pewter);
22+
23+
--navbar-background: #f4f4f4d0;
24+
25+
--blockquote-background: var(--wild-sand);
26+
--blockquote-border: var(--pewter);
27+
28+
--button-text-color: var(--wild-sand);
29+
--button-primary-color: var(--william:);
30+
--button-primary-border-color: var(--big-stone);
31+
--button-primary-hover-color: var(--big-stone);
32+
--button-secondary-color: var(--big-stone);
33+
--button-secondary-border-color: var(--big-stone);
34+
}
35+
36+
37+
html {
38+
height: 100%;
39+
}
40+
41+
body {
42+
margin: 0;
43+
background-repeat: no-repeat;
44+
background-attachment: fixed;
45+
}
46+
47+
a {
48+
font-weight: semi-bold;
49+
color: var(--active-link) !important;
50+
}
51+
52+
.disabled a {
53+
font-weight: 400;
54+
color: var(--disabled-link) !important;
55+
}
56+
57+
a:hover {
58+
color: var(--link-hover) !important;
59+
}
60+
61+
a.inverse {
62+
font-weight: 400;
63+
color: var(--active-link-inverse) !important;
64+
}
65+
66+
a.inverse:hover {
67+
color: var(--link-hover-inverse) !important;
68+
}
69+
70+
h1 {
71+
color: var(--header1);
72+
}
73+
74+
h2 {
75+
color: var(--header2);
76+
}
77+
78+
blockquote {
79+
border-left: 2px solid var(--header2);
80+
background: var(--blockquote-background);
81+
padding-left: 0.5em;
82+
}
83+
84+
blockquote::before {
85+
content: open-quote;
86+
color: var(--blockquote-border);
87+
vertical-align: -0.4em;
88+
line-height: 0.1em;
89+
font-size: 2.5em;
90+
}
91+
92+
blockquote::after {
93+
content: close-quote;
94+
color: var(--blockquote-border);
95+
vertical-align: -0.4em;
96+
line-height: 0.1em;
97+
font-size: 2.5em;
98+
}
99+
100+
blockquote p {
101+
display: inline;
102+
}
103+
104+
.background-image {
105+
background-repeat: no-repeat;
106+
background-size: cover;
107+
height:75vh;
108+
}

0 commit comments

Comments
 (0)