From 18cf7293e79ed4e4906f21fc949db6ad271de872 Mon Sep 17 00:00:00 2001 From: Lurkars Date: Sat, 22 Apr 2017 16:37:33 +0200 Subject: [PATCH] css improvements --- index.html | 132 +++++++------- js/interface.js | 278 +++++++++++++++-------------- style/main.css | 444 +++++++++++++++++++++++------------------------ style/mobile.css | 126 +++++++------- 4 files changed, 498 insertions(+), 482 deletions(-) diff --git a/index.html b/index.html index 96580d5..d46f24d 100644 --- a/index.html +++ b/index.html @@ -2,80 +2,82 @@ - - openzilch.js - - - + + + + openzilch.js + + + -
-
-

openzilch.js

-

Simple javascript implementation of the Zilch game, also known as Dice 10000.

+
+
+

openzilch.js

+

Simple javascript implementation of the Zilch game, also known as Dice 10000.

+
+
+
+
+ +
+
-
-
-
- -
-
-
- -
- -
-
-
-
-
-
-
- - - - - - -
-
-
- -
- -
-
- -
+
New Game
+
+ +
+
- -
-

- How to play: The goal is to make over 10000 points. You roll six dices and take points. If you score 300 points and above, you can end the round and score the points. This is the score table: -

    -
  • Single fives 50 each
    • -
  • Single ones 100 each
    • -
  • Three of a kind 100 x [number] exception three ones scoring 1000
    • -
  • Four/Five/Six of a kind doubles the Three/Four/Five of a kind points
    • -
  • Straight 1500
    • -
  • Three pairs 1500
    • -
- If you cannot take any points, you get a Zilch and end the round. After three Zilchs in a row, you get a -500 points penalty. If you scored with all six dices, you cann roll again. -

- -

For more information see Dice 10000 - Wikipedia.

-
-
-

GitHub

+
+
+
+
+
+
+
+
+
+
+
+
+
+
Take Points
+
+ +
-
-

Created by Lukas Haubaum. Design and code inspiration by Gabriele Cirulli's 2048.

+
Roll Dice/s
+
+
+ +
+

+ How to play: The goal is to make over 10000 points. You roll six dices and take points. If you score 300 points and above, you can end the round and take the points. This is the score table: +

    +
  • Single fives 50 each
    • +
  • Single ones 100 each
    • +
  • Three of a kind 100 x [number] exception three ones scoring 1000
    • +
  • Four/Five/Six of a kind doubles the Three/Four/Five of a kind points
    • +
  • Straight 1500
    • +
  • Three pairs 1500
    • +
+ If you cannot score any points, you get a Zilch and end the round. After three Zilchs in a row, you get a -500 points penalty. If you scored with all six dices, you cann roll again. +

+

For more information see Dice 10000 - Wikipedia.

+
+
+

GitHub

+
+

Created by Lukas Haubaum. Design and code inspiration by Gabriele Cirulli's 2048.

