/* Theme Name: Expositio Theme URI: http://wpshower.com/themes/expositio Author: WPShower Author URI: http://wpshower.com/ Description: Expositio is a free portfolio-type WordPress theme for photographers and designers. The horizontal layout of the Expositio theme is perfect for displaying visual materials like photography or art works. Version: 2.0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: white, light Text Domain: expositio This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /** * Table of Contents: * * 1.0 - Reset * 2.0 - Repeatable Patterns * 3.0 - Basic Structure * 4.0 - Header * 5.0 - Navigation * 6.0 - Content * 6.1 - Post Thumbnail * 6.2 - Entry Header * 6.3 - Entry Meta * 6.4 - Entry Content * 6.5 - Galleries * 6.6 - Post Formats * 6.7 - Post/Image/Paging Navigation * 6.8 - Attachments * 6.9 - Archives * 6.10 - Contributor Page * 6.11 - 404 Page * 6.12 - Full-width * 6.13 - Singular * 6.14 - Comments * 7.0 - Sidebar * 7.1 - Widgets * 7.2 - Content Sidebar Widgets * 8.0 - Footer * 9.0 - Featured Content * 10.0 - Multisite * 11.0 - Media Queries * 12.0 - Print * ----------------------------------------------------------------------------- */ /** * 1.0 Reset * * Resetting and rebuilding styles have been helped along thanks to the fine * work of Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html * along with Nicolas Gallagher and Jonathan Neal * http://necolas.github.com/normalize.css/ and Blueprint * http://www.blueprintcss.org/ * * ----------------------------------------------------------------------------- */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 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; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; max-width: 100%; } html { height: 100%; font-size: 62.5%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body, button, input, select, textarea { color: #222223; font-family: Lusitana, serif; font-size: 19px; font-size: 1.9rem; font-weight: 400; line-height: 29px; line-height: 2.9rem; } body { height: 100%; background: #fff; } a { color: #222223; text-decoration: none; } a:hover { color: #963cbd; border-bottom: 1px solid #963cbd; } a:focus, a:hover, a:active { outline: 0; } h1, h2, h3, h4, h5, h6 { clear: both; font-weight: 400; margin: 28px 0 14px; margin: 2.8rem 0 1.4rem; } h1 { font-size: 28px; font-size: 2.8rem; line-height: 38px; line-height: 3.8rem; } h2 { font-size: 26px; font-size: 2.6rem; line-height: 36px; line-height: 3.6rem; } h3 { font-size: 24px; font-size: 2.4rem; line-height: 34px; line-height: 3.4rem; } h4 { font-size: 22px; font-size: 2.2rem; line-height: 32px; line-height: 3.2rem; } h5 { font-size: 20px; font-size: 2rem; line-height: 30px; line-height: 3rem; } h6 { font-size: 18px; font-size: 1.8rem; line-height: 28px; line-height: 2.8rem; } address { font-style: italic; margin-bottom: 28px; margin-bottom: 2.8rem; } abbr[title] { border-bottom: 1px dotted #222223; cursor: help; } b, strong { font-weight: 400; } cite, dfn, em, i { font-style: italic; } mark, ins { text-decoration: none; } p { margin-bottom: 28px; margin-bottom: 2.8rem; } code, kbd, tt, var, samp, pre { font-family: monospace, serif; font-size: 16px; font-size: 1.6rem; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; line-height: 26px; line-height: 2.6rem; } pre { border: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 28px; margin-bottom: 2.8rem; max-width: 100%; overflow: auto; padding: 12px; padding: 1.2rem; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } blockquote, q { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } blockquote { font-size: 20px; font-size: 2rem; font-style: italic; font-weight: 400; line-height: 30px; line-height: 3rem; margin-bottom: 28px; margin-bottom: 2.8rem; } blockquote cite, blockquote small { font-size: 16px; font-size: 1.6rem; font-weight: 400; line-height: 26px; line-height: 2.6rem; } blockquote em, blockquote i, blockquote cite { font-style: normal; } blockquote strong, blockquote b { font-weight: 400; } small { font-size: smaller; } big { font-size: 125%; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } dl { margin-bottom: 28px; margin-bottom: 2.8rem; } dt { font-weight: bold; } dd { margin-bottom: 28px; margin-bottom: 2.8rem; } ul, ol { list-style: none; margin: 0 0 28px 20px; margin: 0 0 2.8rem 2rem; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin: 0 0 0 20px; margin: 0 0 0 2rem; } img { -ms-interpolation-mode: bicubic; border: 0; vertical-align: top; } figure { margin: 0; } fieldset { border: 1px solid rgba(0, 0, 0, 0.1); margin: 0 0 28px; margin: 0 0 2.8rem; padding: 12px 12px 0; padding: 1.2rem 1.2rem 0; } legend { white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; max-width: 100%; vertical-align: baseline; } button, input { line-height: normal; } input, textarea { /* Removing the inner shadow, rounded corners on iOS inputs */ background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { padding: 0; } input[type="search"] { -webkit-appearance: textfield; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table, th, td { border: 1px solid rgba(0, 0, 0, 0.1); } table { border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; margin-bottom: 28px; margin-bottom: 2.8rem; width: 100%; } caption, th, td { font-weight: normal; text-align: left; } th { border-width: 0 1px 1px 0; font-weight: bold; } td { border-width: 0 1px 1px 0; } del { color: #222223; } hr { background-color: rgba(0, 0, 0, 0.1); border: 0; height: 1px; margin-bottom: 28px; margin-bottom: 2.8rem; } /* Support a widely-adopted but non-standard selector for text selection styles * to achieve a better experience. See http://core.trac.wordpress.org/ticket/25898. */ ::selection { background: #963cbd; color: #fff; text-shadow: none; } ::-moz-selection { background: #963cbd; color: #fff; text-shadow: none; } /** * 2.0 Repeatable Patterns * ----------------------------------------------------------------------------- */ @font-face { font-family: expositio; src: url("fonts/expositio.eot?") format("eot"), url("fonts/expositio.woff") format("woff"), url("fonts/expositio.ttf") format("truetype"); font-weight: normal; font-style: normal; } /* Input fields */ input, textarea { border: 1px solid #222223; border-radius: 2px; color: #222223; padding: 4px 10px; padding: 0.4rem 1rem; margin-bottom: 3px; margin-bottom: 0.3rem; } input:focus, textarea:focus { border: 1px solid #963cbd; outline: 0; } /* Buttons */ button, .contributor-posts-link, input[type="button"], input[type="reset"], input[type="submit"] { background-color: #222223; border: 0; border-radius: 2px; color: #963cbd; padding: 5px 20px; padding: 0.5rem 2rem; margin-bottom: 3px; margin-bottom: 0.3rem; vertical-align: bottom; } button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus { background-color: #963cbd; color: #fff; } button:active, .contributor-posts-link:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { background-color: #963cbd; color: #fff; } /* Placeholder text color -- selectors need to be separate to work. */ ::-webkit-input-placeholder { color: #222223; } :-moz-placeholder { color: #222223; } ::-moz-placeholder { color: #222223; /* Since FF19 lowers the opacity of the placeholder by default */ opacity: 1; } :-ms-input-placeholder { color: #222223; } /* Responsive images. Fluid images for posts, comments, and widgets */ .entry-content img, .entry-summary img, .wp-caption { max-width: 100%; } /** * Make sure images with WordPress-added height and width attributes are * scaled correctly. */ .entry-content img, .entry-summary img, img[class*="align"], img[class*="wp-image-"], img[class*="attachment-"] { height: auto; } img.size-full, img.size-large, .wp-post-image, .post-thumbnail img { height: auto; max-width: 100%; } body.home .wp-post-image { max-width: none; } /* Make sure embeds and iframes fit their containers */ embed, iframe, object, video { margin-bottom: 28px; margin-bottom: 2.8rem; max-width: 100%; } p > embed, p > iframe, p > object, span > embed, span > iframe, span > object { margin-bottom: 0; } /* Alignment */ .alignleft { float: left; } .alignright { float: right; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } blockquote.alignleft, img.alignleft { margin: 7px 28px 7px 0; margin: 0.7rem 2.8rem 0.7rem 0; } .wp-caption.alignleft { margin: 7px 14px 7px 0; margin: 0.7rem 1.4rem 0.7rem 0; } blockquote.alignright, img.alignright { margin: 7px 0 7px 28px; margin: 0.7rem 0 0.7rem 2.8rem; } .wp-caption.alignright { margin: 7px 0 7px 14px; margin: 0.7rem 0 0.7rem 1.4rem; } blockquote.aligncenter, img.aligncenter, .wp-caption.aligncenter { margin-top: 7px; margin-top: 0.7rem; margin-bottom: 7px; margin-bottom: 0.7rem; } .site-content blockquote.alignleft, .site-content blockquote.alignright { padding-top: 14px; padding-top: 1.4rem; } .site-content blockquote.alignleft p, .site-content blockquote.alignright p { margin-bottom: 14px; margin-bottom: 1.4rem; } .wp-caption { margin-bottom: 28px; margin-bottom: 2.8rem; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0; } .wp-caption { color: #222223; } .wp-caption a { color: #963cbd; } .wp-caption-text { font-size: 13px; font-size: 1.3rem; line-height: 15px; line-height: 1.5rem; margin: 9px 0; margin: 0.9rem 0; } .wp-smiley { border: 0; margin-bottom: 0; margin-top: 0; padding: 0; } /* Assistive text */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute; } /* Clearing floats */ .site-header:after, .site-footer:after { content: ''; display: block; clear: both; } /** * 3.0 Basic Structure * ----------------------------------------------------------------------------- */ #wrapper { width: 100%; height: 100%; } .site { opacity: 0; position: relative; min-width: 320px; -webkit-transition: opacity 0.3s, left 0.3s ease-out; -moz-transition: opacity 0.3s, left 0.3s ease-out; -o-transition: opacity 0.3s, left 0.3s ease-out; transition: opacity 0.3s, left 0.3s ease-out; } .main-content, .content-area { height: 100%; white-space: nowrap; } /* Infinite load */ @-webkit-keyframes buffer1 { 0% { -webkit-transform: scale(0); } 50% { -webkit-transform: scale(1); } } @-moz-keyframes buffer1 { 0% { -moz-transform: scale(0); } 50% { -moz-transform: scale(1); } } @-o-keyframes buffer1 { 0% { -o-transform: scale(0); } 50% { -o-transform: scale(1); } } @-ms-keyframes buffer1 { 0% { -ms-transform: scale(0); } 50% { -ms-transform: scale(1); } } @keyframes buffer1 { 0% { transform: scale(0); } 50% { transform: scale(1); } } @-webkit-keyframes buffer2 { 0% { -webkit-transform: scale(0); } 50% { -webkit-transform: scale(0); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes buffer2 { 0% { -moz-transform: scale(0); } 50% { -moz-transform: scale(0); } 100% { -moz-transform: scale(1); } } @-o-keyframes buffer2 { 0% { -o-transform: scale(0); } 50% { -o-transform: scale(0); } 100% { -o-transform: scale(1); } } @-ms-keyframes buffer2 { 0% { -ms-transform: scale(0); } 50% { -ms-transform: scale(0); } 100% { -ms-transform: scale(1); } } @keyframes buffer2 { 0% { transform: scale(0); } 50% { transform: scale(0); } 100% { transform: scale(1); } } #infinite-loader { display: none; position: fixed; top: 50%; left: 50%; width: 20px; height: 20px; } #infinite-loader.active { display: block; } #infinite-loader > * { display: block; position: absolute; top: -50%; left: -50%; width: 100%; height: 100%; background: #963cbd; border-radius: 50%; } #infinite-loader > *:nth-child(1) { background: transparent; } #infinite-loader > *:nth-child(2) { -webkit-animation: buffer1 0.5s infinite; -moz-animation: buffer1 0.5s infinite; -o-animation: buffer1 0.5s infinite; -ms-animation: buffer1 0.5s infinite; animation: buffer1 0.5s infinite; } #infinite-loader > *:nth-child(3) { background: transparent; -webkit-animation: buffer2 0.2s infinite; -moz-animation: buffer2 0.2s infinite; -o-animation: buffer2 0.2s infinite; -ms-animation: buffer2 0.2s infinite; animation: buffer2 0.2s infinite; } /** * 4.0 Header * ----------------------------------------------------------------------------- */ /* Ensure that there is no gap between the header and the admin bar for WordPress versions before 3.8. */ #wpadminbar { min-height: 32px; } .site-header { background: #fff; } .site-title { margin: 0; font-size: 18px; font-size: 1.8rem; font-weight: 700; line-height: 28px; line-height: 2.8rem; } #header-helper { position: absolute; top: 0; left: 0; width: 10px; height: 1px; } /** * 5.0 Navigation * ----------------------------------------------------------------------------- */ .site-navigation ul { list-style: none; margin: 0; } .site-navigation li { display: block; position: relative; font-size: 18px; font-size: 1.8rem; line-height: 28px; line-height: 2.8rem; word-wrap: break-word; } .site-navigation ul ul ul { padding-left: 20px; padding-left: 2rem; } .menu-toggle { display: none; position: absolute; top: 10px; top: 1rem; right: 20px; right: 2rem; margin: 0; color: #222223; font-family: expositio; font-size: 30px; font-size: 3rem; line-height: 30px; line-height: 3rem; cursor: pointer; } .menu-toggle:hover { color: #963cbd; } #navigation-close { display: none; position: absolute; z-index: 10000; top: 10px; top: 1rem; right: 20px; right: 2rem; font-size: 30px; font-size: 3rem; line-height: 30px; line-height: 3rem; color: #fff; cursor: pointer; } /** * 6.0 Content * ----------------------------------------------------------------------------- */ .content-area { white-space: nowrap; } .hentry, .page-content { display: inline-block; vertical-align: top; white-space: normal; word-wrap: break-word; } body.single .hentry { width: 67.391304348%; padding-right: 20px; padding-right: 2rem; } body.page .hentry, .page-content { width: 67.391304348%; padding-right: 20px; padding-right: 2rem; } .image_link:hover { border-bottom: none; } /** * 6.1 Post Thumbnail * ----------------------------------------------------------------------------- */ .post-thumbnail { display: inline-block; vertical-align: top; } body.home .post-thumbnail { height: 100%; } /** * 6.2 Entry Header * ----------------------------------------------------------------------------- */ body.single .entry-header, body.page .entry-header, .page-header { margin-bottom: 20px; margin-bottom: 2rem; } .entry-title, .page-title { margin: 0; font-size: 18px; font-size: 1.8rem; font-weight: 700; line-height: 28px; line-height: 2.8rem; word-wrap: break-word; white-space: pre-wrap; } /** * 6.3 Entry Meta * ----------------------------------------------------------------------------- */ /** * 6.4 Entry Content * ----------------------------------------------------------------------------- */ .entry-content > p:last-child { margin-bottom: 0; } .entry-content a, .page-content a { border-bottom: 1px solid; } /** * 6.5 Gallery * ----------------------------------------------------------------------------- */ .gallery { display: inline-block; width: auto; height: 100%; margin: 0; list-style-type: none; } .gallery-item { display: inline-block; width: auto; height: 100%; padding-right: 20px; padding-right: 2rem; vertical-align: top; white-space: normal; } .gallery-item img { display: block; width: auto; height: 100%; height: -moz-calc(100% - 28px); height: -webkit-calc(100% - 28px); height: calc(100% - 28px); } /** * 6.6 Post Formats * ----------------------------------------------------------------------------- */ /** * 6.7 Post/Image/Paging Navigation * ----------------------------------------------------------------------------- */ .paging-navigation { display: none; } #image-navigation { text-align: right; } #image-navigation a:first-of-type { float: left; } /** * 6.8 Attachments * ----------------------------------------------------------------------------- */ .entry-attachment .attachment { margin-bottom: 28px; margin-bottom: 2.8rem; } /** * 6.9 Archives * ----------------------------------------------------------------------------- */ /** * 6.10 Contributor Page * ----------------------------------------------------------------------------- */ /** * 6.11 404 Page * ----------------------------------------------------------------------------- */ .error404 .page-content { /*padding-top: 0;*/ } .error404 .page-content .search-form { /*margin-bottom: 24px;*/ } /** * 6.12 Full-width * ----------------------------------------------------------------------------- */ /** * 6.13 Singular * ----------------------------------------------------------------------------- */ /** * 6.14 Comments * ----------------------------------------------------------------------------- */ /** * 7.0 Sidebars * ----------------------------------------------------------------------------- */ /** * 7.1 Widgets * ----------------------------------------------------------------------------- */ /** * 7.2 Content Sidebar Widgets * ----------------------------------------------------------------------------- */ /** * 8.0 Footer * ----------------------------------------------------------------------------- */ .site-footer { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 20px 40px; padding: 0 2rem 4rem; color: #999; } /** * 9.0 Featured Content * ----------------------------------------------------------------------------- */ /** * 10.0 Multisite * ----------------------------------------------------------------------------- */ /** * 11.0 Media Queries * ----------------------------------------------------------------------------- */ /* Does the same thing as , * but in the future W3C standard way. -ms- prefix is required for IE10+ to * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor * the meta tag. See http://core.trac.wordpress.org/ticket/25888. */ @-ms-viewport { width: device-width; } @viewport { width: device-width; } @media (min-width: 951px) { .site { height: 100%; padding: 40px 20px 40px 250px; padding: 4rem 2rem 4rem 25rem; } .site-header { position: fixed; top: 0; left: 0; width: 250px; height: 100%; padding: 40px 30px 0; padding: 4rem 3rem 0; } body.admin-bar .site-header { top: 32px; } .primary-navigation { padding: 20px 0 40px; padding: 2rem 0 4rem; } #top-right-menu { margin-top: 20px; margin-top: 2rem; } .nav-menu li { opacity: 0; } .site-navigation > div > ul > li.menu-item-has-children { margin-top: 20px; margin-top: 2rem; } .site-navigation > div > ul > li.menu-item-has-children > a { font-weight: 700; } .site-navigation > div > ul ul ul { padding-left: 20px; padding-left: 2rem; } .current-menu-item > a { font-weight: 700; } #main { height: 100%; } body.home .hentry { height: 100%; padding-right: 20px; padding-right: 2rem; } body.home .hentry > a { display: inline-block; height: 100%; height: -moz-calc(100% - 28px); height: -webkit-calc(100% - 28px); height: calc(100% - 28px); } body.home .hentry img { height: 100%; width: auto; } body.single .hentry { padding-bottom: 40px; padding-bottom: 4rem; max-width: 620px; } body.page .hentry, .page-content { padding-bottom: 40px; padding-bottom: 4rem; max-width: 620px; } .gallery-animated img { cursor: pointer; } } @media (max-width: 950px) { .site-header { height: auto !important; padding: 10px 20px 30px; padding: 1rem 2rem 3rem; } #header-helper { display: none; } .site-title { padding-right: 40px; padding-right: 4rem; } .menu-toggle { display: block; } .menu-toggle.hidden { display: none; } .primary-navigation { position: absolute; z-index: 9999; top: 0; left: -84.375%; width: 84.375%; height: 100%; background-color: #963cbd; padding: 10px 20px; padding: 1rem 2rem; overflow-y: auto; -webkit-transition: left 0.3s ease-out; -moz-transition: left 0.3s ease-out; -o-transition: left 0.3s ease-out; transition: left 0.3s ease-out; } #top-right-menu { margin-top: 20px; margin-top: 2rem; } .site-navigation > div > ul > li.menu-item-has-children { margin-top: 20px; margin-top: 2rem; } .site-navigation > div > ul > li.menu-item-has-children > a { font-weight: 700; } #wrapper { position: relative; } #wrapper.overflow_fix { overflow: hidden; } .site { position: relative; left: 0; width: 100%; min-height: 100%; } .toggled-on .site { left: 84.375%; height: 100%; } .toggled-on .site-footer { display: none; } .primary-navigation a { font-size: 22px; font-size: 2.2rem; line-height: 35px; line-height: 3.5rem; color: #fff; } .primary-navigation a:hover { border-bottom: 1px solid #fff; } .toggled-on #navigation-close { display: block; } #main { width: 100%; padding: 0 20px; padding: 0 2rem; } body.single #primary, body.page #main-content { padding-left: 20.689655172%; } body.home .hentry, body.home .post-thumbnail, body.home .hentry img { height: auto; width: 100% !important; } body.home .hentry { display: block; padding-bottom: 20px; padding-bottom: 2rem; } body.home .hentry:last-of-type { padding-bottom: 0; } body.single #primary, body.page #main-content { padding-left: 0; } body.single .hentry, body.page .hentry, .page-content { width: 100%; padding-right: 0; } .post-thumbnail { display: block; } .gallery { display: block; margin-top: 28px; margin-top: 2.8rem; } .gallery-item { display: block; width: 100% !important; height: auto; padding: 0 0 20px; padding: 0 0 2rem; } .gallery-item:last-child { padding-bottom: 0; } .gallery-item img { width: 100% !important; height: auto; } .site-footer { padding-top: 30px; padding-top: 3rem; } } /** * 12.0 Print * ----------------------------------------------------------------------------- */ @media print { body { /* Brute force since user agents all print differently. */ background: none !important; } }