Make the timer display smaller on small devices.

core/static/scss/timers.scss

@@ -0,0 +1,15 @@
+#view-timer-detail {
+  #timer-status {
+    font-size: $display4-size;
+    font-weight: $display4-weight;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  #view-timer-detail {
+    #timer-status {
+      font-size: $display1-size;
+      font-weight: $display1-weight;
+    }
+  }
+}

core/templates/core/timer_detail.html

@@ -6,7 +6,7 @@
 
 {% block content %}
     <div class="jumbotron text-center">
-        <h1 id="timer-status" class="display-1">
+        <h1 id="timer-status">
             <span class="timer-hours">{{ object.current_duration|hours }}</span>h
             <span class="timer-minutes">{{ object.current_duration|minutes }}</span>m
             <span class="timer-seconds">{{ object.current_duration|seconds }}</span>s

dashboard/static/scss/cards.scss

@@ -1,7 +1,5 @@
-@import "../../../babyblotter/static_site/scss/variables";
-
 .card-diaperchange {
   .progress {
     height: $progress-height * 2;
   }
-}
+}