16 files changed, 97 insertions, 20 deletions

diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index 9f7b70b..8f3e4fa 100644
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@@ -1,13 +1,13 @@
 $button-padding : $baseline-x2 $baseline-x4;
-$button-bgcolor : $color-secondary;
-$button-bgcolor-hover : darken($color-secondary, 10%);
+$button-bgcolor : $color-primary;
+$button-bgcolor-hover : darken($button-bgcolor, 10%);
 $button-color : $color-white;
 $button-radius : 3px;
 
 $button-outline-padding : ( $baseline-x2 - 2 )( $baseline-x3 - 2 );
 $button-outline-bgcolor: transparent;
-$button-outline-color: $color-secondary;
-$button-outline-color-hover: darken( $color-secondary, 10% );
+$button-outline-color: $color-primary;
+$button-outline-color-hover: darken( $button-outline-color, 10% );
 
 .c-button {
   padding: $button-padding;
@@ -67,7 +67,7 @@ $button-outline-color-hover: darken( $color-secondary, 10% );
 }
 
 .c-button--outline:hover {
-  color: #1893E0;
+  color: $button-outline-color-hover;
   border-color: $button-outline-color-hover;
   background-color: $button-outline-bgcolor;
 }
diff --git a/src/scss/components/_card.scss b/src/scss/components/_card.scss
index 43480d1..2afec74 100644
--- a/src/scss/components/_card.scss
+++ b/src/scss/components/_card.scss
@@ -1,3 +1,5 @@
+$clickable-bg-color: darken($color-white, 5%);
+
 .c-card {
   padding: $baseline-x5;
   background: rgba($color-white, 0.8);
@@ -10,3 +12,12 @@
 }
 
 .c-card--light { background: rgba($color-white, 0.5)}
+
+.c-card--clickable{
+  cursor: pointer;
+}
+
+.c-card--clickable:hover{
+  background-color: $clickable-bg-color;
+  cursor: pointer;
+}
diff --git a/src/scss/components/_circle.scss b/src/scss/components/_circle.scss
new file mode 100644
index 0000000..733cadf
--- /dev/null
+++ b/src/scss/components/_circle.scss
@@ -0,0 +1,13 @@
+$circle-diameter: 70px;
+
+.c-circle {
+  color: $color-black;
+  height: $circle-diameter;
+  width: $circle-diameter;
+  border-radius: 50%;
+  font-weight: bold;
+  font-size: $circle-diameter*0.4;
+  line-height: $circle-diameter;
+  text-align: center;
+  vertical-align: middle;
+}
diff --git a/src/scss/components/_dropdown.scss b/src/scss/components/_dropdown.scss
new file mode 100644
index 0000000..4c24395
--- /dev/null
+++ b/src/scss/components/_dropdown.scss
@@ -0,0 +1,19 @@
+.c-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.c-dropdown--item {
+  display: none;
+  position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    padding: 12px 16px;
+    z-index: 1;
+}
+
+
+.c-dropdown:hover .c-dropdown--item {
+  display: block;
+}
diff --git a/src/scss/components/_footer.scss b/src/scss/components/_footer.scss
index 8bd8664..bbd3ffc 100644
--- a/src/scss/components/_footer.scss
+++ b/src/scss/components/_footer.scss
@@ -1,6 +1,14 @@
+$footer-height: 50px;
+
 .c-footer{
   bottom: 0px;
+  height: $footer-height;
   width: 100%;
-  background-color: $color-primary;
-  color: $color-contrary;
+  background-color: $color-grey-light;
+  border-top: solid 1px $color-grey;
+  position: fixed;
+}
+
+.c-footer-fixed{
+  height: $footer-height;
 }
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
index 0bf8635..0192252 100644
--- a/src/scss/components/_header.scss
+++ b/src/scss/components/_header.scss
@@ -2,6 +2,7 @@
   top:0px;
   position: sticky;
   width: 100%;
-  background-color: $color-primary;
-  color: $color-contrary;
+  background-color: $color-grey-light;
+  border-bottom: solid 1px $color-grey;
+  //color: $color-contrary;
 }
diff --git a/src/scss/components/_link.scss b/src/scss/components/_link.scss
index 73f6e00..7a85e3f 100644
--- a/src/scss/components/_link.scss
+++ b/src/scss/components/_link.scss
@@ -8,3 +8,9 @@
 .c-link:hover {
   opacity: 0.8;
 }
