Add breadcrumb navigation

app/styles/_colors.scss

@@ -1,6 +1,8 @@
 $dark-grey-1: #2a3743;
 $dark-grey-2: #344453;
+$dark-grey-3: #aaa;
 $light-grey-1: #b5c3d1;
+$light-grey-2: #ececec;
 
 #app-container {
   > aside {
@@ -19,5 +21,15 @@ $light-grey-1: #b5c3d1;
   > main {
     // background-color: $dark-grey-2;
     background-color: #fff;
+
+    > header {
+      a:link,
+      a:visited {
+        color: $dark-grey-3;
+      }
+      a:hover {
+        color: $dark-grey-1;
+      }
+    }
   }
 }

app/styles/_layout.scss

@@ -4,7 +4,7 @@
 
 #remotestorage-widget {
   position: fixed;
-  right: 0.5rem;
+  right: 1rem;
   top: 0.5rem;
   z-index: 1;
 }
@@ -35,7 +35,7 @@
   > main {
     flex: 1;
     overflow: auto;
-    padding: 2rem;
+    padding: 3rem 4rem;
 
     > header {
       height: 4em;

app/styles/app.scss

@@ -16,6 +16,7 @@ body {
   padding: 0;
 }
 
+@import "components/breadcrumb-nav";
 @import "components/categories-nav";
 @import "components/directory-listing";
 @import "components/item-icon";

app/styles/components/_breadcrumb-nav.scss

@@ -0,0 +1,22 @@
+.breadcrumb-nav {
+
+  a {
+    &.active {
+      text-decoration: none;
+    }
+  }
+
+  .node {
+    display: inline-block;
+  }
+
+  .node + .node {
+    margin-left: 0.5rem;
+
+    &::before {
+      content: '›';
+      padding-right: 0.6rem;
+    }
+  }
+
+}

app/styles/components/_directory-listing.scss

@@ -3,15 +3,17 @@
   ul.listing {
     display: block;
     width: 100%;
+    margin: 0;
+    padding: 0;
     margin-bottom: 6rem;
 
     li {
       display: table;
       width: 100%;
-      border-bottom: 1px solid #ececec;
+      border-bottom: 1px solid $light-grey-2;
 
       &:first-of-type {
-        border-top: 1px solid #ececec;
+        border-top: 1px solid $light-grey-2;
       }
 
       &:hover {
@@ -41,7 +43,7 @@
           }
           &.type {
             width: 37%;
-            color: #aaa;
+            color: $dark-grey-3;
           }
         }
       }