// // Site Name: // Author: // // Stylesheet: Base Mobile Stylesheet // // Be light and don't over style since everything here will be // loaded by mobile devices. You want to keep it as minimal as // possible. This is called by itself and is the only one called // for devices that are smaller than 480px so that the mobile // version pulls ONLY the css it needs. This means it's screamingly // fast on mobile connections. // // For more info, check out this great link on the topic: // http://nicolasgallagher.com/mobile-first-css-sass-and-ie/ // // // // IMPORTING STYLES // // import reset @import "normalize" // import mixins @import "mixins" // // GENERAL STYLES // body font-family: Georgia, serif font-size: 14px line-height: 1.5 color: #565656 background: #fefefe // // WORDPRESS BODY CLASSES // style a page via class // .rtl // for sites that are read right to left (i.e. hebrew) .home // home page .blog // blog template 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 template .page-child // child page template .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 width: 90% margin: 0 auto // // No Grid? Say Whaaaat? // There's really no need for all that // extraneous grid css since floating // columns wouldn't really fit on such a // small screen, so let's only bring it in // when we're ready for it. // // // LINK STYLES // a, a:visited color: #f01d4f // on hover &:hover, &:focus color: #f05e81 // on click &:active // mobile tap color &:link // // this highlights links on iPhones/iPads. // so it basically works like the :hover selector // for mobile devices. // -webkit-tap-highlight-color : rgba(0,0,0,0) // // H1, H2, H3, H4, H5 STYLES // h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 font-family: sans-serif font-weight: 500 // // if you're going to use webfonts, be sure to check your weights // http://css-tricks.com/watch-your-font-weight/ // // removing text decoration from all headline links a text-decoration: none h1, .h1 font-size: 2.5em line-height: 1.333em h2, .h2 font-size: 1.75em line-height: 1.4em margin-bottom: 0.375em h3, .h3 font-size: 1.125em h4, .h4 font-size: 1.1em font-weight: 700 h5, .h5 font-size: 0.846em line-height: 2.09em text-transform: uppercase letter-spacing: 2px // // HEADER SYTLES // .header #logo // // NAVIGATION STYLES // // // POSTS & CONTENT STYLES // #content margin-top: 2.2em // want to style individual post classes? Booya! .hentry // standard post class border-bottom: 4px double #ccc .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 color: #999 time // post content .post-content p ul, ol, table, dl ul, ol li ul li ol li blockquote &:before dl dt dd margin-left: 0 font-size: 0.9em color: #787878 margin-bottom: 1.5em img margin: 0 0 1.5em 0 max-width: 100% height: auto // // 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 .alignright, img.alignright .aligncenter, img.aligncenter video, object max-width: 100% pre, code background: #eee border: 1px solid #cecece padding: 10px // end .post-content .wp-caption background: #eee padding: 5px // images inside wp-caption img margin-bottom: 0 width: 100% p.wp-caption-text font-size: 0.85em margin: 4px 0 7px text-align: center // 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 margin: 1.1em 0 2.2em .bones_page_navi li float: left margin-left: 10px a padding: 3px 6px display: block text-decoration: none position: relative &:hover, &:focus color: #f01d4f text-decoration: underline // end .bones_page_navi // current page link li.bpn-current padding: 3px 6px border-bottom: 2px solid #f01d4f position: relative a // hovering on current page link &:hover, &:focus // common styles for page-navi links li.bpn-prev-link, li.bpn-next-link font-weight: 700 a padding: 0 // 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 background: none // 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 float: left .next-link float: right // 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 position: relative clear: both overflow: hidden list-style-type: none margin-bottom: 1.5em padding: 0.7335em 10px &:last-child margin-bottom: 0 ul.children margin: 0 li li[class*=depth-] margin-top: 1.1em li.depth-1 margin-left: 0 margin-top: 0 li:not(.depth-1) margin-right: -10px margin-left: -10px margin-top: 0 padding-bottom: 0 li.depth-2 li.depth-3 li.depth-4 li.depth-5 .odd background: #eee .even background: #fefefe // 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 margin-left: 50px // comment author name cite.fn font-weight: 700 font-style: normal // author link url a.url // comment date time float: right a color: #999 text-decoration: none &:hover text-decoration: underline // the comment gravatar img.avatar position: absolute left: 10px padding: 2px border: 1px solid #cecece background: #fff // end .commentlist // comment meta .comment-meta a // comment meta data .commentmetadata a // comment content .comment_content margin-left: 50px p margin: 0.7335em 0 1.5em font-size: 1em line-height: 1.5em // end .comment_content // comment reply link .comment-reply-link text-decoration: none float: right background: #4598bb padding: 3px 5px color: $white opacity: 0.65 margin-bottom: 10px font-weight: 700 font-size: 0.9em &:hover, &:focus opacity: 1 // end .comment-reply-link // // COMMENT FORM STYLES // .respond-form margin: 1.5em 10px padding-bottom: 2.2em form margin: 0.75em 0 li list-style-type: none clear: both margin-bottom: 0.7335em label, small display: none input[type=text], input[type=email], input[type=url], textarea padding: 3px 6px background: #efefef border: 2px solid #cecece line-height: 1.5em &:focus background: $white // form validation &:invalid outline: none border-color: #fbc2c4 background-color: #f6e7eb -webkit-box-shadow: none -moz-box-shadow: none -ms-box-shadow: none box-shadow: none input[type=text], input[type=email], input[type=url] max-width: 400px min-width: 250px textarea resize: none width: 97.3% height: 150px // end .respond-form // comment submit button #submit // comment form title #comment-form-title margin: 0 0 1.1em // cancel comment reply link #cancel-comment-reply a // logged in comments .comments-logged-in-as // allowed tags #allowed_tags margin: 1.5em 10px 0.7335em 0 // no comments .nocomments margin: 0 20px 1.1em // // SIDEBARS & ASIDES // .sidebar .widgettitle .widget ul li &:first-child &:last-child a // deep nesting ul // end .widget // // FOOTER STYLES // .footer clear: both // // 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