style guide noodles

site/assets/scss/elements/_layout.scss

@@ -0,0 +1,5 @@
+header,
+main,
+footer {
+  padding: 0 $gutter;
+}

site/assets/scss/elements/_nav.scss

@@ -0,0 +1,9 @@
+nav {
+  ul {
+    @include slim-ul;
+
+    li {
+      display: inline-block;
+    }
+  }
+}

site/assets/scss/elements/_typography.scss

@@ -1,48 +1,81 @@
-// .h1,
-// h1 {
-// }
-//
-// .h2,
-// h2 {
-// }
-//
-// .h3,
-// h3 {
-// }
-//
-// .h4,
-// h4 {
-// }
-//
-// .h5,
-// h5 {
-// }
-//
-// .h6,
-// h6 {
-// }
-//
-// a {
-//   &:visited {
-//   }
-//
-//   &:hover {
-//   }
-//
-//   &:active {
-//   }
-// }
-//
-// .small {
-// }
-//
-// code {
-//
-// }
-
-// tahoma
-
-.sample {
-  margin: 25px;
-  font-size: 28px;
+html,
+body {
+  @include font-default;
+}
+
+.h1,
+h1 {
+  @include font-roboto;
+  margin: $gutter 0 ($gutter / 2);
+  font-size: 40px;
+  font-weight: 300;
+}
+
+.h2,
+h2 {
+  @include font-roboto;
+  margin: $gutter 0 ($gutter / 2);
+  font-size: 32px;
+  font-weight: 300;
+}
+
+.h3,
+h3 {
+  @include font-roboto;
+  margin: $gutter 0 ($gutter / 2);
+  font-size: 26px;
+  font-weight: 400;
+}
+
+.h4,
+h4 {
+  @include font-roboto;
+  margin: $gutter 0 0;
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.h5,
+h5 {
+  @include font-roboto;
+  margin: $gutter 0 0;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.small-heading,
+.h6,
+h6 {
+  @include font-roboto;
+  margin: $gutter 0 0;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+p {
+  margin: ($gutter / 2) 0 0;
+  line-height: 1.4;
+}
+
+// a {
+//   &:visited { }
+//   &:hover { }
+//   &:active { }
+// }
+
+.small {
+  @include font-roboto;
+  line-height: 1.3;
+  letter-spacing: 0.3px;
+  font-size: 14px;
+  font-weight: 300;
+}
+
+code {
+  @include font-mono;
+  display: block;
+  margin: $gutter;
+  line-height: 1.35;
+  white-space: pre;
+  font-size: 18px;
 }