diff --git a/src/index.html b/src/index.html index 6c75f7c..d941b8c 100644 --- a/src/index.html +++ b/src/index.html @@ -13,10 +13,8 @@
-
-
-
-
+
+
diff --git a/src/index.js b/src/index.js index 6fe6c9a..2b60a5b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,16 +1,16 @@ 'use strict'; const dice = document.querySelector('.dice'); -const resultContainer = document.querySelector('.result-container'); +const textResult = document.querySelector('.text-result'); dice.addEventListener('click', render); /* initialize */ dice.innerHTML = createDotHtml('dot-middle-center'); -resultContainer.innerHTML = 1; +textResult.innerHTML = 1; function render() { dice.innerHTML = createDiceHtml(); - resultContainer.innerHTML = dice.children.length; + textResult.innerHTML = dice.children.length; } function createDiceHtml() { diff --git a/src/style.css b/src/style.css index 338ec78..ca00e25 100644 --- a/src/style.css +++ b/src/style.css @@ -21,20 +21,17 @@ body { min-width: 5rem; } -.dice-container { - width: 100%; -} - .dice { --gap: 6%; display: grid; - grid: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); + grid: repeat(3, 1fr) / repeat(3, 1fr); grid-template-areas: "top-left top-center top-right" "middle-left middle-center middle-right" "bottom-left bottom-center bottom-right"; justify-items: center; align-items: center; + width: calc(100% - 2 * var(--gap)); aspect-ratio: 1; padding: var(--gap); margin: var(--gap); @@ -44,7 +41,7 @@ body { cursor: pointer; } -.result-container { +.text-result { font-size: min(5rem, 50vw); font-weight: bold; }