feat: separate completed/retired projects

also changes the colours for Hiatus from red to orange, red now signifying Retired

OliverBooth/Data/Web/ProjectStatus.cs

@@ -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,
 }

OliverBooth/Pages/Projects/Index.cshtml

@@ -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">

OliverBooth/Pages/Projects/Project.cshtml

@@ -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>

src/scss/app.scss

@@ -183,19 +183,45 @@ article {
   background: #000;
   box-shadow: 0 0 15px rgba(0, 0, 0, .1);
 
-  .project-image a {
+  &:hover {
-    &:link, &:visited, &:hover &:active {
+    .project-image {
-      color: #fff;
+      img {
+        transform: scale(110%);
+      }
+      
+      p.project-title {
+        font-size: 1.2em;
+        margin: calc(-35px - .2em) 0 0;
+      }
     }
   }
 
-  .project-image p.project-title {
+  .project-image {
-    position: relative;
+    overflow: hidden;
-    bottom: 0;
+
-    width: 100%;
+    img {
-    margin: -34px 0 0;
+      z-index: -2;
-    padding: 5px;
+      transform: scale(100%);
-    background-color: rgba(#000, 50%);
+
+      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;
   }
 }