diff options
| -rw-r--r-- | bookmarklet/ffffallback.css | 378 | ||||
| -rwxr-xr-x | site/Thumbs.db | bin | 0 -> 14336 bytes | |||
| -rw-r--r-- | site/css/screen.css | 332 | ||||
| -rw-r--r-- | site/images/bang.png | bin | 0 -> 397 bytes | |||
| -rw-r--r-- | site/images/bookmarklet-button.png | bin | 0 -> 1999 bytes | |||
| -rw-r--r-- | site/images/brand.png | bin | 0 -> 2782 bytes | |||
| -rw-r--r-- | site/images/bravenewworld.png | bin | 0 -> 2667 bytes | |||
| -rw-r--r-- | site/index.html | 118 | ||||
| -rw-r--r-- | site/js/css_browser_selector.js | 8 |
9 files changed, 647 insertions, 189 deletions
diff --git a/bookmarklet/ffffallback.css b/bookmarklet/ffffallback.css index 48c161e..476aa12 100644 --- a/bookmarklet/ffffallback.css +++ b/bookmarklet/ffffallback.css @@ -3,58 +3,58 @@ } #ffffallback-content-container { - opacity:0.5; - position: absolute; - left: 0; - top: 0; - width: 100%; - z-index: 999999; + opacity:0.5!important; + position: absolute!important; + left: 0!important; + top: 0!important; + width: 100%!important; + z-index: 999999!important; } #ffffallback-controller .ffffallback-more-values { - margin-left: 0px; - margin-top:0px; - width: 160px; + margin-left: 0px!important; + margin-top:0px!important; + width: 160px!important; } #ffffallback-controller .collapsed .ffffallback-more-values { - display: none; + display: none!important; } #ffffallback-controller .expanded .ffffallback-disclosure span{ - -moz-transform: rotate(180deg); - -webkit-transform:rotate(180deg); - text-shadow:rgba(0,0,0,0.8) 0 1px 0; - position:relative; - top:6px; + -moz-transform: rotate(180deg)!important; + -webkit-transform:rotate(180deg)!important; + text-shadow:rgba(0,0,0,0.8) 0 1px 0!important; + position:relative!important; + top:6px!important; } #ffffallback-controller .ffffallback-disclosure { - display:inline-block; - margin-left:2px; - height:27px; - width:20px; - position:relative; - top:-7px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; + display:inline-block!important; + margin-left:2px!important; + height:27px!important; + width:20px!important; + position:relative!important; + top:-7px!important; + -webkit-border-radius: 3px!important; + -moz-border-radius: 3px!important; + border-radius: 3px!important; } #ffffallback-controller .ffffallback-disclosure:hover { - background:#111; + background:#111!important; } #ffffallback-controller .ffffallback-disclosure span{ - color: #777; - display: inline-block; - font-size:12px; - position:relative; - left:4px; - top:7px; - text-decoration: none; - text-shadow:rgba(0,0,0,0.8) 0 -1px 0; - -moz-transition-property: -moz-transform; - -moz-transition-duration: 0.125s; - -webkit-transition-property: -webkit-transform; - -webkit-transition-duration: 0.25s; + color: #777!important; + display: inline-block!important; + font-size:12px!important; + position:relative!important; + left:4px!important; + top:7px!important; + text-decoration: none!important; + text-shadow:rgba(0,0,0,0.8) 0 -1px 0!important; + -moz-transition-property: -moz-transform!important; + -moz-transition-duration: 0.125s!important; + -webkit-transition-property: -webkit-transform!important; + -webkit-transition-duration: 0.25s!important; } #ffffallback-content-container * { @@ -62,47 +62,47 @@ } body.ffffallback-hide-fallback #ffffallback-content-container { - display: none; + display: none!important; } body.ffffallback-hide-original > * { - display: none; + display: none!important; } body.ffffallback-hide-original #ffffallback-content-container { - display: block; - opacity: 1; + display: block!important; + opacity: 1!important; } /* webkit scrollbar stuff from http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/ */ #ffffallback-controller { - display: block; - position: fixed; - right: 0px; - top: 0px; - background:rgba(0,0,0,0.8); - -webkit-box-shadow: rgba(0,0,0,0.5) 0 0 3px; - color:rgba(255,255,255,0.9); + display: block!important; + position: fixed!important; + right: 0px!important; + top: 0px!important; + background:rgba(0,0,0,0.8)!important; + -webkit-box-shadow: rgba(0,0,0,0.5) 0 0 3px!important; + color:rgba(255,255,255,0.9)!important; font: 13px/1em normal helvetica, arial, sans-serif !important; - width: 220px; - height: 100%; + width: 220px!important; + height: 100%!important; text-align:left !important; - z-index: 9999999; + z-index: 9999999!important; } #ffffallback-controller * { - font: inherit; - margin: 0; + font: inherit!important; + margin: 0!important; } #ffffallback-controller h1 { - color:#313131; - background-color: #cecece; - background-image: -moz-linear-gradient(0deg, #cecece, #b3b3b3); - background-image: -webkit-gradient(linear, 0 top, 0 bottom, from( #cecece ), to( #b3b3b3 )); - border-bottom:1px solid rgba(0,0,0,0.2); - text-shadow:rgba(255,255,255,0.6) 0 1px 0; - font-weight: bold; + color:#313131!important; + background-color: #cecece!important; + background-image: -moz-linear-gradient(0deg, #cecece, #b3b3b3)!important; + background-image: -webkit-gradient(linear, 0 top, 0 bottom, from( #cecece ), to( #b3b3b3 ))!important; + border-bottom:1px solid rgba(0,0,0,0.2)!important; + text-shadow:rgba(255,255,255,0.6) 0 1px 0!important; + font-weight: bold!important; margin:0 !important; padding: 0.5em 1em !important; } @@ -116,194 +116,194 @@ body.ffffallback-hide-original #ffffallback-content-container { text-indent:-99999em !important; } #ffffallback-controller ul { - padding:0; + padding:0!important; } #ffffallback-controller #fb-font { - margin:0 0 0 1em; - padding:2px; + margin:0 0 0 1em!important; + padding:2px!important; } #ffffallback-controller li { - list-style-type:disc; - margin:0 0 10px 10px; + list-style-type:disc!important; + margin:0 0 10px 10px!important; } #ffffallback-radios { - background:#B3B3B3; - border-top:1px solid rgba(255,255,255,0.2); - margin:0px; - padding:4px 3px 4px 4px; - clear:both; - overflow:hidden; + background:#B3B3B3!important; + border-top:1px solid rgba(255,255,255,0.2)!important; + margin:0px!important; + padding:4px 3px 4px 4px!important; + clear:both!important; + overflow:hidden!important; } #ffffallback-radios label.radio-checked { background:#7C7C7C !important; - background-image: none; + background-image: none!important; color:#fff !important; text-shadow:rgba(0,0,0,0.5) 0 1px 0 !important; - -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,0.65); - -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.65); - -o-box-shadow: inset 0 1px 5px rgba(0,0,0,0.65); - box-shadow: inset 0 1px 5px rgba(0,0,0,0.65); + -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,0.65)!important; + -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.65)!important; + -o-box-shadow: inset 0 1px 5px rgba(0,0,0,0.65)!important; + box-shadow: inset 0 1px 5px rgba(0,0,0,0.65)!important; } #ffffallback-radios label { - background-image: -moz-linear-gradient(-90deg, #fefefe , #b7b7b7 ); - background-image: -webkit-gradient(linear, 0 top, 0 bottom, from( #fefefe ), to( #b7b7b7 )); - background-image: linear-gradient(top, #fefefe, #b7b7b7); - border: 1px solid #555; - border-width:1px 0 1px 1px; - color:#313131; - float:left; - margin:0; - padding:4px 0px; - text-align:center; - text-shadow:rgba(255,255,255,0.4) 0 1px 0; - width:68px; - -webkit-border-top-left-radius: 3px; - -webkit-border-bottom-left-radius:3px; - -moz-border-radius-topleft: 3px; - -moz-border-radius-bottomleft: 3px; - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - -webkit-box-shadow: rgba(225, 225, 225, 0.4) 0px 1px 0px; + background-image: -moz-linear-gradient(-90deg, #fefefe , #b7b7b7 )!important; + background-image: -webkit-gradient(linear, 0 top, 0 bottom, from( #fefefe ), to( #b7b7b7 ))!important; + background-image: linear-gradient(top, #fefefe, #b7b7b7)!important; + border: 1px solid #555!important; + border-width:1px 0 1px 1px!important; + color:#313131!important; + float:left!important; + margin:0!important; + padding:4px 0px!important; + text-align:center!important; + text-shadow:rgba(255,255,255,0.4) 0 1px 0!important; + width:68px!important; + -webkit-border-top-left-radius: 3px!important; + -webkit-border-bottom-left-radius:3px!important; + -moz-border-radius-topleft: 3px!important; + -moz-border-radius-bottomleft: 3px!important; + border-top-left-radius: 3px!important; + border-bottom-left-radius: 3px!important; + -webkit-box-shadow: rgba(225, 225, 225, 0.4) 0px 1px 0px!important; } #ffffallback-radios label+label { - border: 1px solid #555; - border-width: 1px; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; + border: 1px solid #555!important; + border-width: 1px!important; + -webkit-border-radius: 0!important; + -moz-border-radius: 0!important; + border-radius: 0!important; } #ffffallback-radios label+label+label { - border-width:1px 1px 1px 0px; - -webkit-border-top-right-radius: 3px; - -webkit-border-bottom-right-radius: 3px; - -moz-border-radius-topright: 3px; - -moz-border-radius-bottomright: 3px; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; + border-width:1px 1px 1px 0px!important; + -webkit-border-top-right-radius: 3px!important; + -webkit-border-bottom-right-radius: 3px!important; + -moz-border-radius-topright: 3px!important; + -moz-border-radius-bottomright: 3px!important; + border-top-right-radius: 3px!important; + border-bottom-right-radius: 3px!important; } #ffffallback-radios label:active, #ffffallback-update:active { - background-image: -moz-linear-gradient(-90deg, #b9b9b9 , #969696 ); - background-image: -webkit-gradient(linear, 0 top, 0 bottom, from( #b9b9b9 ), to( #969696 )); - background-image: linear-gradient(top, #b9b9b9, #969696); - -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,0.75); - -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.75); - -o-box-shadow: inset 0 1px 5px rgba(0,0,0,0.75); - box-shadow: inset 0 1px 5px rgba(0,0,0,0.75); + background-image: -moz-linear-gradient(-90deg, #b9b9b9 , #969696 )!important; + background-image: -webkit-gradient(linear, 0 top, 0 bottom, from( #b9b9b9 ), to( #969696 ))!important; + background-image: linear-gradient(top, #b9b9b9, #969696)!important; + -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,0.75)!important; + -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.75)!important; + -o-box-shadow: inset 0 1px 5px rgba(0,0,0,0.75)!important; + box-shadow: inset 0 1px 5px rgba(0,0,0,0.75)!important; } #ffffallback-radios label input { - display:none; + display:none!important; } #ffffallback-instructions { - background:#B3B3B3; + background:#B3B3B3!important; - font-weight:bold; - padding:0.5em 1em; + font-weight:bold!important; + padding:0.5em 1em!important; } #ffffallback-fonts { - list-style: none; - margin-top: 0; + list-style: none!important; + margin-top: 0!important; height: 100% !important; - max-height: 500px; - overflow-y: auto; - -moz-box-shadow: inset 0 2px 5px black; - -webkit-box-shadow: inset 0 2px 5px black; - -o-box-shadow: inset 0 2px 5px black; - box-shadow: inset 0 2px 5px black; + max-height: 500px!important; + overflow-y: auto!important; + -moz-box-shadow: inset 0 2px 5px black!important; + -webkit-box-shadow: inset 0 2px 5px black!important; + -o-box-shadow: inset 0 2px 5px black!important; + box-shadow: inset 0 2px 5px black!important; } #ffffallback-controller ::-webkit-scrollbar { - width: 10px; - height: 10px; + width: 10px!important; + height: 10px!important; } #ffffallback-controller ::-webkit-scrollbar-track-piece { - background-color: #3b3b3b; - -webkit-border-radius: 6px; + background-color: #3b3b3b!important; + -webkit-border-radius: 6px!important; } #ffffallback-controller ::-webkit-scrollbar-thumb:vertical { - height: 50px; - background-color: #666; - -webkit-border-radius: 6px; + height: 50px!important; + background-color: #666!important; + -webkit-border-radius: 6px!important; } #ffffallback-controller ::-webkit-scrollbar-button:start:decrement, #ffffallback-controller ::-webkit-scrollbar-button:end:increment { - height: 2px; - display: block; - background-color: transparent; + height: 2px!important; + display: block!important; + background-color: transparent!important; } #ffffallback-fonts li { - border-bottom:1px solid #222; - border-top:1px solid #444; - list-style: none; - margin: 0; - padding:0.5em 0 0.5em 1em; + border-bottom:1px solid #222!important; + border-top:1px solid #444!important; + list-style: none!important; + margin: 0!important; + padding:0.5em 0 0.5em 1em!important; } #ffffallback-fonts li b { - display: block; - font-size:14px; - text-shadow: #1a1a1a 0px 1px 0px; + display: block!important; + font-size:14px!important; + text-shadow: #1a1a1a 0px 1px 0px!important; } #ffffallback-fonts li b.global { - font-style:italic; - margin-top:5px; - position:relative; + font-style:italic!important; + margin-top:5px!important; + position:relative!important; } #ffffallback-fonts li b.global i { - background: #333; - color:#aaa; - font-size: 11px; - font-style: normal; - font-weight: bold; - left: 80px; - padding: 0px 5px; - position: absolute; - text-transform: uppercase; - top: -18px; + background: #333!important; + color:#aaa!important; + font-size: 11px!important; + font-style: normal!important; + font-weight: bold!important; + left: 80px!important; + padding: 0px 5px!important; + position: absolute!important; + text-transform: uppercase!important; + top: -18px!important; } #ffffallback-fonts li input, #ffffallback-fonts li textarea { - color: #f2f2f2; - display: inline-block; - -webkit-box-shadow: rgb(68, 68, 68) 0px 1px 0px; - background: rgb(102, 102, 102); - border: 1px solid black; - border-radius:4px; - font:normal 13px/1.125 Helvetica, sans-serif; - padding: 5px; - width:160px; - margin-top:10px; + color: #f2f2f2!important; + display: inline-block!important; + -webkit-box-shadow: rgb(68, 68, 68) 0px 1px 0px!important; + background: rgb(102, 102, 102)!important; + border: 1px solid black!important; + border-radius:4px!important; + font:normal 13px/1.125 Helvetica, sans-serif!important; + padding: 5px!important; + width:160px!important; + margin-top:10px!important; } input[type=text]::-webkit-input-placeholder { - color:#a9a9a9; + color:#a9a9a9!important; } #ffffallback-update { - padding:4px 9px; - border-radius: 5px; - border:0; - font: bold 12px/1.5 helvetica; - color:#444; - background-image: -moz-linear-gradient(-90deg, #fefefe , #b7b7b7 ); - background-image: -webkit-gradient(linear, 0 top, 0 bottom, from( #fefefe ), to( #b7b7b7 )); - background-image: linear-gradient(top, #fefefe, #b7b7b7); - border: 1px solid #555; border: 1px solid #3D3D3D; - color:#313131; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - text-shadow:; - width:64px; - -webkit-box-shadow: rgba(225, 225, 225, 0.4) 0px 1px 0px; - text-shadow:#fff 0 1px 0; - text-decoration:none; - position: relative; - right: -24px; - cursor:pointer; + padding:4px 9px!important; + border-radius: 5px!important; + border:0!important; + font: bold 12px/1.5 helvetica!important; + color:#444!important; + background-image: -moz-linear-gradient(-90deg, #fefefe , #b7b7b7 )!important; + background-image: -webkit-gradient(linear, 0 top, 0 bottom, from( #fefefe ), to( #b7b7b7 ))!important; + background-image: linear-gradient(top, #fefefe, #b7b7b7)!important; + border: 1px solid #555!important; border: 1px solid #3D3D3D!important; + color:#313131!important; + -webkit-border-radius: 4px!important; + -moz-border-radius: 4px!important; + border-radius: 4px!important; + text-shadow:!important; + width:64px!important; + -webkit-box-shadow: rgba(225, 225, 225, 0.4) 0px 1px 0px!important; + text-shadow:#fff 0 1px 0!important; + text-decoration:none!important; + position: relative!important; + right: -24px!important; + cursor:pointer!important; } diff --git a/site/Thumbs.db b/site/Thumbs.db Binary files differnew file mode 100755 index 0000000..2c97afd --- /dev/null +++ b/site/Thumbs.db diff --git a/site/css/screen.css b/site/css/screen.css new file mode 100644 index 0000000..b094c11 --- /dev/null +++ b/site/css/screen.css @@ -0,0 +1,332 @@ +/* HTML5 ✰ Boilerplate—html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) */ + +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, +del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, +b, i, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin:0; + padding:0; + border:0; + outline:0; + font-size:100%; + vertical-align:baseline; + background:transparent; +} +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display:block; +} +article:after,aside:after,div:after,form:after,header:after,hgroup:after,nav:after,section:after,ul:after,ol:after{ + clear:both; + content:"."; + display:block; + height:0; + visibility:hidden; +} +nav ul { list-style:none; } +blockquote, q { quotes:none; } +blockquote:before, blockquote:after, +q:before, q:after { content:''; content:none; } +a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } +ins { background-color:#ff9; color:#000; text-decoration:none; } +mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } +del { text-decoration: line-through; } +abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } +table { border-collapse:collapse; border-spacing:0; } +hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } +input, select { vertical-align:middle; } +/* END RESET CSS */ + +/* BASIC STYLING */ +body { font:1em/1.5 sans-serif; } +select, input, textarea, button { font:99% sans-serif; } +pre, code, kbd, samp { font-family: monospace, sans-serif; } +h1,h2,h3,h4,h5,h6 { font-weight: bold; } +h1 {font-size:3em;} +h2 {font-size:2.25em;} +h3 {font-size:1.3125em;} +h4 {font-size:1em} +h5 {font-size:0.875em;;} +h6 {font-size:0.75em;;} +html { overflow-y: scroll; } +a:hover, a:active { outline: none; } +a, a:active, a:visited { color: #8fbbcc; text-decoration:none;position:relative;} +a:hover { + color: #64c2e8; + -moz-transition: all 0.25s ease-out; + -o-transition: all 0.25s ease-out; + -webkit-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; +} +p a:hover { + color: #64c2e8; + text-shadow:#4c4a47 1px 1px 0, #4c4a47 2px 2px 0, #4c4a47 3px 3px 0; + top:-3px; + left:-3px; + -moz-transition: all 0.25s ease-out; + -o-transition: all 0.25s ease-out; + -webkit-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; +} +.ie a:hover { + left:0; + top:0; + text-decoration:underline; +} +ul, ol { margin-left: 2em; } +ol { list-style-type: decimal;} +nav ul, nav li { margin: 0; list-style-type:none;} +small { font-size: 85%; } +strong, th { font-weight: bold; } +td, td img { vertical-align: top; } +sub, sup { font-size: 75%; line-height: 0; position: relative; } +sup { top: -0.5em; } +sub { bottom: -0.25em; } +pre { + padding: 15px; + white-space: pre; + white-space: pre-wrap; + white-space: pre-line; + word-wrap: break-word; +} +textarea { overflow: auto; } +.ie6 legend, .ie7 legend { margin-left: -7px; } +input[type="radio"] { vertical-align: text-bottom; } +input[type="checkbox"] { vertical-align: bottom; } +.ie7 input[type="checkbox"] { vertical-align: baseline; } +.ie6 input { vertical-align: text-bottom; } +label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } +button, input, select, textarea { margin: 0; } +/* colors for form validity */ +input:valid, textarea:valid { } +input:invalid, textarea:invalid { + border-radius: 1px; + -moz-box-shadow: 0px 0px 5px red; + -webkit-box-shadow: 0px 0px 5px red; + box-shadow: 0px 0px 5px red; +} + +/*::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } +::selection { background:#FF5E99; color:#fff; text-shadow: none; }*/ +a:link { -webkit-tap-highlight-color: #FF5E99; } +button { width: auto; overflow: visible; } +.ie7 img { -ms-interpolation-mode: bicubic; } +.clear {clear:both;display:block;} +.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } +.clearfix:after { clear: both; } +.clearfix { zoom: 1; } + +/* Primary Styles | Author: Josh Brewer (twitter.com/jbrewer) */ +html {height:100%;} +body { + background:#2d2a27; + color:#cabfac; + color:rgba(202,191,171,1); + font: normal 1em/1.5 'Proxima Nova', Arial, Helvetica, sans-serif; + height:100%; + width:100%; +} +span.horizon { + border-top:1px solid #423E39; + height:1px; + margin-left:0; + + position:absolute; +} +span.rising {width:100%; margin-top:10.5em;} +span.setting {width:55em; margin-top:2.5em;margin-left:-16em;} +#main { + border-left: 1px solid #423e39; + margin:0 0 0 4em; + padding:3em 0 0 7em; + position:relative; +} + +.content { + max-width:32em; + position:relative; +} +hgroup { + background:url(../images/brand.png) no-repeat 0 0; + display: block; + direction: ltr; + margin:0 0 5em -4.5625em; + overflow: hidden; + text-align: left; + text-indent: -999em; + height:80px; + width:409px; +} + +/* Really wish H&FJ webfonts were available… but they're not. Image replacement it is. +.brave { + background: #2d2a27; + color:#fef1d8; + font-size:1.05em; + left:30em; + line-height:1; + position:absolute; + text-transform:uppercase; + top:3.85em; + height: 170px; + width: 170px; + -webkit-border-radius: 170px; + -moz-border-radius: 170px; + border-radius: 170px; + background-clip: padding-box; + z-index:100; +} +.brave:before { + content: ""; + background:#9b3d17; + position:absolute; + text-transform:uppercase; + left:10px; + top: 10px; + height:150px; + width: 150px; + -webkit-border-radius: 150px; + -moz-border-radius: 150px; + border-radius: 150px; + background-clip: padding-box; + z-index:-1; +}*/ +.brave { + background: #2d2a27 url(../images/bravenewworld.png) no-repeat 0 0; + color:#fef1d8; + font-size:1em; + left:27.75em; + line-height:1; + position:absolute; + top:1.5em; + height: 176px; + width: 176px; + z-index:100; +} +.brave i { + display:block; + text-indent:-9999em; +} + +hgroup + p, hgroup + p + p { + font-size: 1.3125em; + line-height:1.1429; + margin-bottom:1.5em; + max-width:25em; +} + +.bkmrklt { + font-size:1.3125em; + margin-bottom: 3em; + position:relative; +} +.bkmrklt a { + background:url(../images/bookmarklet-button.png) no-repeat 0 0; + border:0; + direction: ltr; + display:block; + overflow: hidden; + text-indent:-9999em; + text-align: left; + height:57px; + width:215px; +} +.bkmrklt a:hover { + border-bottom:0; +} +.bkmrklt span { + color:#eebe5f; + font-weight:200; + left: 11em; + letter-spacing:4px; + position: absolute; + text-transform:uppercase; + top: 0.95em; +} + +h3 { + margin:0 0 1em; +} +#main aside { + color:rgba(202,191,171,0.5); + font-size: 0.75em; + line-height: 1.7; + padding-top: .4em; + position: absolute; + right: -21.5em; + width: 16em; +} +#main ol { + margin:0 0 1.5em; +} +#main ol li { + margin-bottom:1em; +} + +#main ol + p { + background:url(../images/bang.png) no-repeat 3px 2px; + font-weight:bold; + padding-left:2em; + margin-left:-2em; +} +.ie #main ol.steps { + display:none; +} + + +footer { + margin:5em 0; +} +footer p {margin-bottom:2.5em;} +footer p a[href="http://twitter.com/jbrewer"], footer p a[href="http://twitter.com/shinypb"] { + border-bottom:0; + color:rgba(143,187,204,0.4); +} +footer p a span {color:rgba(143,187,204,1)} +footer .twitter-share-button { + position:relative; + top:5px; +} + + + + +/* media queries for responsive design */ + +@media all and (orientation:portrait) { + +} + +@media all and (orientation:landscape) { + +} + +/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) + consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ +@media screen and (max-device-width: 480px) { + +} + +/* print styles */ +@media print { + * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; + -ms-filter: none !important; } + a, a:visited { color: #444 !important; text-decoration: underline; } + a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { content: " (" attr(title) ")"; } + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + thead { display: table-header-group; } + tr, img { page-break-inside: avoid; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3{ page-break-after: avoid; } +} + diff --git a/site/images/bang.png b/site/images/bang.png Binary files differnew file mode 100644 index 0000000..5c26a96 --- /dev/null +++ b/site/images/bang.png diff --git a/site/images/bookmarklet-button.png b/site/images/bookmarklet-button.png Binary files differnew file mode 100644 index 0000000..917c3c5 --- /dev/null +++ b/site/images/bookmarklet-button.png diff --git a/site/images/brand.png b/site/images/brand.png Binary files differnew file mode 100644 index 0000000..02f32f6 --- /dev/null +++ b/site/images/brand.png diff --git a/site/images/bravenewworld.png b/site/images/bravenewworld.png Binary files differnew file mode 100644 index 0000000..07b9d79 --- /dev/null +++ b/site/images/bravenewworld.png diff --git a/site/index.html b/site/index.html new file mode 100644 index 0000000..7ab006b --- /dev/null +++ b/site/index.html @@ -0,0 +1,118 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <title>FFFFALLBACK - A simple tool for bulletproof web typography.</title> + <meta name="description" content="Bulletproof web typography, bookmarklet, web fonts"> + <meta name="author" content="Josh Brewer"> + + <!-- Mobile viewport optimized: j.mp/bplateviewport --> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> + <link rel="shortcut icon" href="/favicon.ico"> + <link rel="apple-touch-icon" href="/apple-touch-icon.png"> + + <!-- CSS : implied media="all" --> + <link rel="stylesheet" href="css/screen.css"> + + <script type="text/javascript" src="http://use.typekit.com/rbn4gdu.js"></script> + <script type="text/javascript">try{Typekit.load();}catch(e){}</script> + <!--[if lt IE 9]> + <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> + <![endif]--> +</head> +<body> + <span class="horizon rising"></span> + <div id="main"> + <div class="content"> + <hgroup class="ir"> + <h1>FFFFALLBACK</h1> + <h2>A simple tool for bulletproof web typography.</h2> + </hgroup> + + <p><strong><span class="brave"><i class="ir">It's a brave new world.</i></span> Web fonts are here, sparking an exciting new era in web design. While this new-found freedom can be intoxicating, the importance of dependable web typography can not be overstated.</strong></p> + <p>So in the spirit of bulletproof web design, we give you…</p> + + <div class="bkmrklt"> + <a href="#">ffffallback</a> + <span>the bookmarklet!</span> + </div> + + + <h3>Okay, so how do I use this thing?</h3> + <!--[if IE]> + <ol> + <li>Well… you don't. We noticed you are using Internet Explorer. Unfortunately, this tool doesn't work in IE at this time.</li> + <li>If you have Firefox or Chrome installed, please visit this page in either of those browsers and follow the instructions. </li> + <li>If you don't have either of those browsers installed, we strongly encourage you to download <a href="http://www.google.com/chrome/">Chrome</a> or <a href="http://firefox.com">Firefox</a> now!</li> + </ol> + <![endif]--> + <aside> + <p>Small caveat: this bookmarklet only works on webkit browsers (Chrome & Safari) or Firefox. We <strike>are</strike> might get it working for IE and Opera if time permits.</p> + </aside> + <ol class="steps"> + <li>Drag the bookmarklet to your browser toolbar.</li> + <li>Go to the page you want to test and click the bookmarklet to get started.</li> + <li>The bookmarklet will scan the CSS of the page in order to identify existing web fonts. Then, using magical unicorns and javascript rainbows, FFFFALLBACK clones the page and provides a tool where you can test and analyze different fallback font choices. + <span class="note">You can also add an input in order to change font-size, line-height, color, etc.</span> + </li> + <li>Bulletproof your font-stacks and rejoice!</li> + </ol> + + <p>For more background on how this came to be and why it's important, read <a href="http://blog.typekit.com/2011/03/24/type-study-choosing-fallback-fonts/">Type study: Choosing fallback fonts</a>.</p> + <span class="horizon setting"></span> + <footer> + <p><span class="clear"><a href="mailto:feedback@fallback.com">Questions, comments & feedback</a><span> · </span><a href="https://github.com/jbrewer/ffffallback">Fork it on Github</a></span> + Handcrafted by <a href="http://twitter.com/jbrewer">@<span>jbrewer</span></a> and <a href="http://twitter.com/shinypb">@<span>shinypb</span></a>, with love, in San Francisco.</p> + <p><small>Extra big high-fives to the kind souls whose encouragement brought this to life: <a href="http://twitter.com/TrentWalton">Trent Walton</a>, <a href="http://twitter.com/TimBrown">Tim Brown</a>, <a href="http://twitter.com/Kyle">Kyle Sollenberger</a>, <a href="http://twitter.com/yarcom">Yaron Schoen</a> and <a href="http://twitter.com/aworkinglibrary">Mandy Brown</a>.</small></p> + <p class="tweet"> + <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ffffallback.com" data-text="I'm using @ffffallback to help bulletproof my web typography. Check it out!" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> + <small>Tell the world know about FFFFALLBACK!</small> + </p> + </footer> + </div> + </div> + <script src="js/css_browser_selector.js" ></script> + <script> + var myURL = window.location.toString(); + var baseURL; + if(myURL.match(/\.html$/)) { + var urlChunks = myURL.split('/'); + baseURL = urlChunks.slice(0, urlChunks.length - 1).join('/') + } else { + baseURL = myURL; + } + if(baseURL.substring(myURL.length - 1) !== '/') { + baseURL += '/'; + } + var jsURL = baseURL + 'bookmarklet/ffffallback.js?r=' + Math.random(); + var cssURL = baseURL + 'bookmarklet/ffffallback.css?r=' + Math.random(); + var bookmarkletSource = 'javascript:' + +"(function() {\ + var scriptTag = document.createElement('script');\ + scriptTag.setAttribute('src', '" + jsURL + "');\ + var linkTag = document.createElement('link');\ + linkTag.setAttribute('href', '" + cssURL + "');\ + linkTag.setAttribute('rel','stylesheet');\ + document.body.appendChild(scriptTag);\ + document.body.appendChild(linkTag);\ +})();".replace(/\n/g, ' '); + + document.getElementById('bookmarklet').setAttribute('href', bookmarkletSource); + </script> + <script type="text/javascript"> + + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-109790-10']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</body> +</html> diff --git a/site/js/css_browser_selector.js b/site/js/css_browser_selector.js new file mode 100644 index 0000000..0668aa7 --- /dev/null +++ b/site/js/css_browser_selector.js @@ -0,0 +1,8 @@ +/* +CSS Browser Selector v0.4.0 (Nov 02, 2010) +Rafael Lima (http://rafael.adm.br) +http://rafael.adm.br/css_browser_selector +License: http://creativecommons.org/licenses/by/2.5/ +Contributors: http://rafael.adm.br/css_browser_selector#contributors +*/ +function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g='gecko',w='webkit',s='safari',o='opera',m='mobile',h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3.6')?g+' ff3 ff3_6':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('blackberry')?m+' blackberry':is('android')?m+' android':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?m+' j2me':is('iphone')?m+' iphone':is('ipod')?m+' ipod':is('ipad')?m+' ipad':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win'+(is('windows nt 6.0')?' vista':''):is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent); |
