Make the timer display smaller on small devices.

This commit is contained in:
Christopher Charbonneau Wells 2017-08-21 11:43:46 -04:00
parent b02752f52f
commit 347b1ff11b
3 changed files with 17 additions and 4 deletions

View File

@ -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;
}
}
}

View File

@ -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

View File

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