/*--------------------------------------------------------------------------------- Theme Name: Baskerville Text Domain: baskerville Version: 2.1.4 Description: Baskerville is a beautiful, responsive and retina-ready masonry theme for hoarders. It's the perfect way to showcase your posts, videos, images and galleries, and share your favorite quotes and links. Features responsive design, retina-ready assets, full-width header image, Block Editor support, support for all post formats, custom logo upload, custom widgets for Flickr and Dribbble, four page templates (including a contributors template), editor styling, like functionality via the ZillaLikes plugin and translation-ready code. Demo: https://www.andersnoren.se/themes/baskerville/ Tags: blog, three-columns, right-sidebar, custom-colors, custom-header, custom-menu, editor-style, featured-images, footer-widgets, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, portfolio, grid-layout, block-styles, wide-blocks Author: Anders Norén Author URI: https://www.andersnoren.se Theme URI: https://www.andersnoren.se/teman/baskerville-wordpress-theme/ License: GNU General Public License version 2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html All files, unless otherwise stated, are released under the GNU General Public License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html) ----------------------------------------------------------------------------------- 0. CSS Reset & Clearfix 1. Document Setup 2. Structure 3. Header 4. Navigation 5. Main Content 6. Single post 7. Post Content 8. Comments 9. Pagination 10. Page & Page Templates 11. Sidebar 12. Footer 13. Credits 14. Responsive ----------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------- */ /* 0. CSS Reset /* -------------------------------------------------------------------------------- */ html, body { margin:0; padding:0;} h1, h2, h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td { margin:0; padding:0; border:0; font-weight:normal; font-style:normal; font-size:100%; line-height:1; font-family:inherit; text-align:left; } table { border-collapse:collapse; border-spacing:0; } ol, ul { list-style:none; } blockquote:before, blockquote:after { content:""; } input[type=search], input[type=text], input[type=email], input[type=url], input[type=button], input[type=tel], input[type=submit], textarea { -moz-appearance: none; -webkit-appearance: none; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } /* -------------------------------------------------------------------------------- */ /* 1. Document setup /* -------------------------------------------------------------------------------- */ body { margin: 0; padding: 0; border: none; background: #f1f1f1; color: #444; font-family: Roboto, sans-serif; font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body a { color: #13C4A5; text-decoration: none; } body a:hover { color: #13C4A5; text-decoration: none; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { max-width: 100%; height: auto; } .hidden { display: none; } .clear { clear: both; } .fleft { float: left; } .fright { float: right; } ::selection { background: #444; color: #FFF; } ::-webkit-input-placeholder { color: #999; } :-ms-input-placeholder { color: #999; } /* Transitions --------------------------------------- */ body a { transition: all 0.1s ease-in-out; } .blog-title a, .post-title a, .post-overlay, .post-likes, .post-meta a, .pagination, .main-menu a, .main-menu > .has-children > a::after, .main-menu > .page_item_has_children > a::after, .searchbutton, .search-toggle, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea, .form-submit #submit, .widget_search .searchsubmit, .widget_search .search-field, .format-gallery .flex-direction-nav a, .nav-toggle .bar, .dribbble-shot, .flickr_badge_image a, .post-content input[type="submit"], .post-content input[type="reset"], .post-content input[type="button"] { transition: all 0.2s ease-in-out; } .tothetop, .header, .portfolio-item a .portfolio-header-container, .featured-media a img { transition: all 0.3s ease-in-out; } /* Screen Reader Text ------------------------ */ .screen-reader-text { clip: rect( .1rem, .1rem, .1rem, .1rem ); height: .1rem; overflow: hidden; position: absolute !important; left: -999999rem; width: .1rem; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: .3rem; box-shadow: 0 0 .2rem .2rem rgba( 0, 0, 0, 0.6 ); clip: auto !important; display: block; font-size: 1.4rem; font-weight: 700; height: auto; left: .5rem; line-height: normal; padding: 1.5rem 2.3rem 1.4rem 2.3rem; text-decoration: none; top: .5rem; width: auto; z-index: 100000; } /* Skip Link --------------------------------- */ .skip-link { position: absolute; left: -9999rem; top: 2.5rem; z-index: 999999999; } .skip-link:focus { left: 2.5rem; text-decoration: none; } /* -------------------------------------------------------------------------------- */ /* 2. Structure /* -------------------------------------------------------------------------------- */ .section { position: relative; padding: 80px 0; } .no-padding { padding: 0; } .small-padding { padding: 40px 0; } .medium-padding { padding: 60px 0; } .big-padding { padding: 100px 0; } .section-inner { max-width: 90%; width: 1400px; margin: 0 auto; } .section-inner.content { width: 1440px; max-width: 92.6%; } .section-inner.wide { width: 1240px; } .section-inner.thin { width: 700px; } .bg-dark { background-color: #1d1d1d; } .bg-graphite { background-color: #262626; } .bg-grey { background-color: #f1f1f1; } .bg-image { background-size: cover; background-position: center; background-repeat: no-repeat; } .cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .cover.shade-light { background: rgba(0,0,0,0.25); } .cover.shade-medium { background: rgba(0,0,0,0.5); } .cover.shade-dark { background: rgba(0,0,0,0.75); } /* columns */ .row .one-fourth { width: 21.5%; margin-left: 5%; float: left; } .row .one-third { width: 30%; margin-left: 5%; float: left; } .row .one-half { width: 47.5%; margin-left: 5%; float: left; } .row .two-thirds { width: 65%; margin-left: 5%; float: left; } .row .one-fourth:first-child, .row .one-third:first-child, .row .one-half:first-child, .row .two-thirds:first-child { margin-left: 0; } /* -------------------------------------------------------------------------------- */ /* 3. Header /* -------------------------------------------------------------------------------- */ .header { padding: 70px 0; } .header .cover { background: rgba(29,29,29,0.25); } .header-inner { position: relative; } .header .blog-logo { text-align: center; } .header .logo { display: inline-block; } .header .logo img { max-height: 80px; width: auto; } .blog-title { font-family: 'Pacifico', sans-serif; font-size: 2.25em; line-height: inherit; text-align: center; text-shadow: 1px 1px 2px rgba(0,0,0,0.25); } .blog-title a { color: #fff; } .blog-title a:hover { color: #13C4A5; } .blog-description { font-size: 1.1em; line-height: 110%; font-weight: 400; color: #999; margin: 20px 0 0 0; text-align: center; text-shadow: 1px 1px 1px rgba(0,0,0,0.25); } /* search-toggle */ .toggle { background: transparent; border: none; border-radius: 0; box-shadow: none; cursor: pointer; -moz-appearance: none; -webkit-appearance: none; } .search-toggle { display: block; width: 68px; height: 68px; background: url(images/icons/1x/spyglass-w.png) no-repeat center; background-size: 24px auto; opacity: 0.5; } .search-toggle.active { opacity: 1; } /* header search block */ .header-search-block { position: absolute; z-index: 10000; top: 0; right: 0; bottom: 0; left: 0; } .header-search-block .section-inner { position: relative; } .header-search-block .search-field { background: none; border: none; border-radius: 0; color: #fff; margin: 0; width: 90%; position: absolute; top: 50%; right: 5%; left: 5%; margin-top: -30px; font-size: 2.5em; font-weight: 300; padding: 0; } .header-search-block .searchsubmit { display: none; } /* -------------------------------------------------------------------------------- */ /* 4. Navigation /* -------------------------------------------------------------------------------- */ .main-menu { font-family: 'Roboto Slab', sans-serif; font-size: 0.9em; text-align: center; } .main-menu li { position: relative; } .main-menu > li { float: left; } .main-menu > 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; z-index: 1000; } .main-menu > li:last-child:before { content: none; } .main-menu > li > a { display: block; padding: 27px; font-size: 0.85em; color: #999; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } .main-menu > li:first-child > a { margin-left: 0; } .main-menu > .has-children > a, .main-menu > .page_item_has_children > a { padding-right: 47px; position: relative; } .main-menu > .has-children > a::after, .main-menu > .page_item_has_children > a::after { content: ""; display: block; border: 5px solid transparent; border-top-color: #999; position: absolute; z-index: 1001; right: 29px; top: 50%; margin-top: -2px; } .main-menu li:hover > a { cursor: pointer; color: #fff; } .main-menu > .has-children:hover > a::after, .main-menu > .page_item_has_children:hover > a::after { border-top-color: #fff; } /* Sub menus --------------------------------------- */ .main-menu li ul { position: absolute; z-index: 10000; display: block; left: -9999px; top: 38px; opacity: 0; z-index: 999; transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out; } .is_mobile .main-menu li ul { opacity: 1; display: none; } .main-menu > li > ul { padding-top: 20px; } .main-menu > li > ul:before { content: ""; display: block; position: absolute; z-index: 1000; top: 0px; left: 50%; margin-left: -10px; border: 10px solid transparent; border-bottom-color: #2d2d2d; } .main-menu ul li { float: none; display: block; border-top: 1px solid rgba(255,255,255,0.075); } .main-menu ul li:first-child { border-top: none; } .main-menu ul > .has-children::after, .main-menu ul > .page_item_has_children::after { content: ""; display: block; border: 6px solid transparent; border-left-color: rgba(255,255,255,0.4); position: absolute; z-index: 1001; right: 10px; top: 50%; margin-top: -5px; } .main-menu ul > .has-children:hover::after, .main-menu ul > .page_item_has_children:hover::after { border-left-color: #FFF; } .main-menu ul li { display: block; width: 240px; background: #2d2d2d; } .main-menu ul a { display: block; text-align: center; padding: 20px; margin: 0; line-height: 130%; color: #999; } .main-menu ul a:hover { color: #fff; } .main-menu li:hover > ul, .main-menu li.focus > ul { opacity: 1; left: 50%; margin-left: -120px; top: 48px; } .is_mobile .main-menu li:hover ul { display: block; } /* Deep down --------------------------------------- */ .main-menu ul li ul { top: 5px; } .main-menu ul li:hover > ul, .main-menu ul li.focus > ul { top: 0; left: 240px; margin-left: 0; } .main-menu ul ul li { background: #3d3d3d; } .main-menu ul ul ul li { background: #4d4d4d; } .main-menu ul ul ul ul li { background: #4d4d4d; } /* -------------------------------------------------------------------------------- */ /* 5. Content /* -------------------------------------------------------------------------------- */ .posts { overflow: visible !important; } .post-container { width: 33.3%; padding: 0 1.5% 4.5% 1.5%; } .hentry, .post { width: 100%; position: relative; background: #fff; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); overflow: hidden; } .post.sticky .post-header { padding-right: 17.5%; } .post .sticky-post { display: block; position: absolute; z-index: 100; right: 5%; height: 38px; width: 26px; background: #2B3542 url(images/icons/1x/tack-w.png) no-repeat center; background-size: 12px auto; top: 0; text-indent: -9999px; } .post .sticky-post:after { content: ""; display: block; border: 13px solid transparent; border-left-color: #2B3542; border-right-color: #2B3542; position: absolute; right: 0; margin-top: -13px; top: 38px; } /* Featured media ----------------------------------------- */ .featured-media a, .featured-media img, .featured-media iframe { display: block; } .featured-media iframe, .featured-media object { border: none; margin: 0; } .featured-media a { overflow: hidden; } .featured-media a img { margin: 0 auto; } .featured-media a:hover img { transform: scale(1.1); opacity: 0.8; } .media-caption { font-size: 0.8em; line-height: 110%; font-weight: 700; color: #999; padding: 20px 0; margin: 0 10%; border-bottom: 1px solid #eee; } /* Post inner ----------------------------------------- */ .post-header { position: relative; padding: 8% 10%; border-bottom: 1px solid #eee; } .post-header .post-title { font-family: 'Roboto Slab', sans-serif; font-size: 1.25em; line-height: 120%; font-weight: 700; color: #2B3542; word-break: break-word; -ms-word-break: break-word; } .post-header .post-title a { color: #2B3542; } .post-header .post-title a:hover { color: #13C4A5; } .post-excerpt { padding: 10%; } .post-excerpt p { font-size: 0.95em; line-height: 150%; color: #666; } .post-excerpt p + p { margin-top: 1em; } .post-excerpt .more-link { display: block; margin-top: 1.1em; } .post-excerpt .more-link:hover { text-decoration: underline; } .posts .post-meta { background: #F9F9F9; padding: 0 10%; } .posts .post-meta a { display: block; color: #999; font-size: 0.8em; font-weight: 700; float: left; padding: 20px 0px 20px 24px; background: no-repeat left center; background-size: 18px auto; margin-left: 20px; } .posts .post-meta a:first-child { margin-left: 0; } .posts .post-meta a:hover { color: #13C4A5; } .posts .post-meta a.post-date { background-image: url(images/icons/1x/clock-g.png); } .posts .post-meta a.post-date:hover { background-image: url(images/icons/1x/clock-c.png); } .posts .post-meta a.zilla-likes { background-image: url(images/icons/1x/heart-g.png); } .posts .post-meta a.zilla-likes:hover, .posts .post-meta a.zilla-likes.active { background-image: url(images/icons/1x/heart-c.png); color: #13C4A5; } .posts .post-meta a.post-comments { background-image: url(images/icons/1x/comment-g.png); } .posts .post-meta a.post-comments:hover { background-image: url(images/icons/1x/comment-c.png); } .posts .post-meta a.post-edit-link { height: 59px; width: 20px; text-indent: -9999px; background-image: url(images/icons/1x/edit-g.png); background-size: 20px auto; background-position: center; } .posts .post-meta a.post-edit-link:hover { background-image: url(images/icons/1x/edit-c.png); } /* Post formats ----------------------------------------- */ /* format standard, format quote, format link */ .post .post-header:before, .page .post-header:before { content: ""; display: block; border: 12px solid transparent; border-top-color: #eee; position: absolute; z-index: 10; bottom: 0; left: 10%; margin-bottom: -24px; } .post .post-header:after, .page .post-header:after { content: ""; display: block; border: 11px solid transparent; border-top-color: #fff; position: absolute; z-index: 11; bottom: 0; left: 10%; margin-left: 1px; margin-bottom: -21px; } /* format video, format image */ .posts .format-video .post-header:before, .posts .format-video .post-header:after, .posts .format-image .post-header:before, .posts .format-image .post-header:after { content: none; } /* format image */ .format-image .post-excerpt { padding-top: 7.5%; font-size: 0.9em; } .format-image .post-excerpt .image-caption { font-weight: 600; } /* format quote, format link */ .post-quote { padding: 10%; background: #2B3542; color: #fff; } .post-quote blockquote, .post-link p { display: block; font-family: 'Roboto', sans-serif; font-size: 1.2em; font-weight: 400; line-height: 140%; } .post-quote blockquote { font-size: 1.1em; } .post-quote cite, .post-link a { display: block; margin-top: 20px; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8em; font-weight: 700; } .post-quote cite { font-family: 'Roboto Slab', sans-serif; font-size: 14px; } .post-quote cite:before { content: "— " } /* format link */ .post-link { padding: 10%; background: #2B3542; color: #fff; } .post-link a { color: #13C4A5; padding-left: 23px; background: url(images/icons/1x/link-c.png) no-repeat left center; background-size: 16px auto; } .post-link a:hover { color: #13C4A5; text-decoration: underline; } .single .post-link p, .single .post-quote blockquote { font-size: 1.75em; } /* format gallery */ .format-gallery .flexslider { position: relative; } .format-gallery .flex-direction-nav a { display: block; height: 32px; width: 20px; background-size: auto 32px; background-repeat: no-repeat; position: absolute; top: 50%; margin-top: -16px; text-indent: -9999px; opacity: 0.5; } .format-gallery .flex-direction-nav .flex-prev { left: 16px; background-image: url(images/icons/1x/chevron-left-w-shade.png); } .format-gallery .flex-direction-nav .flex-next { right: 16px; background-image: url(images/icons/1x/chevron-right-w-shade.png); } .format-gallery .flex-direction-nav a:hover { opacity: 1; } .format-gallery .flex-direction-nav .flex-prev:hover { left: 12px; } .format-gallery .flex-direction-nav .flex-next:hover { right: 12px; } .format-gallery .slides li { position: relative; } /* format status */ .posts .format-status .post-excerpt { background: #2B3542; } .posts .format-status .post-excerpt p, .format-status .post-content { font-family: 'Pacifico', sans-serif; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); font-size: 1.2em; } .format-status .post-content { color: #333; text-shadow: none; } /* format chat */ .format-chat .post-content p { margin-bottom: 0.25em; padding: 8px 16px; border-radius: 3px; } .format-chat .post-content p:nth-child(odd) { background: #f5f5f5; } .format-chat .more-link { margin-top: 1em; } /* -------------------------------------------------------------------------------- */ /* 6. Single post /* -------------------------------------------------------------------------------- */ body.single .content { width: 67.5%; } body.single .content.full-width { width: 100%; } body.single .content.center { margin: 0 auto; width: 944px; max-width: 100%; } .single { border-radius: 6px; } /* post header */ .single .post-title { font-size: 2.25em; } .single .post-content { padding: 10%; } /* format gallery */ .single .format-gallery .flex-direction-nav a { height: 42px; width: 30px; background-size: auto 42px; margin-top: -21px; } .single .format-gallery .flex-direction-nav .flex-prev { background-image: url(images/icons/1x/chevron-left-w-shade-big.png); } .single .format-gallery .flex-direction-nav .flex-next { background-image: url(images/icons/1x/chevron-right-w-shade-big.png); } /* format quote */ .single .post-quote cite { font-size: 1em; margin-top: 30px; } /* single post meta */ .single .post-meta-container { position: relative; background: #2B3542; } .single .post-meta-container:after { content: ""; display: block; background: #3F4854; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 60%; } .single .post-meta { float: right; width: 40%; padding: 30px; position: relative; z-index: 10; } .single .post-meta p, .single .post-meta > a, .post-nav a { display: block; margin-top: 12px; font-size: 0.85em; line-height: 120%; font-weight: 700; min-height: 20px; padding: 1px 0 1px 23px; background: no-repeat left center; background-size: 16px auto; color: #9499A0; } .single .post-meta p:first-child { margin-top: 0; } .single .post-meta p.post-date { background-image: url(images/icons/1x/clock-g.png); } .single .post-meta a.zilla-likes { background-image: url(images/icons/1x/heart-g.png); } .single .post-meta a.zilla-likes:hover { background-image: url(images/icons/1x/heart-c.png); } .single .post-meta p.post-categories { background-image: url(images/icons/1x/folder-g.png); } .single .post-meta p.post-tags { background-image: url(images/icons/1x/tag-g.png); } .single .post-meta a { color: #9499A0; } .single .post-meta a:hover { color: #13C4A5; } /* post navigation */ .post-nav { padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 20px; } .post-nav a { background-position: left 3px; } .post-nav a:first-child { margin-top: 0; } a.post-nav-prev { background-image: url(images/icons/1x/prev-g.png); } a.post-nav-prev:hover { background-image: url(images/icons/1x/prev-c.png); } a.post-nav-next { background-image: url(images/icons/1x/next-g.png); } a.post-nav-next:hover { background-image: url(images/icons/1x/next-c.png); } .single a.post-edit-link { background-image: url(images/icons/1x/edit-g.png); background-position: left 5px; } .single a.post-edit-link:hover { background-image: url(images/icons/1x/edit-c.png); } /* post-author */ .post-author { width: 60%; padding: 30px; float: left; position: relative; overflow: hidden; } .post-author:before, .post-author:after { content: ""; display: block; position: absolute; left: 30px; } .post-author:before { z-index: 100; top: 0; width: 40px; height: 70px; background: #13C4A5 url(images/icons/1x/author-w.png) no-repeat center 29px; background-size: 22px auto; } .post-author:after { top: 50px; border: 20px solid transparent; border-left-color: #13C4A5; border-right-color: #13C4A5; } .post-author-content { margin-left: 70px; } .post-author h4 { font-family: 'Roboto Slab', sans-serif; font-size: 1.1em; font-weight: 700; color: #fff; margin-bottom: 15px; } .post-author p { font-size: 0.875em; line-height: 150%; color: #9499A0; } .author-links { margin-top: 18px; } .author-links a { display: inline-block; width: 36px; height: 36px; background-color: rgba(255,255,255,0.1); background-repeat: no-repeat; background-position: center; background-size: 16px auto; margin-left: 5px; border-radius: 999px; text-indent: -9999px; } .author-links a:first-child { margin-left: 0; } .author-links a.author-link-posts { background-image: url(images/icons/1x/archive-w.png); } .author-links a.author-link-website { background-image: url(images/icons/1x/home-w.png); } .author-links a.author-link-mail { background-image: url(images/icons/1x/social/mail-w.png); } .author-links a.author-link-twitter { background-image: url(images/icons/1x/social/twitter-w.png); } .author-links a:hover { background-color: #13C4A5; } /* -------------------------------------------------------------------------------- */ /* 7. Post Content /* -------------------------------------------------------------------------------- */ .post-content a:hover { text-decoration: underline; } .post-content p, .post-content blockquote, .post-content ul, .post-content ol, .post-content address, .post-content dl, .post-content .wp-caption, .post-content pre { line-height: 180%; margin-bottom: 1.1em; -ms-word-wrap: break-word; word-wrap: break-word; } .post-content > *:first-child { margin-top: 0; } .post-content *:last-child { margin-bottom: 0; } .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { margin: 50px 0 30px; font-family: 'Roboto Slab', sans-serif; font-weight: 700; color: #333; } h1 { font-size: 2em; } h2 { font-size: 1.75em; } h3 { font-size: 1.5em; } h4 { font-size: 1.25em; font-weight: 400; } h5 { font-size: 1em; font-weight: 400; } h6 { font-size: 0.9em; font-weight: 700; text-transform: uppercase; } .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; } .post-content blockquote { position: relative; font-size: 1em; font-weight: 300; font-weight: normal; margin: 40px 0; } .post-content blockquote:before, .post-content blockquote:after { content: ""; display: block; width: 128px; height: 3px; background: #eee; margin: 40px auto; } .post-content blockquote p { font-size: 1.2em; line-height: 160%; font-weight: 300; text-align: center; } .post-content cite { font-family: 'Roboto Slab', sans-serif; font-size: 0.9rem; font-weight: bold; text-transform: uppercase; line-height: 140%; text-align: center; } .post-content cite:before { content: "— "; } .post-content blockquote cite { display: block; margin-top: 1em; } .post-content blockquote cite em { font-style: italic; font-weight: bold; } em, q { font-style: italic; } .post-content strong em, .post-content em strong { font-weight: bold; font-style: italic; } .post-content big { font-size: 1.25em; } abbr, acronym { cursor: help; } code, kbd, pre { font-size: 0.85em; background: #EEE; font-family: Menlo, Monaco, monospace; } .post-content .highlight { background: #fcf8a5; display: inline; padding: 2px 3px; } .post-content kbd, .post-content code { padding: 5px; border-radius: 3px; } .post-content dl { line-height: 160%; } .post-content dl dt { font-weight: bold; } .post-content hr { background: #EEE; border: none; height: 5px; margin: 2.5em auto; width: 50%; } .post-content hr.is-style-wide { width: 100%; } .post-content ul { list-style: disc; margin-left: 1.5em; } .post-content ul ul { list-style: circle; } .post-content ul ul ul { list-style: square; } .post-content ol { list-style: decimal; margin-left: 1.5em; } .post-content ol ol { list-style: lower-alpha; } .post-content ol ol ol { list-style: lower-roman; } .post-content ul ul, .post-content ul ol, .post-content ol ul, .post-content ol ol { margin-bottom: 0; } .post-content li { margin-top: 0.5em; line-height: 170%; } .post-content ol > li:last-child, .post-content ul > li:last-child { margin-bottom: 0; } .post-content address { padding: 3% 3.5%; background: #f1f1f1; } .post-content pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ line-height: 140%; padding: 2% 2.5%; background: #363F48; font-size: 0.8em; color: #FFF; border-radius: 6px; } /* Post media --------------------------------------- */ figure { margin: 0; } .wp-caption, .post-content img { max-width: 100%; } img.alignleft, .alignleft img, img.aligncenter, .aligncenter img, img.alignright, .alignright img { box-sizing: border-box; padding: 5px; border: 1px solid #EEE; } .post-content .alignleft, .post-content .alignright { margin-bottom: 1.2em; max-width: 300px; } .post-content .wp-caption a, .post-content .wp-caption img { display: block; } .post-content .wp-caption .alignleft, .post-content .wp-caption .alignright { margin-bottom: 0; } .post-content .alignleft { float: left; margin-right: 1em; } .post-content .alignright { float: right; margin-left: 1em; } .post-content .aligncenter { margin-left: auto; margin-right: auto; } .post-content .aligncenter a, .post-content .aligncenter img { margin: 0 auto; } .post-content figcaption, .post-content .wp-caption-text, .post-content .gallery-caption { font-size: .8em; font-weight: 700; color: #999; margin-top: 0; padding-top: .5em; text-align: center; width: 100%; } .post-content .gallery-caption { font-size: 16px; line-height: 24px; } /* GUTENBERG CLASSES */ .post-content .alignfull { margin: 2.5em 0; margin-left: calc( ( 1400px * .675 ) * -0.1 ); width: calc( 1400px * .675 ); max-width: calc( 1400px * .675 ); } /* Tables --------------------------------------- */ .post-content table { border-collapse: collapse; border-spacing: 0; empty-cells: show; font-size: 0.9em; width: 100%; } .post-content th, .post-content td { padding: 2%; margin: 0; overflow: visible; line-height: 120%; border-bottom: 1px solid #DDD; } .post-content caption { text-align: center; padding: 2%; } .post-content thead { vertical-align: bottom; white-space: nowrap; } .post-content th { font-weight: bold; } .post-content table tbody > tr:nth-child(odd) > td { background: #f9f9f9; } /* Forms --------------------------------------- */ .post-content fieldset { padding: 25px; border: 2px solid #eee; margin-bottom: 1em; } .post-content fieldset legend { font-family: 'Roboto Slab', sans-serif; font-size: 0.9rem; line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 10px 12px; background: #13C4A5; color: #fff; } .post-content label { font-size: 1rem; font-weight: 700; } input, textarea { font-family: inherit; -webkit-font-smoothing: antialiased; } input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="date"], input[type="month"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="week"], input[type="number"], input[type="search"], input[type="tel"], input[type="color"], textarea { width: 100%; padding: 14px 16px; font-size: 0.85em; border: none; color: #333; border: 2px solid #eee; background: #fdfdfd; border-radius: 3px; transition: background-color 0.2s ease-in-out; -webkit-appearance: none; } .post-content textarea { height: 180px; line-height: 140%; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus { background: #fdfdfd; } .button, input[type="submit"], input[type="reset"], input[type="button"] { padding: 12px 16px; margin: 0; border: none; background: #333; color: #fff; font-size: 0.9rem; line-height: 1; -webkit-appearance: none; border-radius: 3px; } .button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { cursor: pointer; background: #13C4A5; color: #fff; } /* Gutenberg Accent Colors --------------------------------------- */ .post-content .has-background { background-color: #222; } .post-content .has-accent-color { color: #13C4A5; } .post-content .has-accent-background-color { background-color: #13C4A5; } .post-content .has-black-color { color: #222; } .post-content .has-black-background-color { background-color: #222; } .post-content .has-dark-gray-color { color: #444; } .post-content .has-dark-gray-background-color { background-color: #444; } .post-content .has-medium-gray-color { color: #666; } .post-content .has-medium-gray-background-color { background-color: #666; } .post-content .has-light-gray-color { color: #888; } .post-content .has-light-gray-background-color { background-color: #888; } .post-content .has-white-color { color: #fff; } .post-content .has-white-background-color { background-color: #fff; } /* Gutenberg Font Sizes --------------------------------------- */ .post-content .has-small-font-size { font-size: .842em; } .post-content .has-regular-font-size { font-size: 1em; } .post-content .has-large-font-size, .post-content .has-larger-font-size { line-height: 1.45; } .post-content .has-large-font-size { font-size: 1.333em; } .post-content .has-larger-font-size { font-size: 1.777em; } /* Block: Image --------------------------------------- */ .wp-block-image .aligncenter > figcaption, .wp-block-image .alignleft > figcaption, .wp-block-image .alignright > figcaption, .wp-block-image.is-resized > figcaption { display: block; width: 100%; } /* Block: Button --------------------------------------- */ .post-content .wp-block-file__button, .post-content .wp-block-button__link { border-radius: 4px; font-weight: 500; padding: .8em 1.4em; } .post-content .wp-block-file a { color: inherit; } .post-content a.wp-block-file__button { color: #fff; } .post-content .wp-block-file__button:hover, .post-content .wp-block-button__link:hover { opacity: .85; text-decoration: none; } /* Block: Quote --------------------------------------- */ .post-content blockquote, .post-content .wp-block-quote.is-large, .post-content .wp-block-quote.is-style-large { margin-bottom: 1.25em; padding: 0; } .post-content blockquote p:last-child { margin-bottom: 0; } .wp-block-quote.is-large p, .wp-block-quote.is-style-large p { font-size: 1.33em; font-style: inherit; line-height: 1.5; } .post-content .wp-block-quote cite { text-align: center; } .wp-block-quote.is-large cite, .wp-block-quote.is-style-large cite { font-size: 0.8em; } /* Block: Pullquote --------------------------------------- */ .wp-block-pullquote { padding: 0; } /* Block: Gallery --------------------------------------- */ .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption { margin: 0; padding-bottom: 10px; } .post-content .wp-block-gallery.alignfull { padding: 0 8px; } .post-content ul.wp-block-gallery:not(.alignfull) { margin-left: 0; } .post-content ul.wp-block-gallery li:last-child { margin-bottom: 16px; } /* Block: Cover Image --------------------------------------- */ .wp-block-cover-image.alignfull { min-height: 75vh; } .wp-block-cover-image p { font-weight: 400; } /* Block: Column --------------------------------------- */ .wp-block-column { padding: 0 5px; } /* Block: Audio --------------------------------------- */ .wp-block-audio audio { width: 100%; } /* Block: File --------------------------------------- */ .post-content .wp-block-file { align-items: center; background: #E6E9EC; border-radius: 4px; display: flex; justify-content: space-between; margin: 30px 0; padding: 15px 20px; } .post-content .wp-block-file a:not(.wp-block-file__button) { font-weight: 600; text-decoration: none; } .post-content .wp-block-file__button { flex-shrink: 0; } /* -------------------------------------------------------------------------------- */ /* 8. Comments /* -------------------------------------------------------------------------------- */ .content .comments, div#disqus_thread { padding: 10%; background: #fff; } .nocomments { padding: 10%; text-align: center; text-transform: uppercase; font-weight: 700; color: #999; } .comments + .nocomments { border-top: 1px solid #eee; } .comments-title-container { padding-bottom: 20px; border-bottom: 1px solid #eee; margin-bottom: 40px; font-family: 'Roboto Slab', sans-serif; } .comments-title { font-size: 1.75em; font-weight: 700; color: #2B3542; } .add-comment-title { font-size: 1rem; text-transform: uppercase; font-weight: 700; margin-top: 14px; } .add-comment-title a:hover { text-decoration: underline; } /* comment */ .comments div.comment { margin-top: 40px; } .comments .commentlist > li.comment:first-child > div.comment:first-child { margin-top: 0; } .comments div.comment { position: relative; } .comments .children { margin-left: 5%; } .comment-inner { margin-left: 110px; padding: 20px; background: #eee; position: relative; border-radius: 3px; } .comment-inner:after { content: ""; display: block; border: 12px solid transparent; border-right-color: #eee; position: absolute; top: 28px; left: 0; margin-left: -24px; } .comment .avatar { float: left; width: 80px; border-radius: 3px; } .comment.bypostauthor { position: relative; } .comment.bypostauthor:after { content: ""; display: block; width: 32px; height: 32px; background: #13C4A5 url(images/icons/1x/author-w.png) no-repeat center 8px; background-size: 14px auto; border-radius: 999px; position: absolute; top: 0; left: 0; margin-top: -8px; margin-left: -8px; } .comment-header { margin-bottom: 25px; } .comment-header cite { display: block; font-family: 'Roboto Slab', sans-serif; font-size: 1em; font-weight: 700; margin-bottom: 8px; } .comment-header cite, .comment-header cite a { color: #2B3542; } .comment-header cite a:hover { color: #13C4A5; } .comment-header p { font-size: 0.85em; } .comment-header p, .comment-header p a { color: #999; } .comment-header p a:hover { color: #666; } /* comment-content */ .comment-content { font-size: 0.9em; } .comment-content a:hover { text-decoration: underline; } .comment-content p, .comment-content li, .comment-content blockquote { line-height: 150%; margin-top: 1em; -ms-word-wrap: break-word; word-wrap: break-word; } .comment-content *:first-child { margin-top: 0; } .comment-content *:last-child { margin-bottom: 0; } .comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 { margin: 50px 0 20px; font-family: 'Roboto Slab', sans-serif; font-weight: 400; font-size: 1.2em; } .comment-content blockquote { padding: 20px; background: #ddd; } .comment-content ul { list-style: disc; margin-left: 1.5em; } .comment-content ul ul { list-style: circle; } .comment-content ul ul ul { list-style: square; } .comment-content ol { list-style: decimal; margin-left: 1.5em; } .comment-content ol ol { list-style: lower-alpha; } .comment-content ol ol ol { list-style: lower-roman; } .comment-content ul ul, .comment-content ul ol, .comment-content ol ul, .comment-content ol ol { margin-bottom: 0; } .comment-content li { margin-top: 0.5em; line-height: 170%; } .comment-content ol > li:last-child, .comment-content ul > li:last-child { margin-bottom: 0; } .comment-content address { padding: 20px; background: #ddd; line-height: 140%; } .comment-content pre { padding: 20px; background: #ddd; line-height: 150%; overflow-x: scroll; } /* comment actions */ .comment-actions { position: absolute; top: 22px; right: 20px; } .comment-actions a { display: block; position: relative; float: left; width: 32px; height: 32px; background: #2B3542 no-repeat center; background-size: 16px auto; border-radius: 999px; text-indent: -9999px; } .comment-actions a + a { margin-left: -8px; } .comment-actions .comment-reply-link { background-image: url(images/icons/1x/reply-w.png) } .comment-actions .comment-edit-link { background-image: url(images/icons/1x/edit-w.png) } .comment-actions a:hover { background-color: #13C4A5; color: #fff; z-index: 10; } /* comment navigation */ .comment-nav-below { margin-top: 40px; border-top: 1px solid #eee; padding-top: 20px; font-size: 0.9em; font-weight: 700; } .comment-nav-below a { color: #666; } /* pingbacks */ .comments .pingbacks { padding-top: 40px; border-top: 1px solid #eee; margin-top: 40px; } .pingbacks-title { font-family: 'Roboto Slab', sans-serif; font-size: 1.25em; margin-bottom: 20px; color: #2B3542; } .pingbacklist .pingback { padding: 15px; line-height: 130%; } .pingbacklist .pingback a { color: #767676; } .pingbacklist .pingback a:hover { color: #13C4A5; } .pingbacklist .pingback:nth-child(2n) { background-color: #eee; } /* -------------------------------------------------------------------------------- */ /* 9. Respond /* -------------------------------------------------------------------------------- */ .comment-respond { padding: 10%; background: #fff; border-top: 1px solid #eee; } .comments .comment-respond { padding: 10% 0; border-top: none; } .comment-reply-title { font-family: 'Roboto Slab', sans-serif; font-size: 1.75em; font-weight: 700; color: #2B3542; } .comment-reply-title #cancel-comment-reply-link { font-size: 0.9rem; text-transform: uppercase; font-weight: 700; margin-left: 5px; } .comment-reply-title #cancel-comment-reply-link:hover { text-decoration: underline; } .comment-notes, .logged-in-as { color: #666; line-height: 130%; margin-bottom: 40px; margin-top: 25px; } .logged-in-as a:hover { text-decoration: underline; } .comment-form { margin-top: 10px; } .comment-form p { margin-top: 18px; position: relative; } .comment-form p:first-child { margin-top: 0; } .comment-form label { display: block; font-size: 16px; margin-bottom: .5rem; } .comment-form input[type="checkbox"] + label { display: inline; font-size: 14px; margin: 0 0 0 .5rem; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea { display: block; width: 100%; padding: 16px 18px; border-radius: 3px; background: #f1f1f1; color: #333; border: 1px solid #eee; font-family: 'Roboto', sans-serif; font-size: 1em; -webkit-font-smoothing: antialiased; margin: 0; } .comment-form-author, .comment-form-email, .comment-form-url { width: 75%; } .comment-form input[type="text"], .comment-form input[type="email"] { position: relative; padding-right: 60px; background-repeat: no-repeat; background-position: 96% center; background-size: auto 24px; } input#author { background-image: url(images/icons/1x/author-g.png); } input#email { background-image: url(images/icons/1x/social/mail-g.png); } input#url { background-image: url(images/icons/1x/home-g.png); background-size: 24px auto; } .comment-form textarea { height: 250px; } .comment-form input[type="text"]:focus, .comment-form input[type="email"]:focus, .comment-form textarea:focus { color: #fff; background-color: #2B3542; } input#author:focus { background-image: url(images/icons/1x/author-w.png); } input#email:focus { background-image: url(images/icons/1x/social/mail-w.png); } input#url:focus { background-image: url(images/icons/1x/home-w.png); } .form-allowed-tags, .form-allowed-tags code { line-height: 160%; } .comment-notes, .form-allowed-tags, .logged-in-as { font-size: 0.9em; color: #666; } p.form-submit { margin-top: 30px; } .form-submit #submit { padding: 16px 20px; border: none; margin: 0; font-family: 'Roboto Slab', sans-serif; font-size: 0.9em; font-weight: 400; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); background: #2B3542; border-radius: 3px; -webkit-font-smoothing: antialiased; } .form-submit #submit:hover { cursor: pointer; background: #13C4A5; } /* -------------------------------------------------------------------------------- */ /* 10. Page & Page Templates /* -------------------------------------------------------------------------------- */ .posts .page { width: 100%; position: relative; background: #fff; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); overflow: hidden; } /* Contributors template ---------------------------------------------------------- */ .post-content + .contributors-container { border-top: 1px solid #eee; } .authors-row { position: relative; padding: 10%; border-top: 1px solid #eee; } .authors-row:first-child { border-top: none; } .authors-row:before { content: ""; display: block; width: 1px; position: absolute; top: 0; bottom: 0; left: 50%; background: #eee; } .authors-row .author-info { width: 45%; margin-left: 10%; text-align: center; } .authors-row .author-info:first-child { margin-left: 0; } .author-avatar { display: inline-block; width: 134px; height: auto; margin: 0 auto 25px auto; border: 6px solid #eee; border-radius: 9999px; } .author-avatar img { display: block; margin: 0 auto; border-radius: 9999px; } .author-info h4 { font-family: 'Roboto Slab', sans-serif; font-size: 1.5em; font-weight: 700; text-align: center; margin-bottom: 10px; } .author-info h4 a { color: #2B3542; } .author-info h4 a:hover { color: #13C4A5; } .author-info h5 { font-family: 'Roboto Slab', sans-serif; text-align: center; margin-bottom: 25px; } .author-info h5 a { color: #999; } .author-info h5 a:hover { color: #444; } .author-description { line-height: 140%; text-align: center; } .author-description p { line-height: inherit; text-align: inherit; } .author-info .author-links a { background-color: #2B3542; } .author-info .author-links a:hover { background-color: #13C4A5; } /* Image ---------------------------------------------------------- */ .single .post-meta p.image-resolution { background-image: url(images/icons/1x/image-g.png); } .single-attachment .post-author:before { background-image: url(images/icons/1x/image-w.png); background-position: center 32px; } /* -------------------------------------------------------------------------------- */ /* 10. Pagination /* -------------------------------------------------------------------------------- */ .page-title { margin-bottom: 60px; text-align: center; } .page-title h1 { font-size: inherit; } .page-title h5, .page-title h1 .top { display: inline-block; padding-bottom: 4px; border-bottom: 2px solid #ccc; font-family: 'Roboto Slab', sans-serif; font-size: 0.9em; font-weight: 700; text-transform: uppercase; text-align: center; } .page-title h1 { text-align: center; } .page-title h3, .page-title h1 .bottom { display: block; margin-top: 15px; font-family: 'Roboto Slab', sans-serif; font-size: 1.75em; font-weight: 400; text-align: center; color: #2B3542; } .tag-archive-meta { margin: 30px 0 0; } .tag-archive-meta p { color: #767676; text-align: center; } .tag-archive-meta p + p { margin-top: 1em; } /* archive navigation */ .archive-nav a { font-size: 0.9em; padding: 16px 20px; background: #2B3542; border-radius: 3px; color: #fff; } .archive-nav a:hover { background: #13C4A5; color: #fff; } /* search */ .search-no-results .post-content p { text-align: center; } /* -------------------------------------------------------------------------------- */ /* 11. Sidebar /* -------------------------------------------------------------------------------- */ .sidebar { width: 27.5%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.1); border-radius: 6px; overflow: hidden; } .sidebar .widget { padding: 30px; border-top: 1px solid #EEE; } .sidebar .widget:first-child { border-top: none; } .widget-title { font-family: 'Roboto Slab', sans-serif; font-size: 0.9em; font-weight: 700; text-transform: uppercase; margin-bottom: 20px; } .sidebar .widget-content { font-size: 0.85em; color: #767676; } .widget-content a:hover { text-decoration: underline; } .sidebar .widget-content p { line-height: 150%; } .widget-content ul li { position: relative; margin-top: 10px; padding: 1px 0 1px 14px; line-height: 130%; } .widget-content ul li:before { content: "»"; position: absolute; left: 0; top: 0; color: #13C4A5; font-size: 18px; } .widget-content > ul > li:first-child { margin: 0; } .widget-content li ul > li:first-child { margin-top: 10px; } .widget-content .page_item_has_children { padding-bottom: 0; } .widget-content li ul li { padding-left: 15px; } .widget-content ul li .post-date { margin-left: 5px; color: #999; } .widget-content > ul > li:first-child { border-top: 0; } /* Widget tag cloud --------------------------------------- */ .tagcloud a { display: block; float: left; padding: 8px 11px; margin: 0 5px 5px 0; background: #BBB; font-size: 0.8em !important; line-height: 1; color: #FFF; border-radius: 3px; } .tagcloud a:hover { background-color: #13C4A5; color: #fff; text-decoration: none; } /* Widget search --------------------------------------- */ .wrapper .searchform, .footer .searchform { position: relative; } .wrapper .searchform .search-field, .footer .searchform .search-field { display: block; width: 100%; padding: 16px 55px 16px 20px; border: none; margin: 0; background: #ddd; color: #fff; border-radius: 3px; font-family: 'Roboto', sans-serif; font-size: 0.9em; -webkit-font-smoothing: antialiased; } .wrapper .searchform .search-field:focus, .footer .searchform .search-field:focus { background-color: #2B3542; } .wrapper .searchform .searchsubmit, .footer .searchform .searchsubmit { display: block; height: 36px; width: 36px; border: none; position: absolute; top: 50%; margin-top: -18px; right: 10px; text-indent: -9999px; background: url(images/icons/1x/spyglass-g.png) no-repeat center; background-size: 24px auto; } .wrapper .searchform .searchsubmit:hover, .footer .searchform .searchsubmit:hover { cursor: pointer; background-image: url(images/icons/1x/spyglass-c.png); } /* Widget calendar --------------------------------------- */ #wp-calendar { color: #888; width: 100%; max-width: 100%; text-align: center; font-size: 0.9em; } #wp-calendar a { color: #1abc9c; } #wp-calendar, #wp-calendar caption, #wp-calendar tr, #wp-calendar td, #wp-calendar th { text-align: center; } #wp-calendar th, #wp-calendar td { padding: 4% 2%; } #wp-calendar caption, #wp-calendar thead { color: #666; } #wp-calendar caption { font-family: 'Roboto Slab', sans-serif; font-size: 1rem; color: #666; text-transform: capitalize; padding-bottom: 20px; } #wp-calendar thead th { font-size: 0.9em; font-weight: 700; text-transform: uppercase; border-bottom: 1px solid #eee; border-top: 1px solid #eee; } #wp-calendar tbody { border-bottom: 1px solid #eee; } #wp-calendar tfoot td { padding: 0; } #wp-calendar tfoot #prev { text-align: left; } #wp-calendar tfoot #next { text-align: right; } .wp-calendar-nav { display: flex; justify-content: space-between; } .wp-calendar-nav a, #wp-calendar tfoot a { display: block; color: #999; padding: 12px 0; font-size: 0.9em; font-weight: 700; text-transform: uppercase; } .wp-calendar-nav a { padding-bottom: 0; } .wp-calendar-nav a:hover, #wp-calendar tfoot a:hover { text-decoration: none; color: #1abc9c; } /* Dribbble widget --------------------------------------- */ .dribbble-shot, .dribbble-shot img { display: block; } .dribbble-shot { width: 47.5%; float: left; margin-right: 5%; margin-bottom: 5%; padding: 6px; background: #f1f1f1; } .dribbble-shot:nth-child(2n) { margin-right: 0; } .dribbble-shot:hover { background-color: #13C4A5; } .widgetmore { display: block; clear: both; } /* Flickr widget --------------------------------------- */ .flickr_badge_image a, .flickr_badge_image img { display: block; } .flickr_badge_image { width: 21.25%; float: left; margin-left: 5%; margin-bottom: 5%; } .flickr_badge_image a { padding: 4px; background: #f1f1f1; } .flickr_badge_image a:hover { background-color: #13C4A5; } .flickr_badge_image:nth-child(2), .flickr_badge_image:nth-child(6), .flickr_badge_image:nth-child(10), .flickr_badge_image:nth-child(14) { margin-left: 0; } /* -------------------------------------------------------------------------------- */ /* 11. Footer /* -------------------------------------------------------------------------------- */ .footer .row { margin-top: -40px; } .footer .one-third { margin-top: 40px; } .footer .widget { margin-top: 40px; border-top: 4px solid #333; padding-top: 40px; } .footer .widget:first-child { margin: 0; border: none; padding: 0; } .footer .widget-title { color: #FFF; letter-spacing: 1px; font-size: 0.79em; } .footer .widget-content { color: #767676; font-size: 0.95em; } .footer .widget-content p { line-height: 160%; } .widget-content p + p { margin-top: 1em; } /* Widgets --------------------------------------- */ /* Widget search */ .footer .widget_search .search-field { background: #333; } /* widget tagcloud */ .footer .tagcloud a { background-color: #333; } .footer .tagcloud a:hover { text-decoration: none; background-color: #13C4A5; } /* widget calendar */ .footer #wp-calendar caption { color: #fff; } .footer #wp-calendar thead th { border: none; border-top: 1px solid #3B3B3B; border-bottom: 1px solid #3B3B3B; } .footer #wp-calendar tbody { border-bottom: 1px solid #3B3B3B; } /* dribbble and flickr widget */ .footer .dribbble-shot, .footer .flickr_badge_image { background: #333; } /* -------------------------------------------------------------------------------- */ /* 12. Credits /* -------------------------------------------------------------------------------- */ .credits p { font-family: 'Roboto Slab', sans-serif; color: #767676; font-size: 0.8rem; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; } .credits a { color: #ccc; } .credits a:hover { color: #ccc; text-decoration: underline; } img#wpstats { display: none; } /* Silly WordPress stats */ /* -------------------------------------------------------------------------------- */ /* 13. Responsive /* -------------------------------------------------------------------------------- */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* 2X images */ .search-toggle { background-image: url( images/icons/2x/spyglass-w.png ); } .wrapper .searchform .searchsubmit, .footer .searchform .searchsubmit { background-image: url( images/icons/2x/spyglass-g.png ); } .wrapper .searchform .searchsubmit:hover, .footer .searchform .searchsubmit:hover { background-image: url( images/icons/2x/spyglass-c.png ); } .post .sticky-post { background-image: url(images/icons/2x/tack-w.png); } .posts .post-meta a.post-date { background-image: url(images/icons/2x/clock-g.png); } .posts .post-meta a.post-date:hover { background-image: url(images/icons/2x/clock-c.png); } .posts .post-meta a.zilla-likes { background-image: url(images/icons/2x/heart-g.png); } .posts .post-meta a.zilla-likes:hover, .posts .post-meta a.zilla-likes.active { background-image: url(images/icons/2x/heart-c.png); } .posts .post-meta a.post-comments { background-image: url(images/icons/2x/comment-g.png); } .posts .post-meta a.post-comments:hover { background-image: url(images/icons/2x/comment-c.png); } .posts .post-meta a.post-edit-link { background-image: url(images/icons/2x/edit-g.png); } .posts .post-meta a.post-edit-link:hover { background-image: url(images/icons/2x/edit-c.png); } .post-link a { background-image: url(images/icons/2x/link-c.png); } .format-gallery .flex-direction-nav .flex-prev, .single .format-gallery .flex-direction-nav .flex-prev { background-image: url(images/icons/2x/chevron-left-w-shade.png); } .format-gallery .flex-direction-nav .flex-next, .single .format-gallery .flex-direction-nav .flex-next { background-image: url(images/icons/2x/chevron-right-w-shade.png); } .post-author:before { background-image: url( images/icons/2x/author-w.png ); } .single .post-meta p.post-date { background-image: url(images/icons/2x/clock-g.png); } .single .post-meta a.zilla-likes { background-image: url(images/icons/2x/heart-g.png); } .single .post-meta a.zilla-likes:hover { background-image: url(images/icons/2x/heart-c.png); } .single .post-meta p.post-categories { background-image: url(images/icons/2x/folder-g.png); } .single .post-meta p.post-tags { background-image: url(images/icons/2x/tag-g.png); } .author-links a.author-link-posts { background-image: url(images/icons/2x/archive-w.png); } .author-links a.author-link-website { background-image: url(images/icons/2x/home-w.png); } .author-links a.author-link-mail { background-image: url(images/icons/2x/social/mail-w.png); } .author-links a.author-link-twitter { background-image: url(images/icons/2x/social/twitter-w.png); } a.post-nav-prev { background-image: url( images/icons/2x/prev-g.png ); } a.post-nav-prev:hover { background-image: url( images/icons/2x/prev-c.png ); } a.post-nav-next { background-image: url( images/icons/2x/next-g.png ); } a.post-nav-next:hover { background-image: url( images/icons/2x/next-c.png ); } .single a.post-edit-link { background-image: url( images/icons/2x/edit-g.png ); } .single a.post-edit-link:hover { background-image: url( images/icons/2x/edit-c.png ); } .comment.bypostauthor:after { background-image: url(images/icons/2x/author-w.png); } .comment-actions .comment-reply-link { background-image: url(images/icons/2x/reply-w.png); } .comment-actions .comment-edit-link { background-image: url(images/icons/2x/edit-w.png); } input#author { background-image: url(images/icons/2x/author-g.png); } input#email { background-image: url(images/icons/2x/social/mail-g.png); } input#url { background-image: url(images/icons/2x/home-g.png); } input#author:focus { background-image: url(images/icons/2x/author-w.png); } input#email:focus { background-image: url(images/icons/2x/social/mail-w.png); } input#url:focus { background-image: url(images/icons/2x/home-w.png); } .single .post-meta p.image-resolution { background-image: url(images/icons/2x/image-g.png); } .single-attachment .post-author:before { background-image: url(images/icons/2x/image-w.png); } .searchform .searchsubmit { background-image: url(images/icons/2x/spyglass-g.png); } .searchform .searchsubmit:hover { background-image: url(images/icons/2x/spyglass-c.png); } } @media ( max-width: 1555px ) { /* Post Content */ .post-content .alignfull { margin-left: calc( ( 90vw * .675 ) * -0.1 ); max-width: calc( 90vw * .675 ); width: calc( 90vw * .675 ); } } @media (max-width: 1440px) { .wrapper.section { padding: 5% 0; } /* pagination */ .page-title { margin-bottom: 5%; } .archive-nav { margin-top: 1%; } } @media (max-width: 1040px) { /* main content */ .section-inner.content { max-width: 94%; } .post-container { width: 50%; padding: 0 2% 5% 2%; } } @media (max-width: 1000px) { /* structure */ body.single .content { width: 100%; float: none; } .sidebar { display: none; } /* navigation */ .main-menu { display: none; } .search-toggle { width: 24px; } .nav-toggle { display: block; padding: 25px 0; } .nav-toggle .bar { display: block; width: 26px; height: 3px; margin-top: 5px; background: #8E8E8E; border-radius: 1px; } .nav-toggle .bar:first-child { margin-top: 0; } .nav-toggle:hover { cursor: pointer; } .nav-toggle.active .bar { background: #fff; } .mobile-menu li { border-top: 1px solid rgba(255,255,255, 0.1); } .mobile-menu > li:first-child { border-top: none; } .mobile-menu a { display: block; padding: 25px 5%; font-size: 0.9em; text-transform: uppercase; color: #999; letter-spacing: 1px; } .mobile-menu a:hover { color: #fff; } .mobile-menu ul a { padding-left: 10%; } .mobile-menu ul ul a { padding-left: 15%; } .mobile-menu ul ul ul a { padding-left: 20%; } .mobile-menu ul ul ul ul a { padding-left: 25%; } .mobile-menu ul ul ul ul ul a { padding-left: 30%; } /* Post Content */ .post-content .alignfull { margin-left: calc( 90vw * -0.1 ); max-width: 90vw; width: 90vw; } } @media (max-width: 800px) { /* structure */ .wrapper.section { padding: 4% 0; } .section-inner { max-width: 92%; } .section-inner.content { max-width: 97%; } /* header */ .section.header { padding: 50px 0; } .header .logo img { max-height: 60px; } /* Post Content */ .post-content .alignfull { margin-left: calc( 92vw * -0.1 ); max-width: 92vw; width: 92vw; } /* footer */ .footer .one-third { width: 47.5%; } /* credits */ .credits span { display: none; } } @media (max-width: 700px) { /* single post */ .post-author, .single .post-meta { width: 100%; float: none; border-radius: 0; } .single .post-meta-container:after { content: none; } .single .post-meta { background-color: #3F4854; } /* post content */ .post-content .alignleft, .post-content .alignright { max-width: 100%; float: none; margin: 1.25em 0; } .post-content .alignleft a, .post-content .alignleft img, .post-content .alignright a, .post-content .alignright img { margin-left: auto; margin-right: auto; } /* comments */ .comment-form-author, .comment-form-email, .comment-form-url { width: 100%; } } @media (max-width: 600px) { body { font-size: 16px; } /* structure */ .wrapper.section { padding: 25px 0; } .post-header, .single .post-content, .post-excerpt, .content .comments, div#disqus_thread, .comment-respond, .post-quote, .post-link { padding: 7.5% 6%; } /* header */ .section.header { padding: 35px 0; } .header-search-block .search-field { font-size: 1.5em; margin-top: -17px; } .nav-toggle { padding: 20px 0; } .search-toggle { height: 59px; } /* navigation */ .navigation-inner { max-width: 90%; } .mobile-menu a { padding-top: 20px; padding-bottom: 20px; } /* main content */ .section-inner.content { max-width: 92%; } .post-container { width: 100%; padding: 0; margin-top: 25px; } .post-container:first-child { margin-top: 0; } .post-header .post-title { font-size: 1.5em; } .post-excerpt { font-size: 1em; } .posts .post-meta { padding: 0 6%; } /* single post */ .media-caption { margin: 0 6%; padding-bottom: 10px; } .single .post-quote blockquote, .single .post-link p { font-size: 1.2em; } .single .post-quote cite { font-size: 0.8em; } /* post content */ .post-content p, .post-content blockquote, .post-content ul, .post-content ol, .post-content address, .post-content dl, .post-content .wp-caption, .post-content pre { line-height: 160%; margin-bottom: 1em; } .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { margin: 40px 0 20px; } .post-content h1 { font-size: 1.4em; } .post-content h2 { font-size: 1.3em; } .post-content h3 { font-size: 1.25em; } .post-content h4 { font-size: 1.1em; } .post-content h5 { font-size: 1em; } .post-content h6 { font-size: 0.9em; font-weight: 700; text-transform: uppercase; } .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: 20px; } .post-content blockquote { margin-top: 25px; } .post-content blockquote:before, .post-content blockquote:after { margin: 25px auto; width: 96px; } .post-content blockquote p { font-size: 1.1em; line-height: 150%; } .post-content blockquote cite { font-size: 0.8em; } .post-content .alignfull { margin-left: calc( 92vw * -0.06 ); } /* comments */ .comments-title, .add-comment-title { float: none; width: 100%; } .add-comment-title { display: none; } .comments-title, .comment-reply-title { font-size: 1.5em; } .comment .avatar { width: 50px; } .comment-inner { margin-left: 70px; } .comment-inner:after { top: 13px; } .comment-content { font-size: 0.9em; } .reply-title { margin-bottom: 15px; } .comment-form { margin-top: 15px; } /* respond */ .comment-form { margin-top: 10px; } .comment-notes, .logged-in-as { margin-bottom: 25px; } .comment-form input[type="text"], .comment-form input[type="email"] { background-position: 96% center; } /* page & page templates */ .authors-row { padding: 0; border: none; } .authors-row:before { content: none; } .authors-row .author-info { width: 100%; margin: 0; padding: 7.5% 6%; float: none; border-top: 1px solid #eee; } .authors-row:first-child .author-info:first-child { border-top: none; } .author-avatar, .author-info h5 { margin-bottom: 20px; } /* pagination */ .page-title { margin-bottom: 25px; } .page-title h3, .page-title h1 .bottom { font-size: 1.4em; } .tag-archive-meta { margin-top: 15px; } .archive-nav { margin-top: 25px; } /* footer */ .footer { padding: 30px 0; } .footer .one-third { float: none; margin: 40px 0 0 0; width: 100%; } .footer .one-third + .one-third { border-top: 4px solid #333; padding: 40px 0 0 0; } /* credits */ .credits { padding: 30px 0; } } @media (max-width: 500px) { /* header */ .header .blog-title { font-size: 1.75em; } .header .blog-description { font-size: 1em; margin-top: 15px; } /* post meta */ .post-author:before, .post-author:after { left: 15px; } .post-author-content { margin-left: 40px; } /* comments */ .comments div.comment { margin-top: 20px; } .comment .avatar { display: none; } .comment-inner { margin-left: 0; } .comment-inner:after { content: none; } .comment-actions { display: none; } .comment-actions-below { display: block; margin-top: 20px; } .comment-actions-below a { display: inline-block; margin-left: 8px; font-size: 0.85em; font-weight: 700; text-transform: uppercase; } .comment-actions-below a:first-child { margin-left: 0; } .comment-actions-below a:hover { text-decoration: underline; } .comment-nav-below span { display: none; } } @media (max-width: 400px) { /* respond */ .comment-form label { font-size: 14px; } .comment-form input[type="text"], .comment-form input[type="email"] { background-position: 94% center; background-size: 20px auto; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea { padding: 12px; font-size: 0.9em; } .comment-form textarea { height: 150px; } }