moar styleguide

site/assets/scss/elements/_cta.scss

@@ -0,0 +1,41 @@
+.cta-primary,
+.cta-secondary {
+  &,
+  &:visited {
+    display: inline-block;
+    margin: $gutter;
+    margin-left: 0;
+    border: 1px solid $red;
+    background-color: $white;
+    padding: $gutter;
+    text-decoration: none;
+    color: $red;
+  }
+
+  &:hover,
+  &:active {
+    margin: $gutter - 1px;
+    margin-left: -1px;
+    border-width: 2px;
+    border-color: $red;
+    background-color: $light;
+    text-decoration: none;
+    color: $red;
+  }
+}
+
+.cta-secondary {
+  &,
+  &:visited {
+    border-color: $dark-grey;
+    color: $dark-grey;
+  }
+
+  &:hover,
+  &:active {
+    border-width: 2px;
+    border-color: $black;
+    background-color: $light;
+    color: $black;
+  }
+}

site/assets/scss/elements/_typography.scss

@@ -1,6 +1,8 @@
 html,
 body {
   @include font-default;
+  background-color: $light;
+  color: $black;
 }
 
 .h1,
@@ -57,11 +59,19 @@ p {
   line-height: 1.4;
 }
 
-// a {
-//   &:visited { }
-//   &:hover { }
-//   &:active { }
-// }
+a {
+  &,
+  &:visited {
+    text-decoration: underline;
+    color: $blue;
+  }
+
+  &:hover,
+  &:active {
+    text-decoration: underline;
+    color: $dark-blue;
+  }
+}
 
 .small {
   @include font-roboto;
@@ -75,7 +85,11 @@ code {
   @include font-mono;
   display: block;
   margin: $gutter;
+  background-color: $dark-grey;
+  padding: 0 0 $gutter;
+  width: auto;
   line-height: 1.35;
   white-space: pre;
+  color: $light;
   font-size: 18px;
 }