diff --git a/css/doctest.css b/css/doctest.css index db2f0eb..eb904d3 100644 --- a/css/doctest.css +++ b/css/doctest.css @@ -1,12 +1,11 @@ -html -{ - padding: 0px; - font-size: 16px; - background: white; - font-family: Arial,sans-serif; - color: #000; - max-width: 932px; - margin:0 auto; +html { + padding: 0; + font-size: 16px; + background: white; + font-family: Arial, sans-serif; + color: #000; + max-width: 932px; + margin: 0 auto; } .grayBorder { @@ -24,10 +23,10 @@ html } .unselectable { - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; } body { @@ -44,28 +43,27 @@ canvas { margin-left: 8px; } - .intrinsic-container { - position: relative; - height: 0; - overflow: hidden; + position: relative; + height: 0; + overflow: hidden; } /* 16x9 Aspect Ratio */ .intrinsic-container-16x9 { - padding-bottom: 56.25%; + padding-bottom: 56.25%; } /* 4x3 Aspect Ratio */ .intrinsic-container-4x3 { - padding-bottom: 75%; + padding-bottom: 75%; } .intrinsic-container iframe { - position: absolute; - border: 0; - top:0; - left: 0; - width: 100%; - height: 100%; + position: absolute; + border: 0; + top: 0; + left: 0; + width: 100%; + height: 100%; } diff --git a/css/flipeffect.css b/css/flipeffect.css index 200c7df..650b29a 100644 --- a/css/flipeffect.css +++ b/css/flipeffect.css @@ -1,6 +1,5 @@ -.flipWrapper -{ +.flipWrapper { position: absolute; top: 0; left: 0; @@ -16,7 +15,8 @@ width: 100%; height: 100%; - /*** See: https://stackoverflow.com/questions/7439042/css-js-to-prevent-dragging-of-ghost-image ***/ + /*** 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; - background-color:#333; + position: absolute; + background-color: #333; } -.back{ - background-color:#333; - position:absolute; +.back { + background-color: #333; + position: absolute; border: 8px solid white; } @@ -48,8 +48,8 @@ width: 44px; height: 44px; padding: 4px; - right: 0px; - top: 0px; + right: 0; + top: 0; } .infoBtn { @@ -58,8 +58,8 @@ width: 44px; height: 44px; padding: 4px; - right: 0px; - bottom: 0px; + right: 0; + bottom: 0; } .backBtn { @@ -68,6 +68,6 @@ width: 44px; height: 44px; padding: 4px; - right: 0px; - bottom: 0px; + right: 0; + bottom: 0; } diff --git a/css/index.css b/css/index.css index e8f5323..10cff7f 100644 --- a/css/index.css +++ b/css/index.css @@ -1,19 +1,18 @@ html { height: 100%; width: 100%; - margin: 0px; + margin: 0; } -body -{ - margin: 0px; - padding: 0px; +body { + margin: 0; + padding: 0; 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%; @@ -49,29 +46,32 @@ div.wrapper /* 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; } + 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; } + 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; } + 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; } + 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; } + 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,11 +93,14 @@ 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 */ + -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; @@ -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 -{ - margin: 0px; - padding: 0px; +.container { + margin: 0; + padding: 0; 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; } - diff --git a/rollup.config.js b/rollup.config.js index eac5f49..3ca5fdf 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -19,4 +19,4 @@ export default [{ watch: { clearScreen: false } -}]; +}]