Adds mixins SCSS

app/assets/stylesheets/application.scss

@@ -3,6 +3,7 @@
 @import "fonts";
 @import "icons";
 @import "variables";
+@import "mixins";
 @import "admin";
 @import "layout";
 @import "participation";

app/assets/stylesheets/mixins.scss

@@ -0,0 +1,92 @@
+// Table of Contents
+//
+// 01. Mixins
+//
+
+// 01. Mixins
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+@mixin back {
+  color: $text-medium;
+  font-family: $font-sans;
+  font-size: $small-font-size;
+}
+
+@mixin logo {
+  color: white;
+  font-family: $font-logo;
+  font-weight: lighter;
+
+  @media (min-width: $small-breakpoint) {
+    font-size: rem-calc(24);
+    line-height: rem-calc(48);
+  }
+
+  img {
+    height: 48px;
+    width: 48px;
+
+    @media (min-width: $small-breakpoint) {
+      height: 80px;
+      margin-right: rem-calc(12);
+      margin-top: 0;
+      width: 80px;
+    }
+  }
+}
+
+@mixin h1 {
+  font-size: $h2-font-size;
+  line-height: $h2-line-height;
+
+  @media (min-width: $small-breakpoint) {
+    font-size: $h1-font-size;
+    line-height: $h1-line-height;
+  }
+}
+
+@mixin h2 {
+  font-size: $h3-font-size;
+  line-height: $h3-line-height;
+
+  @media (min-width: $small-breakpoint) {
+    font-size: $h2-font-size;
+    line-height: $h2-line-height;
+  }
+}
+
+@mixin h3 {
+  font-size: $h4-font-size;
+  line-height: $h4-line-height;
+
+  @media (min-width: $small-breakpoint) {
+    font-size: $h3-font-size;
+    line-height: $h3-line-height;
+  }
+}
+
+@mixin h4 {
+  font-size: $h5-font-size;
+  line-height: $h5-line-height;
+
+  @media (min-width: $small-breakpoint) {
+    font-size: $h4-font-size;
+    line-height: $h4-line-height;
+  }
+}
+
+@mixin h5 {
+  font-size: $h6-font-size;
+  line-height: $h6-line-height;
+
+  @media (min-width: $small-breakpoint) {
+    font-size: $h5-font-size;
+    line-height: $h5-line-height;
+  }
+}
+
+@mixin h6 {
+  font-size: $h6-font-size;
+  line-height: $h6-line-height;
+  text-transform: uppercase;
+}