init

site/assets/scss/components/_styleguide.scss

@@ -0,0 +1,23 @@
+
+.color-samples {
+  > div {
+    display: flex;
+    margin: $gutter 0;
+    height: 100px;
+
+    div { flex: 1 1 auto; }
+
+    :nth-child(1)  { background-color: $white;      }
+    :nth-child(2)  { background-color: $light;      }
+    :nth-child(3)  { background-color: $light-grey; }
+    :nth-child(4)  { background-color: $dark-grey;  }
+    :nth-child(5)  { background-color: $black;      }
+
+    :nth-child(6)  { background-color: $dark-blue;  }
+    :nth-child(7)  { background-color: $blue;       }
+    :nth-child(8)  { background-color: $red;        }
+    :nth-child(9)  { background-color: $orange;     }
+    :nth-child(10) { background-color: $yellow;     }
+  }
+}
+

site/assets/scss/elements/_layout.scss

@@ -0,0 +1,25 @@
+body {
+  min-width: 300px;
+}
+
+header,
+main {
+  margin: 0;
+  padding: 0;
+}
+
+section {
+  margin-bottom: $gutter;
+  padding: $gutter;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  section {
+    padding: ($gutter * 2) calc((100% - 850px) / 2);
+    width: 850px;
+  }
+}

site/assets/scss/generic/_reset.scss

@@ -0,0 +1,27 @@
+// normalize css is loaded, then these additions:
+
+html {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  box-sizing: border-box;
+}
+
+main,
+section,
+article,
+aside,
+footer,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+div,
+p,
+ul,
+*::before,
+*::after {
+  box-sizing: inherit;
+}

site/assets/scss/main.scss

@@ -0,0 +1,11 @@
+@import 'tools/fonts';
+@import 'tools/mixins';
+
+@import 'settings/variables';
+@import 'settings/colors';
+
+@import 'generic/reset';
+
+@import 'elements/layout';
+
+@import 'components/styleguide';

site/assets/scss/settings/_colors.scss

@@ -0,0 +1,14 @@
+$white:      #fff;
+$light:      rgba(246, 244, 243, 1);
+$light-grey: rgba(191, 189, 193, 1);
+$dark-grey:  rgba(46,  47,  47,  1);
+$black:      #000;
+
+$yellow:     rgba(255, 200, 87,  1);
+$orange:     rgba(233, 114, 76,  1);
+$red:        rgba(197, 40,  61,  1);
+$blue:       rgba(37,  95,  133, 1);
+$dark-blue:  rgba(24,  48,  89,  1);
+
+$copy-light: $white;
+$copy-dark: $black;

site/assets/scss/settings/_variables.scss

@@ -0,0 +1 @@
+$gutter: 15px;

site/assets/scss/tools/_mixins.scss

@@ -0,0 +1,7 @@
+@mixin slim-ul {
+  margin-right: 0;
+  margin-left: 0;
+  padding: 0;
+
+  list-style-type: none;
+}