🔥

src/components/variables.css

@@ -0,0 +1,34 @@
+:root {
+  /*
+   * Typography
+   * ======================================================================== */
+
+  --font-family-base: 'Segoe UI', 'HelveticaNeue-Light', sans-serif;
+
+  /*
+   * Layout
+   * ======================================================================== */
+
+  --max-content-width: 1000px;
+
+  /*
+   * Media queries breakpoints
+   * ======================================================================== */
+
+/*  --screen-xs-min: 480px;  /* Extra small screen / phone */
+/*  --screen-sm-min: 768px;  /* Small screen / tablet */
+/*  --screen-md-min: 992px;  /* Medium screen / desktop */
+/*  --screen-lg-min: 1200px; /* Large screen / wide desktop */
+
+  @custom-media --xs-viewport (min-width: 480px);
+  @custom-media --sm-viewport (min-width: 768px);
+  @custom-media --md-viewport (min-width: 992px);
+  @custom-media --lg-viewport (min-width: 1200px);
+
+  --colour-primary: #6495ED;
+  --colour-secondary: #2A6FEB;
+  --colour-tertiary: #2A6FEB;
+  --colour-grey: #CCC;
+  --colour-green: #87EDA2;
+  --colour-red: #FA7575;
+}