Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Browse Happy: Add a notice for the browser you are using and suggest

they update to the newest version.

If they are running Internet Explorer on Windows XP, let them know we
suggest they try a different browser, as they cannot update further.

props hugobaeta for the design.

fixes #1
  • Loading branch information...
commit 1a7e33ecb40e9b1de6ff1a15d3cfabdcf1138597 1 parent 86d840b
@nacin nacin authored
Showing with 577 additions and 92 deletions.
  1. +34 −2 functions.php
  2. +9 −2 index.php
  3. +534 −88 style.css
View
36 functions.php
@@ -46,7 +46,7 @@ function browsehappy_get_browser_data( $browser = false ) {
'normalized' => 1, // just first number
'facebook' => 'internetexplorer',
'url' => 'http://www.microsoft.com/windows/internet-explorer/',
- 'info' => __( '“Designed to help you take control of your privacy and browse with confidence. Free from Microsoft.”' ),
+ 'info' => __( '“Designed to help you take control of your privacy and browse with confidence. Free from Microsoft.”', 'browsehappy' ),
),
);
if ( false === $browser )
@@ -186,4 +186,36 @@ function query_posts() { }
function handle_404() {
status_header( 200 );
}
-}
+}
+
+if ( function_exists( 'browsehappy_parse_user_agent' ) )
+ add_action( 'browsehappy_browser_notice', 'browsehappy_browser_notice' );
+
+function browsehappy_browser_notice() {
+ $ua = $_SERVER['HTTP_USER_AGENT'];
+ $results = browsehappy_parse_user_agent( $ua );
+ if ( ! $results['upgrade'] )
+ return;
+ ?>
+ <div id="browser-status" class="wrap">
+ <?php if ( $results['name'] == 'Internet Explorer' && strpos( $ua, 'Windows NT 5.' ) !== false ) : ?>
+ <?php if ( $results['insecure'] ) : ?>
+ <p><?php printf( __( 'It looks like you&#8217;re using an insecure version of %s.', 'browsehappy' ), $results['name'] ); ?>
+ <?php _e( 'Using an outdated browser makes your computer unsafe.', 'browsehappy' ); ?>
+ <?php else : ?>
+ <p><?php _e( 'It looks like you&#8217;re using an old version of Internet Explorer.', 'browsehappy' ); ?>
+ <?php endif; ?>
+ <?php _e( 'On Windows XP, you are unable to update to the latest version. For the best experience on the web, we suggest you try a new browser.', 'browsehappy' ); ?></p>
+ <?php elseif ( $results['insecure'] ) : ?>
+ <p class="browser-status-text"><?php printf( __( 'It looks like you&#8217;re using an insecure version of %s.', 'browsehappy' ), $results['name'] ); ?>
+ <?php _e( 'Using an outdated browser makes your computer unsafe.', 'browsehappy' ); ?>
+ <?php _e( 'For the best experience on the web, please update your browser.', 'browsehappy' ); ?></p>
+ <p class="browser-status-action"><a href="<?php echo esc_url( $results['update_url'] ); ?>"><?php _e( 'Upgrade now!', 'browsehappy' ); ?></a></p>
+ <?php else : ?>
+ <p class="browser-status-text"><?php printf( __( 'Your browser is out of date! It looks like you&#8217;re using an old version of %s.', 'browsehappy' ), $results['name'] ); ?>
+ <?php _e( 'For the best experience on the web, please update your browser.', 'browsehappy' ); ?></p>
+ <p class="browser-status-action"><a href="<?php echo esc_url( $results['update_url'] ); ?>"><?php _e( 'Upgrade now!', 'browsehappy' ); ?></a></p>
+ <?php endif; ?>
+ </div>
+ <?php
+}
View
11 index.php
@@ -18,7 +18,7 @@
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo get_template_directory_uri(); ?>/imgs/apple-touch-icon-114x114.png" />
<!--[if (gt IE 6)|!(IE)]><!-->
- <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" />
+ <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css?1" />
<script src="<?php echo get_template_directory_uri(); ?>/js/modernizr-1.6.min.js"></script>
<script src="http://use.typekit.com/lsw6yis.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
@@ -28,6 +28,13 @@
</head>
<body>
+<?php
+/*
+<div id="i18n-alert">
+ <p>Browse Happy is also available in %s. <a href="%s">Click here to change the language to %s</a>.</p>
+</div>
+*/
+?>
<div id="body-wrap">
<header>
@@ -36,7 +43,7 @@
<h2><?php _e( 'Online. Worry-free. <em>Upgrade your browser today</em>!', 'browsehappy' ); ?></h2>
</hgroup>
</header>
-
+ <?php do_action( 'browsehappy_browser_notice' ); ?>
<div id="main">
<ul id="browserlist" class="wrap">
<?php foreach ( browsehappy_get_browser_data() as $browser => $data ) : ?>
View
622 style.css
@@ -8,99 +8,545 @@
*/
/* Reset */
-html, body, div, span, h1, h2, p, code, em, img, ins, strong, ol, ul, li, article, aside, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
-article,footer,header,hgroup,menu,nav,section { display: block; }
-ul { list-style: none; }
-a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
-a:link { -webkit-tap-highlight-color: #F0D200; }
-html { overflow-y: scroll; }
-strong { font-weight: bold; }
-h1, h2 { font-weight: normal; }
-::-moz-selection{ background: #F0D200; color:#fff; text-shadow: none; }
-::selection { background:#F0D200; color:#fff; text-shadow: none; }
+
+html, body, div, span, h1, h2, p, code, em, img, ins, strong, ol, ul, li, article, aside, footer, header, hgroup, menu, nav, section {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ background: transparent;
+}
+
+article,footer,header,hgroup,menu,nav,section {
+ display: block;
+}
+
+ul {
+ list-style: none;
+}
+
+a {
+ margin: 0;
+ padding: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ background: transparent;
+}
+
+a:link {
+ -webkit-tap-highlight-color: #F0D200;
+}
+
+html {
+ overflow-y: scroll;
+}
+
+strong {
+ font-weight: bold;
+}
+
+h1, h2 {
+ font-weight: normal;
+}
+
+::-moz-selection {
+ background: #F0D200;
+ color: #fff;
+ text-shadow: none;
+}
+
+::selection {
+ background: #F0D200;
+ color: #fff;
+ text-shadow: none;
+}
/* Generic Stuff */
-body { font:13px/1.5 "lemonde-courrier-1","lemonde-courrier-2", sans-serif; *font-size:small; border-top: 1px solid #79A6A1; background: #2b4141; color: #3F4B4B; min-width: 960px; }
-#body-wrap { background: #DED3BF url(imgs/bg.jpg) repeat 0 0; }
-header, #main, footer { width: 100%; min-width: 960px; }
-.wrap:before, .wrap:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
-.wrap:after { clear: both; }
-.wrap { zoom: 1; width: 960px; margin: 0 auto; }
-a:link, a:visited { color: #1E8585; text-decoration: none; }
-a:hover, a:active { color: #000; }
+
+body {
+ font: 13px/1.5 "lemonde-courrier-1","lemonde-courrier-2", Helvetica, Arial, sans-serif;
+ *font-size: small;
+ background: #2b4141;
+ color: #3F4B4B;
+ min-width: 960px;
+}
+
+#body-wrap {
+ background: #DED3BF url(imgs/bg.jpg) repeat 0 0;
+}
+
+header, #main, footer {
+ width: 100%;
+ min-width: 960px;
+}
+
+.wrap:before, .wrap:after {
+ content: "\0020";
+ display: block;
+ height: 0;
+ visibility: hidden;
+}
+
+.wrap:after {
+ clear: both;
+}
+
+.wrap {
+ zoom: 1;
+ width: 960px;
+ margin: 0 auto;
+}
+
+a:link, a:visited {
+ color: #1E8585;
+ text-decoration: none;
+}
+
+a:hover, a:active {
+ color: #000;
+}
+
+/* i18n */
+
+#i18n-alert {
+ text-align: center;
+ padding: 10px;
+ background: #2B4141 url(imgs/bg-footer.png) repeat-x 0 -10px;
+ width: 100%;
+ font-family: "lemonde-courrier-1","lemonde-courrier-2", Helvetica, Arial, sans-serif;
+}
+
+#i18n-alert p {
+ width: 960px;
+ margin: 0 auto;
+ display: block;
+ color: #efefef;
+ text-shadow: 0 1px 0 #;
+}
+
+#i18n-alert p a {
+ color: #fff;
+ text-decoration: underline;
+}
+#i18n-alert p a:hover {
+ text-decoration: none;
+}
/* Header */
-header { text-align: center; border-top: 1px solid #9DC8C3; padding: 70px 0;
- background: url(imgs/bg-header.png) repeat-x left bottom; }
-header h1 { font: 1100%/1 Impact, Helvetica, sans-serif; text-transform: uppercase; margin: 0;
- color: #324B4B; text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 -1px 0 rgba(0,0,0,.8); }
-.wf-leaguegothic1leaguegothic2-n4-active header h1 { font-size: 1491%; font-family: "league-gothic-1","league-gothic-2"; }
-header h1 em { font-style: normal; color: #F0D200; text-shadow: 0 1px 0 rgba(0, 50, 40, 0.5), 0 -1px 0 rgba(255, 255, 0, 0.8); }
-header h2 { font-size: 177%; font-weight: normal; color: #fff; text-shadow: 0 1px 0 #4C7C7B;
- font-family: "lemonde-courrier-1","lemonde-courrier-2" !important; }
-header h2 em { font-weight: 700; }
+
+header {
+ text-align: center;
+ border-top: 1px solid #9DC8C3;
+ padding: 70px 0;
+ background: url(imgs/bg-header.png) repeat-x left bottom;
+}
+
+header h1 {
+ font: 1100%/1 Impact, Helvetica, sans-serif;
+ text-transform: uppercase;
+ margin: 0;
+ color: #324B4B;
+ text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 -1px 0 rgba(0,0,0,.8);
+}
+
+.wf-leaguegothic1leaguegothic2-n4-active header h1 {
+ font-size: 1491%;
+ font-family: "league-gothic-1","league-gothic-2";
+}
+
+header h1 em {
+ font-style: normal;
+ color: #F0D200;
+ text-shadow: 0 1px 0 rgba(0, 50, 40, 0.5), 0 -1px 0 rgba(255, 255, 0, 0.8);
+}
+
+header h2 {
+ font-size: 177%;
+ font-weight: normal;
+ color: #fff;
+ text-shadow: 0 1px 0 #4C7C7B;
+ font-family: "lemonde-courrier-1","lemonde-courrier-2", Helvetica, Arial, sans-serif !important;
+}
+
+header h2 em {
+ font-weight: 700;
+}
+
+/* Browser Status Bar */
+
+#browser-status {
+ background: #DC3228;
+ border: 1px solid #c62d24;
+ margin: 20px auto 0;
+ padding: 20px 30px;
+ width: 870px;
+ color: white;
+ font-size: 120%;
+ font-family: "lemonde-courrier-1","lemonde-courrier-2", Helvetica, Arial, sans-serif;
+ text-shadow: 0 2px 0 #c62d24;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ -o-border-radius: 2px;
+ -ms-border-radius: 2px;
+ border-radius: 2px;
+ -webkit-box-shadow: inset 0 0 0 1px #e66f68;
+ -moz-box-shadow: inset 0 0 0 1px #e66f68;
+ -o-box-shadow: inset 0 0 0 1px #e66f68;
+ -ms-box-shadow: inset 0 0 0 1px #e66f68;
+ box-shadow: inset 0 0 0 1px #e66f68;
+}
+
+.browser-status-text {
+ float: left;
+ width: 80%;
+}
+
+.browser-status-action {
+ float: right;
+ width: 18%;
+ text-align: right;
+ margin-right: -10px;
+}
+.browser-status-action a {
+ display: block;
+ background: #333;
+ border: 1px solid #222;
+ color: #efefef;
+ text-align: center;
+ padding: 5px 10px;
+ margin: -5px 0;
+ text-shadow: 0 -2px 0 #000;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -o-border-radius: 3px;
+ -ms-border-radius: 3px;
+ border-radius: 3px;
+}
+.browser-status-action a:hover {
+ background: #3a3a3a;
+ border: 1px solid #333;
+ color: #fff;
+ text-shadow: 0 -2px 0 #111;
+ -webkit-box-shadow: inset 0 1px 3px #464646;
+ -moz-box-shadow: inset 0 1px 3px #464646;
+ -o-box-shadow: inset 0 1px 3px #464646;
+ -ms-box-shadow: inset 0 1px 3px #464646;
+ box-shadow: inset 0 1px 3px #464646;
+}
+.browser-status-action a:active {
+ background: #2a2a2a;
+ color: #ddd;
+ text-shadow: 0 -2px 0 #000;
+ -webkit-box-shadow: inset 0 1px 3px #1a1a1a;
+ -moz-box-shadow: inset 0 1px 3px #1a1a1a;
+ -o-box-shadow: inset 0 1px 3px #1a1a1a;
+ -ms-box-shadow: inset 0 1px 3px #1a1a1a;
+ box-shadow: inset 0 1px 3px #1a1a1a;
+}
+
/* Main */
-#main { padding: 50px 0; }
-#browserlist:before, #browserlist:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
-#browserlist:after { clear: both; }
-#browserlist { zoom: 1; }
-#browserlist li { width: 192px; float: left; margin: 0; }
-#browserlist li .icon { width: 125px; height: 135px; margin: 0 auto 20px; background: url(imgs/browsehappy-sprite.png) no-repeat; }
-#browserlist li#chrome .icon { background-position: 0 0; }
-#browserlist li#firefox .icon { background-position: -125px 0; }
-#browserlist li#opera .icon { background-position: -250px 0; }
-#browserlist li#safari .icon { background-position: -375px 0; }
-#browserlist li#ie .icon { background-position: -500px 0; }
-
-#browserlist h2 { font: 140%/1 Impact, Helvetica, sans-serif;
- text-align: center; text-transform: uppercase; color: #DC1E14; text-shadow: 0 1px 0 #fff;
- background-color: rgba(255,255,255,.3); margin: 0 0 10px; line-height: 1; padding: 8px 0;
- -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
-.wf-leaguegothic1leaguegothic2-n4-active #browserlist h2 { font-size: 200%; font-family: "league-gothic-1","league-gothic-2"; }
-.no-rgba #browserlist h2 { background: url(imgs/alphabg.png) repeat; }
-#browserlist p { padding: 0 5px; text-shadow: 0 1px 0 rgba(255,255,255,.8); }
-#browserlist p.info { min-height: 120px; }
-#browserlist p.version { margin-bottom: 10px; text-align: center; }
-#browserlist p.website { background-color: rgba(255,255,255,.3); line-height: 1; margin: 0; padding: 8px 5px; text-align: center;
- -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
-.no-rgba #browserlist p.website { background: url(imgs/alphabg.png) repeat; }
-#browserlist li a:link, #browserlist li a:visited { color: #324B4B; padding: 30px 10px 10px; display: block; overflow: hidden;
- -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
-
-#browserlist li a:hover { background: rgba(255,255,255,.3);
- -webkit-transform:scale(1.05,1.05); -moz-transform:scale(1.05,1.05); -o-transform:scale(1.05,1.05); transform:scale(1.05,1.05); }
-.no-rgba #browserlist li a:hover { background: url(imgs/alphabg.png) repeat; }
-#browserlist li a:hover .website { background: #4daaa7; color: #fff; text-shadow: 0 1px 0 #266E67; }
-
-#browserlist li a:hover .icon { -webkit-transform:scale(1.1,1.1); -moz-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); transform:scale(1.1,1.1); }
-#browserlist li a, #browserlist li a .icon { -webkit-transition: all .1s; -moz-transition: all .1s; -o-transition: all .1s; transition: all .1s; }
-#browserlist li a .website { -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; -o-transition: all .5s ease-in; transition: all .5s ease-in; }
-#browserlist li a:hover, #browserlist li a:hover .icon { -webkit-transition: all .8s; -moz-transition: all .8s; -o-transition: all .8s; transition: all .8s; }
-#browserlist li a:link, #browserlist li a:link .icon { -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; }
-#browserlist li a:hover .website { -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }
-#browserlist li a:link .website { -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; }
-
-#browserlist p.likebutton { text-align: center; margin: 15px 5px 0 }
+
+#main {
+ padding: 20px 0 50px;
+}
+
+#browserlist:before, #browserlist:after {
+ content: "\0020";
+ display: block;
+ height: 0;
+ visibility: hidden;
+}
+
+#browserlist:after {
+ clear: both;
+}
+
+#browserlist {
+ zoom: 1;
+}
+
+#browserlist li {
+ width: 192px;
+ float: left;
+ margin: 0;
+}
+
+#browserlist li .icon {
+ width: 125px;
+ height: 135px;
+ margin: 0 auto 20px;
+ background: url(imgs/browsehappy-sprite.png) no-repeat;
+}
+
+#browserlist li#chrome .icon {
+ background-position: 0 0;
+}
+
+#browserlist li#firefox .icon {
+ background-position: -125px 0;
+}
+
+#browserlist li#opera .icon {
+ background-position: -250px 0;
+}
+
+#browserlist li#safari .icon {
+ background-position: -375px 0;
+}
+
+#browserlist li#ie .icon {
+ background-position: -500px 0;
+}
+
+#browserlist h2 {
+ font: 140%/1 Impact, Helvetica, sans-serif;
+ text-align: center;
+ text-transform: uppercase;
+ color: #DC3228;
+ text-shadow: 0 1px 0 #fff;
+ background-color: rgba(255,255,255,.3);
+ margin: 0 0 10px;
+ line-height: 1;
+ padding: 8px 0;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+}
+
+.wf-leaguegothic1leaguegothic2-n4-active #browserlist h2 {
+ font-size: 200%;
+ font-family: "league-gothic-1","league-gothic-2";
+}
+
+.no-rgba #browserlist h2 {
+ background: url(imgs/alphabg.png) repeat;
+}
+
+#browserlist p {
+ padding: 0 5px;
+ text-shadow: 0 1px 0 rgba(255,255,255,.8);
+}
+
+#browserlist p.info {
+ min-height: 120px;
+}
+
+#browserlist p.version {
+ margin-bottom: 10px;
+ text-align: center;
+}
+
+#browserlist p.website {
+ background-color: rgba(255,255,255,.3);
+ line-height: 1;
+ margin: 0;
+ padding: 8px 5px;
+ text-align: center;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+}
+
+.no-rgba #browserlist p.website {
+ background: url(imgs/alphabg.png) repeat;
+}
+
+#browserlist li a:link, #browserlist li a:visited {
+ color: #324B4B;
+ padding: 30px 10px 10px;
+ display: block;
+ overflow: hidden;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+}
+
+#browserlist li a:hover {
+ background: rgba(255,255,255,.3);
+ -webkit-transform: scale(1.05,1.05);
+ -moz-transform: scale(1.05,1.05);
+ -o-transform: scale(1.05,1.05);
+ transform: scale(1.05,1.05);
+}
+
+.no-rgba #browserlist li a:hover {
+ background: url(imgs/alphabg.png) repeat;
+}
+
+#browserlist li a:hover .website {
+ background: #4daaa7;
+ color: #fff;
+ text-shadow: 0 1px 0 #266E67;
+}
+
+#browserlist li a:hover .icon {
+ -webkit-transform: scale(1.1,1.1);
+ -moz-transform: scale(1.1,1.1);
+ -o-transform: scale(1.1,1.1);
+ transform: scale(1.1,1.1);
+}
+
+#browserlist li a, #browserlist li a .icon {
+ -webkit-transition: all .1s;
+ -moz-transition: all .1s;
+ -o-transition: all .1s;
+ transition: all .1s;
+}
+
+#browserlist li a .website {
+ -webkit-transition: all .5s ease-in;
+ -moz-transition: all .5s ease-in;
+ -o-transition: all .5s ease-in;
+ transition: all .5s ease-in;
+}
+
+#browserlist li a:hover, #browserlist li a:hover .icon {
+ -webkit-transition: all .8s;
+ -moz-transition: all .8s;
+ -o-transition: all .8s;
+ transition: all .8s;
+}
+
+#browserlist li a:link, #browserlist li a:link .icon {
+ -webkit-transition: all .2s;
+ -moz-transition: all .2s;
+ -o-transition: all .2s;
+ transition: all .2s;
+}
+
+#browserlist li a:hover .website {
+ -webkit-transition: all .3s ease-out;
+ -moz-transition: all .3s ease-out;
+ -o-transition: all .3s ease-out;
+ transition: all .3s ease-out;
+}
+
+#browserlist li a:link .website {
+ -webkit-transition: all .1s ease-out;
+ -moz-transition: all .1s ease-out;
+ -o-transition: all .1s ease-out;
+ transition: all .1s ease-out;
+}
+
+#browserlist p.likebutton {
+ text-align: center;
+ margin: 15px 5px 0
+}
/* Footer */
-footer { color: #f1f1f1; padding: 70px 0; overflow: hidden; background: url(imgs/bg-footer.png) repeat-x left top; }
-footer .wrap { position: relative; }
-footer h2 { font: 150% Impact, Helvetica, sans-serif; padding-top: 8px; margin-bottom: 10px;
- color: #F0D200; text-transform: uppercase; text-shadow: 0 1px 0 #333; }
-.wf-leaguegothic1leaguegothic2-n4-active footer h2 { font-size: 200%; padding-top: 5px; font-family: "league-gothic-1","league-gothic-2"; }
-#about { width: 600px; float: left; margin-left: 15px; }
-#share { width: 300px; float: right; margin-right: 15px; position: relative; }
-#share nav { width: 84px; height: 32px; overflow: hidden; position: absolute; top: 3px; right: 0; }
-#share nav li { width: 32px; height: 32px; float: left; margin-left: 9px; }
-#share nav li a { width: 32px; height: 32px; display: block; text-indent: -9999px; background: url(imgs/browsehappy-sprite.png) no-repeat;
- -moz-opacity: 0.4; -khtml-opacity: 0.4; opacity: 0.4;
- -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
-#share nav li.twitter a { background-position: -300px -135px; }
-#share nav li.facebook a { background-position: -332px -135px; }
-#share nav li a:hover{ -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
-#byline { position: absolute; bottom: 0; right: 15px; width: 300px; height: 20px; }
-#byline a { width: 300px; height: 20px; display: block; background: url(imgs/browsehappy-sprite.png) no-repeat 0 -135px; text-indent: -9999px;
- -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6;
- -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
-#byline a:hover { -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
+
+footer {
+ color: #f1f1f1;
+ padding: 70px 0;
+ overflow: hidden;
+ background: url(imgs/bg-footer.png) repeat-x left top;
+}
+
+footer .wrap {
+ position: relative;
+}
+
+footer h2 {
+ font: 150% Impact, Helvetica, sans-serif;
+ padding-top: 8px;
+ margin-bottom: 10px;
+ color: #F0D200;
+ text-transform: uppercase;
+ text-shadow: 0 1px 0 #333;
+}
+
+.wf-leaguegothic1leaguegothic2-n4-active footer h2 {
+ font-size: 200%;
+ padding-top: 5px;
+ font-family: "league-gothic-1","league-gothic-2";
+}
+
+#about {
+ width: 600px;
+ float: left;
+ margin-left: 15px;
+}
+
+#share {
+ width: 300px;
+ float: right;
+ margin-right: 15px;
+ position: relative;
+}
+
+#share nav {
+ width: 84px;
+ height: 32px;
+ overflow: hidden;
+ position: absolute;
+ top: 3px;
+ right: 0;
+}
+
+#share nav li {
+ width: 32px;
+ height: 32px;
+ float: left;
+ margin-left: 9px;
+}
+
+#share nav li a {
+ width: 32px;
+ height: 32px;
+ display: block;
+ text-indent: -9999px;
+ background: url(imgs/browsehappy-sprite.png) no-repeat;
+ -moz-opacity: 0.4;
+ -khtml-opacity: 0.4;
+ opacity: 0.4;
+ -webkit-transition: all .5s;
+ -moz-transition: all .5s;
+ -o-transition: all .5s;
+ transition: all .5s;
+}
+
+#share nav li.twitter a {
+ background-position: -300px -135px;
+}
+
+#share nav li.facebook a {
+ background-position: -332px -135px;
+}
+
+#share nav li a:hover {
+ -moz-opacity: 1;
+ -khtml-opacity: 1;
+ opacity: 1;
+}
+
+#byline {
+ position: absolute;
+ bottom: 0;
+ right: 15px;
+ width: 300px;
+ height: 20px;
+}
+
+#byline a {
+ width: 300px;
+ height: 20px;
+ display: block;
+ background: url(imgs/browsehappy-sprite.png) no-repeat 0 -135px;
+ text-indent: -9999px;
+ -moz-opacity: 0.6;
+ -khtml-opacity: 0.6;
+ opacity: 0.6;
+ -webkit-transition: all .5s;
+ -moz-transition: all .5s;
+ -o-transition: all .5s;
+ transition: all .5s;
+}
+
+#byline a:hover {
+ -moz-opacity: 1;
+ -khtml-opacity: 1;
+ opacity: 1;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.