Created
March 21, 2014 01:02
-
-
Save anemoone/9677448 to your computer and use it in GitHub Desktop.
HR-style
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Theme Name: Hemingway Rewritten – WordPress.com | |
| Theme URI: http://theme.wordpress.com/themes/hemingway-rewritten/ | |
| Description: Description | |
| Version: 1.0 | |
| Author: Anders Noren | |
| Author URI: http://www.andersnoren.se | |
| License: GPL v2 or later | |
| License URI: http://www.gnu.org/licenses/gpl-2.0.html | |
| Text Domain: hemingway-rewritten | |
| */ | |
| /*-------------------------------------------------------------- | |
| >>> TABLE OF CONTENTS: | |
| ---------------------------------------------------------------- | |
| 1.0 - Reset | |
| 2.0 - Typography | |
| 3.0 - Elements | |
| 4.0 - Forms | |
| 5.0 - Navigation | |
| 5.1 - Links | |
| 5.2 - Menus | |
| 6.0 - Accessibility | |
| 7.0 - Alignments | |
| 8.0 - Clearings | |
| 9.0 - Widgets | |
| 10.0 - Content | |
| 10.1 - Posts and pages | |
| 10.2 - Asides | |
| 10.3 - Comments | |
| 11.0 - Infinite scroll | |
| 12.0 - Media | |
| 13.0 - Layout | |
| 14.0 - Header | |
| --------------------------------------------------------------*/ | |
| /*-------------------------------------------------------------- | |
| 1.0 - Reset | |
| --------------------------------------------------------------*/ | |
| 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; | |
| } | |
| html { | |
| font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */ | |
| overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */ | |
| -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ | |
| -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ | |
| } | |
| *, | |
| *:before, | |
| *:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ | |
| -webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */ | |
| -moz-box-sizing: border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */ | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: #fff; | |
| } | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| main, | |
| nav, | |
| section { | |
| display: block; | |
| } | |
| 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:focus { | |
| outline: thin dotted; | |
| } | |
| a:hover, | |
| a:active { | |
| outline: 0; | |
| } | |
| a img { | |
| border: 0; | |
| } | |
| /*-------------------------------------------------------------- | |
| 2.0 Typography | |
| --------------------------------------------------------------*/ | |
| body, | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| color: #444; | |
| font-family: "Lato", sans-serif; | |
| font-size: 18px; | |
| font-size: 1.8rem; | |
| line-height: 1.7; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| clear: both; | |
| margin: .85em 0; | |
| } | |
| h1 { | |
| font-size: 36px; | |
| font-size: 3.6rem; | |
| font-weight: 700; | |
| } | |
| h2 { | |
| font-size: 30px; | |
| font-size: 3.0rem; | |
| font-weight: 700; | |
| } | |
| h3 { | |
| font-size: 27px; | |
| font-size: 2.7rem; | |
| font-weight: 700; | |
| } | |
| h4 { | |
| font-size: 22px; | |
| font-size: 2.2rem; | |
| } | |
| h5 { | |
| font-size: 20px; | |
| font-size: 2.0rem; | |
| } | |
| h6 { | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .post-content h1+h1, .post-content h1+h2, .post-content h1+h3, .post-content h1+h4, .post-content h1+h5, .post-content h1+h6, | |
| .post-content h2+h1, .post-content h2+h2, .post-content h2+h3, .post-content h2+h4, .post-content h2+h5, .post-content h2+h6, | |
| .post-content h3+h1, .post-content h3+h2, .post-content h3+h3, .post-content h3+h4, .post-content h3+h5, .post-content h3+h6, | |
| .post-content h4+h1, .post-content h4+h2, .post-content h4+h3, .post-content h4+h4, .post-content h4+h5, .post-content h4+h6, | |
| .post-content h5+h1, .post-content h5+h2, .post-content h5+h3, .post-content h5+h4, .post-content h5+h5, .post-content h5+h6, | |
| .post-content h6+h1, .post-content h6+h2, .post-content h6+h3, .post-content h6+h4, .post-content h6+h5, .post-content h6+h6 { | |
| margin-top: 30px; | |
| } | |
| p { | |
| margin-bottom: 1.7em; | |
| } | |
| b, strong { | |
| font-weight: bold; | |
| } | |
| dfn, cite, em, i { | |
| font-style: italic; | |
| } | |
| blockquote cite { | |
| font-style: normal; | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| line-height: 140%; | |
| color: #666; | |
| } | |
| blockquote { | |
| margin: 15px 0; | |
| padding: 1.7em; | |
| line-height: 150%; | |
| color: rgba(0,0,0,0.4); | |
| background: #eee; | |
| font-family: "Raleway", "Helvetica Neue", sans-serif; | |
| } | |
| address { | |
| margin: 0 0 1.7em; | |
| padding: 3% 3.5%; | |
| background: #f1f1f1; | |
| } | |
| pre { | |
| background: #eee; | |
| font-family: "Courier 10 Pitch", Courier, monospace; | |
| font-size: 15px; | |
| font-size: 1.5rem; | |
| margin-bottom: 1.7em; | |
| max-width: 100%; | |
| overflow: auto; | |
| padding: 1.6em; | |
| } | |
| code, kbd, tt, var { | |
| font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; | |
| } | |
| abbr, acronym { | |
| border-bottom: 1px dotted #666; | |
| cursor: help; | |
| } | |
| mark, ins { | |
| background: #fff9c0; | |
| text-decoration: none; | |
| } | |
| sup, | |
| sub { | |
| font-size: 75%; | |
| height: 0; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| } | |
| sup { | |
| bottom: 1ex; | |
| } | |
| sub { | |
| top: .5ex; | |
| } | |
| small { | |
| font-size: 75%; | |
| } | |
| big { | |
| font-size: 125%; | |
| } | |
| /*-------------------------------------------------------------- | |
| 3.0 Elements | |
| --------------------------------------------------------------*/ | |
| hr { | |
| background-color: #ccc; | |
| border: 0; | |
| height: 1px; | |
| margin-bottom: 1.7em; | |
| } | |
| ul, ol { | |
| margin: 0 0 1.7em 3em; | |
| } | |
| ul { | |
| list-style: disc; | |
| } | |
| ol { | |
| list-style: decimal; | |
| } | |
| li > ul, | |
| li > ol { | |
| margin-bottom: 0; | |
| margin-left: 1.7em; | |
| } | |
| dt { | |
| font-weight: bold; | |
| } | |
| dd { | |
| margin: 0 1.5em 1.5em; | |
| } | |
| figure { | |
| margin: 0; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| empty-cells: show; | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| margin: 0 0 1.7em; | |
| width: 100%; | |
| } | |
| th { | |
| border-bottom: 1px solid #ddd; | |
| color: #444; | |
| font-weight: bold; | |
| padding: 2%; | |
| } | |
| td { | |
| border-bottom: 1px solid #ddd; | |
| line-height: 120%; | |
| margin: 0; | |
| overflow: visible; | |
| padding: 2%; | |
| } | |
| .entry-content table tbody > tr:nth-child(odd) > td { | |
| background: #f9f9f9; | |
| } | |
| /*-------------------------------------------------------------- | |
| 4.0 Forms | |
| --------------------------------------------------------------*/ | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font-size: 100%; /* Corrects font size not being inherited in all browsers */ | |
| margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ | |
| vertical-align: baseline; /* Improves appearance and consistency in all browsers */ | |
| *vertical-align: middle; /* Improves appearance and consistency in IE6/IE7 */ | |
| } | |
| button, | |
| input[type="button"], | |
| input[type="reset"], | |
| input[type="submit"] { | |
| border: 0 none; | |
| border-radius: 4px; | |
| background: #1d1d1d; | |
| color: #fff; | |
| cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ | |
| -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ | |
| font-family: "Lato", sans-serif; | |
| line-height: 1; | |
| padding: 16px 18px; | |
| -webkit-transition: all 0.2s ease-in-out; | |
| -moz-transition: all 0.2s ease-in-out; | |
| -ms-transition: all 0.2s ease-in-out; | |
| -o-transition: all 0.2s ease-in-out; | |
| transition: all 0.2s ease-in-out; | |
| } | |
| button:hover, | |
| input[type="button"]:hover, | |
| input[type="reset"]:hover, | |
| input[type="submit"]:hover { | |
| background: #1abc9c; | |
| -webkit-transition: all 0.2s ease-in-out; | |
| -moz-transition: all 0.2s ease-in-out; | |
| -ms-transition: all 0.2s ease-in-out; | |
| -o-transition: all 0.2s ease-in-out; | |
| transition: all 0.2s ease-in-out; | |
| } | |
| button:focus, | |
| input[type="button"]:focus, | |
| input[type="reset"]:focus, | |
| input[type="submit"]:focus, | |
| button:active, | |
| input[type="button"]:active, | |
| input[type="reset"]:active, | |
| input[type="submit"]:active { | |
| background: #1abc9c; | |
| } | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| padding: 0; /* Addresses excess padding in IE8/9 */ | |
| } | |
| input[type="search"] { | |
| -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ | |
| -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| } | |
| input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ | |
| -webkit-appearance: none; | |
| } | |
| button::-moz-focus-inner, | |
| input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ | |
| border: 0; | |
| padding: 0; | |
| } | |
| input[type="text"], | |
| input[type="email"], | |
| input[type="url"], | |
| input[type="password"], | |
| input[type="search"], | |
| textarea { | |
| background: #fafafa; | |
| color: #444; | |
| border: 1px solid #eee; | |
| border-radius: 3px; | |
| padding: 2%; | |
| -webkit-transition: all 0.2s ease-in-out; | |
| -moz-transition: all 0.2s ease-in-out; | |
| -ms-transition: all 0.2s ease-in-out; | |
| -o-transition: all 0.2s ease-in-out; | |
| transition: all 0.2s ease-in-out; | |
| } | |
| input[type="text"]:focus, | |
| input[type="email"]:focus, | |
| input[type="url"]:focus, | |
| input[type="password"]:focus, | |
| input[type="search"]:focus, | |
| textarea:focus { | |
| background: #eee; | |
| color: #444; | |
| outline: none; | |
| -webkit-transition: all 0.2s ease-in-out; | |
| -moz-transition: all 0.2s ease-in-out; | |
| -ms-transition: all 0.2s ease-in-out; | |
| -o-transition: all 0.2s ease-in-out; | |
| transition: all 0.2s ease-in-out; | |
| } | |
| input[type="text"], | |
| input[type="email"], | |
| input[type="url"], | |
| input[type="password"], | |
| input[type="search"] { | |
| padding: 3px; | |
| } | |
| textarea { | |
| overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ | |
| padding-left: 3px; | |
| vertical-align: top; /* Improves readability and alignment in all browsers */ | |
| width: 98%; | |
| } | |
| /*-------------------------------------------------------------- | |
| 5.0 Navigation | |
| --------------------------------------------------------------*/ | |
| /*-------------------------------------------------------------- | |
| 5.1 Links | |
| --------------------------------------------------------------*/ | |
| a { | |
| color: #1abc9c; | |
| text-decoration: none; | |
| -webkit-transition: all 0.2s ease-in-out; | |
| -moz-transition: all 0.2s ease-in-out; | |
| -ms-transition: all 0.2s ease-in-out; | |
| -o-transition: all 0.2s ease-in-out; | |
| transition: all 0.2s ease-in-out; | |
| } | |
| a:visited { | |
| color: #1abc9c; | |
| } | |
| a:hover, | |
| a:focus, | |
| a:active { | |
| color: #1abc9c; | |
| -webkit-transition: all 0.2s ease-in-out; | |
| -moz-transition: all 0.2s ease-in-out; | |
| -ms-transition: all 0.2s ease-in-out; | |
| -o-transition: all 0.2s ease-in-out; | |
| transition: all 0.2s ease-in-out; | |
| } | |
| /*-------------------------------------------------------------- | |
| 5.2 Menus | |
| --------------------------------------------------------------*/ | |
| .main-navigation { | |
| background: #1d1d1d; | |
| clear: both; | |
| display: block; | |
| position: relative; | |
| width: 100%; | |
| z-index: 3; | |
| } | |
| .main-navigation ul { | |
| display: block; | |
| list-style: none; | |
| margin: 0 auto; | |
| max-width: 86%; | |
| padding-left: 0; | |
| width: 1040px; | |
| } | |
| .main-navigation li { | |
| float: left; | |
| display: block; | |
| line-height: 1; | |
| position: relative; | |
| } | |
| .main-navigation li:before { | |
| content: "/"; | |
| display: block; | |
| position: absolute; | |
| right: 0; | |
| top: 50%; | |
| margin-top: -9px; | |
| margin-right: -3px; | |
| font-size: 16px; | |
| color: #444; | |
| font-weight: 300; | |
| } | |
| .main-navigation ul > li.has-children:after, | |
| .main-navigation ul > li.page_item_has_children:after { | |
| content: ""; | |
| display: block; | |
| border: 5px solid transparent; | |
| border-top-color: rgba(255,255,255,0.6); | |
| margin-top: -2px; | |
| position: absolute; | |
| right: 17px; | |
| top: 50%; | |
| z-index: 1001; | |
| } | |
| .main-navigation ul ul > li.has-children:after, | |
| .main-navigation ul ul > li.page_item_has_children:after { | |
| border: 5px solid transparent; | |
| border-left-color: rgba(255,255,255,0.6); | |
| } | |
| .main-navigation ul > li.has-children a, | |
| .main-navigation ul > li.page_item_has_children a { | |
| padding-right: 35px; | |
| } | |
| .main-navigation ul ul li { | |
| background: #1d1d1d; | |
| } | |
| .main-navigation ul ul li:before, | |
| .main-navigation li:last-child:before { | |
| display: none; | |
| } | |
| .main-navigation a, | |
| .main-navigation a:visited { | |
| color: rgba(255,255,255,0.6); | |
| display: block; | |
| font-size: 13px; | |
| font-size: 1.3rem; | |
| letter-spacing: 1px; | |
| padding: 1.25em 1.7em; | |
| text-transform: uppercase; | |
| } | |
| .main-navigation ul ul { | |
| box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); | |
| display: none; | |
| float: left; | |
| position: absolute; | |
| top: 2.5em; | |
| left: 0; | |
| z-index: 99999; | |
| } | |
| .main-navigation ul ul ul { | |
| left: 100%; | |
| top: 0; | |
| } | |
| .main-navigation ul ul a, | |
| .main-navigation ul ul a:visited { | |
| padding: 1.7em 0; | |
| margin: 0 1.7em; | |
| line-height: 130%; | |
| border-bottom: 1px solid rgba(255,255,255,0.1); | |
| width: 240px; | |
| } | |
| .main-navigation ul ul li { | |
| } | |
| .main-navigation li:hover > a { | |
| color: #fff; | |
| } | |
| .main-navigation ul ul :hover > a { | |
| } | |
| .main-navigation ul ul a:hover { | |
| } | |
| .main-navigation ul li:hover > ul { | |
| display: block; | |
| } | |
| .main-navigation .current_page_item a, | |
| .main-navigation .current-menu-item a { | |
| color: #fff; | |
| } | |
| /* Small menu */ | |
| .menu-toggle { | |
| cursor: pointer; | |
| display: none; | |
| } | |
| @media screen and (max-width: 800px) { | |
| .menu-toggle, | |
| .main-navigation.toggled .nav-menu { | |
| display: block; | |
| margin: 0 auto 0 1.7em; | |
| } | |
| .menu-toggle { | |
| position: relative; | |
| } | |
| .menu-toggle:before { | |
| color: rgba(255,255,255,0.6); | |
| content: "\f419"; | |
| display: inline-block; | |
| font-family: "Genericons"; | |
| font-size: 24px; | |
| text-decoration: none; | |
| vertical-align: baseline; | |
| } | |
| .main-navigation ul { | |
| display: none; | |
| } | |
| .main-navigation .menu { | |
| background: #282828; | |
| } | |
| .main-navigation li { | |
| clear: both; | |
| float: none; | |
| } | |
| .main-navigation li:before { | |
| display: none; | |
| } | |
| .main-navigation a { | |
| background: #282828; | |
| border-bottom: 1px solid rgba(255,255,255,0.1); | |
| font-size: 13px; | |
| font-size: 1.3rem; | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .main-navigation ul ul { | |
| background: transparent; | |
| box-shadow: none; | |
| clear: both; | |
| display: block; | |
| float: none; | |
| margin: 0; | |
| padding: 0; | |
| position: relative; | |
| top: auto; | |
| left: auto; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| .main-navigation ul ul a, | |
| .main-navigation ul ul ul a { | |
| padding-left: 1.7em; | |
| width: 100%; | |
| } | |
| .main-navigation ul ul ul { | |
| left: auto; | |
| top: auto; | |
| } | |
| .main-navigation ul > li.has-children a, | |
| .main-navigation ul > li.page_item_has_children a { | |
| margin: 0; | |
| padding-right: 0; | |
| } | |
| .main-navigation ul > li.has-children:after, | |
| .main-navigation ul > li.page_item_has_children:after, | |
| .main-navigation ul ul > li.has-children:after, | |
| .main-navigation ul ul > li.page_item_has_children:after { | |
| display: none; | |
| } | |
| } | |
| .site-main .comment-navigation, | |
| .site-main .paging-navigation, | |
| .site-main .post-navigation { | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| margin: 1.7em 0; | |
| border-top: 4px solid #eee; | |
| border-bottom: 4px solid #eee; | |
| overflow: hidden; | |
| } | |
| .comment-navigation .nav-previous, | |
| .paging-navigation .nav-previous, | |
| .post-navigation .nav-previous { | |
| float: left; | |
| width: 50%; | |
| display: block; | |
| position: relative; | |
| padding: 1.7em 0; | |
| max-width: 49%; | |
| color: #666; | |
| } | |
| .comment-navigation .nav-next, | |
| .paging-navigation .nav-next, | |
| .post-navigation .nav-next { | |
| float: right; | |
| text-align: right; | |
| width: 50%; | |
| display: block; | |
| position: relative; | |
| padding: 1.7em 0; | |
| max-width: 49%; | |
| color: #666; | |
| } | |
| /*-------------------------------------------------------------- | |
| 6.0 Accessibility | |
| --------------------------------------------------------------*/ | |
| /* Text meant only for screen readers */ | |
| .screen-reader-text { | |
| clip: rect(1px, 1px, 1px, 1px); | |
| position: absolute !important; | |
| } | |
| .screen-reader-text:hover, | |
| .screen-reader-text:active, | |
| .screen-reader-text:focus { | |
| background-color: #f1f1f1; | |
| border-radius: 3px; | |
| box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); | |
| clip: auto !important; | |
| color: #21759b; | |
| display: block; | |
| font-size: 14px; | |
| font-size: 1.4rem; | |
| font-weight: bold; | |
| height: auto; | |
| left: 5px; | |
| line-height: normal; | |
| padding: 1.7em; | |
| text-decoration: none; | |
| top: 5px; | |
| width: auto; | |
| z-index: 100000; /* Above WP toolbar */ | |
| } | |
| /*-------------------------------------------------------------- | |
| 7.0 Alignments | |
| --------------------------------------------------------------*/ | |
| .alignleft { | |
| display: inline; | |
| float: left; | |
| margin-right: 1.7em; | |
| } | |
| .alignright { | |
| display: inline; | |
| float: right; | |
| margin-left: 1.7em; | |
| } | |
| .aligncenter { | |
| clear: both; | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| /*-------------------------------------------------------------- | |
| 8.0 Clearings | |
| --------------------------------------------------------------*/ | |
| .clear:before, | |
| .clear:after, | |
| .entry-content:before, | |
| .entry-content:after, | |
| .comment-content:before, | |
| .comment-content:after, | |
| .site-header:before, | |
| .site-header:after, | |
| .site-content:before, | |
| .site-content:after, | |
| .site-footer:before, | |
| .site-footer:after, | |
| .site-header:before, | |
| .site-header:after { | |
| content: ''; | |
| display: table; | |
| } | |
| .clear:after, | |
| .entry-content:after, | |
| .comment-content:after, | |
| .site-header:after, | |
| .site-content:after, | |
| .site-footer:after, | |
| .site-header:after { | |
| clear: both; | |
| } | |
| /*-------------------------------------------------------------- | |
| 9.0 Widgets | |
| --------------------------------------------------------------*/ | |
| .widget-areas { | |
| margin: 0 auto 80px; | |
| max-width: 86%; | |
| width: 1040px; | |
| } | |
| .widget-areas .widget-area { | |
| float: left; | |
| } | |
| .widget-areas .widget-area:nth-child(1):nth-last-child(1) { | |
| width: 100%; | |
| } | |
| .widget-areas .widget-area:nth-child(1):nth-last-child(2), | |
| .widget-areas .widget-area:nth-child(2):nth-last-child(1) { | |
| width: 47%; | |
| margin-right: 6%; | |
| } | |
| .widget-areas .widget-area:nth-child(1):nth-last-child(2):last-of-type, | |
| .widget-areas .widget-area:nth-child(2):nth-last-child(1):last-of-type { | |
| margin-right: 0; | |
| } | |
| .widget-areas .widget-area:nth-child(1):nth-last-child(3), | |
| .widget-areas .widget-area:nth-child(2):nth-last-child(2), | |
| .widget-areas .widget-area:nth-child(3):nth-last-child(1) { | |
| width: 30%; | |
| margin-right: 5%; | |
| } | |
| .widget-areas .widget-area:nth-child(1):nth-last-child(3):last-of-type, | |
| .widget-areas .widget-area:nth-child(2):nth-last-child(2):last-of-type, | |
| .widget-areas .widget-area:nth-child(3):nth-last-child(1):last-of-type { | |
| margin-right: 0; | |
| } | |
| .widget { | |
| border-bottom: 4px solid #eee; | |
| color: #555; | |
| margin: 0 0 1.7em; | |
| padding-bottom: 1.7em; | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| position: relative; | |
| } | |
| .widget-areas .widget { | |
| color: rgba( 255,255,255,0.6 ); | |
| } | |
| .widget:last-child { | |
| border-bottom: 0; | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| .widget *:last-child { | |
| margin-bottom: 0; | |
| } | |
| .widget ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .widget ul li { | |
| margin: .85em 0 0; | |
| padding: .85em 0 0; | |
| border-top: 1px solid #eee; | |
| } | |
| .widget-areas .widget ul li { | |
| border-top-color: rgba(255,255,255,0.1); | |
| } | |
| .widget > ul > li:first-child { | |
| border-top: 0; | |
| } | |
| .widget ul ul li { | |
| padding-left: .85em; | |
| } | |
| /* Make sure select elements fit in widgets */ | |
| .widget select { | |
| margin-left: 1px; | |
| max-width: 100%; | |
| } | |
| /* Search widget */ | |
| .widget_search .search-form { | |
| position: relative; | |
| } | |
| .widget_search .search-field { | |
| background: #fff; | |
| border: 1px solid #ddd; | |
| border-radius: 3px 0 0 3px; | |
| border-right: none; | |
| display: block; | |
| font-family: "Lato", sans-serif; | |
| height: 48px; | |
| line-height: 1; | |
| padding: 0 95px 0 18px; | |
| width: 99%; | |
| } | |
| .widget_search .search-submit { | |
| background: #1abc9c; | |
| border: 1px solid #1abc9c; | |
| border-radius: 0 3px 3px 0; | |
| color: #fff; | |
| display: block; | |
| font-family: "Lato", sans-serif; | |
| line-height: 1; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| height: 50px; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| } | |
| .widget-title { | |
| color: #444; | |
| font-family: "Raleway", sans-serif; | |
| font-size: 14px; | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| } | |
| .widget-areas .widget { | |
| border-bottom-color: rgba(255,255,255,0.1);; | |
| } | |
| .widget-areas .widget-title { | |
| color: #eee; | |
| } | |
| /*-------------------------------------------------------------- | |
| 10.0 Content | |
| --------------------------------------------------------------*/ | |
| .sep { | |
| color: #ddd; | |
| margin: 0 5px; | |
| } | |
| .entry-header { | |
| margin-bottom: 1.7em; | |
| } | |
| .entry-title { | |
| font-family: "Lato", sans-serif; | |
| font-size: 45px; | |
| font-size: 4.5rem; | |
| font-weight: 700; | |
| line-height: 1.2; | |
| margin: 0; | |
| } | |
| .entry-title, | |
| .entry-title a { | |
| color: #2d2d2d; | |
| } | |
| .entry-title a:hover { | |
| color: #1abc9c; | |
| } | |
| .entry-meta { | |
| font-size: 14px; | |
| font-size: 1.4rem; | |
| margin: .85em 0; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .entry-meta, | |
| .entry-meta a { | |
| color: #999; | |
| } | |
| .featured-image { | |
| margin-bottom: 1.7em; | |
| position: relative; | |
| } | |
| .featured-image .flag { | |
| background: #1abc9c; | |
| border-radius: 3px 0 0 3px; | |
| color: #fff; | |
| display: block; | |
| position: absolute; | |
| top: 5%; | |
| right: 0; | |
| padding: .85em 10px; | |
| font-size: 12px; | |
| font-size: 1.2rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| z-index: 1; | |
| } | |
| .featured-image img { | |
| border-radius: 4px; | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| .page-header { | |
| margin-bottom: 30px; | |
| text-align: center; | |
| } | |
| .page-title { | |
| position: relative; | |
| display: inline-block; | |
| text-transform: uppercase; | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| letter-spacing: 1px; | |
| font-weight: 700; | |
| color: #999; | |
| padding-bottom: 1.7em; | |
| border-bottom: 2px solid #eee; | |
| } | |
| /*-------------------------------------------------------------- | |
| 10.1 Posts and pages | |
| --------------------------------------------------------------*/ | |
| .sticky { | |
| } | |
| .hentry { | |
| border-bottom: 4px solid #eee; | |
| margin-bottom: 3.4em; | |
| padding-bottom: 3.4em; | |
| position: relative; | |
| } | |
| .byline, | |
| .updated { | |
| display: none; | |
| } | |
| .single .byline, | |
| .group-blog .byline { | |
| display: inline; | |
| } | |
| .page-content, | |
| .entry-content, | |
| .entry-summary { | |
| margin: 0 0 1.7em; | |
| } | |
| .page-links { | |
| clear: both; | |
| margin: 0 0 1.7em; | |
| } | |
| .entry-categories { | |
| margin-bottom: 1.7em; | |
| } | |
| .entry-categories a { | |
| color: inherit; | |
| text-transform: none; | |
| } | |
| .entry-categories:before { | |
| color: #767676; | |
| content: "\f301"; | |
| display: inline-block; | |
| font-family: Genericons; | |
| font-size: 32px; | |
| line-height: 1; | |
| margin-right: 5px; | |
| vertical-align: middle; | |
| } | |
| .entry-tags { | |
| margin-left: 12px; | |
| } | |
| .entry-tags a { | |
| position: relative; | |
| font-size: 12px; | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| color: #fff; | |
| display: inline-block; | |
| padding: 6px; | |
| line-height: 1; | |
| margin: .85em 1.7em .85em 0; | |
| background: #767676; | |
| border-radius: 0 2px 2px 0; | |
| } | |
| .entry-tags a:hover { | |
| background-color: #1abc9c; | |
| } | |
| .entry-tags a:hover:after { | |
| border-right-color: #1abc9c; | |
| -webkit-transition: all 0.2s ease-in-out; | |
| -moz-transition: all 0.2s ease-in-out; | |
| -ms-transition: all 0.2s ease-in-out; | |
| -o-transition: all 0.2s ease-in-out; | |
| transition: all 0.2s ease-in-out; | |
| } | |
| .entry-tags a:before { | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| left: -4px; | |
| top: 50%; | |
| margin-top: -2px; | |
| width: 4px; | |
| height: 4px; | |
| background: #fff; | |
| border-radius: 99px; | |
| z-index: 10; | |
| } | |
| .entry-tags a:after { | |
| border-top: 12px solid transparent; | |
| border-right: 12px solid #767676; | |
| border-bottom: 12px solid transparent; | |
| content: ""; | |
| height: 0; | |
| position: absolute; | |
| top: 0; | |
| left: -12px; | |
| width: 0; | |
| -webkit-transition: all 0.2s ease-in-out; | |
| -moz-transition: all 0.2s ease-in-out; | |
| -ms-transition: all 0.2s ease-in-out; | |
| -o-transition: all 0.2s ease-in-out; | |
| transition: all 0.2s ease-in-out; | |
| } | |
| /*-------------------------------------------------------------- | |
| 10.2 Post Formats | |
| --------------------------------------------------------------*/ | |
| .format-aside .entry-content { | |
| background: #eee; | |
| border-radius: 3px; | |
| margin: 1.7em 0; | |
| padding: 1.7em; | |
| } | |
| .format-link .entry-title a:after { | |
| content: "\f442"; | |
| display: inline-block; | |
| font-family: "Genericons"; | |
| font-size: 48px; | |
| line-height: 120%; | |
| margin-left: 7px; | |
| text-decoration: none; | |
| vertical-align: middle; | |
| } | |
| .format-quote .entry-content { | |
| background: #262626; | |
| border-radius: 3px; | |
| color: #fff; | |
| margin: 1.7em 0; | |
| padding: 1.7em; | |
| } | |
| .format-quote blockquote { | |
| background: transparent; | |
| color: rgba(255,255,255,0.6); | |
| } | |
| .format-aside div.entry-meta, | |
| .format-quote div.entry-meta { | |
| text-align: center; | |
| } | |
| .format-aside .entry-title, | |
| .format-quote .entry-title, | |
| .format-image .entry-title, | |
| .format-video .entry-title { | |
| font-size: 18px; | |
| font-size: 1.8rem; | |
| text-align: center; | |
| text-transform: uppercase; | |
| } | |
| .format-image .entry-title, | |
| .format-video .entry-title { | |
| text-align: left; | |
| } | |
| .format-aside .entry-header, | |
| .format-quote .entry-header { | |
| margin-bottom: 0; | |
| } | |
| /*-------------------------------------------------------------- | |
| 10.3 Comments | |
| --------------------------------------------------------------*/ | |
| .comment-content a { | |
| word-wrap: break-word; | |
| } | |
| .bypostauthor { | |
| } | |
| /*-------------------------------------------------------------- | |
| 11.0 Infinite scroll | |
| --------------------------------------------------------------*/ | |
| /* Globally hidden elements when Infinite Scroll is supported and in use. */ | |
| .infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */ | |
| .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ | |
| display: none; | |
| } | |
| /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */ | |
| .infinity-end.neverending .site-footer { | |
| display: block; | |
| } | |
| #infinite-footer { | |
| z-index: 999; | |
| } | |
| #infinite-handle span { | |
| background-color: #1d1d1d; | |
| display: block; | |
| font-family: "Raleway", sans-serif; | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| margin: 0 auto 20px; | |
| text-align: center; | |
| } | |
| .infinite-loader { | |
| margin: 0 auto 31px; | |
| width: 28px; | |
| height: 28px; | |
| } | |
| /*-------------------------------------------------------------- | |
| 12.0 Media | |
| --------------------------------------------------------------*/ | |
| .page-content img.wp-smiley, | |
| .entry-content img.wp-smiley, | |
| .comment-content img.wp-smiley { | |
| border: none; | |
| margin-bottom: 0; | |
| margin-top: 0; | |
| padding: 0; | |
| } | |
| .wp-caption { | |
| margin-bottom: 1.7em; | |
| max-width: 100%; | |
| } | |
| .wp-caption img[class*="wp-image-"] { | |
| display: block; | |
| margin: 0 auto; | |
| max-width: 100%; | |
| } | |
| .wp-caption-text { | |
| color: #888; | |
| font-size: 14px; | |
| font-size: 1.4rem; | |
| padding-top: 0.85em; | |
| text-align: center; | |
| } | |
| .wp-caption .wp-caption-text { | |
| margin: 0.85em 0; | |
| } | |
| .site-main .gallery { | |
| margin-bottom: 1.7em; | |
| } | |
| .gallery-caption { | |
| } | |
| .site-main .gallery a img { | |
| border: none; | |
| height: auto; | |
| max-width: 90%; | |
| } | |
| .site-main .gallery dd { | |
| margin: 0; | |
| } | |
| .site-main .gallery-columns-4 .gallery-item { | |
| } | |
| .site-main .gallery-columns-4 .gallery-item img { | |
| } | |
| /* Make sure embeds and iframes fit their containers */ | |
| embed, | |
| iframe, | |
| object { | |
| max-width: 100%; | |
| } | |
| .entry-content img[class*="wp-image"] { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| /*-------------------------------------------------------------- | |
| 13.0 Layout: Content-Sidebar | |
| --------------------------------------------------------------*/ | |
| .site-content { | |
| margin: 100px auto 0; | |
| width: 1040px; | |
| } | |
| .content-area { | |
| float: left; | |
| margin: 0 -35% 0 0; | |
| width: 100%; | |
| } | |
| .site-main { | |
| margin: 0 35% 0 0; | |
| } | |
| .page-template-nosidebar-page-php .content-area, | |
| .page-template-nosidebar-page-php .site-main { | |
| margin: 0 auto; | |
| } | |
| .site-content .widget-area { | |
| float: right; | |
| margin-bottom: 1.7em; | |
| overflow: hidden; | |
| width: 27.5%; | |
| } | |
| .site-footer { | |
| clear: both; | |
| padding: 6.8em 0 0; | |
| width: 100%; | |
| } | |
| /*-------------------------------------------------------------- | |
| 14.0 Header | |
| --------------------------------------------------------------*/ | |
| .site-header { | |
| background-color: #262626; | |
| overflow: hidden; | |
| } | |
| .site-header-image { | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| -moz-background-size: cover; | |
| -webkit-background-size: cover; | |
| min-height: 426px; | |
| padding: 10% 0; | |
| position: relative; | |
| } | |
| .site-branding-wrapper { | |
| position: relative; | |
| z-index: 2; | |
| text-align: center; | |
| } | |
| .site-branding { | |
| background: #1d1d1d; | |
| display: inline-block; | |
| padding: 1.7em; | |
| } | |
| .site-title { | |
| text-transform: uppercase; | |
| letter-spacing: 4px; | |
| font-weight: 700; | |
| font-size: 30px; | |
| font-size: 3.0rem; | |
| font-family: "Raleway", sans-serif; | |
| margin: 0; | |
| text-align: center; | |
| width: 100%; | |
| } | |
| .site-title a { | |
| color: #fff; | |
| } | |
| .site-description { | |
| color: #fff; | |
| font-family: "Raleway", sans-serif; | |
| font-size: 18px; | |
| font-size: 1.8rem; | |
| font-weight: 300; | |
| opacity: 0.6; | |
| text-align: center; | |
| } | |
| .site-description:before { | |
| content: ""; | |
| display: block; | |
| width: 100px; | |
| height: 2px; | |
| background: rgba(255,255,255,0.1); | |
| margin: .85em auto; | |
| } | |
| #header-search, | |
| #header-search-toggle { | |
| display: none; | |
| } | |
| /*-------------------------------------------------------------- | |
| 15.0 Footer | |
| --------------------------------------------------------------*/ | |
| .site-footer { | |
| background: #1d1d1d; | |
| color: rgba(255,255,255,0.4); | |
| } | |
| .site-info { | |
| font-size: 14px; | |
| font-size: 1.4rem; | |
| max-width: 86%; | |
| margin: 0 auto; | |
| width: 1040px; | |
| padding: 1.7em 0; | |
| border-top: 2px solid rgba(255,255,255,0.1); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .site-info a, | |
| .site-info .sep { | |
| color: rgba(255,255,255,0.4); | |
| } | |
| /*-------------------------------------------------------------- | |
| 15.0 Comments | |
| --------------------------------------------------------------*/ | |
| .comments-title { | |
| font-size: 30px; | |
| font-size: 3.0rem; | |
| font-weight: 400; | |
| color: #2d2d2d; | |
| margin: 1.7em 0; | |
| } | |
| .comment-list, | |
| .comment-list .children { | |
| list-style: none; | |
| margin: 0; | |
| } | |
| .comment-metadata { | |
| font-size: 14px; | |
| font-size: 1.4rem; | |
| margin-bottom: 1em; | |
| text-transform: uppercase; | |
| } | |
| .comment-metadata a { | |
| color: #bbb; | |
| } | |
| .comment-metadata .edit-link a { | |
| font-size: 12px; | |
| font-size: 1.2rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-weight: 700; | |
| } | |
| .comment-author { | |
| color: #444; | |
| display: block; | |
| font-size: 20px; | |
| font-size: 2.0rem; | |
| font-weight: 700; | |
| margin-bottom: 1.5em; | |
| position: relative; | |
| } | |
| .comment-author img { | |
| border-radius: 50%; | |
| margin-right: 1.7em; | |
| position: absolute; | |
| left: -80px; | |
| } | |
| .comment-author a { | |
| color: #444; | |
| } | |
| .comment-actions a { | |
| font-size: 12px; | |
| font-size: 1.2rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-weight: 700; | |
| } | |
| .comment-actions a:first-of-type { | |
| margin-right: 1.7em; | |
| } | |
| .pingback .comment-edit-link, | |
| .trackback .comment-edit-link { | |
| float: right; | |
| font-size: 12px; | |
| font-size: 1.2rem; | |
| line-height: 30.600000381469727px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-weight: 700; | |
| } | |
| li.comment, | |
| li.pingback, | |
| li.trackback, | |
| li > article.comment { | |
| margin-bottom: 1.7em; | |
| position: relative; | |
| } | |
| .comment-list > li.comment:last-child, | |
| .comment-list > li.comment article.comment:last-child { | |
| margin-bottom: 0; | |
| } | |
| .comment-list > li:first-child > article.comment:first-child { | |
| border-top: 1px solid #eee; | |
| padding-top: 1.7em; | |
| } | |
| li > article.comment { | |
| border-bottom: 1px solid #eee; | |
| padding-bottom: 1.7em; | |
| padding-left: 3.4em; | |
| } | |
| .children { | |
| padding-left: 10%; | |
| } | |
| .no-comments { | |
| color: #666; | |
| margin-top: 1.7em; | |
| text-align: center; | |
| } | |
| /*-------------------------------------------------------------- | |
| 15.0 Responsive | |
| --------------------------------------------------------------*/ | |
| @media only screen and ( max-width: 1120px ) { | |
| .main-navigation ul, | |
| .widget-areas, | |
| .site-content, | |
| .site-info { | |
| width: 780px; | |
| } | |
| } | |
| @media only screen and ( max-width: 800px ) { | |
| body { | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| } | |
| .hentry { | |
| margin-bottom: 1.7em; | |
| padding-bottom: 1.7em; | |
| } | |
| .main-navigation ul, | |
| .widget-areas, | |
| .site-content, | |
| .site-info, | |
| .site-branding { | |
| max-width: 86%; | |
| } | |
| .site-content { | |
| margin-top: 3.4em; | |
| } | |
| .site-main, | |
| .site-content .widget-area { | |
| clear: both; | |
| float: none; | |
| margin: 0 auto 3.4em; | |
| width: 100%; | |
| } | |
| .site-header-image { | |
| min-height: 0px; | |
| } | |
| .site-branding { | |
| padding: 20px; | |
| } | |
| .site-title { | |
| font-size: 24px; | |
| font-size: 2.4rem; | |
| line-height: 1.2; | |
| } | |
| .site-description { | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| } | |
| .site-description:before { | |
| margin: 1.7em auto; | |
| } | |
| .entry-title { | |
| font-size: 26px; | |
| font-size: 2.6rem; | |
| } | |
| .entry-meta { | |
| font-size: 12px; | |
| font-size: 1.2rem; | |
| } | |
| .site-footer { | |
| padding: 40px 0 0; | |
| } | |
| .widget-areas { | |
| margin: 0 auto 3.4em; | |
| } | |
| .widget-areas .widget-area:nth-child(1):nth-last-child(3), | |
| .widget-areas .widget-area:nth-child(2):nth-last-child(2), | |
| .widget-areas .widget-area:nth-child(3):nth-last-child(1) { | |
| clear: both; | |
| float: none; | |
| margin: 0 auto 3.4em; | |
| width: 100%; | |
| } | |
| #header-search.toggled { | |
| background-color: #282828; | |
| clear: both; | |
| display: block; | |
| padding: 7%; | |
| position: relative; | |
| } | |
| #header-search form { | |
| position: relative; | |
| } | |
| #header-search .search-field { | |
| background: #fff; | |
| border: none; | |
| border-radius: 4px 0 0 4px; | |
| -webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */ | |
| -moz-box-sizing: border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */ | |
| box-sizing: border-box; | |
| color: #444; | |
| display: block; | |
| font-family: 'Lato', sans-serif; | |
| height: 50px; | |
| line-height: 1; | |
| margin: 0; | |
| padding: 18px 0 18px 20px; | |
| position: relative; | |
| width: 95%; | |
| } | |
| #header-search .search-submit { | |
| background: #1abc9c; | |
| border: 1px solid #1abc9c; | |
| border-radius: 0 4px 4px 0; | |
| color: #fff; | |
| font-family: 'Lato', sans-serif; | |
| font-size: 13px; | |
| font-size: 1.3rem; | |
| height: 50px; | |
| letter-spacing: 1px; | |
| line-height: 1; | |
| margin: 0; | |
| padding: 17px 0; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| text-transform: uppercase; | |
| width: 100px; | |
| } | |
| #header-search .search-submit:hover { | |
| background-color: #089d80; | |
| border-color: #089d80; | |
| } | |
| #header-search-toggle { | |
| cursor: pointer; | |
| display: block; | |
| line-height: 61.20000076293945px; | |
| position: absolute; | |
| top: 0; | |
| right: 7%; | |
| } | |
| #header-search-toggle:before { | |
| color: rgba(255,255,255,0.6); | |
| content: "\f400"; | |
| display: inline-block; | |
| font-family: "Genericons"; | |
| font-size: 36px; | |
| line-height: 61.20000076293945px; | |
| text-decoration: none; | |
| vertical-align: baseline; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment