style guide noodles

site/assets/scss/settings/_colors.scss

@@ -0,0 +1,85 @@
+
+
+$color-a1: rgba(191, 189, 193, 1);
+$color-a2: rgba(109, 106, 117, 1);
+$color-a3: rgba(55, 50, 62, 1);
+$color-a4: rgba(222, 184, 65, 1);
+$color-a5: rgba(222, 158, 54, 1);
+
+
+$color-b1: rgba(187, 225, 195, 1);
+$color-b2: rgba(167, 205, 189, 1);
+$color-b3: rgba(134, 157, 122, 1);
+$color-b4: rgba(145, 120, 93, 1);
+$color-b5: rgba(139, 93, 51, 1);
+
+
+$color-c1: rgba(240, 58, 71, 1);
+$color-c2: rgba(175, 91, 91, 1);
+$color-c3: rgba(246, 244, 243, 1);
+$color-c4: rgba(39, 111, 191, 1);
+$color-c5: rgba(24, 48, 89, 1);
+
+
+$color-d1: rgba(172, 189, 186, 1);
+$color-d2: rgba(205, 221, 221, 1);
+$color-d3: rgba(165, 153, 181, 1);
+$color-d4: rgba(46, 47, 47, 1);
+$color-d5: rgba(5, 16, 20, 1);
+
+
+$color-e1: rgba(255, 200, 87, 1);
+$color-e2: rgba(233, 114, 76, 1);
+$color-e3: rgba(197, 40, 61, 1);
+$color-e4: rgba(72, 29, 36, 1);
+$color-e5: rgba(37, 95, 133, 1);
+
+.color-samples {
+  > div {
+    display: flex;
+    margin: $gutter 0;
+    height: 100px;
+
+    > div { flex: 1 1 auto; }
+  }
+
+  .color-a {
+    :nth-child(1) { background-color: $color-a1; }
+    :nth-child(2) { background-color: $color-a2; }
+    :nth-child(3) { background-color: $color-a3; }
+    :nth-child(4) { background-color: $color-a4; }
+    :nth-child(5) { background-color: $color-a5; }
+  }
+
+  .color-b {
+    :nth-child(1) { background-color: $color-b1; }
+    :nth-child(2) { background-color: $color-b2; }
+    :nth-child(3) { background-color: $color-b3; }
+    :nth-child(4) { background-color: $color-b4; }
+    :nth-child(5) { background-color: $color-b5; }
+  }
+
+  .color-c {
+    :nth-child(1) { background-color: $color-c1; }
+    :nth-child(2) { background-color: $color-c2; }
+    :nth-child(3) { background-color: $color-c3; }
+    :nth-child(4) { background-color: $color-c4; }
+    :nth-child(5) { background-color: $color-c5; }
+  }
+
+  .color-d {
+    :nth-child(1) { background-color: $color-d1; }
+    :nth-child(2) { background-color: $color-d2; }
+    :nth-child(3) { background-color: $color-d3; }
+    :nth-child(4) { background-color: $color-d4; }
+    :nth-child(5) { background-color: $color-d5; }
+  }
+
+  .color-e {
+    :nth-child(1) { background-color: $color-e1; }
+    :nth-child(2) { background-color: $color-e2; }
+    :nth-child(3) { background-color: $color-e3; }
+    :nth-child(4) { background-color: $color-e4; }
+    :nth-child(5) { background-color: $color-e5; }
+  }
+}

site/assets/scss/settings/_variables.scss

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