Style the general dashboard icons

app/assets/stylesheets/application.css

@@ -9,6 +9,7 @@
  *= require osem-rating
  *= require osem-schedule
  *= require osem-schedule-print
+ *= require osem-dashboard
  *= require font-awesome
  *= require bootstrap-markdown.min
 */

app/assets/stylesheets/breakpoints.css.scss

@@ -0,0 +1,21 @@
+@mixin breakpoint($class) {
+  @if $class == xs {
+    @media (max-width: 767px) { @content; }
+  }
+ 
+  @else if $class == sm {
+    @media (min-width: 750px) { @content; }
+  }
+ 
+  @else if $class == md {
+    @media (min-width: 970px) { @content; }
+  }
+ 
+  @else if $class == lg {
+    @media (min-width: 1170px) { @content; }
+  }
+ 
+  @else {
+    @warn "Breakpoint mixin supports: xs, sm, md, lg";
+  }
+}

app/assets/stylesheets/osem-dashboard.css.scss

@@ -0,0 +1,14 @@
+@import "breakpoints.css.scss";
+
+.dashbox span.fa {
+  line-height: 1.1em;
+  @include breakpoint(sm) {
+    font-size: 3em;
+  }
+  @include breakpoint(md) {
+    font-size: 4em;
+  }
+  @include breakpoint(lg) {
+    font-size: 5em;
+  }
+}