diff --git a/client/index.css b/client/index.css
index 54b894e..7bc825e 100644
--- a/client/index.css
+++ b/client/index.css
@@ -9,7 +9,6 @@ body {
left: 0;
bottom: 0;
display: flex;
- flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 2vmax 1vmax;
@@ -18,8 +17,17 @@ body {
box-sizing: border-box;
}
+.keypress__content {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ border-radius: 0.5vmax;
+ background-color: rgba(0, 0, 0, 0.5);
+}
+
.keypress__item {
- padding: 1vmax;
+ padding: 0.5vmax;
}
.keypress__item_type_plus {
@@ -27,10 +35,10 @@ body {
}
.keypress-item {
- padding: 1vmax;
+ padding: 0.5vmax;
font-family: Arial, -apple-system, sans-serif;
font-weight: 700;
- font-size: 4vmax;
+ font-size: 3vmax;
line-height: 1;
text-transform: uppercase;
color: #fff;
@@ -41,7 +49,7 @@ body {
.keypress-item-plus {
font-family: Arial, -apple-system, sans-serif;
font-weight: 700;
- font-size: 4vmax;
+ font-size: 3vmax;
line-height: 1;
color: #fff;
}
diff --git a/client/index.html b/client/index.html
index 5922538..538ed73 100644
--- a/client/index.html
+++ b/client/index.html
@@ -9,19 +9,9 @@
-
-
-
-
-
-
-
-
-
+
diff --git a/client/index.js b/client/index.js
index 6e0804f..61b54cd 100644
--- a/client/index.js
+++ b/client/index.js
@@ -25,6 +25,7 @@ function computeKeyPressed(type, keyCode) {
}
const elemRoot = document.getElementById('root');
+const elemContent = elemRoot.querySelector('.js-content');
function renderKeysPressed() {
const result = [];
@@ -33,5 +34,5 @@ function renderKeysPressed() {
result.push(``);
});
- elemRoot.innerHTML = result.join(``);
+ elemContent.innerHTML = result.join(``);
}