diff --git a/index.html b/index.html
index 6530e5e..99ef4a3 100644
--- a/index.html
+++ b/index.html
@@ -8,10 +8,10 @@
Countdown
-
+
+
-
diff --git a/static/background.jpg b/static/background.jpg
index 73ffb6f..5dbc1cf 100644
Binary files a/static/background.jpg and b/static/background.jpg differ
diff --git a/static/index.css b/static/index.css
index 9ec1d8a..2de4073 100644
--- a/static/index.css
+++ b/static/index.css
@@ -3,8 +3,8 @@ main {
justify-content:center;
align-items:center;
- width: 66%;
- height: 66%;
+ width: 33%;
+ height: 33%;
}
body {
@@ -25,7 +25,17 @@ main h1 {
}
main h1#countdown {
- font-family: 'DSEG7-Classic';
+ font-family: 'Open Sans';
font-weight: bold;
- transform: translateX(-8%); /* HACK: Offset so the time is centred, not the whole text */
+ text-align: center;
+ transform: translateX(79%) translateY(40%);
+ text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}
+
+main h1#message {
+ font-family: 'Open Sans';
+ font-weight: bold;
+ text-align: center;
+ transform: translateX(80%) translateY(40%);
+ text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
+}
\ No newline at end of file
diff --git a/static/index.js b/static/index.js
index 27572dc..1c2744c 100644
--- a/static/index.js
+++ b/static/index.js
@@ -9,9 +9,9 @@ function showMessage(text) {
function updateCountdown(target) {
const duration = target.diffNow();
if (duration.valueOf() <= 0) {
- showMessage("Starting soon!");
+ showMessage("Starting \nSoon!");
} else {
- document.getElementById(COUNTDOWN_ELEMENT_ID).innerText = duration.toFormat("-hh:mm:ss");
+ document.getElementById(COUNTDOWN_ELEMENT_ID).innerText = `Starting \nin ${duration.toFormat("hh:mm:ss")}`;
}
}