Break webview into sane files

2018-02-24 18:28:23 +01:00
parent 45c8f4673f
commit 751a150392
5 changed files with 102 additions and 114 deletions
--- a/Webview/index.css
+++ b/Webview/index.css
@@ -0,0 +1,197 @@
+html, body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  font-family: '-apple-system', sans-serif;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  perspective: 100vw;
+  -webkit-text-smoothing: anti-aliased;
+}
+
+digit {
+  position: relative;
+  width: 7vw;
+  height: 11vw;
+  margin: 0 0.25vw;
+  -webkit-backface-visibility: hidden;
+}
+
+/* Flip Flaps
+------------------------------------------------*/
+flap-top,
+flap-top-flip,
+flap-bottom,
+flap-bottom-flip {
+  box-sizing: border-box;
+  position: absolute;
+  display: flex;
+  width: 100%;
+  height: 50%;
+  left: 0;
+  justify-content: center;
+  overflow: hidden;
+  color: #e1e1e1;
+  background-color: rgb(12,12,12);
+  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04);
+  -webkit-backface-visibility: hidden;
+}
+flap-top,
+flap-top-flip {
+  top: 0;
+  border-radius: 0.4vw 0.4vw 0 0;
+}
+flap-bottom,
+flap-bottom-flip {
+  bottom: 0;
+  border-radius: 0 0 0.4vw 0.4vw;
+}
+
+flap-top-flip {
+  display: none;
+  transform-origin: 100% 100%;
+  animation: flip-top-down 300ms ease-in;
+}
+flap-bottom-flip {
+  display: none;
+  transform-origin: 100% 0%;
+  animation: flip-bottom-down 150ms ease-out;
+}
+
+flap-top > n,
+flap-top-flip > n {
+  top: 0;
+}
+flap-bottom > n,
+flap-bottom-flip > n {
+  bottom: 0;
+}
+
+@media screen and (min-width: 800px) {
+  flap-top,
+  flap-top-flip {
+    transform: translateY(-1px);
+  }
+  flap-bottom,
+  flap-bottom-flip {
+    transform: translateY(1px);
+  }
+  flap-top > n,
+  flap-top-flip > n {
+    top: 1px;
+  }
+  flap-bottom > n,
+  flap-bottom-flip > n {
+    bottom: 1px;
+  }
+}
+
+@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 {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 11vw;
+  font-size: 9vw;
+  font-weight: 200;
+  line-height: 118%;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  -webkit-backface-visibility: hidden;
+  transform: translate3d(0, 0, 0)
+}
+
+/* Animations
+------------------------------------------------*/
+@keyframes flip-top-down {
+  0% {
+    transform: rotateX(0);
+  }
+  100% {
+    transform: rotateX(-90deg);
+    color: black;
+    background-color: black;
+  }
+}
+@keyframes flip-bottom-down {
+  0% {
+    color: white;
+    background-color: rgb(30,30,30);
+    transform: rotateX(90deg);
+  }
+  100% {
+    transform: rotateX(0deg);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  @keyframes flip-top-down {
+    0% {
+      transform: translateY(-1px) rotateX(0);
+    }
+    100% {
+      transform: translateY(-1px) rotateX(-90deg);
+      color: black;
+      background-color: black;
+    }
+  }
+  @keyframes flip-bottom-down {
+    0% {
+      color: white;
+      background-color: rgb(30,30,30);
+      transform: translateY(1px) rotateX(90deg);
+    }
+    100% {
+      transform: translateY(1px) rotateX(0deg);
+    }
+  }
+}
+
+@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);
+    }
+  }
+}