Update flip-flap gaps to improve preview

chrstphrknwtn · Mar 28, 2016 · d5e2e5e · d5e2e5e
1 parent f1498cf
commit d5e2e5e
Showing 1 changed file with 55 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -52,13 +52,11 @@
 flap-top-flip {
   top: 0;
   border-radius: 0.4vw 0.4vw 0 0;
-  transform: translateY(-2px);
 }
 flap-bottom,
 flap-bottom-flip {
   bottom: 0;
   border-radius: 0 0 0.4vw 0.4vw;
-  transform: translateY(2px);
 }
 
 flap-top-flip {
@@ -71,16 +69,17 @@
   transform-origin: 100% 0%;
   animation: flip-bottom-down 150ms ease-out;
 }
+
 flap-top > n,
 flap-top-flip > n {
-  top: 2px;
+  top: 0;
 }
 flap-bottom > n,
 flap-bottom-flip > n {
-  bottom: 2px;
+  bottom: 0;
 }
 
-@media screen and (max-width: 1200px) {
+@media screen and (min-width: 800px) {
   flap-top,
   flap-top-flip {
     transform: translateY(-1px);
@@ -99,6 +98,25 @@
   }
 }
 
+@media screen and (min-width: 1280px) {
+  flap-top,
+  flap-top-flip {
+    transform: translateY(-2px);
+  }
+  flap-bottom,
+  flap-bottom-flip {
+    transform: translateY(2px);
+  }
+  flap-top > n,
+  flap-top-flip > n {
+    top: 2px;
+  }
+  flap-bottom > n,
+  flap-bottom-flip > n {
+    bottom: 2px;
+  }
+}
+
 /* Number
 ------------------------------------------------*/
 n {
@@ -119,10 +137,10 @@
 ------------------------------------------------*/
 @keyframes flip-top-down {
   0% {
-    transform: translateY(-2px) rotateX(0);
+    transform: rotateX(0);
   }
   100% {
-    transform: translateY(-2px) rotateX(-90deg);
+    transform: rotateX(-90deg);
     color: black;
     background-color: black;
   }
@@ -131,13 +149,14 @@
   0% {
     color: white;
     background-color: rgb(30,30,30);
-    transform: translateY(2px) rotateX(90deg);
+    transform: rotateX(90deg);
   }
   100% {
-    transform: translateY(2px) rotateX(0deg);
+    transform: rotateX(0deg);
   }
 }
-@media screen and (max-width: 1200px) {
+
+@media screen and (min-width: 800px) {
   @keyframes flip-top-down {
     0% {
       transform: translateY(-1px) rotateX(0);
@@ -160,6 +179,32 @@
   }
 }
 
+@media screen and (min-width: 1280px) {
+  @keyframes flip-top-down {
+    0% {
+      transform: translateY(-2px) rotateX(0);
+    }
+    100% {
+      transform: translateY(-2px) rotateX(-90deg);
+      color: black;
+      background-color: black;
+    }
+  }
+  @keyframes flip-bottom-down {
+    0% {
+      color: white;
+      background-color: rgb(30,30,30);
+      transform: translateY(2px) rotateX(90deg);
+    }
+    100% {
+      transform: translateY(2px) rotateX(0deg);
+    }
+  }
+}
+
+
+
+
 </style>
 </head>
 <body>