// // Site Name: // Author: // // Stylesheet: TABLET & SMALLER LAPTOPS // // Here's where you can start getting into the good stuff. // This size will work on iPads, other tablets, and desktops. // So you can start working with more styles, background images, // and other resources. You'll also notice the grid starts to // come into play. Have fun! // // // // GENERAL STYLES // body // // WORDPRESS BODY CLASSES // style a page via class // .rtl // right to left like hebrew .home // home page .blog // blog page .archive // archive page .date // date archive page .date-paged-1 // replace the number to the corresponding page number .search // search page .search-results // search result page .search-no-results // no results search page .search-paged-1 // individual paged search (i.e. body.search-paged-3) .error404 // 404 page .single // single post page .postid-1 // individual post page by id (i.e. body.postid-73) .single-paged-1 // individual paged single (i.e. body.single-paged-3) .attachment // attatchment page .attachmentid-1 // individual attatchment page (i.e. body.attachmentid-763) .attachment-mime-type // style mime type pages .author // author page .author-nicename // user nicename (i.e. body.author-samueladams) .author-paged-1 // paged author archives (i.e. body.author-paged-4) for page 4 .category // category page .category-1 // individual category page (i.e. body.category-6) .category-paged-1 // replace the number to the corresponding page number .tag // tag page .tag-slug // individual tag page (i.e. body.tag-news) .tag-paged-1 // replace the number to the corresponding page number .page-template // custom page template page .page-template-page-php // individual page template (i.e. body.page-template-contact-php .page-paged-1 // replace the number to the corresponding page number .page-parent // parent page .page-child // child page .parent-pageid-1 // replace the number to the corresponding page number .logged-in // if user is logged in .paged // paged items like search results or archives .paged-1 // individual paged (i.e. body.paged-3) // // LAYOUT & GRID STYLES // .wrap max-width: 1000px // // This is a combination of the 1140 grid and Twitter Boostrap. // I liked 1140 but Boostrap's grid was way more detailed so // I merged them together, let's see how this works out. // If you want to use 1140, the original values are commented // out on each line. // .onecol width: 5.801104972% // grid_1 .twocol width: 14.364640883% // grid_2 .threecol width: 22.928176794% // grid_3 .fourcol width: 31.491712705% // grid_4 .fivecol width: 40.055248616% // grid_5 .sixcol width: 48.618784527% // grid_6 .sevencol width: 57.182320438000005% // grid_7 .eightcol width: 65.74585634900001% // grid_8 .ninecol width: 74.30939226% // grid_9 .tencol width: 82.87292817100001% // grid_10 .elevencol width: 91.436464082% // grid_11 .twelvecol width: 99.999999993% // grid_12 // layout & column defaults .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol position: relative float: left margin-left: 2.762430939% .first margin-left: 0 .last float: right // // 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 .alignleft, img.alignleft .alignright, img.alignright .aligncenter, img.aligncenter 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 border-bottom: 4px double #ccc margin-bottom: 0.75em font-weight: 300 .widget padding: 0 10px margin: 2.2em 0 ul li margin-bottom: 0.75em &:first-child &:last-child a // deep nesting ul margin-top: 0.75em padding-left: 1em // end .widget // links widget .widget_links ul li a // meta widget .widget_links ul li a // pages widget .widget_links ul li a // recent-posts widget .widget_recent_entries ul li a // archives widget .widget_archive ul li a select option // tag-cloud widget .widget_links ul li &:before &:after a &:before &:after // calendar widget .widget_calendar #calendar_wrap th td #wp-calendar tr td caption a #today #prev a #next a // category widget .widget_categories ul li ul.children a select #cat .postform option .level-0 .level-1 .level-2 .level-3 // recent-comments widget .recentcomments #recentcomments li a .widget_recent_comments // search widget #searchform .widget_search .screen-reader-text // text widget .textwidget p .widget_text // // FOOTER STYLES // // // you'll probably need to do quite a bit // of overriding here if you styled them for // mobile. Make sure to double check these! // .footer-links ul li // end .footer-links .attribution