Changeset 2219

Timestamp:

12/18/2015 11:22:19 PM (9 years ago)

Author:

coffee2code

Message:

Browse Happy: Responsive improvements.

Fixes #1282.
Props ramiy, coffee2code.

Location:

sites/trunk/browsehappy.com/public_html

Files:

• functions.php (modified) (1 diff)
• index.php (modified) (2 diffs)
• style.css (modified) (15 diffs)

sites/trunk/browsehappy.com/public_html/functions.php

@@ -249 +249 @@
     <?php
 }
-

sites/trunk/browsehappy.com/public_html/index.php

@@ -12 +12 @@
     <meta name="description" content="<?php esc_attr_e( 'Online. Worry-free. Upgrade your browser today!', 'browsehappy' ); ?>" />
     <meta name="author" content="WordPress" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <link rel="shortcut icon" href="<?php echo esc_url( home_url( 'favicon.ico' ) ); ?>" />
@@ -19 +20 @@
 
     <!--[if (gt IE 6)|!(IE)]><!-->
-        <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css?3" />
+        <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css?4" />
         <script src="<?php echo get_template_directory_uri(); ?>/js/modernizr-1.6.min.js"></script>
         <script src="http://use.typekit.com/lsw6yis.js"></script>

sites/trunk/browsehappy.com/public_html/style.css

@@ -1 @@
-/*
- * Theme Name: Browse Happy
- * Theme URI: http://browsehappy.com/
+/**
+ * Theme Name:  Browse Happy
+ * Theme URI:   http://browsehappy.com/
  * Description: The 2011 design for Browse Happy, proudly powered by WordPress.
- * Author: WordPress
- * Author URI: http://wordpress.org/
- * License: GPLv2 or later
+ * Author:      WordPress
+ * Author URI:  https://wordpress.org/
+ * License:     GPLv2 or later
  */
 
@@ -71 +71 @@
     background: #2b4141;
     color: #3F4B4B;
-    min-width: 960px;
 }
 
@@ -80 +79 @@
 header, #main, footer {
     width: 100%;
-    min-width: 960px;
 }
 
@@ -96 +94 @@
 .wrap {
     zoom: 1;
-    width: 960px;
+    max-width: 960px;
     margin: 0 auto;
 }
@@ -120 +118 @@
 
 #i18n-alert p {
-    width: 960px;
     margin: 0 auto;
     display: block;
@@ -153 +150 @@
 
 .wf-leaguegothic1leaguegothic2-n4-active header h1 {
-    font-size: 1491%;
+    font-size: 1400%;
     font-family: "league-gothic-1","league-gothic-2";
 }
@@ -278 +275 @@
     width: 125px;
     height: 135px;
-    margin: 0 auto 20px;
+    margin: 20px auto;
     background: url(imgs/browsehappy-sprite.png) no-repeat;
 }
@@ -357 +354 @@
 #browserlist li a:link, #browserlist li a:visited {
     color: #324B4B;
-    padding: 30px 10px 10px;
+    padding: 10px;
     display: block;
     overflow: hidden;
@@ -434 +431 @@
 #browserlist p.likebutton {
     text-align: center;
-    margin: 15px 5px 0
+    margin: 15px 5px 0;
+    min-height: 25px;
 }
 
@@ -466 +464 @@
 
 #about {
-    width: 600px;
+    width: 60%;
     float: left;
     margin-left: 15px;
@@ -472 +470 @@
 
 #share {
-    width: 300px;
+    width: 30%;
     float: right;
     margin-right: 15px;
     position: relative;
-}
-
-#share h2 {
-    margin-right: 84px;
-}
-
-#share nav {
-    width: 84px;
-    height: 32px;
-    overflow: hidden;
-    position: absolute;
-    top: 3px;
-    right: 0;
 }
 
@@ -495 +480 @@
     height: 32px;
     float: left;
-    margin-left: 9px;
+    margin-right: 9px;
 }
 
@@ -528 +513 @@
 
 #byline {
-    position: absolute;
-    bottom: 0;
-    right: 15px;
-    width: 300px;
-    height: 20px;
+    clear: both;
+    margin: 0 auto;
+    padding-top: 10px;
 }
 
@@ -538 +521 @@
     width: 300px;
     height: 20px;
+    margin: 0 auto;
     display: block;
     background: url(imgs/browsehappy-sprite.png) no-repeat 0 -135px;
@@ -555 +539 @@
     opacity: 1;
 }
+
+@media (max-width: 430px) {
+    header {
+        padding-top: 35px;
+    }
+    header h1 {
+        font-size: 800%;
+    }
+    .wf-leaguegothic1leaguegothic2-n4-active header h1 {
+        font-size: 1000%;
+    }
+}
+@media (max-width: 383px) {
+    #browserlist li {
+        display: block;
+        float: none;
+        margin: 0 auto;
+    }
+}