Fixed some linter problems.

css/doctest.css

@@ -1,12 +1,11 @@
-html
+html {
-{
+    padding: 0;
-	padding: 0px;
     font-size: 16px;
     background: white;
-	font-family: Arial,sans-serif;
+    font-family: Arial, sans-serif;
     color: #000;
     max-width: 932px;
-    margin:0 auto;
+    margin: 0 auto;
 }
 
 .grayBorder {
@@ -44,7 +43,6 @@ canvas {
     margin-left: 8px;
 }
 
-
 .intrinsic-container {
     position: relative;
     height: 0;
@@ -64,7 +62,7 @@ canvas {
 .intrinsic-container iframe {
     position: absolute;
     border: 0;
-  top:0;
+    top: 0;
     left: 0;
     width: 100%;
     height: 100%;

css/flipeffect.css

@@ -1,6 +1,5 @@
 
-.flipWrapper
+.flipWrapper {
-{
     position: absolute;
     top: 0;
     left: 0;
@@ -17,6 +16,7 @@
     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;
@@ -24,21 +24,21 @@
     user-drag: none; */
 }
 
-.flipFace{
+.flipFace {
     box-shadow: 2px 2px 10px #000;
     visibility: hidden;
 }
 
-.front{
+.front {
     width: 100%;
     height: 100%;
-    position:absolute;
+    position: absolute;
-    background-color:#333;
+    background-color: #333;
 }
 
-.back{
+.back {
-    background-color:#333;
+    background-color: #333;
-    position:absolute;
+    position: absolute;
     border: 8px solid white;
 }
 
@@ -48,8 +48,8 @@
     width: 44px;
     height: 44px;
     padding: 4px;
-    right: 0px;
+    right: 0;
-    top: 0px;
+    top: 0;
 }
 
 .infoBtn {
@@ -58,8 +58,8 @@
     width: 44px;
     height: 44px;
     padding: 4px;
-    right: 0px;
+    right: 0;
-    bottom: 0px;
+    bottom: 0;
 }
 
 .backBtn {
@@ -68,6 +68,6 @@
     width: 44px;
     height: 44px;
     padding: 4px;
-    right: 0px;
+    right: 0;
-    bottom: 0px;
+    bottom: 0;
 }

css/index.css

@@ -1,19 +1,18 @@
 html {
     height: 100%;
     width: 100%;
-    margin: 0px;
+    margin: 0;
 }
 
-body
+body {
-{
+    margin: 0;
-    margin: 0px;
+    padding: 0;
-    padding: 0px;
     width: 100%;
     height: 100%;
     font-family: sans-serif;
     font-size: 22pt;
     -webkit-tap-highlight-color: #ccc;
-    background-color: #DDD;
+    background-color: #ddd;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
@@ -22,24 +21,22 @@ body
     user-select: none;
     -webkit-hyphens: auto;
     hyphens: auto;
+
     /* https://davidwalsh.name/font-smoothing */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-
 }
 
-h3
+h3 {
-{
     color: white;
     padding: 4px;
     margin: 2px;
-    background-color: rgba(0, 0, 15, .5);
+    background-color: rgba(0, 0, 15, 0.5);
 }
 
 a { text-decoration: none; }
 
-div.wrapper
+div.wrapper {
-{
     overflow: hidden;
     width: 100%;
     height: 100%;
@@ -52,26 +49,29 @@ div.wrapper
     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); }
+    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
+.thumbnail {
-{
     position: relative;
     -ms-zoom: 0.25;
     -moz-transform: scale(0.25);
@@ -82,9 +82,7 @@ div.wrapper
     -webkit-transform-origin: 0 0;
 }
 
-
+.thumbnail::after {
-.thumbnail:after
-{
     content: "";
     display: block;
     position: absolute;
@@ -95,8 +93,11 @@ div.wrapper
     jamesfuthey blog. Otherwise touches would go through on iPad. ***/
 }
 
-.thumbnail iframe
+iframe {
-{
+    pointer-events: none;
+}
+
+.thumbnail iframe {
     width: 1024px;
     height: 624px;
     -webkit-animation-delay: 3s; /* Safari 4.0 - 8.0 */
@@ -108,22 +109,20 @@ div.wrapper
     animation: color_change 1s infinite alternate;
 }
 
-.thumbnail-container
+.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;
+    color: #ddd;
 }
 
-div.preview
+div.preview {
-{
     display: inline-block;
     margin: 22px;
-    padding: 0px;
+    padding: 0;
     color: #333;
     font-size: 12pt;
     text-align: center;
@@ -131,8 +130,7 @@ div.preview
     height: 196px;
 }
 
-div.title
+div.title {
-{
     padding-top: 8px;
     width: 256px;
     height: 20px;
@@ -140,10 +138,9 @@ div.title
     overflow: hidden;
 }
 
-.container
+.container {
-{
+    margin: 0;
-    margin: 0px;
+    padding: 0;
-    padding: 0px;
     border: 2pt #000;
     min-height: 100%;
     min-width: 100%;
@@ -156,12 +153,7 @@ div.title
     align-content: flex-end;
 }
 
-iframe {
-   pointer-events: none;
-}
-
 /** See https://github.com/electron/electron/issues/4420 */
 ::selection {
     background: transparent;
 }
-

rollup.config.js

@@ -19,4 +19,4 @@ export default [{
     watch: {
         clearScreen: false
     }
-}];
+}]