diff options
| -rw-r--r-- | site/css/screen2.css | 46 | ||||
| -rw-r--r-- | site/index.html | 30 |
2 files changed, 45 insertions, 31 deletions
diff --git a/site/css/screen2.css b/site/css/screen2.css index 5d59d99..076729e 100644 --- a/site/css/screen2.css +++ b/site/css/screen2.css @@ -141,7 +141,7 @@ span.horizon { } span.rising {width:100%; margin-top:15em;} /*span.setting {width:52em; margin-top:2.5em;margin-left:-20em;}*/ -span.setting {width:100%; position:absolute;bottom:2.5em;} +span.setting {width:100%; margin-top: -20em;} @@ -154,7 +154,7 @@ span.setting {width:100%; position:absolute;bottom:2.5em;} } .content { - width:31em; + width:32em; position:relative; margin: 0 auto; } @@ -251,8 +251,17 @@ hgroup + p { margin-bottom:1.5em; width:24em; } -hgroup + p + p { +hgroup + p strong { + line-height: 1.25; font-size: 1.125em; +} +.wf-active hgroup + p strong { + line-height: 1.25; + font-size: 1.25em; +} + +hgroup + p + p { + font-size: 1.25em; line-height:1.5; margin-bottom:1.5em; } @@ -262,7 +271,9 @@ hgroup + p + p { font-weight:200; text-transform:uppercase; } - +.wf-active .smcap { + font-size:0.7em; +} .bkmrklt { font-size:1.3125em; @@ -333,21 +344,18 @@ hgroup + p + p { text-transform:uppercase; } + h3 { - margin:0 0 1em; + margin:0 0 1.5em; } -#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; +h3 a { + color:rgba(202,191,171,0.75); + font-weight:normal; + position:relative; + top:-4px; } - #main ol { - margin:0 0 1.5em; + margin:0; } #main ol li { margin-bottom:1em; @@ -357,7 +365,7 @@ h3 { font-size:0.8125em; margin-top:1em; } -#main ol + p { +#main aside + p { background:url(../images/bang.png) no-repeat 3px 1px; font-weight:bold; padding-left:2em; @@ -366,6 +374,12 @@ h3 { .ie #main ol.steps { display:none; } +#main aside { + color:rgba(202,191,171,0.5); + font-size: 0.75em; + line-height: 1.7; + margin:0 0 1.5em; +} footer { diff --git a/site/index.html b/site/index.html index 513d0ae..4ec4d5e 100644 --- a/site/index.html +++ b/site/index.html @@ -21,7 +21,7 @@ <![endif]--> </head> <body> - <span class="horizon rising"></span> + <span class="horizon rising"></span> <div id="main"> <div class="content"> <hgroup> @@ -36,9 +36,8 @@ <a href="#" id="bookmarklet" data-drag="Drag me! ➹">ffffallback</a> <span>the bookmarklet!</span> </div> - - - <h3>Okay, so how do I use this thing?</h3> + + <h3>Okay, so how do I use this thing?<a href="#caveat">*</a></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> @@ -46,22 +45,23 @@ <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><strong>Drag</strong> the bookmarklet to your browser toolbar.</li> - <li>Go to the page you want to test and <strong>click</strong> 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 toggle open an input in order to change font-size, line-height, color, etc. Remember to use <strong>!important</strong>, as it’s…well, you know, important.</span> + <li>Go to the page you want to test and <strong>click</strong> the bookmarklet.</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, <span class="smcap">FFFFALLBACK</span> clones the page and provides a tool where you can test and analyze different fallback font choices. + <ol> + <li class="note">You can also toggle open an input in order to change font-size, line-height, color, etc. Remember to use <strong>!important</strong>, as it’s…well, you know, important.</li> + </ol> </li> <li>Bulletproof your font-stacks and <strong>rejoice</strong>!</li> </ol> - + <aside class="caveat"> + <p><strong>*</strong>Small caveat: this bookmarklet only works on webkit browsers (Chrome & Safari) or Firefox. We might get it working for IE and Opera if time permits. But I wouldn't hold your breath.</p> + </aside> <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> - <footer> - <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> @@ -72,7 +72,7 @@ </footer> </div> </div> - + <span class="horizon setting"></span> <script src="js/css_browser_selector.js" ></script> <script> var myURL = window.location.toString(); |