/* Theme Name: Aldus Author: Fränk Klein Author URI: http://fklein.info/ Description: A personal blog theme with a responsive layout and beautiful typography. Version: 1.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: flexible-width, one-column, custom-menu, editor-style, post-formats, translation-ready, red, black, white Aldus WordPress Theme, Copyright (C) 2013 Fränk Klein Aldus is based on Underscores http://underscores.me/, (C) 2012-2013 Automattic, Inc. This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. */ /** * Table of Contents: * * 1.0 - Reset * 2.0 - Repeatable Patterns * 3.0 - Basic Structure * 4.0 - Header * 4.1 - Site Header * 4.2 - Navigation * 5.0 - Content * 5.1 - Entry Header * 5.2 - Entry Content * 5.3 - Entry Meta * 5.4 - Images and Galleries * 5.5 - Post Formats * 5.6 - Attachments * 5.7 - Post/Paging Navigation * 5.8 - Author Bio * 5.9 - Archives * 5.10 - Search Results/No posts * 5.11 - 404 * 5.12 - Comments * 5.13 - Multisite * 6.0 - Sidebar * 6.1 - Widgets * 7.0 - Footer * 8.0 - Media Queries * ---------------------------------------------------------------------------- */ /** * 1.0 Reset * * Modified from Normalize.css to provide cross-browser consistency and a smart * default styling of HTML elements. * * @see http://git.io/normalize * ---------------------------------------------------------------------------- */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: Lora, Georgia, sans-serif; } body { color: #222; line-height: 1.5; margin: 0; } a { color: #c00; text-decoration: none; } a:visited { color: #c00; } a:focus { outline: thin dotted; } a:active { outline: 0; } a:hover { outline: 0; text-decoration: underline; } h1, h2, h3, h4, h5, h6 { clear: both; line-height: 1.3; } h1 { font-size: 1.875rem; margin: 0 0 1.875rem 0; } h2 { font-size: 1.618rem; margin: 0 0 1.618rem 0; } h3 { font-size: 1.159rem; margin: 0 0 1.159rem 0; } h4 { font-size: 1rem; margin: 0 0 1rem 0; } h5 { font-size: 1rem; font-style: italic; margin: 0 0 1rem 0; } h6 { font-size: 1rem; font-style: italic; font-weight: normal; margin: 0 0 1rem 0; } address { font-style: italic; margin: 0 0 1.618rem; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } p { margin: 0 0 1.416em; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 0.875rem; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } pre { background: #f5f5f5; color: #666; font-family: monospace; font-size: 1rem; margin: 1rem 0; margin-left: -115px; overflow: auto; padding: 1.159rem; width: 750px; 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: 1rem; font-style: italic; font-weight: 300; margin: 1.159rem 0 1.159rem 2.618rem; } blockquote blockquote { margin-right: 0; } blockquote cite, blockquote small, .quote-caption { font-size: 1rem; font-weight: normal; text-transform: uppercase; } small { font-size: smaller; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } dl { margin: 0 1.159rem; } dt { font-weight: bold; } dd { margin: 0 0 1.159rem; } menu, ol, ul { margin: 1rem 0; padding: 0; } ul { list-style-type: square; } nav ul, nav ol { list-style: none; list-style-image: none; } li > ul, li > ol { margin: 0; padding-left: 1.875rem; } img { -ms-interpolation-mode: bicubic; border: 0; vertical-align: middle; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; white-space: normal; } button, input, select, textarea { border: 1px solid #ccc; font-size: 100%; margin: 0; max-width: 100%; padding: 0.274rem; vertical-align: baseline; } button, input { line-height: normal; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; background-color: #dfdfdf; cursor: pointer; padding: 0.618rem; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { padding: 0; } input[type="search"] { -webkit-appearance: textfield; padding-right: 2px; /* Don't cut off the webkit search cancel button */ width: 270px; } 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 { border-bottom: 1px solid #ccc; border-collapse: collapse; border-spacing: 0; font-size: 0.875rem; line-height: 2; margin: 0 0 1.618rem; width: 100%; } caption, th, td { font-weight: normal; text-align: left; } caption { font-size: 1rem; margin: 1.618rem 0; } th { font-weight: bold; text-transform: uppercase; } td { border-top: 1px solid #ccc; padding: 6px 10px 6px 0; } del { color: #333; } ins { background: #fff9c0; text-decoration: none; } hr { border-top: 1px dotted #ccc; height: 1px; margin: 0 0 24px; } /** * 2.0 Repeatable Patterns * ---------------------------------------------------------------------------- */ /* Alignment */ .alignleft { display: inline; float: left; margin-right: 1.618rem; } .alignright { display: inline; float: right; margin-left: 1.618rem; } .aligncenter { clear: both; display: block; margin: 0 auto; } /* 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: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar */ } /* Clearing */ .clear:before, .clear:after, .navigation-main:before, .navigation-main:after, .nav-links:before, .nav-links:after, [class*="content"]:before, [class*="content"]:after, [class*="site"]:before, [class*="site"]:after { content: ''; display: table; } .clear:after, .navigation-main:after, .nav-links:after, [class*="content"]:after, [class*="site"]:after { clear: both; } /** * 3.0 Basic Structure * ---------------------------------------------------------------------------- */ .site { border-bottom: 5px solid #cc0000; border-top: 5px solid #cc0000; margin: 0 auto; width: 840px; } /** * 4.0 Header * ---------------------------------------------------------------------------- */ /** * 4.1 Site Header * ---------------------------------------------------------------------------- */ .site-branding { margin: 0 auto; margin-bottom: 2.618rem; margin-top: 2.618rem; } .site-title { margin: 0; text-align: center; } .site-title a { border: none; text-decoration: none; } .site-description { font-size: 1.618rem; margin: 0; text-align: center; } /** * 4.2 Navigation * ---------------------------------------------------------------------------- */ .navigation-main { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; margin: 0 auto; } .navigation-main ul { list-style: none; margin: 0; padding-left: 0; } .navigation-main li { float: left; position: relative; } .navigation-main a { border: 0; color: #222; display: block; font-weight: bold; margin-right: 1.618rem; padding: 1.159rem 1.618rem; text-decoration: none; text-transform: uppercase; } .navigation-main a:hover { color: #c00; } .navigation-main .current_page_item a, .navigation-main .current-menu-item a { color: #c00; } .navigation-main ul ul { background-color: #fff; border: 1px solid #ccc; display: none; float: left; position: absolute; width: 205px; left: 0; z-index: 99999; } .navigation-main ul ul li { border-top: 1px solid #ccc; width: 100%; } .navigation-main ul ul li:first-child { border: none; } .navigation-main ul ul a { margin-right: 0; text-transform: none; } .navigation-main ul ul ul { width: 205px; left: 100%; top: -1px; } .navigation-main ul ul ul a { font-weight: normal; } .navigation-main ul li:hover > ul { display: block; } /* Small menu */ .menu-toggle { display: none; } /** * 5.0 Content * ---------------------------------------------------------------------------- */ .site-content { margin: 0 auto; width: 520px; } .hentry { margin: 4.236rem 0 1.875rem 0; } .sticky.hentry { border-bottom: 4px double #ccc; border-top: 4px double #ccc; margin-left: -115px; padding: 3.034rem 0; width: 720px; } .sticky .entry-header, .sticky .entry-content, .sticky .entry-meta { margin: 0 auto; width: 520px; } /** * 5.1 Entry Header * ---------------------------------------------------------------------------- */ .entry-title { -ms-word-wrap: break-word; word-wrap: break-word; } .entry-title a { border-bottom: 0; color: #222; } .entry-title a:hover { color: #c00; text-decoration: none; } /** * 5.2 Entry Content * ---------------------------------------------------------------------------- */ .entry-content { -ms-word-wrap: break-word; word-wrap: break-word; } .entry-content p:last-child { margin-bottom: 0; } .entry-content a { border-bottom: 1px solid #dfdfdf; } .entry-content a:hover { border-bottom: 1px solid #c00; text-decoration: none; } .page-links { clear: both; margin: 0 0 1rem 0; } /** * 5.3 Entry Meta * ---------------------------------------------------------------------------- */ .entry-meta { border-top: 1px solid #ccc; margin-top: 1rem; padding-top: 1rem; } .entry-categories-tags { margin-top: 1rem; } .entry-categories-tags .categories, .entry-categories-tags .tags { margin: 0; } /** * 5.4 Images and Galleries * ---------------------------------------------------------------------------- */ /* Images */ .site-content img, .size-full { height: auto; max-width: 520px; } .wp-caption { padding-bottom: 1rem; max-width: 520px; } .wp-caption-text { font-size: 0.875rem; margin-top: 0.875rem; text-align: center; } .wp-caption.alignleft, img.alignleft { margin-left: -115px; } .wp-caption.alignright, img.alignright { margin-right: -115px; } .width-750 { height: auto; margin-left: -115px; max-width: 750px; } .site-content .width-750 img, .site-content img.width-750 { max-width: 750px; } .width-300 { max-width: 300px; } /* Galleries */ .gallery { margin-bottom: 1rem; } .gallery br { display: block; margin: 0; line-height: 0; content: " "; } .gallery-item { float: left; margin: 0 0 1rem 0; } .gallery-icon { text-align: center; } .gallery-icon img { border: 1px solid #ccc; height: auto; max-width: 100%; padding: 1px; } .gallery-caption { font-size: 0.716rem; margin: 0.716rem auto 0 auto; text-align: center; } .gallery-columns-4, .gallery-columns-5, .gallery-columns-6, .gallery-columns-7, .gallery-columns-8, .gallery-columns-9 { margin-left: -115px; width: 750px; } .gallery-columns-1 .gallery-icon img, .gallery-columns-2 .gallery-icon img, .gallery-columns-3 .gallery-icon img, .gallery-columns-4 .gallery-icon img { width: 154px; } .gallery-columns-1 .gallery-caption, .gallery-columns-2 .gallery-caption, .gallery-columns-3 .gallery-caption, .gallery-columns-4 .gallery-caption { width: 150px; } .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } .gallery-columns-1 .gallery-item { float: none; } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-3 .gallery-item { width: 33%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery-columns-5 .gallery-item { padding-right: 1rem; width: 20%; } .gallery-columns-6 .gallery-item { padding-right: 1rem; width: 16.66%; } .gallery-columns-7 .gallery-item { padding-right: 0.8rem; width: 14.28%; } .gallery-columns-8 .gallery-item { padding-right: 0.6rem; width: 12.5%; } .gallery-columns-9 .gallery-item { padding-right: 0.4rem; width: 11.11%; } /* Make sure embeds and iframes fit their containers */ embed, iframe, object { max-width: 100%; } /** * 5.5 Post Formats * ---------------------------------------------------------------------------- */ .format-link .entry-title a:after { content: '\00A0\2192'; } /** * 5.6 Attachments * ---------------------------------------------------------------------------- */ .entry-attachment .attachment { margin-left: -115px; width: 750px; } .attachment img { display: block; margin: 0 auto; max-width: 750px; } /** * 5.7 Post/Paging Navigation * ---------------------------------------------------------------------------- */ .site-content [class*="navigation"] { font-size: 1.159rem; margin: 0 0 1.618rem -2rem; width: 584px; } [class*="navigation"] .nav-previous { float: left; padding-left: 0.716rem; width: 50%; } [class*="navigation"] .nav-next { float: right; padding-right: 0.716rem; text-align: right; width: 50%; } .nav-previous .arrow { float: left; margin-right: 1rem; } .nav-next .arrow { float: right; margin-left: 1rem; } .nav-previous .link, .nav-next .link { overflow: hidden; } /** * 5.8 Author Bio * ---------------------------------------------------------------------------- */ /** * 5.9 Archives * ---------------------------------------------------------------------------- */ /** * 5.10 Search Results/No posts * ---------------------------------------------------------------------------- */ .not-found { margin: 4.236rem 0; } .page-header { margin-top: 4.236rem; } /** * 5.11 404 * ---------------------------------------------------------------------------- */ /** * 5.12 Comments * ---------------------------------------------------------------------------- */ .comments-area { border-top: 4px double #ccc; padding-top: 1.875rem; } .comment-list, .children { list-style: none; list-style-image: none; } .comment, .pingback { border-top: 1px solid #ccc; padding: 1.618rem 0; } .comment-meta { margin: 0 0 1.875rem; overflow: hidden; position: relative; } .avatar { float: left; padding: 0; line-height: 0; } .comment-meta .fn { display: block; font-style: normal; margin-left: 4.909rem; } .comment-metadata { display: block; font-size: 0.716rem; margin-left: 4.909rem; } .comment-awaiting-moderation { background-color: #c00; color: #fff; font-size: 0.716rem; margin-left: 4.909rem; text-align: center; } .bypostauthor {} /* Comment Form */ #commentform label { display: block; } #commentform [for="author"], #commentform [for="email"], #commentform [for="url"], #commentform [for="comment"] { float: left; padding: 5px 0; width: 120px; } #commentform textarea { width: 100%; } .form-allowed-tags, .form-allowed-tags code { font-size: 0.716rem; } /** * 6.0 Sidebar * ---------------------------------------------------------------------------- */ .footer-widget-area { border-top: 4px double #ccc; margin-top: 1.875rem; padding-top: 1.875rem; } .footer-widgets { float: left; width: 235px; } .first, .second { margin-right: 67px; } /** * 6.1 Widgets * ---------------------------------------------------------------------------- */ .widget { margin-bottom: 1.875rem; } .widget select { max-width: 100%; } .textwidget img { height: auto; max-width: 100%; } .widget_search .submit { display: none; } .footer-widgets li > ul, .footer-widgets li > ol { padding-left: 5px; } /** * 7.0 Footer * ---------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid #ccc; margin-top: 1.875rem; padding: 1.159rem 1.618rem; } /** * 8.0 Media Queries * ---------------------------------------------------------------------------- */ @media (max-width: 890px) { ol, ul { margin-left: 1rem; } } @media (max-width: 860px) { .site { width: 100%; } .footer-widgets { margin-right: 0; padding: 0 20px; width: 33%; } } @media (max-width: 764px) { .width-750, .width-750 img, pre { margin-left: 0; max-width: 100%; } .wp-caption.alignleft, img.alignleft { margin-left: 0; } .wp-caption.alignright, img.alignright { margin-right: 0; } .sticky.hentry { margin-left: 0; width: 100%; } } @media (max-width: 600px) { .site-content { width: 95%; } .sticky .entry-header, .sticky .entry-content, .sticky .entry-meta, .site-content img, .wp-caption { max-width: 100%; } .site-content [class*="navigation"] { margin-left: 0; max-width: 100%; } .footer-widgets { font-size: 87.5%; margin-right: 0; padding: 0 20px; width: 50%; } .third.footer-widgets { clear: left; } .footer-widgets li > ul, .footer-widgets li > ol { padding-left: 3px; } } @media (max-width: 500px) { html { font-size: 87.5%; } .width-300, .width-300.alignleft, .width-300.alignright { max-width: 205px; } .menu-toggle { cursor: pointer; display: block; font-size: 1.618rem; margin: 1rem 0; text-align: center; } .menu-toggle:after { content: "\2193"; padding-left: 8px; } .menu-toggle.toggled-on:after { content: "\2191"; } .navigation-main ul { display: none; } .navigation-main.toggled-on ul { display: block; } .navigation-main.toggled-on li { border: 0; float: none; padding: 0.716rem 1.618rem; position: static; } .navigation-main.toggled-on a { display: block; padding: 0; } .navigation-main.toggled-on a:hover { color: #c00; } .navigation-main.toggled-on ul ul { border: 0; position: static; width: 100%; } .footer-widgets { float: none; margin-right: auto; margin-left: auto; padding: 0; width: 80%; } } @media (max-width: 350px) { html { font-size: 87.5%; } .site-content { width: 90%; } [class*="navigation"] .nav-next, [class*="navigation"] .nav-previous { font-size: 1rem; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-wrap: break-word; } .width-300, .width-300.alignleft, .width-300.alignright { float: none; margin-left: auto; margin-right: auto; max-width: 100%; } }