diff --git a/style.css b/style.css index 26a1eb5f..7ef5e37f 100644 --- a/style.css +++ b/style.css @@ -22,10 +22,31 @@ along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normali and Blueprint http://www.blueprintcss.org/ */ +/*-------------------------------------------------------------- +>>> TABLE OF CONTENTS: +---------------------------------------------------------------- +1.0 - Reset +2.0 - Typography +3.0 - Elements +4.0 - Inputs and buttons +5.0 - Navigation + 5.1 - Links + 5.2 - Menus +6.0 - Accessiblity +7.0 - Alignments +8.0 - Clearings +9.0 - Widgets +10.0 - Content + 10.1 - Posts and pages + 10.2 - Asides + 10.3 - Comments +11.0 - Infinite scroll +11.0 - Media +--------------------------------------------------------------*/ -/* =Reset --------------------------------------------------------------- */ - +/*-------------------------------------------------------------- +1.0 - Reset +--------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -101,10 +122,9 @@ a img { border: 0; } - -/* =Global ------------------------------------------------ */ - +/*-------------------------------------------------------------- +2.0 Typography +--------------------------------------------------------------*/ body, button, input, @@ -116,42 +136,12 @@ textarea { font-size: 1.6rem; line-height: 1.5; } - -/* Headings */ h1, h2, h3, h4, h5, h6 { clear: both; } -hr { - background-color: #ccc; - border: 0; - height: 1px; - margin-bottom: 1.5em; -} - -/* Text elements */ p { margin-bottom: 1.5em; } -ul, ol { - margin: 0 0 1.5em 3em; -} -ul { - list-style: disc; -} -ol { - list-style: decimal; -} -li > ul, -li > ol { - margin-bottom: 0; - margin-left: 1.5em; -} -dt { - font-weight: bold; -} -dd { - margin: 0 1.5em 1.5em; -} b, strong { font-weight: bold; } @@ -206,6 +196,36 @@ small { big { font-size: 125%; } + +/*-------------------------------------------------------------- +3.0 Elements +--------------------------------------------------------------*/ +hr { + background-color: #ccc; + border: 0; + height: 1px; + margin-bottom: 1.5em; +} +ul, ol { + margin: 0 0 1.5em 3em; +} +ul { + list-style: disc; +} +ol { + list-style: decimal; +} +li > ul, +li > ol { + margin-bottom: 0; + margin-left: 1.5em; +} +dt { + font-weight: bold; +} +dd { + margin: 0 1.5em 1.5em; +} figure { margin: 0; } @@ -216,10 +236,10 @@ table { th { font-weight: bold; } -img { - height: auto; /* Make sure images are scaled correctly. */ - max-width: 100%; /* Adhere to container width. */ -} + +/*-------------------------------------------------------------- +4.0 Inputs and buttons +--------------------------------------------------------------*/ button, input, select, @@ -315,7 +335,12 @@ textarea { width: 98%; } -/* Links */ +/*-------------------------------------------------------------- +5.0 Navigation +--------------------------------------------------------------*/ +/*-------------------------------------------------------------- +5.1 Links +--------------------------------------------------------------*/ a { color: royalblue; } @@ -328,80 +353,9 @@ a:active { color: midnightblue; } -/* Alignment */ -.alignleft { - display: inline; - float: left; - margin-right: 1.5em; -} -.alignright { - display: inline; - float: right; - margin-left: 1.5em; -} -.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: 14px; - 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, -.entry-content:before, -.entry-content:after, -.comment-content:before, -.comment-content:after, -.site-header:before, -.site-header:after, -.site-content:before, -.site-content:after, -.site-footer:before, -.site-footer:after { - content: ''; - display: table; -} - -.clear:after, -.entry-content:after, -.comment-content:after, -.site-header:after, -.site-content:after, -.site-footer:after { - clear: both; -} - - -/* =Menu ------------------------------------------------ */ - +/*-------------------------------------------------------------- +5.2 Menus +--------------------------------------------------------------*/ .main-navigation { clear: both; display: block; @@ -451,13 +405,11 @@ a:active { .main-navigation .current_page_item a, .main-navigation .current-menu-item a { } - /* Small menu */ .menu-toggle { cursor: pointer; display: none; } - @media screen and (max-width: 600px) { .menu-toggle, .main-navigation.toggled .nav-menu { @@ -468,11 +420,120 @@ a:active { display: none; } } +.site-main [class*="navigation"] { + margin: 0 0 1.5em; + overflow: hidden; +} +[class*="navigation"] .nav-previous { + float: left; + width: 50%; +} +[class*="navigation"] .nav-next { + float: right; + text-align: right; + width: 50%; +} +/*-------------------------------------------------------------- +6.0 Accessibility +--------------------------------------------------------------*/ +/* Text meant only for screen readers */ +.screen-reader-text { + clip: rect(1px, 1px, 1px, 1px); + position: absolute !important; +} -/* =Content ------------------------------------------------ */ +.screen-reader-text:hover, +.screen-reader-text:active, +.screen-reader-text:focus { + background-color: #f1f1f1; + border-radius: 3px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + clip: auto !important; + color: #21759b; + display: block; + font-size: 14px; + font-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 */ +} +/*-------------------------------------------------------------- +7.0 Alignments +--------------------------------------------------------------*/ +.alignleft { + display: inline; + float: left; + margin-right: 1.5em; +} +.alignright { + display: inline; + float: right; + margin-left: 1.5em; +} +.aligncenter { + clear: both; + display: block; + margin: 0 auto; +} + +/*-------------------------------------------------------------- +8.0 Clearings +--------------------------------------------------------------*/ +.clear:before, +.clear:after, +.entry-content:before, +.entry-content:after, +.comment-content:before, +.comment-content:after, +.site-header:before, +.site-header:after, +.site-content:before, +.site-content:after, +.site-footer:before, +.site-footer:after { + content: ''; + display: table; +} + +.clear:after, +.entry-content:after, +.comment-content:after, +.site-header:after, +.site-content:after, +.site-footer:after { + clear: both; +} + +/*-------------------------------------------------------------- +9.0 Widgets +--------------------------------------------------------------*/ +.widget { + margin: 0 0 1.5em; +} + +/* Make sure select elements fit in widgets */ +.widget select { + max-width: 100%; +} + +/* Search widget */ +.widget_search .search-submit { + display: none; +} + +/*-------------------------------------------------------------- +10.0 Content +--------------------------------------------------------------*/ +/*-------------------------------------------------------------- +10.1 Posts and pages +--------------------------------------------------------------*/ .sticky { } .hentry { @@ -496,19 +557,39 @@ a:active { margin: 0 0 1.5em; } - -/* =Asides ------------------------------------------------ */ - +/*-------------------------------------------------------------- +10.2 Asides +--------------------------------------------------------------*/ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } +/*-------------------------------------------------------------- +10.3 Comments +--------------------------------------------------------------*/ +.comment-content a { + word-wrap: break-word; +} +.bypostauthor { +} -/* =Media ------------------------------------------------ */ +/*-------------------------------------------------------------- +11.0 Infinite scroll +--------------------------------------------------------------*/ +/* Globally hidden elements when Infinite Scroll is supported and in use. */ +.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */ +.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ + display: none; +} +/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */ +.infinity-end.neverending .site-footer { + display: block; +} +/*-------------------------------------------------------------- +12.0 Media +--------------------------------------------------------------*/ .page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley { @@ -550,71 +631,9 @@ a:active { } .site-main .gallery-columns-4 .gallery-item img { } - /* Make sure embeds and iframes fit their containers */ embed, iframe, object { max-width: 100%; } - - -/* =Navigation ------------------------------------------------ */ - -.site-main [class*="navigation"] { - margin: 0 0 1.5em; - overflow: hidden; -} -[class*="navigation"] .nav-previous { - float: left; - width: 50%; -} -[class*="navigation"] .nav-next { - float: right; - text-align: right; - width: 50%; -} - - -/* =Comments ------------------------------------------------ */ - -.comment-content a { - word-wrap: break-word; -} -.bypostauthor { -} - - -/* =Widgets ------------------------------------------------ */ - -.widget { - margin: 0 0 1.5em; -} - -/* Make sure select elements fit in widgets */ -.widget select { - max-width: 100%; -} - -/* Search widget */ -.widget_search .search-submit { - display: none; -} - - -/* =Infinite Scroll ------------------------------------------------ */ - -/* Globally hidden elements when Infinite Scroll is supported and in use. */ -.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */ -.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ - display: none; -} - -/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */ -.infinity-end.neverending .site-footer { - display: block; -}