From 347b1ff11b477373a2e2986a02fc1dbe4a963940 Mon Sep 17 00:00:00 2001
From: Christopher Charbonneau Wells <chris@chrxs.net>
Date: Mon, 21 Aug 2017 11:43:46 -0400
Subject: [PATCH] Make the timer display smaller on small devices.

---
 core/static/scss/timers.scss          | 15 +++++++++++++++
 core/templates/core/timer_detail.html |  2 +-
 dashboard/static/scss/cards.scss      |  4 +---
 3 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 core/static/scss/timers.scss

diff --git a/core/static/scss/timers.scss b/core/static/scss/timers.scss
new file mode 100644
index 00000000..198f78ca
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/core/templates/core/timer_detail.html b/core/templates/core/timer_detail.html
index b4968196..6e9cf0bf 100644
--- a/core/templates/core/timer_detail.html
+++ b/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
diff --git a/dashboard/static/scss/cards.scss b/dashboard/static/scss/cards.scss
index a666705a..7324762b 100644
--- a/dashboard/static/scss/cards.scss
+++ b/dashboard/static/scss/cards.scss
@@ -1,7 +1,5 @@
-@import "../../../babyblotter/static_site/scss/variables";
-
 .card-diaperchange {
   .progress {
     height: $progress-height * 2;
   }
-}
\ No newline at end of file
+}