Permalink
Browse files

Improve the design on smaller screens

* There no longer a need to have equal height in the footer widgets
* Add the .widget-area class to all widget areas. Some still have the
'sidebar' class as it might be used by a child theme
* Improve contrast on the toggle menu button
* Center the site title, logo and description
* Make the widget areas full width
* Improve the comment form by making it one-column and make the button
bigger

Some improvements to the print stylesheet have been made as well
  • Loading branch information...
1 parent 08fa473 commit f66459a1e7bf921b40aaf6af6e991094edf8a9db @jayj committed Jun 22, 2012
Showing with 83 additions and 35 deletions.
  1. +2 −2 js/script.js
  2. +1 −1 sidebar-404.php
  3. +1 −1 sidebar-after-single.php
  4. +1 −1 sidebar-after-singular.php
  5. +1 −1 sidebar-primary.php
  6. +1 −1 sidebar-secondary.php
  7. +76 −28 style.dev.css
View
@@ -78,12 +78,12 @@
/* Call the equal_height_columns() function when window has been loaded to make sure the images are loaded */
$(window).load(function() {
- equal_height_columns( $('.page-template-template-front-page .headline-list, #sidebar-subsidiary .widget, .not-found-widgets .widget') );
+ equal_height_columns( $('.page-template-template-front-page .headline-list, .not-found-widgets .widget') );
});
/* Call the equal_height_columns() function when window is being resized */
$(window).resize(function() {
- equal_height_columns( $('.page-template-template-front-page .headline-list, #sidebar-subsidiary .widget, .not-found-widgets .widget') );
+ equal_height_columns( $('.page-template-template-front-page .headline-list, .not-found-widgets .widget') );
});
/* A little surprise ;-) */
View
@@ -10,7 +10,7 @@
if ( is_active_sidebar( 'error-page' ) ) : ?>
- <div class="not-found-widgets clearfix">
+ <div class="not-found-widgets widget-area clearfix">
<?php dynamic_sidebar( 'error-page' ); ?>
View
@@ -12,7 +12,7 @@
<?php do_atomic( 'before_sidebar_single' ); // cakifo_before_sidebar_single ?>
- <aside id="sidebar-after-single" class="sidebar">
+ <aside id="sidebar-after-single" class="sidebar widget-area">
<?php dynamic_sidebar( 'after-single' ); ?>
@@ -12,7 +12,7 @@
<?php do_atomic( 'before_sidebar_singular' ); // cakifo_before_sidebar_singular ?>
- <aside id="sidebar-after-singular" class="sidebar">
+ <aside id="sidebar-after-singular" class="sidebar widget-area">
<?php dynamic_sidebar( 'after-singular' ); ?>
View
@@ -13,7 +13,7 @@
<?php do_atomic( 'before_sidebar_primary' ); // cakifo_before_sidebar_primary ?>
- <div id="sidebar-primary" class="sidebar">
+ <div id="sidebar-primary" class="sidebar widget-area">
<?php do_atomic( 'open_sidebar_primary' ); // cakifo_open_sidebar_primary ?>
View
@@ -13,7 +13,7 @@
<?php do_atomic( 'before_sidebar_secondary' ); // cakifo_before_sidebar_secondary ?>
- <div id="sidebar-secondary" class="sidebar">
+ <div id="sidebar-secondary" class="sidebar widget-area">
<?php do_atomic( 'open_sidebar_secondary' ); // cakifo_open_sidebar_secondary ?>
View
@@ -937,11 +937,11 @@ a.toggle-navbar {
.toggle-navbar > a {
background-color: #2c2c2c;
- background-image: -moz-linear-gradient(top, #333333, #222222);
- background-image: -ms-linear-gradient(top, #333333, #222222);
- background-image: -webkit-linear-gradient(top, #333333, #222222);
- background-image: -o-linear-gradient(top, #333333, #222222);
- background-image: linear-gradient(top, #333333, #222222);
+ background-image: -moz-linear-gradient(top, #555, #222);
+ background-image: -ms-linear-gradient(top, #555, #222);
+ background-image: -webkit-linear-gradient(top, #555, #444);
+ background-image: -o-linear-gradient(top, #555, #222);
+ background-image: linear-gradient(top, #555, #222);
border: 1px solid #181818;
border-bottom-color: #050505;
border-radius: 4px;
@@ -1048,7 +1048,7 @@ a.toggle-navbar {
}
#main,
-.sidebar {
+.widget-area {
margin-top: 40px;
}
@@ -1269,6 +1269,7 @@ html[xmlns] .slides-container { display: block; }
content: "";
width: 8px; height: 12px;
position: absolute;
+ z-index: 10;
top: 15px; left: 15px;
}
@@ -1315,9 +1316,9 @@ html[xmlns] .slides-container { display: block; }
border: 1px solid #bbb;
}
-@media screen and (max-width: 860px) {
- .flex-direction-nav .flex-prev { opacity: 1; left: 0; }
- .flex-direction-nav .flex-next { opacity: 1; right: 0; }
+@media screen and (max-width: 1024px) {
+ .flex-direction-nav .flex-prev { opacity: 1; left: 10px; }
+ .flex-direction-nav .flex-next { opacity: 1; right: 10px; }
}
/* Thumbnail nav */
@@ -2097,7 +2098,7 @@ img.alignright {
border-radius: 3px;
color: #464646;
display: inline-block;
- margin-right: 2px;
+ margin: 0 2px 8px 0;
padding: 10px 14px 9px;
text-shadow: 0 1px 0 #fff;
box-shadow: 0 2px 0 #ccc;
@@ -2573,6 +2574,7 @@ select {
/* Labels */
label {
color: #606060;
+ cursor: pointer;
font: 14px 'PT Serif', Georgia, serif;
padding-left: 2px;
-webkit-transition: color 150ms;
@@ -2985,16 +2987,6 @@ span.required {
background: #f7fafc;
}
- /* Make the footer widgets two colums */
- #sidebar-subsidiary .widget {
- width: 45%;
- }
-
- #sidebar-subsidiary .widget:nth-child(2n) {
- float: right;
- }
-
-
/* Add a background to the search inputs */
#topbar .search-form .search-text,
#topbar .search-form .search-submit {
@@ -3020,17 +3012,66 @@ span.required {
}
@media screen and (max-width: 480px) {
- /* Hide thumbnails from the Recent Posts and Category headline lists */
- #recent-posts img,
- .headline-list img {
+
+ #branding {
+ text-align: center;
+ }
+
+ #site-title,
+ #site-description {
+ float: none;
+ }
+
+ #site-description {
+ margin: 20px 0 0;
+ }
+
+ /* Hide thumbnails from the Recent Posts */
+ #recent-posts img {
display: none;
}
- /* Remove the sidebar widgets and search form from topbar */
- #sidebar-primary, #sidebar-secondary, #sidebar-subsidiary,
+ /* Make the widget areas full width */
+ .widget-area,
+ .headline-list {
+ width: 100% !important;
+ float: none !important;
+ }
+
+ /* Remove the search form from topbar */
#topbar .search-form {
display: none;
}
+
+ /* Make the comment form better */
+ #respond p.form-email,
+ #respond p.form-author {
+ float: none;
+ width: 100%;
+ }
+
+ #respond p.form-author input[type="text"],
+ #respond p.form-email input[type="text"] {
+ width: 98%;
+ }
+
+ #respond p.form-email input[type="text"] {
+ float: none;
+ }
+
+ #respond label {
+ font-size: 16px;
+ }
+
+ #respond p.form-email > label {
+ padding-left: 0;
+ }
+
+ #respond #submit {
+ font-size: 18px;
+ width: 100%;
+ padding: 25px;
+ }
}
/**
@@ -3061,7 +3102,8 @@ span.required {
}
#topbar, #site-title img, .sidebar, #sidebar-subsidiary, #respond, .pagination, object, embed, video, audio, iframe[src*=youtube], #slider, .format-quote .entry-format,
- .twitter-share, .fb-like, .delicious-share-button, .digg-share-button, #___plusone_0, .author-profile .twitter-link, .avatar, .comment-meta .permalink, .comment-reply-link {
+ blockquote:before, blockquote p:after, .twitter-share, .fb-like, .delicious-share-button, .digg-share-button, #___plusone_0, .author-profile .twitter-link, .avatar,
+ .comment-meta .permalink, .comment-reply-link, .more-link, .comments-link {
display: none !important;
}
@@ -3092,11 +3134,13 @@ span.required {
}
h3,
+ table caption,
.breadcrumbs,
- .section-title {
+ .section-title,
+ .section-title.alternative-section-title {
background: none;
color: #333;
- border-bottom: none;
+ border: none;
}
#main {
@@ -3138,6 +3182,10 @@ span.required {
padding: 0 25px;
}
+ blockquote {
+ font-style: italic;
+ }
+
tr, img { page-break-inside: avoid; }
#comments { page-break-before: always; }
p, h2, h3 { orphans: 3; widows: 3; }

0 comments on commit f66459a

Please sign in to comment.