more styling for the calendar

Styling based on distance travelled!

1 files changed, 35 insertions, 0 deletions

diff --git a/asset-sources/theme.scss b/asset-sources/theme.scss
index f5b33da..ffd43d7 100644
--- a/asset-sources/theme.scss
+++ b/asset-sources/theme.scss
@@ -161,6 +161,11 @@ strong {
 .profile-calendar {
   width: 100%;
 
+  thead {
+    text-align: center;
+    font-size: 120%;
+  }
+
   .calendar-cell, .calendar-cell-empty {
     height: 150px;
     width: calc(100%/7);
@@ -174,6 +179,36 @@ strong {
       font-size: 140%;
       font-weight: bold;
     }
+
+    ul {
+      list-style: none;
+      text-align: right;
+    }
+  }
+
+  .cell-length-0 {
+    color: gray;
+  }
+  .cell-length-1 {
+    background-color: #8FF0A4;
+  }
+  .cell-length-2 {
+    background-color: #75DD95;
+  }
+  .cell-length-3 {
+    background-color: #5BC987;
+  }
+  .cell-length-4 {
+    background-color: #40B678;
+  }
+  .cell-length-5 {
+    color: white;
+    background-color: #26A269;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
   }
 }