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

Compare commits

base: oliverbooth:bd1b584e945984a87d91380aa6bb73bb4493f264
Branches Tags
oliverbooth:main
oliverbooth:feature/cleanup
oliverbooth:feature/admin
oliverbooth:v1.1.0
...
compare: oliverbooth:486b53d9d723006ae2b3b35346d9f6f75e2a9d1b
Branches Tags
oliverbooth:main
oliverbooth:feature/cleanup
oliverbooth:feature/admin
oliverbooth:v1.1.0

3 Commits
bd1b584e94 ... 486b53d9d7

Author SHA1 Message Date
Oliver Booth
486b53d9d7
feat: separate completed/retired projects 
also changes the colours for Hiatus from red to orange, red now signifying Retired
 2023-12-26 20:35:21 +00:00
Oliver Booth
de41078365
style: add zoom effect on card hover 2023-12-26 20:34:21 +00:00
Oliver Booth
f35bcd3a24
style: remove ribbon from project cards 2023-12-26 20:33:49 +00:00
4 changed files with 48 additions and 24 deletions
Show Stats Expand all files Collapse all files

5
OliverBooth/Data/Web/ProjectStatus.cs
View File

@ -14,5 +14,8 @@ public enum ProjectStatus
Hiatus,
[Description("The project is no longer being worked on.")]
Past
Past,
[Description("The project has been retired with no plans for completion.")]
Retired,
}

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

@ -23,9 +23,6 @@
{
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">
<img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
@ -39,9 +36,6 @@
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">
<img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
@ -55,9 +49,6 @@
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">
<img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">

8
OliverBooth/Pages/Projects/Project.cshtml
View File

@ -57,11 +57,15 @@
break;
case ProjectStatus.Past:
<span class="badge rounded-pill text-bg-primary">Completed / Retired</span>
<span class="badge rounded-pill text-bg-primary">Completed</span>
break;
case ProjectStatus.Hiatus:
<span class="badge rounded-pill text-bg-danger">On Hiatus</span>
<span class="badge rounded-pill text-bg-warning">On Hiatus</span>
break;
case ProjectStatus.Retired:
<span class="badge rounded-pill text-bg-danger">Retired</span>
break;
}
</td>

50
src/scss/app.scss
View File

@ -183,19 +183,45 @@ article {
background: #000;
box-shadow: 0 0 15px rgba(0, 0, 0, .1);
.project-image a {
&:link, &:visited, &:hover &:active {
color: #fff;
&:hover {
.project-image {
img {
transform: scale(110%);
}
p.project-title {
font-size: 1.2em;
margin: calc(-35px - .2em) 0 0;
}
}
}
.project-image p.project-title {
position: relative;
bottom: 0;
width: 100%;
margin: -34px 0 0;
padding: 5px;
background-color: rgba(#000, 50%);
.project-image {
overflow: hidden;
img {
z-index: -2;
transform: scale(100%);
transition: transform 500ms;
}
a {
&:link, &:visited, &:hover &:active {
color: #fff;
}
}
p.project-title {
font-size: 1em;
transition: font-size 500ms, margin 500ms;
position: relative;
bottom: 0;
width: 100%;
margin: -34px 0 0;
padding: 5px;
background-color: rgba(#000, 50%);
}
}
}
@ -320,7 +346,7 @@ a.brand-linkedin {
}
table.reading-list {
th,td {
th, td {
vertical-align: middle;
}
}