+
+.c-link--normal {
+  text-decoration: none;
+  cursor: pointer;
+  color: $color-primary;
+}
diff --git a/src/scss/components/_markdown.scss b/src/scss/components/_markdown.scss
new file mode 100644
index 0000000..8a5e0a3
--- /dev/null
+++ b/src/scss/components/_markdown.scss
@@ -0,0 +1,9 @@
+$markdown-bg-color : darken($color-grey-light, 6%);
+
+.c-markdown {
+  font-size: inherit;
+  font-family: monospace;
+  background-color: $markdown-bg-color;
+  border-radius: 5px;
+  padding: 5px;
+}
diff --git a/src/scss/components/_progressbar.scss b/src/scss/components/_progressbar.scss
index e69de29..b6adeac 100644
--- a/src/scss/components/_progressbar.scss
+++ b/src/scss/components/_progressbar.scss
@@ -0,0 +1,3 @@
+.c-progressbar {
+
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 4b462e9..18b0408 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -31,6 +31,9 @@
 @import 'components/header';
 @import 'components/badge';
 @import 'components/spinner';
+@import 'components/markdown';
+@import 'components/circle';
+@import 'components/dropdown';
 
 //@import 'utilities/align-items';
 @import 'utilities/align';
diff --git a/src/scss/objects/_grid.scss b/src/scss/objects/_grid.scss
index 8a18397..30312ca 100644
--- a/src/scss/objects/_grid.scss
+++ b/src/scss/objects/_grid.scss
@@ -43,6 +43,7 @@ $iota-objs-grid-gutter-default: $iota-global-gutter-default;
  */
 
 $iota-objs-grid-gutter-extra: (
+  'gutter-x3': $baseline-x3,
   'gutter-x4': $baseline-x4
 );
 
diff --git a/src/scss/objects/_type.scss b/src/scss/objects/_type.scss
index 7184ab0..6345517 100644
--- a/src/scss/objects/_type.scss
+++ b/src/scss/objects/_type.scss
@@ -25,6 +25,7 @@ $iota-objs-type-sizes: (
   32: $type-32,
   34: $type-34,
   35: $type-35,
+  50: $type-50,
   80: $type-80
 );
 
diff --git a/src/scss/settings/_colors.scss b/src/scss/settings/_colors.scss
index 59a1f88..f6f94a4 100644
--- a/src/scss/settings/_colors.scss
+++ b/src/scss/settings/_colors.scss
@@ -27,12 +27,14 @@ $info-bgcolor: #d1ecf1;
 $info-border-color: #bee5eb;
 
 $color-primary: $color-purple;
+$color-primary-light: lighten($color-primary, 10%);
 $color-contrary: $color-white;
-$color-secondary: $color-deep-blue;
+$color-secondary: $color-primary-light;
 $color-secondary-light: $color-grey-light;
 
 $colors: (
   'primary' : $color-primary,
+  'primary-light' : $color-primary-light,
   'contrary' : $color-contrary,
   'secondary' : $color-secondary,
   'secondary-light' : $color-secondary-light,
diff --git a/src/scss/settings/_spacing.scss b/src/scss/settings/_spacing.scss
index bd14ac4..6628663 100644
--- a/src/scss/settings/_spacing.scss
+++ b/src/scss/settings/_spacing.scss
@@ -8,4 +8,10 @@ $spacing-extra: (
   -x5 : $baseline-x5,
   -x6 : $baseline-x6,
   -x7 : $baseline-x7,
+  -x8 : $baseline-x8,
+  -x9 : $baseline-x9,
+  -x10 : $baseline-x10,
+  -x11 : $baseline-x11,
+  -x12 : $baseline-x12,
+  -x13 : $baseline-x13
 );
diff --git a/src/scss/settings/_type.scss b/src/scss/settings/_type.scss
index c7ad0af..a1ec8b0 100644
--- a/src/scss/settings/_type.scss
+++ b/src/scss/settings/_type.scss
@@ -58,15 +58,9 @@ $type-80: (
   sm: ( 80px, $baseline-x13 )
 );
 
-
-$type-20: (
-  null: ( 18px, $baseline-x3 ),
-  sm: ( 20px, $baseline-x4 )
-);
-
-$type-28: (
-  null: ( 20px, $baseline-x4 ),
-  sm: ( 28px, $baseline-x5 )
+$type-50: (
+  null: ( 40px, $baseline-x10 ),
+  sm: ( 50px, $baseline-x10 )
 );
 
 $type-35: (
diff --git a/src/scss/utilities/_align.scss b/src/scss/utilities/_align.scss
index 631e839..483d184 100644
--- a/src/scss/utilities/_align.scss
+++ b/src/scss/utilities/_align.scss
@@ -4,7 +4,7 @@
  * Type: Boolean
  */
 
-$iota-utils-align-res: false;
+$iota-utils-align-res: true;
 
 
 /**