WIP Details pane + contributor profiles

Adds a 3-pane layout option for showing details, as well as a dashboard
sub-route for showing contributor details in the new details pane.

app/styles/_layout.scss

@@ -5,7 +5,7 @@ main {
     padding: 1rem;
   }
 
-  &#index {
+  &#dashboard {
     width: 100%;
     display: grid;
     grid-row-gap: 2rem;
@@ -32,12 +32,19 @@ main {
 
 @media (min-width: 550px) {
   main {
-    &#index {
+    &#dashboard {
       grid-column-gap: 4rem;
       grid-row-gap: 2rem;
       grid-template-columns: 2fr 4fr;
       grid-template-areas:
         "stats contributions";
+
+      &.with-details {
+        grid-column-gap: 3rem;
+        grid-template-columns: 2fr 4fr 2fr;
+        grid-template-areas:
+          "stats contributions details";
+      }
     }
   }
 }

app/styles/app.scss

@@ -97,9 +97,11 @@ section {
 
 @import "buttons";
 @import "forms";
-@import "components/topbar";
-@import "components/loading-spinner";
-@import "components/contributor-list";
-@import "components/proposal-list";
+
 @import "components/contribution-list";
+@import "components/contributor-list";
+@import "components/contributor-profile";
+@import "components/loading-spinner";
+@import "components/proposal-list";
+@import "components/topbar";
 @import "components/user-avatar";

app/styles/components/_contributor-profile.scss

@@ -0,0 +1,36 @@
+section#contributor-profile {
+  text-align: center;
+
+  header {
+    z-index: 2;
+    width: 100%;
+    text-align: center;
+
+    img {
+      margin: 0 auto;
+      border: 3px solid rgba(255,255,255,0.2);
+    }
+  }
+
+  .content {
+    z-index: 1;
+    width: 100%;
+    margin: -7.2rem 0 1.5rem;
+    padding: 6rem 1.2rem 2rem;
+
+    border-top: 1px solid rgba(255,255,255,0.2);
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+    background-color: rgba(255,255,255,0.1);
+
+    h2 {
+      text-align: center;
+      margin-bottom: 0.6rem;
+    }
+  }
+
+  .actions {
+    .button {
+      margin-bottom: 0.6rem;
+    }
+  }
+}

app/styles/components/_user-avatar.scss

@@ -4,4 +4,18 @@ img.avatar {
   vertical-align: middle;
   margin-right: 0.2rem;
   border-radius: 1rem;
+
+  &.medium {
+    margin: 0;
+    width: 10rem;
+    height: 10rem;
+    border-radius: 5rem;
+  }
+
+  &.large {
+    margin: 0;
+    width: 256px;
+    height: 256px;
+    border-radius: 128px;
+  }
 }