From e7f47ffbc65ac3727c840e3eed8364ea5eacacb3 Mon Sep 17 00:00:00 2001 From: Josh Brewer Date: Tue, 19 Apr 2011 23:12:54 -0700 Subject: adding favicon --- css/screen.css | 326 +++++++++++++++++++++++--------------- css/screen.css.old | 379 ++++++++++++++++++++++++++++++++++++++++++++ css/screen2.css | 455 ----------------------------------------------------- favicon.ico | Bin 0 -> 1406 bytes index.html | 3 +- 5 files changed, 581 insertions(+), 582 deletions(-) create mode 100644 css/screen.css.old delete mode 100644 css/screen2.css create mode 100644 favicon.ico diff --git a/css/screen.css b/css/screen.css index a337aa4..e4f5032 100644 --- a/css/screen.css +++ b/css/screen.css @@ -133,53 +133,89 @@ body { 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:52em; margin-top:2.5em;margin-left:-22em;} +span.rising {width:100%; margin-top:15em;} +span.setting {width:100%; margin-top: -20em;} + #main { - border-left: 1px solid #423e39; - margin:0 0 0 4em; - padding:3em 0 0 7em; + border: 1px solid #423e39; + border-width:0 1px; + margin:0 4em; + padding:3em 0 0 0; position:relative; } .content { - max-width:32em; + width:32em; position:relative; + margin: 0 auto; } 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; + margin:0 0 12em 0; +} +hgroup h1 { + font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; + font-size:3.5em; + font-weight:200; + line-height:1; + margin-left:1.35em; + text-transform:uppercase; +} +.wf-inactive hgroup h1{ + letter-spacing:4px; +} + +hgroup h1:before { + content: "F"; + background:#fef1d8; + border:1px solid #2d2a27; + color:#2d2a27; + font-size:0.5em; + font-weight:200; + margin-right:0.5em; + padding-top:0.25em; + position:absolute; + text-align:center; + vertical-align:center; + top:0.1em; + left:0; + width:1.5em; + height:1.25em; + -moz-box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; + -webkit-box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; + -o-box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; + box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; +} + + +hgroup h2 { + color:#eebe5f; + font-size:1.3125em; + font-weight:200; + letter-spacing:0.1em; + margin-top:0.5em; } -/* 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; + left:8em; 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; + top:5.25em; + height: 7em; + width: 7em; + -webkit-border-radius: 7em; + -moz-border-radius: 7em; + border-radius: 7em; background-clip: padding-box; z-index:100; } @@ -190,86 +226,159 @@ hgroup { text-transform:uppercase; left:10px; top: 10px; - height:150px; - width: 150px; - -webkit-border-radius: 150px; - -moz-border-radius: 150px; - border-radius: 150px; + height:6em; + width: 6em; + -webkit-border-radius: 6em; + -moz-border-radius: 6em; + border-radius: 6em; 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; + font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; + font-size:0.8125em; + font-style: normal; + font-weight: normal; + top: 2.25em; + position: relative; + width: 4em; + display: block; + left: 2.25em; } -hgroup + p, hgroup + p + p { +hgroup + p { font-size: 1.3125em; line-height:1.1429; margin-bottom:1.5em; - max-width:25em; + xwidth:24em; +} +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; +} +.smcap { + font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; + font-size:0.7em; + font-weight:200; + text-transform:uppercase; +} +.wf-inactive .smcap { + font-size:1em; } .bkmrklt { font-size:1.3125em; - margin-bottom: 3em; + margin:2em 0 3em; position:relative; } + +@-webkit-keyframes drag-me { + from { + top:0; + left:0; + } + to { + top:-20px; + left:30px; + } +} + .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; + background: rgba(255, 255, 255, 0.1); + border: 1px solid #2D2A27; + color: #F0E4CC; + font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; + font-size: 1.125em; + padding: .5em 1em; + position:relative; + text-align:center; + text-transform: uppercase; + text-shadow:0 1px 1px #2D2A27; + z-index:100; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); + -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); + -o-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); + box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); } .bkmrklt a:hover { - border-bottom:0; + -webkit-animation-name: drag-me; + -webkit-animation-duration: 2s; + -webkit-animation-timing-function: ease-in-out; +} +.bkmrklt a:after { + content: attr(data-drag); + display:none; +} +.bkmrklt a:hover:after { + background:rgba(0,0,0,0.8); + display:block; + position:absolute; + top:-3em; + left:30%; + padding:0.5em 1em; + font-family: "proxima-nova-1","proxima-nova-2", "Helvetica Neue", Calibri, Arial, Helvetica, sans-serif; + font-size:0.5em; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; } .bkmrklt span { color:#eebe5f; + font-size:0.9125em; + font-weight:200; left: 11em; letter-spacing:4px; - position: absolute; + margin-left:0.5em; text-transform:uppercase; - top: 0.95em; } + 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; } - -#main ol + p { +#main ol li:last-child { + margin-bottom:0; +} +#main ol .note { + display:block; + font-size:0.8125em; + margin-top:1em; +} +#main aside { + color:rgba(202,191,171,0.5); + font-size: 0.75em; + line-height: 1.7; + margin:1em 0 4em; +} +aside strong { + margin-left:-8px; +} +#main aside + p { background:url(../images/bang.png) no-repeat 3px 1px; font-weight:bold; padding-left:2em; @@ -297,69 +406,36 @@ footer .twitter-share-button { top:5px; } - - - /* media queries for responsive design */ /* One-column - iPhone portrait and any 320px device */ @media (max-width:640px){ - .container{ - width: 320px; + body {font-size:85%;} + .typekit-badge {display:none !important;} + .content{ + width: 310px; + margin:0 auto; } - #secondary{ - margin-left: 15px; + #main { + border:0; + margin:0; + padding-top:2em; } + .rising {margin-top:13em !important;} + .setting {margin-top:-22em !important;} + hgroup h1 {font-size:2.6em !important;} + hgroup h2 {font-size:1.2em;letter-spacing:0 !important;} + .brave {left:5.25em;top:4.5em;} + hgroup + p strong {font-size:0.9em;} + .bkmrklt {text-align:center;} + .bkmrklt span {display:block;margin-top:1em;} + footer {font-size:95%;} } -/* One-column - iPhone landscape */ -@media (orientation:landscape) and (min-width:321px) and (max-width:480px){ - /* - .container{ - width: 480px; - }*/ -} - -/* Two-column - iPad */ +/* iPad */ @media (min-width:641px) and (max-width:960px){ - hgroup { - margin-bottom:10em; - } - -} - -/* 15" MacBook Pro */ -@media (min-width:1281px) and (max-width:1600px){ - .container{ - width: 1280px; - } -} - -/* 17" MacBook Pro, iMac */ -@media (min-width:1601px) and (max-width:1920px){ - .container{ - width: 1600px; - } -} - -/* HD */ -@media (min-width:1920px) and (max-width:2240px){ - .container{ - width: 1920px; - } -} - -@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) { - + #main { + margin:0 2em; + } } /* print styles */ diff --git a/css/screen.css.old b/css/screen.css.old new file mode 100644 index 0000000..a337aa4 --- /dev/null +++ b/css/screen.css.old @@ -0,0 +1,379 @@ +/* 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-1","proxima-nova-2", "Helvetica Neue", Calibri, 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:52em; margin-top:2.5em;margin-left:-22em;} +#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; + 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 1px; + 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 p a[href="http://twitter.com/jbrewer"]:hover span, footer p a[href="http://twitter.com/shinypb"]:hover span { + color:#64c2e8; +} +footer .twitter-share-button { + position:relative; + top:5px; +} + + + + +/* media queries for responsive design */ +/* One-column - iPhone portrait and any 320px device */ +@media (max-width:640px){ + .container{ + width: 320px; + } + #secondary{ + margin-left: 15px; + } +} + +/* One-column - iPhone landscape */ +@media (orientation:landscape) and (min-width:321px) and (max-width:480px){ + /* + .container{ + width: 480px; + }*/ +} + +/* Two-column - iPad */ +@media (min-width:641px) and (max-width:960px){ + hgroup { + margin-bottom:10em; + } + +} + +/* 15" MacBook Pro */ +@media (min-width:1281px) and (max-width:1600px){ + .container{ + width: 1280px; + } +} + +/* 17" MacBook Pro, iMac */ +@media (min-width:1601px) and (max-width:1920px){ + .container{ + width: 1600px; + } +} + +/* HD */ +@media (min-width:1920px) and (max-width:2240px){ + .container{ + width: 1920px; + } +} + +@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; } +} \ No newline at end of file diff --git a/css/screen2.css b/css/screen2.css deleted file mode 100644 index 1878e8e..0000000 --- a/css/screen2.css +++ /dev/null @@ -1,455 +0,0 @@ -/* 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-1","proxima-nova-2", "Helvetica Neue", Calibri, 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:15em;} -span.setting {width:100%; margin-top: -20em;} - -#main { - border: 1px solid #423e39; - border-width:0 1px; - margin:0 4em; - padding:3em 0 0 0; - position:relative; -} - -.content { - width:32em; - position:relative; - margin: 0 auto; -} -hgroup { - margin:0 0 12em 0; -} -hgroup h1 { - font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; - font-size:3.5em; - font-weight:200; - line-height:1; - margin-left:1.35em; - text-transform:uppercase; -} -.wf-inactive hgroup h1{ - letter-spacing:4px; -} - -hgroup h1:before { - content: "F"; - background:#fef1d8; - border:1px solid #2d2a27; - color:#2d2a27; - font-size:0.5em; - font-weight:200; - margin-right:0.5em; - padding-top:0.25em; - position:absolute; - text-align:center; - vertical-align:center; - top:0.1em; - left:0; - width:1.5em; - height:1.25em; - -moz-box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; - -webkit-box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; - -o-box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; - box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; -} - - -hgroup h2 { - color:#eebe5f; - font-size:1.3125em; - font-weight:200; - letter-spacing:0.1em; - margin-top:0.5em; -} - -.brave { - background: #2d2a27; - color:#fef1d8; - font-size:1.05em; - left:8em; - line-height:1; - position:absolute; - text-transform:uppercase; - top:5.25em; - height: 7em; - width: 7em; - -webkit-border-radius: 7em; - -moz-border-radius: 7em; - border-radius: 7em; - background-clip: padding-box; - z-index:100; -} -.brave:before { - content: ""; - background:#9b3d17; - position:absolute; - text-transform:uppercase; - left:10px; - top: 10px; - height:6em; - width: 6em; - -webkit-border-radius: 6em; - -moz-border-radius: 6em; - border-radius: 6em; - background-clip: padding-box; - z-index:-1; -} -.brave i { - font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; - font-size:0.8125em; - font-style: normal; - font-weight: normal; - top: 2.25em; - position: relative; - width: 4em; - display: block; - left: 2.25em; -} - -hgroup + p { - font-size: 1.3125em; - line-height:1.1429; - margin-bottom:1.5em; - xwidth:24em; -} -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; -} -.smcap { - font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; - font-size:0.7em; - font-weight:200; - text-transform:uppercase; -} -.wf-inactive .smcap { - font-size:1em; -} - -.bkmrklt { - font-size:1.3125em; - margin:2em 0 3em; - position:relative; -} - -@-webkit-keyframes drag-me { - from { - top:0; - left:0; - } - to { - top:-20px; - left:30px; - } -} - -.bkmrklt a { - background: rgba(255, 255, 255, 0.1); - border: 1px solid #2D2A27; - color: #F0E4CC; - font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; - font-size: 1.125em; - padding: .5em 1em; - position:relative; - text-align:center; - text-transform: uppercase; - text-shadow:0 1px 1px #2D2A27; - z-index:100; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); - -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); - -o-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); - box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); -} -.bkmrklt a:hover { - -webkit-animation-name: drag-me; - -webkit-animation-duration: 2s; - -webkit-animation-timing-function: ease-in-out; -} -.bkmrklt a:after { - content: attr(data-drag); - display:none; -} -.bkmrklt a:hover:after { - background:rgba(0,0,0,0.8); - display:block; - position:absolute; - top:-3em; - left:30%; - padding:0.5em 1em; - font-family: "proxima-nova-1","proxima-nova-2", "Helvetica Neue", Calibri, Arial, Helvetica, sans-serif; - font-size:0.5em; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} -.bkmrklt span { - color:#eebe5f; - font-size:0.9125em; - font-weight:200; - left: 11em; - letter-spacing:4px; - margin-left:0.5em; - text-transform:uppercase; -} - - -h3 { - margin:0 0 1.5em; -} -h3 a { - color:rgba(202,191,171,0.75); - font-weight:normal; - position:relative; - top:-4px; -} -#main ol { - margin:0; -} -#main ol li { - margin-bottom:1em; -} -#main ol li:last-child { - margin-bottom:0; -} -#main ol .note { - display:block; - font-size:0.8125em; - margin-top:1em; -} -#main aside { - color:rgba(202,191,171,0.5); - font-size: 0.75em; - line-height: 1.7; - margin:1em 0 4em; -} -aside strong { - margin-left:-8px; -} -#main aside + p { - background:url(../images/bang.png) no-repeat 3px 1px; - 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 p a[href="http://twitter.com/jbrewer"]:hover span, footer p a[href="http://twitter.com/shinypb"]:hover span { - color:#64c2e8; -} -footer .twitter-share-button { - position:relative; - top:5px; -} - -/* media queries for responsive design */ -/* One-column - iPhone portrait and any 320px device */ -@media (max-width:640px){ - body {font-size:85%;} - .typekit-badge {display:none !important;} - .content{ - width: 310px; - margin:0 auto; - } - #main { - border:0; - margin:0; - padding-top:2em; - } - .rising {margin-top:13em !important;} - .setting {margin-top:-22em !important;} - hgroup h1 {font-size:2.6em !important;} - hgroup h2 {font-size:1.2em;letter-spacing:none !important;} - .brave {left:5.25em;top:4.5em;} - hgroup + p strong {font-size:0.9em;} - .bkmrklt {text-align:center;} - .bkmrklt span {display:block;margin-top:1em;} - footer {font-size:95%;} -} - -/* iPad */ -@media (min-width:641px) and (max-width:960px){ - #main { - margin:0 2em; - } -} - -/* 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; } -} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..29bcb5c Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html index 60e7b3c..aaee335 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,6 @@ - @@ -15,7 +14,7 @@ - + -- cgit v1.2.3