From 7a38065bf0ceb1fb5a2b98b52a594e94b94d5190 Mon Sep 17 00:00:00 2001
From: Eddie Wen <eddiewen.tw@gmail.com>
Date: Sat, 25 Nov 2017 16:19:40 +0800
Subject: [PATCH] shrink timer size under 480px screen

---
 src/css/countdown-timer.css | 81 ++++++++++++++++++++++++++++++++++---
 1 file changed, 76 insertions(+), 5 deletions(-)

diff --git a/src/css/countdown-timer.css b/src/css/countdown-timer.css
index ed55bf3..b2fefd0 100644
--- a/src/css/countdown-timer.css
+++ b/src/css/countdown-timer.css
@@ -1,16 +1,45 @@
 @import 'https://fonts.googleapis.com/css?family=Just+Another+Hand';
 
 :root {
+	/**
+	 * .countdown-timer size
+	 */
+	--wrapperWidth: 387px;
+	--wrapperHeight: 180px;
+
+	/**
+	 * days
+	 */
 	--daysValueSize: 150px;
+
+	/**
+	 * hours
+	 */
 	--hoursValueSize: 90px;
+	--hoursLeft: 140px;
+
+	/**
+	 * minutes
+	 */
 	--minutesValueSize: 60px;
+	--minutesLeft: 230px;
+
+	/**
+	 * seconds
+	 */
 	--secondsValueSize: 120px;
+	--secondsLeft: 300px;
+
+	/**
+	 * shrink percentage in RWD
+	 */
+	--rwdPercentage: 0.8;
 }
 
 .countdown-timer {
 	font-family: 'Just Another Hand';
-	width: 387px;
-	height: 180px;
+	width: var(--wrapperWidth);
+	height: var(--wrapperHeight);
 	letter-spacing: 5px;
 	position: relative;
 
@@ -26,7 +55,7 @@
 	& > .hours {
 		font-size: calc(var(--hoursValueSize) / 2);
 		position: absolute;
-		left: 140px;
+		left: var(--hoursLeft);
 		top: 30px;
 
 		& > .value {
@@ -38,7 +67,7 @@
 	& > .minutes {
 		font-size: calc(var(--minutesValueSize) / 2);
 		position: absolute;
-		left: 230px;
+		left: var(--minutesLeft);
 		top: 30px;
 
 		& > .value {
@@ -50,7 +79,7 @@
 	& > .seconds {
 		font-size: calc(var(--secondsValueSize) / 2);
 		position: absolute;
-		left: 300px;
+		left: var(--secondsLeft);
 		bottom: -15px;
 
 		& > .value {
@@ -59,3 +88,45 @@
 		}
 	}
 }
+
+@media screen and (max-width: 480px) {
+	.countdown-timer {
+		width: calc(var(--wrapperWidth) * var(--rwdPercentage));
+		height: calc(var(--wrapperHeight) * var(--rwdPercentage));
+
+		& > .days {
+			font-size: calc(var(--daysValueSize) / 2 * var(--rwdPercentage));
+
+			& > .value {
+				font-size: calc(var(--daysValueSize) * var(--rwdPercentage));
+			}
+		}
+
+		& > .hours {
+			font-size: calc(var(--hoursValueSize) / 2 * var(--rwdPercentage));
+			left: calc(var(--hoursLeft) * var(--rwdPercentage));
+
+			& > .value {
+				font-size: calc(var(--hoursValueSize) * var(--rwdPercentage));
+			}
+		}
+
+		& > .minutes {
+			font-size: calc(var(--minutesValueSize) / 2 * var(--rwdPercentage));
+			left: calc(var(--minutesLeft) * var(--rwdPercentage));
+
+			& > .value {
+				font-size: calc(var(--minutesValueSize) * var(--rwdPercentage));
+			}
+		}
+
+		& > .seconds {
+			font-size: calc(var(--secondsValueSize) / 2 * var(--rwdPercentage));
+			left: calc(var(--secondsLeft) * var(--rwdPercentage));
+
+			& > .value {
+				font-size: calc(var(--secondsValueSize) * var(--rwdPercentage));
+			}
+		}
+	}
+}