From c0d51af664d4ba9f4847fc8c4e9aa51e681a062e Mon Sep 17 00:00:00 2001
From: Manfred Knobloch <m.knobloch@iwm-tuebingen.de>
Date: Wed, 22 May 2019 16:02:17 +0200
Subject: [PATCH] cleanup doctests - not finished

---
 css/flipeffect.css |  73 ++++++++++++++++++++
 css/index.css      | 167 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 240 insertions(+)
 create mode 100644 css/flipeffect.css
 create mode 100644 css/index.css

diff --git a/css/flipeffect.css b/css/flipeffect.css
new file mode 100644
index 0000000..200c7df
--- /dev/null
+++ b/css/flipeffect.css
@@ -0,0 +1,73 @@
+
+.flipWrapper
+{
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+/* Fix to render
+.flipWrapper > div:first-child{
+    z-index: 1;
+} */
+
+.flipCard {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+     /*** See: https://stackoverflow.com/questions/7439042/css-js-to-prevent-dragging-of-ghost-image ***/
+    /* -webkit-user-drag: none;
+    -khtml-user-drag: none;
+    -moz-user-drag: none;
+    -o-user-drag: none;
+    user-drag: none; */
+}
+
+.flipFace{
+    box-shadow: 2px 2px 10px #000;
+    visibility: hidden;
+}
+
+.front{
+    width: 100%;
+    height: 100%;
+    position:absolute;
+    background-color:#333;
+}
+
+.back{
+    background-color:#333;
+    position:absolute;
+    border: 8px solid white;
+}
+
+.closeBtn {
+    transform-origin: top right;
+    position: absolute;
+    width: 44px;
+    height: 44px;
+    padding: 4px;
+    right: 0px;
+    top: 0px;
+}
+
+.infoBtn {
+    transform-origin: bottom right;
+    position: fixed;
+    width: 44px;
+    height: 44px;
+    padding: 4px;
+    right: 0px;
+    bottom: 0px;
+}
+
+.backBtn {
+    transform-origin: bottom right;
+    position: fixed;
+    width: 44px;
+    height: 44px;
+    padding: 4px;
+    right: 0px;
+    bottom: 0px;
+}
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..e8f5323
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,167 @@
+html {
+    height: 100%;
+    width: 100%;
+    margin: 0px;
+}
+
+body
+{
+    margin: 0px;
+    padding: 0px;
+    width: 100%;
+    height: 100%;
+    font-family: sans-serif;
+    font-size: 22pt;
+    -webkit-tap-highlight-color: #ccc;
+    background-color: #DDD;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-overflow-scrolling: auto;
+    user-select: none;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+    /* https://davidwalsh.name/font-smoothing */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+}
+
+h3
+{
+    color: white;
+    padding: 4px;
+    margin: 2px;
+    background-color: rgba(0, 0, 15, .5);
+}
+
+a { text-decoration: none; }
+
+div.wrapper
+{
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    transform-origin: 0% 100%;
+    transform: scale(0.25);
+}
+
+/* Color animation from https://www.tjvantoll.com/2012/02/20/css3-color-animations/ */
+@-webkit-keyframes color_change {
+  from { background-color: rgba(0, 0, 0, 0); }
+  to { background-color: red; }
+}
+@-moz-keyframes color_change {
+  from { background-color: rgba(0, 0, 0, 0); }
+  to { background-color: red; }
+}
+@-ms-keyframes color_change {
+  from { background-color: rgba(0, 0, 0, 0); }
+  to { background-color: red; }
+}
+@-o-keyframes color_change {
+  from { background-color: rgba(0, 0, 0, 0); }
+  to { background-color: red; }
+}
+@keyframes color_change {
+  from { background-color:rgba(0, 0, 0, 0); }
+  to { background-color: red; }
+}
+
+/*** CSS taken from https://medium.com/@jamesfuthey/simulating-the-creation-of-website-thumbnail-screenshots-using-iframes-7145269891db#.7v7fshos5 ***/
+.thumbnail
+{
+    position: relative;
+    -ms-zoom: 0.25;
+    -moz-transform: scale(0.25);
+    -moz-transform-origin: 0 0;
+    -o-transform: scale(0.25);
+    -o-transform-origin: 0 0;
+    -webkit-transform: scale(0.25);
+    -webkit-transform-origin: 0 0;
+}
+
+
+.thumbnail:after
+{
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: -1024px; /*** This is a deviation from the above mentioned
+    jamesfuthey blog. Otherwise touches would go through on iPad. ***/
+}
+
+.thumbnail iframe
+{
+    width: 1024px;
+    height: 624px;
+     -webkit-animation-delay: 3s; /* Safari 4.0 - 8.0 */
+    animation-delay: 3s;
+    -webkit-animation: color_change 1s infinite alternate;
+    -moz-animation: color_change 1s infinite alternate;
+    -ms-animation: color_change 1s infinite alternate;
+    -o-animation: color_change 1s infinite alternate;
+    animation: color_change 1s infinite alternate;
+}
+
+.thumbnail-container
+{
+    width: calc(1024px * 0.25);
+    height: calc(624px * 0.25);
+    display: inline-block;
+    overflow: hidden;
+    position: relative;
+    box-shadow: 2px 2px 10px #000;
+    color: #DDD;
+}
+
+div.preview
+{
+    display: inline-block;
+    margin: 22px;
+    padding: 0px;
+    color: #333;
+    font-size: 12pt;
+    text-align: center;
+    width: 256px;
+    height: 196px;
+}
+
+div.title
+{
+    padding-top: 8px;
+    width: 256px;
+    height: 20px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.container
+{
+    margin: 0px;
+    padding: 0px;
+    border: 2pt #000;
+    min-height: 100%;
+    min-width: 100%;
+    display: -webkit-flex;
+    -webkit-align-items: flex-end;
+    align-items: flex-end;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-align-content: flex-end;
+    align-content: flex-end;
+}
+
+iframe {
+   pointer-events: none;
+}
+
+/** See https://github.com/electron/electron/issues/4420 */
+::selection {
+    background: transparent;
+}
+