Home projects list styles

app/modules/home/home-project-list.jade

@@ -1,10 +1,7 @@
 ul.home-project-list
     li.home-project-list-single(tg-bind-scope, ng-repeat="project in vm.projects.all")
-        div.home-project-list-single-left
+        h2.home-project-list-single-title
-            div.home-project-list-single-title
-                h2
             a(href="#", ng-bind="::project.name", tg-nav="project:project=project.slug")
                 span {{project.is_private}}
-                p {{ ::project.description }}
+        p {{ ::project.description | limitTo:150 }}
-
+            span(ng-if="::project.description.length > 150") ...
-        div.home-project-list-single-right

app/modules/home/styles/home-project-list.scss

@@ -1,3 +1,38 @@
 .home-project-list {
-    content: 'WIP';
+    li {
+        border-right: 5px solid $whitish;
+        cursor: pointer;
+        margin-bottom: .5rem;
+        padding: .5rem;
+        padding-right: 1rem;
+        text-overflow: ellipsis;
+        transition: border-color .3s linear;
+        &:hover {
+            border-color: $fresh-taiga;
+            p {
+                color: $gray;
+            }
+        }
+    }
+    h2 {
+        @extend %text;
+        color: $gray;
+        font-size: 1.5rem;
+        line-height: 1.3;
+        margin-bottom: 0;
+        text-transform: none;
+        a {
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+    p {
+        @extend %text;
+        @extend %small;
+        color: $gray-light;
+        margin: 0;
+        transition: color .3s linear;
+    }
 }

app/modules/home/styles/home.scss

@@ -3,7 +3,7 @@
     padding-top: 2rem;
     .duty-summary {
         flex: 1;
-        margin-right: .5rem;
+        margin-right: 2rem;
     }
     .project-list {
         width: 250px;

app/modules/projects/listing/listing.jade

@@ -16,7 +16,8 @@ div.project-list-wrapper.centered
                             h1
                                 a(href="#", ng-bind="::project.name", tg-nav="project:project=project.slug")
                                     span {{project.is_private}}
-                            p {{ ::project.description }}
+                            p {{ ::project.description | limitTo:300 }}
+                                span(ng-if="::project.description.length > 300") ...
 
                         div.project-list-single-tags.tags-container(ng-if="project.tags")
                             div.tags-block(tg-colorize-tags="project.tags", tg-colorize-tags-type="backlog")

app/modules/projects/listing/styles/listing.scss

@@ -2,7 +2,7 @@
     border-bottom: 1px solid $whitish;
     display: flex;
     justify-content: center;
-    padding: .8rem 1rem;
+    padding: .5rem;
     position: relative;
 }
 
@@ -18,12 +18,16 @@
     h1 {
         @extend %text;
         @extend %larger;
+        color: $gray;
         margin-bottom: 0;
         text-transform: none;
     }
     p {
-        color: $gray-light;
+        @extend %text;
-        max-width: 70%;
+        @extend %small;
+        color: $gray;
+        margin-bottom: 0;
+        max-width: 95%;
     }
     .project-list-single-tags {
         align-content: flex-end;
@@ -31,6 +35,7 @@
         flex: 3;
         flex-wrap: wrap;
         justify-content: flex-start;
+        margin-top: .5rem;
     }
     .tag {
         align-self: flex-end;

app/styles/dependencies/helpers.scss

@@ -1,6 +1,6 @@
 // __Font Sizes__ //
 %xsmall {font-size: .5rem;}
-%small {font-size: .8rem;}
+%small {font-size: .9rem;}
 %medium {font-size: 1rem;}
 %large {font-size: 1.2rem;}
 %larger {font-size: 1.6rem;}