diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..157b7bde6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/sass/.sass-cache diff --git a/sass/partials/_accessibility.scss b/sass/partials/_accessibility.scss index ebf0123f8..495d16afd 100644 --- a/sass/partials/_accessibility.scss +++ b/sass/partials/_accessibility.scss @@ -1,29 +1,31 @@ /*-------------------------------------------------------------- 6.0 Accessibility --------------------------------------------------------------*/ + /* Text meant only for screen readers */ + .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; -} -.screen-reader-text:hover, -.screen-reader-text:active, -.screen-reader-text:focus { - background-color: #f1f1f1; - border-radius: 3px; - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); - clip: auto !important; - color: #21759b; - display: block; - @include rem(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 */ + &:hover, + &:active, + &: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; + @include rem(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 */ + } } diff --git a/sass/partials/_alignments.scss b/sass/partials/_alignments.scss index a1bfe6816..49dab3f02 100644 --- a/sass/partials/_alignments.scss +++ b/sass/partials/_alignments.scss @@ -1,16 +1,19 @@ /*-------------------------------------------------------------- 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; diff --git a/sass/partials/_clearings.scss b/sass/partials/_clearings.scss index 5228f0ff1..12da5c913 100644 --- a/sass/partials/_clearings.scss +++ b/sass/partials/_clearings.scss @@ -1,6 +1,7 @@ /*-------------------------------------------------------------- 8.0 Clearings --------------------------------------------------------------*/ + .clear:before, .clear:after, .entry-content:before, diff --git a/sass/partials/_content.scss b/sass/partials/_content.scss index e5cf5fe20..35ee560e7 100644 --- a/sass/partials/_content.scss +++ b/sass/partials/_content.scss @@ -1,34 +1,43 @@ /*-------------------------------------------------------------- 10.0 Content --------------------------------------------------------------*/ + /*-------------------------------------------------------------- 10.1 Posts and pages --------------------------------------------------------------*/ + .sticky { } + .hentry { margin: 0 0 1.5em; } + .byline, .updated { display: none; } + .single .byline, .group-blog .byline { display: inline; } + .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } + .page-links { clear: both; margin: 0 0 1.5em; } + /*-------------------------------------------------------------- 10.2 Asides --------------------------------------------------------------*/ + .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; @@ -37,8 +46,10 @@ /*-------------------------------------------------------------- 10.3 Comments --------------------------------------------------------------*/ + .comment-content a { word-wrap: break-word; } + .bypostauthor { } diff --git a/sass/partials/_elements.scss b/sass/partials/_elements.scss index 588a42554..f729dbc93 100644 --- a/sass/partials/_elements.scss +++ b/sass/partials/_elements.scss @@ -7,33 +7,48 @@ hr { height: 1px; margin-bottom: 1.5em; } -ul, ol { + +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; } + +img { + height: auto; /* Make sure images are scaled correctly. */ + max-width: 100%; /* Adhere to container width. */ +} + figure { margin: 0; } + table { margin: 0 0 1.5em; width: 100%; } + th { font-weight: bold; } diff --git a/sass/partials/_inputs-buttons.scss b/sass/partials/_forms.scss similarity index 71% rename from sass/partials/_inputs-buttons.scss rename to sass/partials/_forms.scss index 4d146cbda..4089a43b7 100644 --- a/sass/partials/_inputs-buttons.scss +++ b/sass/partials/_forms.scss @@ -1,6 +1,7 @@ /*-------------------------------------------------------------- -4.0 Inputs and buttons +4.0 Forms --------------------------------------------------------------*/ + button, input, select, @@ -10,6 +11,7 @@ textarea { vertical-align: baseline; /* Improves appearance and consistency in all browsers */ *vertical-align: middle; /* Improves appearance and consistency in all browsers */ } + button, input[type="button"], input[type="reset"], @@ -26,43 +28,41 @@ input[type="submit"] { line-height: 1; padding: .6em 1em .4em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); + + &:hover { + border-color: #ccc #bbb #aaa #bbb; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02); + } + + &:focus, + &:active { + border-color: #aaa #bbb #bbb #bbb; + box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); + } } -button:hover, -input[type="button"]:hover, -input[type="reset"]:hover, -input[type="submit"]:hover { - border-color: #ccc #bbb #aaa #bbb; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02); -} -button:focus, -input[type="button"]:focus, -input[type="reset"]:focus, -input[type="submit"]:focus, -button:active, -input[type="button"]:active, -input[type="reset"]:active, -input[type="submit"]:active { - border-color: #aaa #bbb #bbb #bbb; - box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); -} + input[type="checkbox"], input[type="radio"] { padding: 0; /* Addresses excess padding in IE8/9 */ } + input[type="search"] { -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ -moz-box-sizing: content-box; box-sizing: content-box; + + &::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ + -webkit-appearance: none; + } } -input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ - -webkit-appearance: none; -} + button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ border: 0; padding: 0; } + input[type="text"], input[type="email"], input[type="url"], @@ -72,15 +72,12 @@ textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; + + &:focus { + color: #111; + } } -input[type="text"]:focus, -input[type="email"]:focus, -input[type="url"]:focus, -input[type="password"]:focus, -input[type="search"]:focus, -textarea:focus { - color: #111; -} + input[type="text"], input[type="email"], input[type="url"], @@ -88,6 +85,7 @@ input[type="password"], input[type="search"] { padding: 3px; } + textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ padding-left: 3px; diff --git a/sass/partials/_infinite-scroll.scss b/sass/partials/_infinite-scroll.scss index 0d3b73e79..3dd64fcf2 100644 --- a/sass/partials/_infinite-scroll.scss +++ b/sass/partials/_infinite-scroll.scss @@ -1,12 +1,16 @@ /*-------------------------------------------------------------- 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; } diff --git a/sass/partials/_media.scss b/sass/partials/_media.scss index f80d47685..a47596f35 100644 --- a/sass/partials/_media.scss +++ b/sass/partials/_media.scss @@ -1,50 +1,95 @@ /*-------------------------------------------------------------- 12.0 Media --------------------------------------------------------------*/ -.page-content img.wp-smiley, -.entry-content img.wp-smiley, -.comment-content img.wp-smiley { - border: none; - margin-bottom: 0; - margin-top: 0; - padding: 0; + +.page-content, +.entry-content, +.comment-content { + + img.wp-smiley { + border: none; + margin-bottom: 0; + margin-top: 0; + padding: 0; + } } + +/* Make sure embeds and iframes fit their containers */ + +embed, +iframe, +object { + max-width: 100%; +} + +/*-------------------------------------------------------------- +12.1 Captions +--------------------------------------------------------------*/ + .wp-caption { - border: 1px solid #ccc; margin-bottom: 1.5em; max-width: 100%; + + img[class*="wp-image-"] { + display: block; + margin: 0 auto; + } + + .wp-caption-text { + margin: 0.8075em 0; + } } -.wp-caption img[class*="wp-image-"] { - display: block; - margin: 1.2% auto 0; - max-width: 98%; -} + .wp-caption-text { text-align: center; } -.wp-caption .wp-caption-text { - margin: 0.8075em 0; -} -.site-main .gallery { + +/*-------------------------------------------------------------- +12.2 Galleries +--------------------------------------------------------------*/ + +.gallery { margin-bottom: 1.5em; } -.gallery-caption { -} -.site-main .gallery a img { - border: none; - height: auto; - max-width: 90%; -} -.site-main .gallery dd { - margin: 0; -} -.site-main .gallery-columns-4 .gallery-item { -} -.site-main .gallery-columns-4 .gallery-item img { + +.gallery-item { + display: inline-block; + text-align: center; + vertical-align: top; + width: 100%; + + .gallery-columns-2 & { + max-width: 50%; + } + + .gallery-columns-3 & { + max-width: 33.33%; + } + + .gallery-columns-4 & { + max-width: 25%; + } + + .gallery-columns-5 & { + max-width: 20%; + } + + .gallery-columns-6 & { + max-width: 16.66%; + } + + .gallery-columns-7 & { + max-width: 14.28%; + } + + .gallery-columns-8 & { + max-width: 12.5%; + } + + .gallery-columns-9 & { + max-width: 11.11%; + } } -/* Make sure embeds and iframes fit their containers */ -embed, -iframe, -object { - max-width: 100%; + +.gallery-caption { } diff --git a/sass/partials/_navigation.scss b/sass/partials/_navigation.scss index 2c4e89a4b..5606c0a08 100644 --- a/sass/partials/_navigation.scss +++ b/sass/partials/_navigation.scss @@ -1,78 +1,105 @@ /*-------------------------------------------------------------- 5.0 Navigation --------------------------------------------------------------*/ + /*-------------------------------------------------------------- 5.1 Links --------------------------------------------------------------*/ + a { color: $color-link; -} -a:visited { - color: $color-link-visited; -} -a:hover, -a:focus, -a:active { - color: $color-link-hover; + + &:visited { + color: $color-link-visited; + } + + &:hover, + &:focus, + &:active { + color: $color-link-hover; + } } /*-------------------------------------------------------------- 5.2 Menus --------------------------------------------------------------*/ + .main-navigation { clear: both; display: block; float: left; width: 100%; + + ul { + list-style: none; + margin: 0; + padding-left: 0; + + li { + + &:hover > ul { + display: block; + } + } + + ul { + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); + display: none; + float: left; + left: 0; + position: absolute; + top: 1.5em; + z-index: 99999; + + & :hover > a { + } + + li { + } + + a { + width: 200px; + + &:hover { + } + } + + ul { + left: 100%; + top: 0; + } + } + } + + li { + float: left; + position: relative; + + &:hover > a { + } + + &:hover > ul { + display: block; + } + } + + a { + display: block; + text-decoration: none; + } + + .current_page_item a, + .current-menu-item a { + } } -.main-navigation ul { - list-style: none; - margin: 0; - padding-left: 0; -} -.main-navigation li { - float: left; - position: relative; -} -.main-navigation a { - display: block; - text-decoration: none; -} -.main-navigation ul ul { - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); - display: none; - float: left; - left: 0; - position: absolute; - top: 1.5em; - z-index: 99999; -} -.main-navigation ul ul ul { - left: 100%; - top: 0; -} -.main-navigation ul ul a { - width: 200px; -} -.main-navigation ul ul li { -} -.main-navigation li:hover > a { -} -.main-navigation ul ul :hover > a { -} -.main-navigation ul ul a:hover { -} -.main-navigation ul li:hover > ul { - display: block; -} -.main-navigation .current_page_item a, -.main-navigation .current-menu-item a { -} + /* Small menu */ + .menu-toggle { cursor: pointer; display: none; } + @media screen and (max-width: 600px) { .menu-toggle, .main-navigation.toggled .nav-menu { @@ -83,22 +110,24 @@ a:active { display: none; } } -.site-main .comment-navigation, -.site-main .paging-navigation, -.site-main .post-navigation { - margin: 0 0 1.5em; - overflow: hidden; -} -.comment-navigation .nav-previous, -.paging-navigation .nav-previous, -.post-navigation .nav-previous { - float: left; - width: 50%; -} -.comment-navigation .nav-next, -.paging-navigation .nav-next, -.post-navigation .nav-next { - float: right; - text-align: right; - width: 50%; + +.comment-navigation, +.paging-navigation, +.post-navigation { + + .site-main & { + margin: 0 0 1.5em; + overflow: hidden; + } + + .nav-previous { + float: left; + width: 50%; + } + + .nav-next { + float: right; + text-align: right; + width: 50%; + } } diff --git a/sass/partials/_reset.scss b/sass/partials/_reset.scss index b7f673822..650f06b68 100644 --- a/sass/partials/_reset.scss +++ b/sass/partials/_reset.scss @@ -1,6 +1,7 @@ /*-------------------------------------------------------------- 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, @@ -19,12 +20,14 @@ table, caption, tbody, tfoot, thead, tr, th, td { padding: 0; vertical-align: baseline; } + html { font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */ overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */ -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ } + *, *:before, *:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ @@ -32,9 +35,11 @@ html { -moz-box-sizing: border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */ box-sizing: border-box; } + body { background: $color-site-bg; } + article, aside, details, @@ -47,31 +52,39 @@ nav, section { display: block; } + ol, ul { list-style: none; } + table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; } + caption, th, td { font-weight: normal; text-align: left; } + blockquote:before, blockquote:after, q:before, q:after { content: ""; } + blockquote, q { quotes: "" ""; } + a:focus { outline: thin dotted; } + a:hover, a:active { outline: 0; } + a img { border: 0; } diff --git a/sass/partials/_typography.scss b/sass/partials/_typography.scss index 7b5640f90..32c0d01bd 100644 --- a/sass/partials/_typography.scss +++ b/sass/partials/_typography.scss @@ -1,6 +1,7 @@ /*-------------------------------------------------------------- 2.0 Typography --------------------------------------------------------------*/ + body, button, input, @@ -11,24 +12,40 @@ textarea { @include rem(font-size, 16px); line-height: 1.5; } -h1, h2, h3, h4, h5, h6 { + +h1, +h2, +h3, +h4, +h5, +h6 { clear: both; } + p { margin-bottom: 1.5em; } -b, strong { + +b, +strong { font-weight: bold; } -dfn, cite, em, i { + +dfn, +cite, +em, +i { font-style: italic; } + blockquote { margin: 0 1.5em; } + address { margin: 0 0 1.5em; } + pre { background: #eee; font-family: $font-mono; @@ -39,17 +56,26 @@ pre { overflow: auto; padding: 1.6em; } -code, kbd, tt, var { + +code, +kbd, +tt, +var { font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } -abbr, acronym { + +abbr, +acronym { border-bottom: 1px dotted #666; cursor: help; } -mark, ins { + +mark, +ins { background: #fff9c0; text-decoration: none; } + sup, sub { font-size: 75%; @@ -58,15 +84,19 @@ sub { position: relative; vertical-align: baseline; } + sup { bottom: 1ex; } + sub { top: .5ex; } + small { font-size: 75%; } + big { font-size: 125%; } diff --git a/sass/partials/_widgets.scss b/sass/partials/_widgets.scss index 9b22bea7d..48294ab2f 100644 --- a/sass/partials/_widgets.scss +++ b/sass/partials/_widgets.scss @@ -1,16 +1,18 @@ /*-------------------------------------------------------------- 9.0 Widgets --------------------------------------------------------------*/ + .widget { margin: 0 0 1.5em; -} -/* Make sure select elements fit in widgets */ -.widget select { - max-width: 100%; + /* Make sure select elements fit in widgets */ + select { + max-width: 100%; + } } /* Search widget */ + .widget_search .search-submit { display: none; } diff --git a/sass/style.scss b/sass/style.scss index 5f473b141..e47a4229a 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -28,7 +28,7 @@ and Blueprint http://www.blueprintcss.org/ 1.0 - Reset 2.0 - Typography 3.0 - Elements -4.0 - Inputs and buttons +4.0 - Forms 5.0 - Navigation 5.1 - Links 5.2 - Menus @@ -42,13 +42,17 @@ and Blueprint http://www.blueprintcss.org/ 10.3 - Comments 11.0 - Infinite scroll 12.0 - Media + 12.1 - Captions + 12.2 - Galleries + --------------------------------------------------------------*/ @import "partials/variables"; @import "partials/mixins"; + @import "partials/reset"; @import "partials/typography"; @import "partials/elements"; -@import "partials/inputs-buttons"; +@import "partials/forms"; @import "partials/navigation"; @import "partials/accessibility"; @import "partials/alignments"; diff --git a/style.css b/style.css index 8321ccfc4..b9bfe539c 100644 --- a/style.css +++ b/style.css @@ -27,7 +27,7 @@ and Blueprint http://www.blueprintcss.org/ 1.0 - Reset 2.0 - Typography 3.0 - Elements -4.0 - Inputs and buttons +4.0 - Forms 5.0 - Navigation 5.1 - Links 5.2 - Menus @@ -41,6 +41,9 @@ and Blueprint http://www.blueprintcss.org/ 10.3 - Comments 11.0 - Infinite scroll 12.0 - Media + 12.1 - Captions + 12.2 - Galleries + --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 - Reset @@ -61,8 +64,7 @@ table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; outline: 0; padding: 0; - vertical-align: baseline; -} + vertical-align: baseline; } html { font-size: 62.5%; @@ -72,8 +74,7 @@ html { -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ -ms-text-size-adjust: 100%; - /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ -} + /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ } *, *:before, @@ -83,12 +84,10 @@ html { /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */ -moz-box-sizing: border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */ - box-sizing: border-box; -} + box-sizing: border-box; } body { - background: white; -} + background: white; } article, aside, @@ -100,45 +99,36 @@ header, main, nav, section { - display: block; -} + display: block; } ol, ul { - list-style: none; -} + list-style: none; } table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; - border-spacing: 0; -} + border-spacing: 0; } caption, th, td { font-weight: normal; - text-align: left; -} + text-align: left; } blockquote:before, blockquote:after, q:before, q:after { - content: ""; -} + content: ""; } blockquote, q { - quotes: "" ""; -} + quotes: "" ""; } a:focus { - outline: thin dotted; -} + outline: thin dotted; } a:hover, a:active { - outline: 0; -} + outline: 0; } a img { - border: 0; -} + border: 0; } /*-------------------------------------------------------------- 2.0 Typography @@ -152,32 +142,34 @@ textarea { font-family: sans-serif; font-size: 16px; font-size: 1.6rem; - line-height: 1.5; -} + line-height: 1.5; } -h1, h2, h3, h4, h5, h6 { - clear: both; -} +h1, +h2, +h3, +h4, +h5, +h6 { + clear: both; } p { - margin-bottom: 1.5em; -} + margin-bottom: 1.5em; } -b, strong { - font-weight: bold; -} +b, +strong { + font-weight: bold; } -dfn, cite, em, i { - font-style: italic; -} +dfn, +cite, +em, +i { + font-style: italic; } blockquote { - margin: 0 1.5em; -} + margin: 0 1.5em; } address { - margin: 0 0 1.5em; -} + margin: 0 0 1.5em; } pre { background: #eee; @@ -188,22 +180,23 @@ pre { margin-bottom: 1.6em; max-width: 100%; overflow: auto; - padding: 1.6em; -} + padding: 1.6em; } -code, kbd, tt, var { - font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; -} +code, +kbd, +tt, +var { + font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } -abbr, acronym { +abbr, +acronym { border-bottom: 1px dotted #666; - cursor: help; -} + cursor: help; } -mark, ins { +mark, +ins { background: #fff9c0; - text-decoration: none; -} + text-decoration: none; } sup, sub { @@ -211,24 +204,19 @@ sub { height: 0; line-height: 0; position: relative; - vertical-align: baseline; -} + vertical-align: baseline; } sup { - bottom: 1ex; -} + bottom: 1ex; } sub { - top: .5ex; -} + top: .5ex; } small { - font-size: 75%; -} + font-size: 75%; } big { - font-size: 125%; -} + font-size: 125%; } /*-------------------------------------------------------------- 3.0 Elements @@ -237,50 +225,47 @@ hr { background-color: #ccc; border: 0; height: 1px; - margin-bottom: 1.5em; -} + margin-bottom: 1.5em; } -ul, ol { - margin: 0 0 1.5em 3em; -} +ul, +ol { + margin: 0 0 1.5em 3em; } ul { - list-style: disc; -} + list-style: disc; } ol { - list-style: decimal; -} + list-style: decimal; } li > ul, li > ol { margin-bottom: 0; - margin-left: 1.5em; -} + margin-left: 1.5em; } dt { - font-weight: bold; -} + font-weight: bold; } dd { - margin: 0 1.5em 1.5em; -} + margin: 0 1.5em 1.5em; } + +img { + height: auto; + /* Make sure images are scaled correctly. */ + max-width: 100%; + /* Adhere to container width. */ } figure { - margin: 0; -} + margin: 0; } table { margin: 0 0 1.5em; - width: 100%; -} + width: 100%; } th { - font-weight: bold; -} + font-weight: bold; } /*-------------------------------------------------------------- -4.0 Inputs and buttons +4.0 Forms --------------------------------------------------------------*/ button, input, @@ -293,8 +278,7 @@ textarea { vertical-align: baseline; /* Improves appearance and consistency in all browsers */ *vertical-align: middle; - /* Improves appearance and consistency in all browsers */ -} + /* Improves appearance and consistency in all browsers */ } button, input[type="button"], @@ -314,34 +298,27 @@ input[type="submit"] { font-size: 1.2rem; line-height: 1; padding: .6em 1em .4em; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -} - -button:hover, -input[type="button"]:hover, -input[type="reset"]:hover, -input[type="submit"]:hover { - border-color: #ccc #bbb #aaa #bbb; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02); -} - -button:focus, -input[type="button"]:focus, -input[type="reset"]:focus, -input[type="submit"]:focus, -button:active, -input[type="button"]:active, -input[type="reset"]:active, -input[type="submit"]:active { - border-color: #aaa #bbb #bbb #bbb; - box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); -} + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } + button:hover, + input[type="button"]:hover, + input[type="reset"]:hover, + input[type="submit"]:hover { + border-color: #ccc #bbb #aaa #bbb; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02); } + button:focus, button:active, + input[type="button"]:focus, + input[type="button"]:active, + input[type="reset"]:focus, + input[type="reset"]:active, + input[type="submit"]:focus, + input[type="submit"]:active { + border-color: #aaa #bbb #bbb #bbb; + box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); } input[type="checkbox"], input[type="radio"] { padding: 0; - /* Addresses excess padding in IE8/9 */ -} + /* Addresses excess padding in IE8/9 */ } input[type="search"] { -webkit-appearance: textfield; @@ -349,20 +326,16 @@ input[type="search"] { -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ -moz-box-sizing: content-box; - box-sizing: content-box; -} - -input[type="search"]::-webkit-search-decoration { - /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ - -webkit-appearance: none; -} + box-sizing: content-box; } + input[type="search"]::-webkit-search-decoration { + /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ + -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ border: 0; - padding: 0; -} + padding: 0; } input[type="text"], input[type="email"], @@ -372,25 +345,21 @@ input[type="search"], textarea { color: #666; border: 1px solid #ccc; - border-radius: 3px; -} - -input[type="text"]:focus, -input[type="email"]:focus, -input[type="url"]:focus, -input[type="password"]:focus, -input[type="search"]:focus, -textarea:focus { - color: #111; -} + border-radius: 3px; } + input[type="text"]:focus, + input[type="email"]:focus, + input[type="url"]:focus, + input[type="password"]:focus, + input[type="search"]:focus, + textarea:focus { + color: #111; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] { - padding: 3px; -} + padding: 3px; } textarea { overflow: auto; @@ -398,8 +367,7 @@ textarea { padding-left: 3px; vertical-align: top; /* Improves readability and alignment in all browsers */ - width: 98%; -} + width: 98%; } /*-------------------------------------------------------------- 5.0 Navigation @@ -408,18 +376,11 @@ textarea { 5.1 Links --------------------------------------------------------------*/ a { - color: royalblue; -} - -a:visited { - color: purple; -} - -a:hover, -a:focus, -a:active { - color: blue; -} + color: royalblue; } + a:visited { + color: purple; } + a:hover, a:focus, a:active { + color: blue; } /*-------------------------------------------------------------- 5.2 Menus @@ -428,85 +389,63 @@ a:active { clear: both; display: block; float: left; - width: 100%; -} - -.main-navigation ul { - list-style: none; - margin: 0; - padding-left: 0; -} - -.main-navigation li { - float: left; - position: relative; -} - -.main-navigation a { - display: block; - text-decoration: none; -} - -.main-navigation ul ul { - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); - display: none; - float: left; - left: 0; - position: absolute; - top: 1.5em; - z-index: 99999; -} - -.main-navigation ul ul ul { - left: 100%; - top: 0; -} - -.main-navigation ul ul a { - width: 200px; -} - -.main-navigation ul li:hover > ul { - display: block; -} + width: 100%; } + .main-navigation ul { + list-style: none; + margin: 0; + padding-left: 0; } + .main-navigation ul li:hover > ul { + display: block; } + .main-navigation ul ul { + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); + display: none; + float: left; + left: 0; + position: absolute; + top: 1.5em; + z-index: 99999; } + .main-navigation ul ul a { + width: 200px; } + .main-navigation ul ul ul { + left: 100%; + top: 0; } + .main-navigation li { + float: left; + position: relative; } + .main-navigation li:hover > ul { + display: block; } + .main-navigation a { + display: block; + text-decoration: none; } /* Small menu */ .menu-toggle { cursor: pointer; - display: none; -} + display: none; } @media screen and (max-width: 600px) { .menu-toggle, .main-navigation.toggled .nav-menu { - display: block; - } + display: block; } .main-navigation ul { - display: none; - } -} -.site-main .comment-navigation, -.site-main .paging-navigation, -.site-main .post-navigation { + display: none; } } +.site-main .comment-navigation, .site-main +.paging-navigation, .site-main +.post-navigation { margin: 0 0 1.5em; - overflow: hidden; -} - + overflow: hidden; } .comment-navigation .nav-previous, .paging-navigation .nav-previous, .post-navigation .nav-previous { float: left; - width: 50%; -} - + width: 50%; } .comment-navigation .nav-next, .paging-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; - width: 50%; -} + width: 50%; } /*-------------------------------------------------------------- 6.0 Accessibility @@ -514,31 +453,26 @@ a:active { /* Text meant only for screen readers */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); - position: absolute !important; -} - -.screen-reader-text:hover, -.screen-reader-text:active, -.screen-reader-text:focus { - background-color: #f1f1f1; - border-radius: 3px; - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); - clip: auto !important; - color: #21759b; - display: block; - font-size: 14px; - font-size: 1.4rem; - font-weight: bold; - height: auto; - left: 5px; - line-height: normal; - padding: 15px 23px 14px; - text-decoration: none; - top: 5px; - width: auto; - z-index: 100000; - /* Above WP toolbar */ -} + position: absolute !important; } + .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { + background-color: #f1f1f1; + border-radius: 3px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + clip: auto !important; + color: #21759b; + display: block; + font-size: 14px; + font-size: 1.4rem; + font-weight: bold; + height: auto; + left: 5px; + line-height: normal; + padding: 15px 23px 14px; + text-decoration: none; + top: 5px; + width: auto; + z-index: 100000; + /* Above WP toolbar */ } /*-------------------------------------------------------------- 7.0 Alignments @@ -546,20 +480,17 @@ a:active { .alignleft { display: inline; float: left; - margin-right: 1.5em; -} + margin-right: 1.5em; } .alignright { display: inline; float: right; - margin-left: 1.5em; -} + margin-left: 1.5em; } .aligncenter { clear: both; display: block; - margin: 0 auto; -} + margin: 0 auto; } /*-------------------------------------------------------------- 8.0 Clearings @@ -577,8 +508,7 @@ a:active { .site-footer:before, .site-footer:after { content: ''; - display: table; -} + display: table; } .clear:after, .entry-content:after, @@ -586,25 +516,20 @@ a:active { .site-header:after, .site-content:after, .site-footer:after { - clear: both; -} + clear: both; } /*-------------------------------------------------------------- 9.0 Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.5em; -} - -/* Make sure select elements fit in widgets */ -.widget select { - max-width: 100%; -} + /* Make sure select elements fit in widgets */ } + .widget select { + max-width: 100%; } /* Search widget */ .widget_search .search-submit { - display: none; -} + display: none; } /*-------------------------------------------------------------- 10.0 Content @@ -613,44 +538,37 @@ a:active { 10.1 Posts and pages --------------------------------------------------------------*/ .hentry { - margin: 0 0 1.5em; -} + margin: 0 0 1.5em; } .byline, .updated { - display: none; -} + display: none; } .single .byline, .group-blog .byline { - display: inline; -} + display: inline; } .page-content, .entry-content, .entry-summary { - margin: 1.5em 0 0; -} + margin: 1.5em 0 0; } .page-links { clear: both; - margin: 0 0 1.5em; -} + margin: 0 0 1.5em; } /*-------------------------------------------------------------- 10.2 Asides --------------------------------------------------------------*/ .blog .format-aside .entry-title, .archive .format-aside .entry-title { - display: none; -} + display: none; } /*-------------------------------------------------------------- 10.3 Comments --------------------------------------------------------------*/ .comment-content a { - word-wrap: break-word; -} + word-wrap: break-word; } /*-------------------------------------------------------------- 11.0 Infinite scroll @@ -659,13 +577,11 @@ a:active { .infinite-scroll .paging-navigation, .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ - display: none; -} + 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; -} + display: block; } /*-------------------------------------------------------------- 12.0 Media @@ -676,46 +592,53 @@ a:active { border: none; margin-bottom: 0; margin-top: 0; - padding: 0; -} + padding: 0; } + +/* Make sure embeds and iframes fit their containers */ +embed, +iframe, +object { + max-width: 100%; } +/*-------------------------------------------------------------- +12.1 Captions +--------------------------------------------------------------*/ .wp-caption { - border: 1px solid #ccc; margin-bottom: 1.5em; - max-width: 100%; -} - -.wp-caption img[class*="wp-image-"] { - display: block; - margin: 1.2% auto 0; - max-width: 98%; -} + max-width: 100%; } + .wp-caption img[class*="wp-image-"] { + display: block; + margin: 0 auto; } + .wp-caption .wp-caption-text { + margin: 0.8075em 0; } .wp-caption-text { - text-align: center; -} - -.wp-caption .wp-caption-text { - margin: 0.8075em 0; -} - -.site-main .gallery { - margin-bottom: 1.5em; -} - -.site-main .gallery a img { - border: none; - height: auto; - max-width: 90%; -} + text-align: center; } -.site-main .gallery dd { - margin: 0; -} +/*-------------------------------------------------------------- +12.2 Galleries +--------------------------------------------------------------*/ +.gallery { + margin-bottom: 1.5em; } -/* Make sure embeds and iframes fit their containers */ -embed, -iframe, -object { - max-width: 100%; -} +.gallery-item { + display: inline-block; + text-align: center; + vertical-align: top; + width: 100%; } + .gallery-columns-2 .gallery-item { + max-width: 50%; } + .gallery-columns-3 .gallery-item { + max-width: 33.33%; } + .gallery-columns-4 .gallery-item { + max-width: 25%; } + .gallery-columns-5 .gallery-item { + max-width: 20%; } + .gallery-columns-6 .gallery-item { + max-width: 16.66%; } + .gallery-columns-7 .gallery-item { + max-width: 14.28%; } + .gallery-columns-8 .gallery-item { + max-width: 12.5%; } + .gallery-columns-9 .gallery-item { + max-width: 11.11%; }