+ +
- - + + diff --git a/js/interface.js b/js/interface.js index b04cb00..07f1a1a 100644 --- a/js/interface.js +++ b/js/interface.js @@ -1,204 +1,218 @@ function Interface() { - var self = this; + var self = this; - self.events = {}; + self.events = {}; - self.restartButton = document.querySelector('#restart-button'); + self.restartButton = document.querySelector('#restart-button'); - self.playerScoreContainer = document.querySelector('#player-score-container'); - self.playerScore = document.querySelector('#player-score'); - self.playerZilch = document.querySelector('#player-zilch'); + self.playerScoreContainer = document.querySelector('#player-score-container'); + self.playerScore = document.querySelector('#player-score'); + self.playerZilch = document.querySelector('#player-zilch'); - self.cpuScoreContainer = document.querySelector('#cpu-score-container'); - self.cpuScore = document.querySelector('#cpu-score'); - self.cpuZilch = document.querySelector('#cpu-zilch'); + self.cpuScoreContainer = document.querySelector('#cpu-score-container'); + self.cpuScore = document.querySelector('#cpu-score'); + self.cpuZilch = document.querySelector('#cpu-zilch'); - self.points = document.querySelector('#points'); - self.pointsButton = document.querySelector('#points-button'); - self.dicesButton = document.querySelector('#dices-button'); - self.diceContainer = document.querySelector('#dices'); - self.dices = self.diceContainer.children; + self.points = document.querySelector('#points'); + self.pointsButton = document.querySelector('#points-button'); + self.dicesButton = document.querySelector('#dices-button'); + self.diceContainer = document.querySelector('#dices'); + self.dices = self.diceContainer.children; - self.message = document.querySelector('#message'); + self.message = document.querySelector('#message'); - self.dicesButton.disabled = true; - self.pointsButton.disabled = true; + self.dicesButton.classList.add("disabled"); + self.pointsButton.classList.add("disabled"); - self.restartButton.addEventListener("click", function() { - self.fireEvent("restart"); - }); + self.restartButton.addEventListener("click", function() { + if (!this.classList.contains('disabled')) { + self.fireEvent("restart"); + } + }); - self.pointsButton.addEventListener("click", function() { - if (self.playing) { - self.fireEvent("takePoints"); - } - }); + self.pointsButton.addEventListener("click", function() { + if (self.playing && !this.classList.contains('disabled')) { + self.fireEvent("takePoints"); + } + }); - self.dicesButton.addEventListener("click", function() { - if (self.playing) { - self.fireEvent("addPoints"); - self.fireEvent("rollDices"); - } - }); - - for (var diceIndex = 0; diceIndex < 6; diceIndex++) { - var diceContainer = self.dices[diceIndex]; - diceContainer.diceIndex = diceIndex; - diceContainer.addEventListener("click", function() { - if (self.playing) { - self.fireEvent("toggleDice", this.diceIndex); - } - }); + self.dicesButton.addEventListener("click", function() { + if (self.playing && !this.classList.contains('disabled')) { + self.fireEvent("addPoints"); + self.fireEvent("rollDices"); } + }); + + for (var diceIndex = 0; diceIndex < 6; diceIndex++) { + var diceContainer = self.dices[diceIndex]; + diceContainer.diceIndex = diceIndex; + diceContainer.addEventListener("click", function() { + if (self.playing && !this.classList.contains('disabled')) { + self.fireEvent("toggleDice", this.diceIndex); + } + }); + } - this.setup(); + this.setup(); }; Interface.prototype.setup = function() { - this.dicesButton.disabled = true; - this.pointsButton.disabled = true; - this.message.classList.remove('visible'); + this.dicesButton.classList.add("disabled"); + this.pointsButton.classList.add("disabled"); + this.message.classList.remove('visible'); }; Interface.prototype.on = function(event, callback) { - if (!this.events[event]) { - this.events[event] = []; - } - this.events[event].push(callback); + if (!this.events[event]) { + this.events[event] = []; + } + this.events[event].push(callback); }; Interface.prototype.fireEvent = function(event, data) { - var callbacks = this.events[event]; - if (callbacks) { - callbacks.forEach(function(callback) { - callback(data); - }); - } + var callbacks = this.events[event]; + if (callbacks) { + callbacks.forEach(function(callback) { + callback(data); + }); + } }; Interface.prototype.setDices = function(dices) { - var self = this; + var self = this; - for (var diceIndex = 0; diceIndex < 6; diceIndex++) { - var dice = dices[diceIndex]; - var diceContainer = self.dices[diceIndex]; - diceContainer.innerHTML = dice.value + 1; - - if (dice.disabled) { - diceContainer.disabled = true; - } else { - diceContainer.disabled = false; - } - - if (dice.selected) { - diceContainer.classList.add('selected'); - } else { - diceContainer.classList.remove('selected'); - } - - if (dice.invalid) { - diceContainer.classList.add('invalid'); - diceContainer.classList.remove('selected'); - } else { - diceContainer.classList.remove('invalid'); - } + for (var diceIndex = 0; diceIndex < 6; diceIndex++) { + var dice = dices[diceIndex]; + var diceContainer = self.dices[diceIndex]; + diceContainer.innerHTML = dice.value + 1; + + if (dice.disabled) { + diceContainer.classList.add('disabled'); + } else { + diceContainer.classList.remove('disabled'); + } + + if (dice.selected) { + diceContainer.classList.add('selected'); + } else { + diceContainer.classList.remove('selected'); } + if (dice.invalid) { + diceContainer.classList.add('invalid'); + diceContainer.classList.remove('selected'); + } else { + diceContainer.classList.remove('invalid'); + } + } + }; Interface.prototype.animateDices = function(dices, timeout, callback) { - var self = this; - for (var diceIndex = 0; diceIndex < 6; diceIndex++) { - var dice = dices[diceIndex]; - if (!dice.disabled && !dice.selected) { - self.dices[diceIndex].classList.add("animate"); - self.dices[diceIndex].classList.add("duration" + diceIndex); - } + var self = this; + for (var diceIndex = 0; diceIndex < 6; diceIndex++) { + var dice = dices[diceIndex]; + if (!dice.disabled && !dice.selected) { + self.dices[diceIndex].classList.add("animate"); + self.dices[diceIndex].classList.add("duration" + diceIndex); } + } - setTimeout(function() { - for (var diceIndex = 0; diceIndex < 6; diceIndex++) { - self.dices[diceIndex].classList.remove("animate"); - } - if (callback) { - callback(); - } - }, timeout ? timeout : 0); + setTimeout(function() { + for (var diceIndex = 0; diceIndex < 6; diceIndex++) { + self.dices[diceIndex].classList.remove("animate"); + } + if (callback) { + callback(); + } + }, timeout ? timeout : 0); }; Interface.prototype.disableRestart = function(disabled) { - this.restartButton.disabled = disabled; + if (disabled) { + this.restartButton.classList.add("disabled") + } else { + this.restartButton.classList.remove("disabled") + } }; Interface.prototype.disableTakePoints = function(disabled) { - this.pointsButton.disabled = disabled; + if (disabled) { + this.pointsButton.classList.add("disabled") + } else { + this.pointsButton.classList.remove("disabled") + } }; Interface.prototype.disableRollDices = function(disabled) { - this.dicesButton.disabled = disabled; + if (disabled) { + this.dicesButton.classList.add("disabled") + } else { + this.dicesButton.classList.remove("disabled") + } }; Interface.prototype.setPoints = function(points) { - this.points.innerHTML = points; + this.points.innerHTML = points; }; Interface.prototype.setPlaying = function(playing) { - if (playing) { - this.playing = true; - this.playerScoreContainer.classList.add('active'); - this.cpuScoreContainer.classList.remove('active'); - } else { - this.playing = false; - this.playerScoreContainer.classList.remove('active'); - this.cpuScoreContainer.classList.add('active'); - } + if (playing) { + this.playing = true; + this.playerScoreContainer.classList.add('active'); + this.cpuScoreContainer.classList.remove('active'); + } else { + this.playing = false; + this.playerScoreContainer.classList.remove('active'); + this.cpuScoreContainer.classList.add('active'); + } }; Interface.prototype.setPlayer = function(player) { - this.playerScore.innerHTML = player.score; - var zilchs = ''; - for (var i = 0; i < player.zilch; i++) { - zilchs += '
'; - } - this.playerZilch.innerHTML = zilchs; + this.playerScore.innerHTML = player.score; + var zilchs = ''; + for (var i = 0; i < player.zilch; i++) { + zilchs += '
'; + } + this.playerZilch.innerHTML = zilchs; }; Interface.prototype.setCpu = function(cpu) { - this.cpuScore.innerHTML = cpu.score; - var zilchs = ''; - for (var i = 0; i < cpu.zilch; i++) { - zilchs += '
'; - } + this.cpuScore.innerHTML = cpu.score; + var zilchs = ''; + for (var i = 0; i < cpu.zilch; i++) { + zilchs += '
'; + } - this.cpuZilch.innerHTML = zilchs; + this.cpuZilch.innerHTML = zilchs; }; Interface.prototype.showMessage = function(message, timeout, callback) { - var self = this; + var self = this; - self.message.innerHTML = '

' + message + '

'; + self.message.innerHTML = '

' + message + '

'; - self.message.classList.add('visible'); + self.message.classList.add('visible'); - if (timeout) { - setTimeout(function() { - self.clearMessage(callback); - }, timeout); - } else if (callback) { - callback(); - } + if (timeout) { + setTimeout(function() { + self.clearMessage(callback); + }, timeout); + } else if (callback) { + callback(); + } }; Interface.prototype.clearMessage = function(callback) { - this.message.classList.remove('visible'); - if (callback) { - callback(); - } + this.message.classList.remove('visible'); + if (callback) { + callback(); + } }; diff --git a/style/main.css b/style/main.css index 9c8de7b..af46daa 100644 --- a/style/main.css +++ b/style/main.css @@ -1,355 +1,355 @@ @font-face { - font-family: 'Clear Sans'; - src: url('fonts/ClearSans-Regular-webfont.eot'); - src: url('fonts/ClearSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/ClearSans-Regular-webfont.woff') format('woff'), url('fonts/ClearSans-Regular-webfont.ttf') format('truetype'), url('fonts/ClearSans-Regular-webfont.svg#clear_sansregular') format('svg'); - font-weight: normal; - font-style: normal; + font-family: 'Clear Sans'; + src: url('fonts/ClearSans-Regular-webfont.eot'); + src: url('fonts/ClearSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/ClearSans-Regular-webfont.woff') format('woff'), url('fonts/ClearSans-Regular-webfont.ttf') format('truetype'), url('fonts/ClearSans-Regular-webfont.svg#clear_sansregular') format('svg'); + font-weight: normal; + font-style: normal; } * { - box-sizing: border-box; + box-sizing: border-box; } html, body { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } body { - background: #faf8ef; - font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; - font-size: 18px; - color: #776e65; + background: #faf8ef; + font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; + font-size: 18px; + color: #776e65; } a { - color: #776e65; - font-weight: bold; - text-decoration: underline; - cursor: pointer; + color: #776e65; + font-weight: bold; + text-decoration: underline; + cursor: pointer; } hr { - border: none; - border-bottom: 1px solid #d8d4d0; - margin-top: 20px; - margin-bottom: 30px; + border: none; + border-bottom: 1px solid #d8d4d0; + margin-top: 20px; + margin-bottom: 30px; } .uppercase { - text-transform: uppercase; + text-transform: uppercase; } .container { - width: 500px; - margin: 0 auto; + width: 500px; + margin: 0 auto; } .button { - display: inline-block; - height: 40px; - border: 0; - background: #8f7a66; - border-radius: 3px; - padding: 0 20px; - font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; - font-size: 18px; - color: #f9f6f2; - text-decoration: none; - line-height: 42px; - cursor: pointer; - text-align: center; - font-weight: bold; -} - -.button:disabled { - cursor: auto; - background: #ede0c8; - color: #776e65; + display: inline-block; + height: 40px; + border: 0; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; + font-size: 18px; + color: #f9f6f2; + text-decoration: none; + line-height: 42px; + cursor: pointer; + text-align: center; + font-weight: bold; +} + +.button.disabled { + cursor: auto; + background: #ede0c8; + color: #776e65; } .top { - position: relative; - text-align: center; - height: 75px; - margin-bottom: 25px; + position: relative; + text-align: center; + height: 75px; + margin-bottom: 25px; } .top .button { - margin-top: 18px; + margin-top: 18px; } .score-container { - color: gray; - display: inline-block; - width: 85px; - height: 75px; - background: #bbada0; - border-radius: 3px; - text-align: center; + color: gray; + display: inline-block; + width: 85px; + height: 75px; + background: #bbada0; + border-radius: 3px; + text-align: center; } #player-score-container { - position: absolute; - top: 0; - left: 0; + position: absolute; + top: 0; + left: 0; } #cpu-score-container { - position: absolute; - top: 0; - right: 0; + position: absolute; + top: 0; + right: 0; } .score-container .label { - font-size: 13px; - line-height: 13px; - font-weight: bold; - text-transform: uppercase; + font-size: 13px; + line-height: 13px; + font-weight: bold; + text-transform: uppercase; } .score-container.active { - color: #f9f6f2; + color: #f9f6f2; } .score-container .score { - font-size: 25px; - line-height: 25px; - font-weight: bold; + font-size: 25px; + line-height: 25px; + font-weight: bold; } .score-container .zilch { - display: block; - width: 100%; - height: 25px; - text-align: center; + display: block; + width: 100%; + height: 25px; + text-align: center; } .score-container .zilch .point { - background-color: gray; - display: inline-block; - width: 8px; - height: 8px; - margin: 0px 3px; + background-color: gray; + display: inline-block; + width: 8px; + height: 8px; + margin: 0px 3px; } .score-container.active .zilch .point { - background-color: #f9f6f2; + background-color: #f9f6f2; } .dices-container { - position: relative; - background: #bbada0; - border-radius: 6px; - width: 500px; - height: 341px; + position: relative; + background: #bbada0; + border-radius: 6px; + width: 500px; + height: 341px; } .dices { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; } .dice { - position: relative; - cursor: pointer; - display: inline-block; - width: 100px; - height: 100px; - border: 0; - background: #eee4da; - border-radius: 3px; - padding: 0 20px; - font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; - font-size: 55px; - line-height: 100px; - font-weight: bold; - color: #776e65; - margin-top: 47px; - margin-left: 47px; + position: relative; + cursor: pointer; + display: inline-block; + width: 100px; + height: 100px; + border: 0; + background: #eee4da; + border-radius: 3px; + text-align: center; + font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; + font-size: 55px; + line-height: 100px; + font-weight: bold; + color: #776e65; + margin-top: 47px; + margin-left: 47px; } .dice:focus { - outline: none; + outline: none; } -.dice:disabled { - cursor: auto; - background: rgba(238, 228, 218, 0.35); +.dice.disabled { + cursor: auto; + background: rgba(238, 228, 218, 0.35); } .dice.selected { - background: #ede0c8; + background: #ede0c8; } .dice.invalid { - background-color: #f2b179; + background-color: #f2b179; } @keyframes diceAnimation { - 0% { - content: "1"; - } - 20% { - content: "2"; - } - 40% { - content: "3"; - } - 60% { - content: "4"; - } - 80% { - content: "5"; - } - 100% { - content: "6"; - } + 0% { + content: "1"; + } + 20% { + content: "2"; + } + 40% { + content: "3"; + } + 60% { + content: "4"; + } + 80% { + content: "5"; + } + 100% { + content: "6"; + } } .dice.animate:after { - background: #eee4da; - content: "1"; - display: block; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - animation: diceAnimation 0.5s linear infinite reverse; - -webkit-animation: diceAnimation 0.5s linear infinite reverse; - -moz-animation: diceAnimation 0.5s linear infinite reverse; - -o-animation: diceAnimation 0.5s linear infinite reverse; - -ms-animation: diceAnimation 0.5s linear infinite reverse; + background: #eee4da; + content: "1"; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + animation: diceAnimation 0.5s linear infinite reverse; + -webkit-animation: diceAnimation 0.5s linear infinite reverse; + -moz-animation: diceAnimation 0.5s linear infinite reverse; + -o-animation: diceAnimation 0.5s linear infinite reverse; + -ms-animation: diceAnimation 0.5s linear infinite reverse; } .dice.duration0.animate:after { - animation-delay: 0.1s; - -webkit-animation-delay: 0.1s; - -moz-animation-delay: 0.1s; - -o-animation-delay: 0.1s; - -ms-animation-delay: 0.1s; + animation-delay: 0.1s; + -webkit-animation-delay: 0.1s; + -moz-animation-delay: 0.1s; + -o-animation-delay: 0.1s; + -ms-animation-delay: 0.1s; } .dice.duration1.animate:after { - animation-delay: 0.3s; - -webkit-animation-delay: 0.1s; - -moz-animation-delay: 0.1s; - -o-animation-delay: 0.1s; - -ms-animation-delay: 0.1s; + animation-delay: 0.3s; + -webkit-animation-delay: 0.1s; + -moz-animation-delay: 0.1s; + -o-animation-delay: 0.1s; + -ms-animation-delay: 0.1s; } .dice.duration1.animate:after { - animation-delay: 0.6s; - -webkit-animation-delay: 0.1s; - -moz-animation-delay: 0.1s; - -o-animation-delay: 0.1s; - -ms-animation-delay: 0.1s; + animation-delay: 0.6s; + -webkit-animation-delay: 0.1s; + -moz-animation-delay: 0.1s; + -o-animation-delay: 0.1s; + -ms-animation-delay: 0.1s; } .dice.duration3.animate:after { - animation-delay: 0.7s; - -webkit-animation-delay: 0.1s; - -moz-animation-delay: 0.1s; - -o-animation-delay: 0.1s; - -ms-animation-delay: 0.1s; + animation-delay: 0.7s; + -webkit-animation-delay: 0.1s; + -moz-animation-delay: 0.1s; + -o-animation-delay: 0.1s; + -ms-animation-delay: 0.1s; } .dice.duration4.animate:after { - animation-delay: 1.2s; - -webkit-animation-delay: 0.1s; - -moz-animation-delay: 0.1s; - -o-animation-delay: 0.1s; - -ms-animation-delay: 0.1s; + animation-delay: 1.2s; + -webkit-animation-delay: 0.1s; + -moz-animation-delay: 0.1s; + -o-animation-delay: 0.1s; + -ms-animation-delay: 0.1s; } .dice.duration5.animate:after { - animation-delay: 1.5s; - -webkit-animation-delay: 0.1s; - -moz-animation-delay: 0.1s; - -o-animation-delay: 0.1s; - -ms-animation-delay: 0.1s; + animation-delay: 1.5s; + -webkit-animation-delay: 0.1s; + -moz-animation-delay: 0.1s; + -o-animation-delay: 0.1s; + -ms-animation-delay: 0.1s; } .message { - visibility: hidden; - opacity: 0; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: rgba(238, 228, 218, 0.5); - z-index: 100; - text-align: center; - z-index: 5; - transition: all 0.5s ease-out; - -webkit-transition: all 0.5s ease-out; - -moz-transition: all 0.5s ease-out; - -o-transition: all 0.5s ease-out; - -ms-transition: all 0.5s ease-out; + visibility: hidden; + opacity: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(238, 228, 218, 0.5); + z-index: 100; + text-align: center; + z-index: 5; + transition: all 0.5s ease-out; + -webkit-transition: all 0.5s ease-out; + -moz-transition: all 0.5s ease-out; + -o-transition: all 0.5s ease-out; + -ms-transition: all 0.5s ease-out; } .message.visible { - visibility: visible; - opacity: 1; + visibility: visible; + opacity: 1; } .message p { - font-size: 60px; - font-weight: bold; - height: 60px; - line-height: 60px; - margin-top: 150px; + font-size: 60px; + font-weight: bold; + height: 60px; + line-height: 60px; + margin-top: 150px; } .action { - position: relative; - margin-top: 25px; - height: 75px; - text-align: center; + position: relative; + margin-top: 25px; + height: 75px; + text-align: center; } #points-button { - position: absolute; - top: 18px; - left: 0px; + position: absolute; + top: 18px; + left: 0px; } #dices-button { - position: absolute; - top: 18px; - right: 0px; + position: absolute; + top: 18px; + right: 0px; } .pointsContainer { - position: relative; - display: inline-block; - width: 85px; - height: 75px; - background: #ede0c8; - color: #776e65; - border-radius: 3px; - text-align: center; + position: relative; + display: inline-block; + width: 85px; + height: 75px; + background: #ede0c8; + color: #776e65; + border-radius: 3px; + text-align: center; } .pointsContainer .label { - font-size: 13px; - line-height: 13px; - font-weight: bold; - text-transform: uppercase; + font-size: 13px; + line-height: 13px; + font-weight: bold; + text-transform: uppercase; } .pointsContainer .points { - font-size: 25px; - line-height: 25px; - font-weight: bold; + font-size: 25px; + line-height: 25px; + font-weight: bold; } .footer { - text-align: center; + text-align: center; } diff --git a/style/mobile.css b/style/mobile.css index bcf7658..c38bd19 100644 --- a/style/mobile.css +++ b/style/mobile.css @@ -1,65 +1,65 @@ @media screen and (max-width: 520px) { - body { - font-size: 15px; - } - .container { - width: 280px; - } - .button { - display: inline-block; - height: 40px; - font-size: 15px; - color: #f9f6f2; - text-decoration: none; - line-height: 42px; - padding: 0 3px; - } - .top .button { - margin-top: 10px; - } - .score-container { - width: 75px; - height: 60px; - } - .score-container .score { - font-size: 20px; - line-height: 20px; - } - .dices-container { - width: 280px; - height: 185px; - } - .dice { - width: 70px; - height: 70px; - font-size: 35px; - line-height: 70px; - margin-top: 15px; - margin-left: 15px; - } - .message p { - font-size: 35px; - height: 35px; - line-height: 35px; - margin-top: 75px; - } - .action { - margin-top: 25px; - height: 75px; - text-align: center; - } - #points-button { - top: 10px; - } - #dices-button { - top: 10px; - } - .pointsContainer { - width: 75px; - height: 60px; - } - .pointsContainer .points { - font-size: 20px; - line-height: 20px; - } + body { + font-size: 15px; + } + .container { + width: 280px; + } + .button { + display: inline-block; + height: 40px; + font-size: 15px; + color: #f9f6f2; + text-decoration: none; + line-height: 42px; + padding: 0 3px; + } + .top .button { + margin-top: 10px; + } + .score-container { + width: 75px; + height: 60px; + } + .score-container .score { + font-size: 20px; + line-height: 20px; + } + .dices-container { + width: 280px; + height: 185px; + } + .dice { + width: 70px; + height: 70px; + font-size: 35px; + line-height: 70px; + margin-top: 15px; + margin-left: 15px; + } + .message p { + font-size: 35px; + height: 35px; + line-height: 35px; + margin-top: 75px; + } + .action { + margin-top: 25px; + height: 75px; + text-align: center; + } + #points-button { + top: 10px; + } + #dices-button { + top: 10px; + } + .pointsContainer { + width: 75px; + height: 60px; + } + .pointsContainer .points { + font-size: 20px; + line-height: 20px; + } }