Color changes & CSS transitions

index.html

@@ -42,7 +42,7 @@
                     <input type="text" class="form-control" id="seed" placeholder="seed">
                   </div>
                 </form>
-                    <p class="navbar-text navbar-right remaining red"
+                   <p class="navbar-text navbar-right remaining red"
                        data-toggle="tooltip"
                        data-placement="bottom"
                        title="Number of red tiles that weren't discovered yet.">

style.css

@@ -89,52 +89,64 @@
  }
 
  .cards {
-   vertical-align: middle;
-   width: 100%;
-   height: 100%;
-   border-spacing: 15px;
-   border-collapse: separate;
- }
+    vertical-align: middle;
+    width: 80%;
+    height: 97%;
+    border-spacing: 10px;
+    border-collapse: separate;
+    margin: 0 auto;
+}
 
  .cell {
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
    font-family: stamps;
-   font-size: 1.4vw;
+   font-size: 1.2vw;
    display: table-cell;
    max-width: 0px;
    max-height: 0px;
    background: url(img/yellow.jpg);
-   box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.8);
+   box-shadow: 0px 0px 9px rgba(0, 0, 0, 1);
    background-size: cover !important;
+   background-position: top center!important;
    vertical-align: bottom;
- }
-
- span.cell-text {
-   opacity: 1;
-   text-transform: uppercase;
-   transition-duration: 5s;
- }
-
+   transition-timing-function: cubic-bezier(1, 0.15, 0.43, 0.93)!important;
+   transition-duration: 0.2s!important;
+ }
+
+span.cell-text {
+    border-top: 2px solid;
+    /* border-bottom: 2px solid; */
+    bottom: 3px;
+    position: relative;
+    display: block;
+    width: 95%;
+    margin: 0 auto;
+    /* background: #ffffff66; */
+}
  .cell:hover {
-   transform: scale(1.1) rotate(-1.1deg);
-   box-shadow: 0px 0px 58px;
- }
+    transform: scale(1.2) rotate(-1.3deg);
+    box-shadow: 0px 0px 58px;
+	z-index: 99999!important;
+	position: relative;
+}
+
 
- .cell-inrevealed {}
+ .cell-inrevealed {
+
+ }
 
  .cell-inrevealed:hover {
    cursor: pointer;
  }
 
  .cell-revealed {
-   cursor: auto;
-   transition-duration: 2s;
+	 pointer-events: none;
  }
-
+ 
  .cell-revealed span.cell-text {
-   opacity: 0.3;
+   opacity: 0.4;
  }
 
  .cell-red {
@@ -165,3 +177,34 @@
  .cell-strike {
    opacity: 0.2;
  }
+
+@media (max-device-width: 780px) {
+.container {
+    width: 90%!important;
+	height: 100%!important;
+}
+
+ .cards {
+    vertical-align: middle;
+    width: 100%;
+    height: 90%;
+    border-spacing: 8px;
+    border-collapse: separate;
+    margin: 0 auto;
+	padding-top: 120px;
+}
+
+.cell {
+	font-size: 24px;
+}
+
+.remaining {
+    font-size: 48px;
+    display: block;
+}
+
+
+
+
+ }
+