oliverbooth/oliverbooth.dev
oliverbooth
/
oliverbooth.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

feat: add project name to card

This commit is contained in:
Oliver Booth 2023-12-26 15:35:27 +00:00
parent 49d651382a
commit 4943172f64
Signed by: oliverbooth
GPG Key ID: E60B570D1B7557B5
2 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
OliverBooth/Pages/Projects/Index.cshtml
View File

@ -24,40 +24,48 @@
case ProjectStatus.Ongoing:
<div class="project-card">
<div class="ribbon ribbon-top-left green">
<span>Ongoing</span>
</div>
<div class="project-image">
<a asp-page="Project" asp-route-slug="@project.Slug">
<span>Ongoing</span>
<img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
</a>
<a asp-page="Project" asp-route-slug="@project.Slug">
<p class="project-title">@project.Name</p>
</a>
</div>
<a asp-page="Project" asp-route-slug="@project.Slug">
<img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
</a>
</div>
break;
case ProjectStatus.Past:
<div class="border-info project-card">
<div class="ribbon ribbon-top-left blue">
<span>Past Work</span>
</div>
<div class="project-image">
<a asp-page="Project" asp-route-slug="@project.Slug">
<span>Past Work</span>
<img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
</a>
<a asp-page="Project" asp-route-slug="@project.Slug">
<p class="project-title">@project.Name</p>
</a>
</div>
<a asp-page="Project" asp-route-slug="@project.Slug">
<img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
</a>
</div>
break;
case ProjectStatus.Hiatus:
<div class="border-danger project-card">
<div class="ribbon ribbon-top-left red">
<span>On Hiatus</span>
</div>
<div class="project-image">
<a asp-page="Project" asp-route-slug="@project.Slug">
<span>On Hiatus</span>
<img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
</a>
<a asp-page="Project" asp-route-slug="@project.Slug">
<p class="project-title">@project.Name</p>
</a>
</div>
<a asp-page="Project" asp-route-slug="@project.Slug">
<img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
</a>
</div>
break;
}

15
src/scss/app.scss
View File

@ -182,6 +182,21 @@ article {
position: relative;
background: #000;
box-shadow: 0 0 15px rgba(0, 0, 0, .1);
.project-image a {
&:link, &:visited, &:hover &:active {
color: #fff;
}
}
.project-image p.project-title {
position: relative;
bottom: 0;
width: 100%;
margin: -34px 0 0;
padding: 5px;
background-color: rgba(#000, 50%);
}
}
.blog-card {