/* Theme Name: August Writing Theme URI: Author: Alex Ye Author URI: http://www.zoodey.com Description: August Writing is a clean designed Wordpress theme. It is modified based on Twenty Elevn. It support background customization and post featured image. A new function, catching post's first image is added to August Writing. The first image of the post will be displayed in the category list page. Some useless post format are removed. Only standard, gallery and quote are left. The post and page template are redesigned. Right sidebar is added to the new templates. It keep only two most used widget sidebar, Main Sidebar and Footer Siderbar. Overall, August Writing is a theme aim to create simple and clean write experience. We wish to help users to focus on pure writing. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, white, black, gray, two-columns, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, seasonal Text Domain: augustwriting */ /* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html -------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } :focus {/* remember to define focus styles! */ outline: 0; } body { background: #fff; line-height: 1; } ol, ul { list-style: none; } table {/* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a img { border: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* =Global ----------------------------------------------- */ body, input, textarea { color: #373737; font: 13.5px "Lucida Sans Unicode", "Lucida Grande", sans-serif, Arial, "Helvetica Neue", Helvetica; font-weight: 300; line-height: 1.625; } body { background: #e2e2e2; } #page { background: #fff; } /* =WordPress Core -------------------------------------------------------------- */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float:right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } .aligncenter { display: block; margin: 5px auto 5px auto; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } /* Headings */ h1,h2,h3,h4,h5,h6 { clear: both; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.625em; } /* Text elements */ p { margin-bottom: 1.625em; } ul, ol { margin: 0 0 1.625em 2.5em; } ul { list-style: square; } ol { list-style-type: decimal; } ol ol { list-style: upper-alpha; } ol ol ol { list-style: lower-roman; } ol ol ol ol { list-style: lower-alpha; } ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; } dl { margin: 0 1.625em; } dt { font-weight: bold; } dd { margin-bottom: 1.625em; } strong { font-weight: bold; } cite, em, i { font-style: italic; } blockquote { font-family: Georgia, "Bitstream Charter", serif; font-style: italic; font-weight: normal; margin: 0 3em; } blockquote em, blockquote i, blockquote cite { font-style: normal; } blockquote cite { color: #666; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; letter-spacing: 0.05em; text-transform: uppercase; } pre { background: #f4f4f4; font: 13px "Courier 10 Pitch", Courier, monospace; line-height: 1.5; margin-bottom: 1.625em; overflow: auto; padding: 0.75em 1.625em; } code, kbd, samp, var { font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym, dfn { border-bottom: 1px dotted #666; cursor: help; } address { display: block; margin: 0 0 1.625em; } ins { background: #fff9c0; text-decoration: none; } sup, sub { font-size: 10px; height: 0; line-height: 1; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } /* Forms */ input[type=text], input[type=password], textarea { background: #fafafa; -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); border: 1px solid #ddd; color: #888; } input[type=text]:focus, textarea:focus { color: #373737; } textarea { padding-left: 3px; width: 98%; } input[type=text] { padding: 3px; } input#s { background: url(images/search.png) no-repeat 5px 6px; -moz-border-radius: 2px; border-radius: 2px; font-size: 14px; height: 22px; line-height: 1.2em; padding: 4px 28px; } input#searchsubmit { display: none; } /* Links */ a { color: #349BBC; text-decoration: none; } a:focus, a:active, a:hover { text-decoration: underline; } a:link { color:#349BBC; text-decoration:none; } a:visited { color:#349BBC; text-decoration:none; } a:active, a:hover { color: #349BBC; text-decoration:underline; } /* Assistive text */ .assistive-text { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } #access a.assistive-text:active, #access a.assistive-text:focus { background: #eee; border-bottom: 1px solid #ddd; color: #1982d1; clip: auto !important; font-size: 12px; position: absolute; text-decoration: underline; top: 0; left: 7.6%; } /* =Structure ----------------------------------------------- */ body { padding: 0 2em; } #page { margin: 0 auto; max-width: 1000px; } #page:after, #main:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;} #branding hgroup { margin-left:5%; width:auto; float:left; } #access div { float:left; width:auto; } #primary { float: left; margin: 0 -30% 0 0; width: 100%; } #content { margin: 0 34% 0 5%; width: 61%; } #secondary { float: right; margin-right: 5%; width: 25%; background-color:#fafafa; } /* Header */ #branding{height:130px;padding:30px 0 15px;} #branding a{color:#272727;} #branding a:hover{color:#349BBC;} #branding #site-title{ font-size:180%; width:auto;} #branding #site-title a:hover{text-decoration:none; color:#333;} #branding #site-description{ width:auto;font-size:80%;} /* topnav */ #topnav{height:100px; background-color:#333; box-shadow:0 -2px 2px #555 inset;} #topnav ul li{list-style:none; float:left; padding:5px 10px;} #topnav ul li a{color:#fff;} .top-nav-left, .top-nav-right{width:50%; float:left;} .top-nav-right{float:right;} /* Access */ #access{float:left;clear:both;width:90%;padding:5px 0; margin:25px 5% 0; border-bottom:#f2f2f2 solid 1px;border-top:#f2f2f2 solid 1px;} #access ul{margin:0;} #access ul li{float:left; list-style:none; padding:0 10px;} /* Search Form */ #branding #searchform { text-align: right; float:right; margin-right:5%; padding:15px 0; } #branding #searchform div { margin: 0; } #branding #s { float: right; -webkit-transition-duration: 400ms; -webkit-transition-property: width, background; -webkit-transition-timing-function: ease; -moz-transition-duration: 400ms; -moz-transition-property: width, background; -moz-transition-timing-function: ease; -o-transition-duration: 400ms; -o-transition-property: width, background; -o-transition-timing-function: ease; width: 72px; } #branding #s:focus { background-color: #f9f9f9; width: 196px; } #branding #searchsubmit { display: none; } #branding .only-search #searchform { top: 5px; z-index: 1; } #branding .only-search #s { background-color: #666; border-color: #000; color: #222; } #branding .only-search #s, #branding .only-search #s:focus { width: 85%; } #branding .only-search #s:focus { background-color: #bbb; } #branding .with-image #searchform { top: auto; bottom: -27px; max-width: 195px; } #branding .only-search + #access div { padding-right: 205px; } /* Article */ #content .post,#content .attachment{border-bottom:#e2e2e2 dashed 1px; padding:10px 0; margin-bottom:10px;} #content .entry-title{ font:170% Georgia, "Times New Roman", Times, serif; padding:5px 0;} #content .entry-title a{color:#373737;} #content .entry-title a:hover{color:#349bbc; text-decoration:underline;} .entry-header .entry-format{color:#999; font-size:80%; text-transform:uppercase;} .blog .sticky .entry-header .entry-meta { clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); position: absolute !important; } #content .entry-meta{ font-size:80%; margin-bottom:10px; } #content .entry-meta .entry-date,#content .entry-meta .by-author,#content .entry-meta .cat-links{border-right: #e2e2e2 solid 1px; padding:0 8px;} #content .entry-meta .comments-link{background:url(images/comment.png) right 0 no-repeat; padding:0 13px 0 10px;margin-right:5px;} #content .entry-meta .edit-link{display:block; clear:left;} #content .entry-meta .edit-link a{ background-color:#349BBC; color:#fff; padding:0 3px; border-radius:3px;} #content .entry-summary p{ margin-top:10px; clear:left;} #content .entry-summary .attachment-post-thumbnail{max-width:610px; height:auto;} #nav-single{ min-height:16px; padding-bottom:10px; border-bottom:1px dashed #E2E2E2; font-size:80%;} #nav-single .nav-next{ float:right;} /* Sidebar */ #secondary .widget{padding:10px 15px;} .widget-title{ padding:5px 0;} .widget-title a{color:#373737;} .widget ul{margin:0;} .widget ul li{list-style:none; font-size:90%;} .widget p{margin-bottom:10px;font-size:90%;} /* comment */ #comments #comments-title{ padding:2px 10px; margin:5px 0; font-family:Tahoma, Geneva, sans-serif;font-size:110%;} #comments #comments-title .number{padding:0 5px;background-color:#349BBC;color:#fff;border-radius:5px;} #respond{margin-top:10px;} #comments ol{margin:0;} .commentlist li{list-style:none; padding:20px; margin-bottom:5px;} .commentlist .even{ background-color:#fafafa;} .commentlist .children{margin:10px 0 0;} .commentlist .children .odd{background:#fff;} .commentlist .children li{} .comment-meta .comment-author{font-size:80%; color:#999999;} .comment-meta .comment-author .fn{font-size:160%; padding:5px 10px 0 0; font-weight:bold; color:#373737;} .comment-meta .comment-author img{float:left; padding:5px; margin-right:10px; border:#ddd solid 1px;} .commentlist .comment-content{padding-left:60px;} .commentlist .children .comment-content{padding-left:40px;} /* comment form */ #respond { margin: 0 auto 1.625em; padding: 1.625em; position: relative; width: 100%; } #respond input[type="text"], #respond textarea { background: none repeat scroll 0 0 #fafafa; border: 1px solid #EEEEEE; padding: 10px; position: relative; text-indent: 80px; } #respond .comment-form-author, #respond .comment-form-email, #respond .comment-form-url, #respond .comment-form-comment { position: relative; } #respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-comment label { z-index: 1; } #respond input[type="text"]:focus, #respond textarea:focus { text-indent: 0; z-index: 1; } #respond textarea { resize: vertical; text-indent:0; width: 95%; } #respond .comment-form-author .required, #respond .comment-form-email .required { color: #BD3500; font-size: 22px; font-weight: bold; left: 75%; position: absolute; top: 30px; z-index: 1; } #respond .comment-notes, #respond .logged-in-as {} #respond p { margin: 10px 0; } #respond .form-submit { float: right; margin: 0 0 10px; } #respond input#submit { background: none repeat scroll 0 0 #222222; border: medium none; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); color: #EEEEEE; cursor: pointer; font-size: 15px; left: -10px; margin: 20px 0; padding: 5px 22px; position: relative; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); } #respond input#submit:active { background: none repeat scroll 0 0 #1982D1; color: #BFDDF3; } #respond #cancel-comment-reply-link { color: #666666; margin-left: 10px; text-decoration: none; } #respond .logged-in-as a:hover, #respond #cancel-comment-reply-link:hover { text-decoration: underline; } .commentlist #respond { margin: 1.625em 0 0; width: auto; } #reply-title { font-size: 20px; font-weight: bold; line-height: 30px; } #cancel-comment-reply-link { color: #888888; display: block; font-size: 10px; font-weight: normal; letter-spacing: 0.05em; line-height: 2.2em; position: absolute; right: 1.625em; text-decoration: none; text-transform: uppercase; top: 1.1em; } #cancel-comment-reply-link:focus, #cancel-comment-reply-link:active, #cancel-comment-reply-link:hover { color: #FF4B33; } #respond label { line-height: 2.2em; } #respond input[type="text"] { display: block; width: 75%; } #respond p { font-size: 12px; } p.comment-form-comment { margin: 0; } .form-allowed-tags { display: none; } /* footer */ #colophon{margin:15px 5% 0;padding:25px 0; border-top:#f2f2f2 solid 1px;} #colophon .widget{width:21%;float: left;margin: 0 4% 20px 0;} #colophon #site-generator{display:block;clear:both; text-align:center; font-size:80%; color:#999; border-top:#f2f2f2 solid 1px; padding-top:20px;} /* Attachments */ .singular .image-attachment .entry-content { margin: 0 auto; width: auto; } .singular .image-attachment .entry-description { margin: 0 auto; width: 68.9%; } /* error404 */ .error404 #primary { float: none; margin: 0; } .error404 #primary #content { margin: 0 5%; width: auto; } /* Alignment */ .alignleft { display: inline; float: left; margin-right: 1.625em; } .alignright { display: inline; float: right; margin-left: 1.625em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } /* Right Content */ .left-sidebar #primary { float: right; margin: 0 0 0 -30%; width: 100%; } .left-sidebar #content { margin: 0 5% 0 34%; width: 61%; } .left-sidebar #secondary { float: left; margin-left: 5%; margin-right: 0; width: 25%; } /* Images */ .entry-content img, .comment-content img, .widget img { max-width: 97.5%; /* Fluid images for posts, comments, and widgets */ } img[class*="align"], img[class*="wp-image-"], img[class*="attachment-"] { height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ } img.size-full, img.size-large { max-width: 97.5%; width: auto; /* Prevent stretching of full-size and large-size images with height and width attributes in IE8 */ height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ } .entry-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } img.alignleft, img.alignright, img.aligncenter { margin-bottom: 1.625em; } p img, .wp-caption { margin-top: 0.4em; } .wp-caption { background: #eee; margin-bottom: 1.625em; max-width: 96%; padding: 9px; } .wp-caption img { display: block; margin: 0 auto; max-width: 98%; } .wp-caption .wp-caption-text, .gallery-caption { color: #666; font-family: Georgia, serif; font-size: 12px; } .wp-caption .wp-caption-text { margin-bottom: 0.6em; padding: 10px 0 5px 40px; position: relative; } .wp-caption .wp-caption-text:before { color: #666; content: '\2014'; font-size: 14px; font-style: normal; font-weight: bold; margin-right: 5px; position: absolute; left: 10px; top: 7px; } /* Gallery */ dl.gallery-item {margin:0;} img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {border: 1px solid #DDDDDD;padding: 6px;} /* =Print ----------------------------------------------- */ @media print { body { background: none !important; font-size: 10pt; } footer.entry-meta a[rel=bookmark]:link:after, footer.entry-meta a[rel=bookmark]:visited:after { content: " [" attr(href) "] "; /* Show URLs */ } #page { clear: both !important; display: block !important; float: none !important; max-width: 100%; position: relative !important; } #branding { border-top: none !important; padding: 0; } #branding hgroup { margin: 0; } #site-title a { font-size: 21pt; } #site-description { font-size: 10pt; } #branding #searchform { display: none; } #branding img { display: none; } #access { display: none; } #main { border-top: none; box-shadow: none; } #primary { float: left; margin: 0; width: 100%; } #content { margin: 0; width: auto; } .singular #content { margin: 0; width: 100%; } .singular .entry-header .entry-meta { position: static; } .entry-meta .edit-link a { display: none; } #content nav { display: none; } .singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title { margin: 0; width: 100%; } .singular .hentry { padding: 0; } .entry-title, .singular .entry-title { font-size: 21pt; } .entry-meta { font-size: 10pt; } .entry-header .comments-link { display: none; } .page-link { display: none; } .singular #author-info { background: none; border-bottom: none; border-top: none; margin: 2.2em 0 0; padding: 0; } #respond { display: none; } .widget-area { display: none; } #colophon { display: none; } /* Comments */ .commentlist > li.comment { background: none; border: 1px solid #ddd; -moz-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; margin: 0 auto 1.625em; padding: 1.625em; position: relative; width: auto; } .commentlist .avatar { height: 39px; left: 2.2em; top: 2.2em; width: 39px; } .commentlist li.comment .comment-meta { line-height: 1.625em; margin-left: 50px; } .commentlist li.comment .fn { display: block; } .commentlist li.comment .comment-content { margin: 1.625em 0 0; } .commentlist .comment-edit-link { display: none; } .commentlist > li::before, .commentlist > li.bypostauthor::before { content: ''; } .commentlist .reply { display: none; } /* Post author highlighting */ .commentlist > li.bypostauthor { color: #444; } .commentlist > li.bypostauthor .comment-meta { color: #666; } .commentlist > li.bypostauthor:before { content: none; } /* Post Author threaded comments */ .commentlist .children > li.bypostauthor { background: #fff; border-color: #ddd; } .commentlist .children > li.bypostauthor > article, .commentlist .children > li.bypostauthor > article .comment-meta { color: #666; } } /* One column */ .one-column #page { max-width: 690px; } .one-column #content { margin: 0 5%; width: auto; } .one-column #nav-below { border-bottom: 1px solid #ddd; margin-bottom: 1.625em; } .one-column #secondary { float: none; margin: 0 5%; width: auto; } /* Simplify the showcase template */ .one-column .page-template-showcase-php section.recent-posts { float: none; margin: 0; width: 100%; } .one-column .page-template-showcase-php #main .widget-area { float: none; margin: 0; width: auto; } .one-column .page-template-showcase-php .other-recent-posts { border-bottom: 1px solid #ddd; } /* Simplify the showcase template when small feature */ .one-column section.featured-post .attachment-small-feature { border: none; display: block; height: auto; max-width: 60%; position: static; } .one-column article.feature-image.small { margin: 0 0 1.625em; padding: 0; } .one-column article.feature-image.small .entry-title { font-size: 20px; line-height: 1.3em; } .one-column article.feature-image.small .entry-summary { height: 150px; overflow: hidden; padding: 0; text-overflow: ellipsis; } .one-column article.feature-image.small .entry-summary a { left: -9%; } /* Remove the margin on singular articles */ .one-column.singular .entry-header, .one-column.singular .entry-content, .one-column.singular footer.entry-meta, .one-column.singular #comments-title { width: 100%; } /* Simplify the pullquotes and pull styles */ .one-column.singular blockquote.pull { margin: 0 0 1.625em; } .one-column.singular .pull.alignleft { margin: 0 1.625em 0 0; } .one-column.singular .pull.alignright { margin: 0 0 0 1.625em; } .one-column.singular .entry-meta .edit-link a { position: absolute; left: 0; top: 40px; } .one-column.singular #author-info { margin: 2.2em -8.8% 0; padding: 20px 8.8%; } /* Make sure we have room for our comment avatars */ .one-column .commentlist > li.comment { margin-left: 102px; width: auto; } /* Make sure the logo and search form don't collide */ .one-column #branding #searchform { right: 40px; top: 4em; } /* Talking avatars take up too much room at this size */ .one-column .commentlist > li.comment { margin-left: 0; } .one-column .commentlist > li.comment .comment-meta, .one-column .commentlist > li.comment .comment-content { margin-right: 85px; } .one-column .commentlist .avatar { background: transparent; display: block; padding: 0; top: 1.625em; left: auto; right: 1.625em; } .one-column .commentlist .children .avatar { background: none; padding: 0; position: absolute; top: 2.2em; left: 2.2em; } .one-column #respond { width: auto; } /* =IE7 ----------------------------------------------- */ #ie7 article.intro { margin-left: -7.6%; margin-right: -7.6%; padding-left: -7.6%; padding-right: -7.6%; max-width: 1000px; } #ie7 section.featured-post { margin-left: -7.6%; margin-right: -7.6%; max-width: 850px; } #ie7 section.recent-posts { margin-right: 7.6%; } /* =IE8 ----------------------------------------------- */ #ie8 section.feature-image.large img { width: 100%; }