Initial commit

_sass/support/_functions.scss

@@ -0,0 +1,10 @@
+@function rem($size, $unit:"") {
+  $remSize: $size / $root-font-size;
+
+  @if ($unit == false) {
+    @return #{$remSize};
+  }
+  @else {
+    @return #{$remSize}rem;
+  }
+}

_sass/support/_mixins.scss

@@ -0,0 +1,64 @@
+// Font size
+
+@mixin fs-1 {
+  font-size: 10px !important;
+}
+
+@mixin fs-2 {
+  font-size: 12px !important;
+}
+
+@mixin fs-3 {
+  font-size: 14px !important;
+}
+
+@mixin fs-4 {
+  font-size: 16px !important;
+}
+
+@mixin fs-5 {
+  font-size: 18px !important;
+}
+
+@mixin fs-6 {
+  font-size: 24px !important;
+}
+
+@mixin fs-7 {
+  font-size: 32px !important;
+}
+
+@mixin fs-8 {
+  font-size: 36px !important;
+}
+
+@mixin fs-9 {
+  font-size: 42px !important;
+}
+
+@mixin fs-10 {
+  font-size: 48px !important;
+}
+
+// Media query
+
+// Media query mixin
+// Usage:
+// @include mq(md) {
+//   ..medium and up styles
+// }
+@mixin mq($name) {
+  // Retrieves the value from the key
+  $value: map-get($media-queries, $name);
+
+  // If the key exists in the map
+  @if $value != null {
+    // Prints a media query based on the value
+    @media (min-width: rem($value)) {
+      @content;
+    }
+  } @else {
+    @warn "No value could be retrieved from `#{$media-query}`. "
+        + "Please make sure it is defined in `$media-queries` map.";
+  }
+}

_sass/support/_variables.scss

@@ -0,0 +1,99 @@
+//
+// Colors
+//
+
+$grey-dk-000: #959396;
+$grey-dk-100: #5c5962;
+$grey-dk-200: #44434d;
+$grey-dk-300: #27262b;
+
+$grey-lt-000: #f5f6fa;
+$grey-lt-100: #efebf0;
+$grey-lt-200: #ecebed;
+$grey-lt-300: #e6e1e8;
+
+$purple-000: #7253ed;
+$purple-100: #5e41d0;
+$purple-200: #4e26af;
+$purple-300: #381885;
+
+$green-000: #41d66f;
+$green-100: #2bb45a;
+$green-200: #299950;
+$green-300: #156f49;
+
+$body-text-color: $grey-dk-100;
+$body-heading-color: $grey-dk-300;
+$root-font-size: 16px;         // Base font-size for rems
+$link-color: $purple-000;
+
+//
+// Media queries in pixels
+//
+
+$media-queries: (
+  xs: 320px,
+  sm: 500px,
+  md: 740px,
+  lg: 1120px,
+  xl: 1200px
+) !default;
+
+//
+// Spacing
+//
+
+$spacing-unit: 1rem; // 1rem == 16px
+
+$spacers: (
+  sp-0: 0,
+  sp-1: $spacing-unit * 0.25,
+  sp-2: $spacing-unit * 0.5,
+  sp-3: $spacing-unit * 0.75,
+  sp-4: $spacing-unit,
+  sp-5: $spacing-unit * 1.5,
+  sp-6: $spacing-unit * 2,
+  sp-7: $spacing-unit * 2.5,
+  sp-8: $spacing-unit * 3
+);
+
+$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
+$sp-2: map-get($spacers, sp-2); // 0.5  rem == 8px
+$sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
+$sp-4: map-get($spacers, sp-4); // 1    rem == 16px
+$sp-5: map-get($spacers, sp-5); // 1.5  rem == 24px
+$sp-6: map-get($spacers, sp-6); // 2    rem == 32px
+$sp-7: map-get($spacers, sp-7); // 2.5  rem == 40px
+$sp-8: map-get($spacers, sp-8); // 3    rem == 48px
+
+//
+// Borders
+//
+
+$border: 1px solid;
+$border-radius: 4px;
+$border-color: $grey-lt-100;
+
+//
+// Grid system
+//
+
+$gutter-spacing: $sp-6;
+$nav-width: 232px;
+$content-width: 800px;
+
+$media-queries: (
+  xs: 320px,
+  sm: 500px,
+  md: 740px,
+  lg: 800px,
+  xl: 1316px
+) !default;
+
+//
+// Typography
+//
+
+$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
+
+$mono-font-family: Menlo, Consolas, Monospace;

_sass/support/support.scss

@@ -0,0 +1,3 @@
+@import "./variables";
+@import "./functions";
+@import "./mixins";