diff --git a/index.html b/index.html index e1e52ca..17f28fd 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ Minesweeper +
@@ -17,13 +18,7 @@
- - - - diff --git a/main.css b/main.css new file mode 100644 index 0000000..7ee0d8c --- /dev/null +++ b/main.css @@ -0,0 +1,25 @@ +/* helpers */ +.float-left { + float: left; +} +.float-right { + float: right; +} +.clear-both { + clear: both; +} + +body { + background: black; + color: #DDDDDD; + font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; + text-align: center; +} + +em { + font-weight: bold; +} + +#body-wrapper { + display: inline-block; +} diff --git a/src/main.js b/src/main.js index c185e0e..f2f9379 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,4 @@ -import './index.css' +import './minesweeper.css' import './modules/loading/loading.css' import '../public/favicon.ico' import Minesweeper from './minesweeper.js' diff --git a/src/index.css b/src/minesweeper.css similarity index 52% rename from src/index.css rename to src/minesweeper.css index f314999..c8b7f5c 100644 --- a/src/index.css +++ b/src/minesweeper.css @@ -1,39 +1,3 @@ -/* - initial code from: https://codepen.io/101Computing/pen/wEbEqx -*/ - -/* helpers */ -.float-left { - float: left; -} -.float-right { - float: right; -} -.clear-both { - clear: both; -} - -body { - background: black; - color: #DDDDDD; - font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; - text-align: center; -} - -em { - font-weight: bold; -} -h1 { - text-align: center; - font-size: 24px; - font-weight: bold; - text-transform: uppercase; - background: -webkit-linear-gradient(90deg,#ff8a00,#e52e71); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none; -o-user-select:none; -} - #grid { margin-left: auto; margin-right: auto; @@ -78,10 +42,6 @@ h1 { padding: 0px; } -/* -#0000ff, #008100, #ff1300, #000083, #810500, #2a9494, #000000, #808080; -*/ - #grid TR TD[data-value="1"] { color: #0000ff !important; } @@ -150,66 +110,15 @@ button { margin: 12px; } -/* The Modal (background) */ -.modal { - position: fixed; /* Stay in place */ - z-index: 1; /* Sit on top */ - left: 0; - top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0,0,0); /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ -} - -/* Modal Content/Box */ -.modal-content { - background: #efffef; - margin: 5% auto 0; /* 15% from the top and centered */ - padding: 20px; - border: 5px solid #c0e0d0; - width: 60%; /* Could be more or less, depending on screen size */ - box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); - border-radius: 7px; - line-height: 36px!important; - color: #888; -} - -.modal-btn { - box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); - border-radius: 7px; - line-height: 36px!important; - min-width: 150px; - display: inline-block!important; - background-color: #29abe0; - padding: 2px 12px !important; - text-align: center !important; - color: #fff; - cursor: pointer; - overflow-wrap: break-word; - vertical-align: middle; - border: 0 none #fff !important; - font-family: 'Quicksand',Helvetica,Century Gothic,sans-serif !important; - text-decoration: none; - text-shadow: none; - font-weight: 700!important; - font-size: 14px !important; -} - -p.announcement-action { - font-size: normal; +h1 { + text-align: center; + font-size: 24px; font-weight: bold; -} - -#body-wrapper { - display: inline-block; -} - -.btn-container { - position: fixed; - bottom: 30px; - right: 30px; + text-transform: uppercase; + background: -webkit-linear-gradient(90deg,#ff8a00,#e52e71); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none; -o-user-select:none; } /** mobile **/ @@ -222,9 +131,5 @@ p.announcement-action { min-width: 20px; min-height: 20px; } - .btn-container { - position: inherit; - margin: 20px 0; - } } diff --git a/src/modules/index.js b/src/modules/index.js index feaeb7f..90bcb18 100644 --- a/src/modules/index.js +++ b/src/modules/index.js @@ -1,9 +1,7 @@ -export * from './dialog/dialog.js' export * from './leader-board/leader-board.js' export * from './loading/loading.js' export * from './logger/logger.js' export * from './storage/storage.js' export * from './timer/timer.js' export * from './user/user.js' -export * from './grid/grid.js'