refactor: use css variable to calculate the font size

25sprout · Nov 25, 2017 · c6d4d69 · c6d4d69
1 parent 3bc6414
commit c6d4d69
Showing 1 changed file with 15 additions and 8 deletions.
diff --git a/src/css/countdown-timer.css b/src/css/countdown-timer.css
@@ -1,5 +1,12 @@
 @import 'https://fonts.googleapis.com/css?family=Just+Another+Hand';
 
+:root {
+	--daysValueSize: 150px;
+	--hoursValueSize: 90px;
+	--minutesValueSize: 60px;
+	--secondsValueSize: 120px;
+}
+
 .countdown-timer {
 	font-family: 'Just Another Hand';
 	width: 387px;
@@ -8,46 +15,46 @@
 	position: relative;
 
 	& > .days {
-		font-size: 75px;
+		font-size: calc(var(--daysValueSize) / 2);
 
 		& > .value {
-			font-size: 150px;
+			font-size: var(--daysValueSize);
 			margin-bottom: -30px;
 		}
 	}
 
 	& > .hours {
-		font-size: 45px;
+		font-size: calc(var(--hoursValueSize) / 2);
 		position: absolute;
 		left: 140px;
 		top: 30px;
 
 		& > .value {
-			font-size: 90px;
+			font-size: var(--hoursValueSize);
 			margin-bottom: -15px;
 		}
 	}
 
 	& > .minutes {
-		font-size: 30px;
+		font-size: calc(var(--minutesValueSize) / 2);
 		position: absolute;
 		left: 230px;
 		top: 30px;
 
 		& > .value {
-			font-size: 60px;
+			font-size: var(--minutesValueSize);
 			margin-bottom: -10px;
 		}
 	}
 
 	& > .seconds {
-		font-size: 60px;
+		font-size: calc(var(--secondsValueSize) / 2);
 		position: absolute;
 		left: 300px;
 		bottom: -15px;
 
 		& > .value {
-			font-size: 120px;
+			font-size: var(--secondsValueSize);
 			margin-bottom: -30px;
 		}
 	}