configure

_scss/partials/_variables.scss

@@ -0,0 +1,67 @@
+// Colors
+$button-height: 27px;
+$button-width: 30px;
+$black: #070707;
+$color255: rgba(255, 255, 255, 0.8);
+$darkest-grey: #555;
+$dark-grey: #1b1b1b;
+$light-grey: #777777;
+$grey: #707070;
+$white: #f2f2f2;
+$almostWhite: #cbcbcb;
+$whiteRGBA: rgba(242,242,242,0.3);
+$blue: #00b7c7;
+$blueRGBA: rgba(0, 183, 199, 0.7);
+$purple: #4d0ce8;
+$purpleRGBA: rgba(77, 12, 232, 0.7);
+$overlayOpacity: 0.61;
+// Fonts
+$Chronicle: 'Chronicle Display Bold';
+$serif-stack: Georgia, serif;
+$Gotham: 'Gotham';
+$Whitney: 'Whitney';
+$sans-serif-stack: Helvetica, Arial, sans-serif;
+// Breakpoints
+$S: 330px;
+$S400: 400px;
+$S440: 440px;
+$SM: 480px;
+$S600: 600px;
+$S660: 660px;
+$M: 768px;
+$MM: 900px;
+$ML: 1000px;
+$L: 1170px;
+// Media queries
+@mixin MQ($canvas) {
+  @if $canvas==S {
+    @media only screen and (max-width: $S) { @content; }
+  }
+  @else if $canvas==S400 {
+    @media only screen and (max-width: $S400) { @content; }
+  }
+  @else if $canvas==S440 {
+    @media only screen and (max-width: $S440) { @content; }
+  }
+  @else if $canvas==SM {
+    @media only screen and (max-width: $SM) { @content; }
+  }
+  @else if $canvas==S600 {
+    @media only screen and (max-width: $S600) { @content; }
+  }
+  @else if $canvas==S660 {
+    @media only screen and (max-width: $S660) { @content; }
+  }
+  @else if $canvas==M {
+    @media only screen and (max-width: $M) { @content; }
+  }
+  @else if $canvas==MM {
+    @media only screen and (max-width: $MM) { @content; }
+  }
+  @else if $canvas==ML {
+    @media only screen and (max-width: $ML) { @content; }
+  }
+  @else if $canvas==L {
+    @media only screen and (max-width: $L) { @content; }
+  }
+}