// // Site Name: // Author: // // Stylesheet: TABLET & SMALLER LAPTOPS // // This stylesheet is loaded for larger mobile devices. It's set to // 481px because at 480px it would load on a landscaped iPhone. // This isn't ideal because then you would be loading all those // extra styles on that same mobile connection. // // A word of warning. This size COULD be a larger mobile device, // so you still want to keep it pretty light and simply expand // upon your base.less styles. // // // // GENERAL STYLES // body // // LAYOUT & GRID STYLES // .wrap // // HEADER SYTLES // .header #logo // // NAVIGATION STYLES // // // POSTS & CONTENT STYLES // #content // want to style individual post classes? Booya! .hentry // standard post class .post-id // post by id (i.e. post-3) .post // general post style .page // general article on a page style .attachment // general style on an attatchment .sticky // sticky post style .hentry // hentry class .category-slug // style by category (i.e. category-videos) .tag-slug // style by tag (i.e. tag-news) .article-header // the header element inside each post .article-footer // the footer element inside each post .single-title, // the title (h1) on each single post or page .page-title .single-title // the title (h1) on single posts .page-title // the title (h1) on pages .archive-title // the archive title on archive / category pages // post meta .meta time // post content .post-content p ul, ol, table, dl ul, ol li ul li ol li blockquote &:before dl dt dd img // // image alignment on a screen this size may be // a bit difficult. It's set to start aligning // and floating images at the next breakpoint, // but it's up to you. Feel free to change it up. // .alignleft, img.alignleft margin-right: 1.5em display: inline float: left .alignright, img.alignright margin-left: 1.5em display: inline float: right .aligncenter, img.aligncenter margin-right: auto margin-left: auto display: block clear: both video, object pre, code // end .post-content .wp-caption // images inside wp-caption img p.wp-caption-text // end .wp-caption // image gallery styles .gallery dl a img dt dd // end .gallery // gallery caption styles .gallery-caption .size-full .size-large .size-medium .size-thumbnail // // PAGE NAVI STYLES // .page-navigation, .wp-prev-next .bones_page_navi li a &:hover, &:focus // end .bones_page_navi // current page link li.bpn-current a // hovering on current page link &:hover, &:focus // common styles for page-navi links li.bpn-prev-link, li.bpn-next-link a // remove the bg on end links li.bpn-prev-link a:hover, li.bpn-next-link a:hover, li.bpn-first-page-link a:hover, li.bpn-last-page-link a:hover // previous link li.bpn-prev-link a &:hover, &:focus // next page link li.bpn-next-link a &:hover, &:focus // first page link li.bpn-first-page-link a &:hover, &:focus // last page link li.bpn-last-page-link a &:hover, &:focus // fallback previous & next links .wp-prev-next ul .prev-link .next-link // end .wp-prev-next // // COMMENT STYLES // // h3 comment title #comments // number of comments span span .comment-nav ul li // end .comment-nav // comment styles .commentlist li &:last-child ul.children li li[class*=depth-] li.depth-1 li:not(.depth-1) li.depth-2 li.depth-3 li.depth-4 li.depth-5 .odd .even // wordpress comment classes .comment // regular comment class (present on all) .alt // an alt comment .parent // a parent comment .children // a child comment .pingback // a pingback .bypostauthor // a comment by the post author .comment-author // a comment by the author .comment-author-admin // a comment by the author who is admin .thread-alt // a comment inside a thread alt .thread-odd // an odd comment inside thread .thread-even // an even comment inside thread /// comment vcard .vcard // comment author name cite.fn // author link url a.url // comment date time a &:hover // the comment gravatar img.avatar // end .commentlist // comment meta .comment-meta a // comment meta data .commentmetadata a // comment content .comment_content p // end .comment_content // comment reply link .comment-reply-link &:hover, &:focus // end .comment-reply-link // // COMMENT FORM STYLES // .respond-form form li label, small input[type=text], input[type=email], input[type=url], textarea &:focus // form validation &:invalid input[type=text], input[type=email], input[type=url] textarea // end .respond-form // comment submit button #submit // comment form title #comment-form-title // cancel comment reply link #cancel-comment-reply a // logged in comments .comments-logged-in-as // allowed tags #allowed_tags // no comments .nocomments // // SIDEBARS & ASIDES // .sidebar .widgettitle .widget ul li &:first-child &:last-child a // deep nesting ul // end .widget // // FOOTER STYLES // .footer // // if you checked out the link above: // http://www.alistapart.com/articles/organizing-mobile/ // you'll want to style the footer nav // a bit more in-depth. Remember to keep // it simple because you'll have to // override these styles for the desktop // view. // .footer-links ul li // end .footer-links .attribution