diff options
| -rw-r--r-- | README.md | 6 | ||||
| -rw-r--r-- | css/main.css | 13 | ||||
| -rw-r--r-- | js/slideshow.js | 8 |
3 files changed, 22 insertions, 5 deletions
@@ -3,3 +3,9 @@ Requires a browser with support for CSS 3D transforms, such as Chrome or Safari. Curious about how this looks in action? [Check out the demo page.](http://hakim.se/experiments/css/slideshow/). + +# License + +MIT licensed + +Copyright (C) 2011 Hakim El Hattab, http://hakim.se
\ No newline at end of file diff --git a/css/main.css b/css/main.css index 4c0cb74..2dfd808 100644 --- a/css/main.css +++ b/css/main.css @@ -55,12 +55,17 @@ html, body { *********************************************/ h1, h2, h3, h4 { margin: 0 0 20px 0; + + color: #222; + font-family: 'League Gothic', Arial, Helvetica, sans-serif; line-height: 0.9em; letter-spacing: 0.02em; + text-transform: uppercase; - color: #222; - text-shadow: 0px 0px 2px #fff, 0px 0px 4px #bbb; + + text-shadow: 0px 1px 0px #eee, + 0px 0px 4px #bbb; } h1 { font-size: 136px; } @@ -73,7 +78,8 @@ h2.inverted, h3.inverted, h4.inverted { color: #fff; - text-shadow: 0px 0px 2px #fff, 0px 0px 2px #888; + text-shadow: 0px 0px 1px #fff, + 0px 0px 1px #888; } @@ -185,6 +191,7 @@ a:not(.image) { background: #2fa794; text-shadow: none; border: none; + border-radius: 2px; } img { diff --git a/js/slideshow.js b/js/slideshow.js index 8165a40..bd6ae28 100644 --- a/js/slideshow.js +++ b/js/slideshow.js @@ -104,9 +104,13 @@ var Slideshow = (function(){ * @param {Object} event */ function onDocumentTouchStart( event ) { - // We're only interested in one point taps - if (event.touches.length == 1) { + if (event.touches.length === 1) { + // Never prevent taps on anchors and images + if( event.target.tagName.toLowerCase() === 'a' || event.target.tagName.toLowerCase() === 'img' ) { + return; + } + event.preventDefault(); var point = { |