From 828e35cdcc3e137c616744006e5c9b7230453c6e Mon Sep 17 00:00:00 2001 From: Carrie Dils Date: Thu, 30 Oct 2014 15:38:51 -0500 Subject: [PATCH] Added RTL support References #4 Added CSSJanus and GruntCSSJanus to auto-update style-rtl.css any time style.css is compiled. --- assets/scss/base/_base.scss | 2 +- gruntfile.js | 23 +- style-rtl.css | 1880 +++++++++++++++++++++++++++++++++++ style.css | 5 +- 4 files changed, 1900 insertions(+), 10 deletions(-) create mode 100644 style-rtl.css diff --git a/assets/scss/base/_base.scss b/assets/scss/base/_base.scss index 23022c3..def0df2 100644 --- a/assets/scss/base/_base.scss +++ b/assets/scss/base/_base.scss @@ -21,4 +21,4 @@ @import 'tables'; @import 'lists'; @import 'flashes'; -@import 'buttons'; +@import 'buttons'; \ No newline at end of file diff --git a/gruntfile.js b/gruntfile.js index 3129b23..d75afa4 100644 --- a/gruntfile.js +++ b/gruntfile.js @@ -49,9 +49,20 @@ module.exports = function(grunt) { } }, /** - * Grunt-CSSJanus + * CSSJanus */ - grunt-cssjanus: { + cssjanus: { + theme: { + options: { + swapLtrRtlInUrl: false + }, + files: [ + { + src: 'style.css', + dest: 'style-rtl.css' + } + ] + } }, /** * Watch @@ -63,10 +74,10 @@ module.exports = function(grunt) { 'assets/scss/**/*.scss', 'assets/scss/**/**/*.scss' ], - tasks: ['sass'] - } - grunt-cssjanus: { - tasks: ['grunt-cssjanus'] + tasks: [ + 'sass', + 'cssjanus' + ] } } }); diff --git a/style-rtl.css b/style-rtl.css new file mode 100644 index 0000000..a7ee827 --- /dev/null +++ b/style-rtl.css @@ -0,0 +1,1880 @@ +/* # Genesis Framework +Theme Name: In the Beginning +Theme URI: https://github.com/cdils/in-the-beginning +Description: This is a Sass starter theme created for the Genesis Framework. +Author: Carrie Dls +Author URI: http://www.carriedils.com/ +Template: genesis +Template Version: 2.1.0 +Tags: black, orange, white, one-column, two-columns, three-columns, left-sidebar, right-sidebar, responsive-layout, custom-menu, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready +License: GPL-2.0+ +License URI: http://www.gnu.org/licenses/gpl-2.0.html +Version: 0.2.0 +*/ +/* # Table of Contents +- HTML5 Reset + - Baseline Normalize + - Box Sizing + - Float Clearing +- Defaults + - Typographical Elements + - Headings + - Objects + - Gallery + - Forms + - Tables +- Structure and Layout + - Site Containers + - Column Widths and Positions + - Column Classes +- Common Classes + - Avatar + - Genesis + - Search Form + - Titles + - WordPress +- Widgets + - Featured Content +- Plugins + - Genesis eNews Extended + - Jetpack +- Site Header + - Title Area + - Widget Area +- Site Navigation + - Header Navigation + - Primary Navigation + - Secondary Navigation +- Content Area + - Entries + - Entry Meta + - Pagination + - Comments +- Sidebars +- Footer Widgets +- Site Footer +- Media Queries + - Retina Display + - Min-width: 1024px + - Min-width: 1140px +*/ +/* Import Bourbon, Neat, and Bitters */ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +button, +input[type="submit"] { + -webkit-font-smoothing: antialiased; + background-color: #477dca; + border-radius: 0.1875em; + color: white; + display: inline-block; + font-size: 1em; + font-weight: bold; + line-height: 1; + padding: .75em 1em; + text-decoration: none; +} +button:hover, +input[type="submit"]:hover { + background-color: #2c5999; + color: white; +} + +body { + -webkit-font-smoothing: antialiased; + background-color: white; + color: #333333; + font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-size: 1em; + line-height: 1.5; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + line-height: 1.25em; + margin: 0; + text-rendering: optimizeLegibility; +} + +h1 { + font-size: 2.25em; +} + +h2 { + font-size: 2em; +} + +h3 { + font-size: 1.75em; +} + +h4 { + font-size: 1.5em; +} + +h5 { + font-size: 1.25em; +} + +h6 { + font-size: 1em; +} + +p { + margin: 0 0 0.75em; +} + +a { + -webkit-transition: color 0.1s linear; + -moz-transition: color 0.1s linear; + transition: color 0.1s linear; + color: #477dca; + text-decoration: none; +} +a:hover { + color: #2c5999; +} +a:active, a:focus { + color: #2c5999; + outline: none; +} + +hr { + border-bottom: 1px solid #dddddd; + border-right: none; + border-left: none; + border-top: none; + margin: 1.5em 0; +} + +img { + margin: 0; + max-width: 100%; +} + +blockquote { + border-right: 2px solid #dddddd; + color: #595959; + margin: 1.5em 0; + padding-right: 0.75em; +} + +cite { + color: gray; + font-style: italic; +} +cite:before { + content: '\2014 \00A0'; +} + +fieldset { + background: #f7f7f7; + border: 1px solid #dddddd; + margin: 0 0 0.75em 0; + padding: 1.5em; +} + +input, +label, +select { + display: block; + font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-size: 1em; +} + +label { + font-weight: bold; + margin-bottom: 0.375em; +} +label.required:after { + content: "*"; +} +label abbr { + display: none; +} + +textarea, +input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], +select[multiple=multiple] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: border-color; + -moz-transition: border-color; + transition: border-color; + background-color: white; + border-radius: 0.1875em; + border: 1px solid #dddddd; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); + font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-size: 1em; + margin-bottom: 0.75em; + padding: 0.5em 0.5em; + width: 100%; +} +textarea:hover, +input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, +select[multiple=multiple]:hover { + border-color: #c4c4c4; +} +textarea:focus, +input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, +select[multiple=multiple]:focus { + border-color: #477dca; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(55, 112, 192, 0.7); + outline: none; +} + +textarea { + resize: vertical; +} + +input[type="search"] { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + appearance: none; +} + +input[type="checkbox"], input[type="radio"] { + display: inline; + margin-left: 0.375em; +} + +input[type="file"] { + margin-bottom: 0.75em; + padding-bottom: 0.5em; + width: 100%; +} + +select { + width: auto; + max-width: 100%; + margin-bottom: 1.5em; +} + +table { + border-collapse: collapse; + margin: 0.75em 0; + table-layout: fixed; + width: 100%; +} + +th { + border-bottom: 1px solid #b7b7b7; + font-weight: bold; + padding: 0.75em 0; + text-align: right; +} + +td { + border-bottom: 1px solid #dddddd; + padding: 0.75em 0; +} + +tr, td, th { + vertical-align: middle; +} + +ul, ol { + margin: 0; + padding: 0; + list-style-type: none; +} +dl { + margin-bottom: 0.75em; +} +dl dt { + font-weight: bold; + margin-top: 0.75em; +} +dl dd { + margin: 0; +} + +button, +input[type="submit"] { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + appearance: none; + border: none; + cursor: pointer; + user-select: none; + vertical-align: middle; + white-space: nowrap; +} + +/* Import Partials */ +/* # HTML5 Reset +---------------------------------------------------------------------------------------------------- */ +/* ## Baseline Normalize +--------------------------------------------- */ +/* normalize.css v3.0.1 | MIT License | git.io/normalize */ +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; +} + +article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { + display: block; +} + +audio, canvas, progress, video { + display: inline-block; + vertical-align: baseline; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +[hidden], template { + display: none; +} + +a { + background: 0 0; +} + +a:active, a:hover { + outline: 0; +} + +abbr[title] { + border-bottom: 1px dotted; +} + +b, strong { + font-weight: 700; +} + +dfn { + font-style: italic; +} + +h1 { + font-size: 2em; + margin: .67em 0; +} + +mark { + background: #ff0; + color: #333; +} + +small { + font-size: 80%; +} + +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -.5em; +} + +sub { + bottom: -.25em; +} + +img { + border: 0; +} + +svg:not(:root) { + overflow: hidden; +} + +figure { + margin: 1em 40px; +} + +hr { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + height: 0; +} + +pre { + overflow: auto; +} + +code, kbd, pre, samp { + font-family: monospace,monospace; + font-size: 1em; +} + +button, input, optgroup, select, textarea { + color: inherit; + font: inherit; + margin: 0; +} + +button { + overflow: visible; +} + +button, select { + text-transform: none; +} + +button, html input[type=button], input[type=reset], input[type=submit] { + -webkit-appearance: button; + cursor: pointer; +} + +button[disabled], html input[disabled] { + cursor: default; +} + +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; +} + +input { + line-height: normal; +} + +input[type=checkbox], input[type=radio] { + box-sizing: border-box; + padding: 0; +} + +input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { + height: auto; +} + +input[type=search] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} + +input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { + -webkit-appearance: none; +} + +fieldset { + border: 1px solid silver; + margin: 0 2px; + padding: .35em .625em .75em; +} + +legend { + border: 0; + padding: 0; +} + +textarea { + overflow: auto; +} + +optgroup { + font-weight: 700; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, th { + padding: 0; +} + +/* ## Box Sizing +--------------------------------------------- */ +*, +input[type="search"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* ## Float Clearing +--------------------------------------------- */ +.author-box:before, +.clearfix:before, +.entry:before, +.entry-content:before, +.footer-widgets:before, +.nav-primary:before, +.nav-secondary:before, +.pagination:before, +.site-container:before, +.site-footer:before, +.site-header:before, +.site-inner:before, +.wrap:before { + content: " "; + display: table; +} + +.author-box:after, +.clearfix:after, +.entry:after, +.entry-content:after, +.footer-widgets:after, +.nav-primary:after, +.nav-secondary:after, +.pagination:after, +.site-container:after, +.site-footer:after, +.site-header:after, +.site-inner:after, +.wrap:after { + clear: both; + content: " "; + display: table; +} + +/* # Defaults +---------------------------------------------------------------------------------------------------- */ +x +body { + background-color: white; + color: #333333; + font-family: Lato, sans-serif; + font-size: 18px; + font-weight: 300; + line-height: 1.625; + margin: 0; +} + +a, +button, +input:focus, +input[type="button"], +input[type="reset"], +input[type="submit"], +textarea:focus, +.button, +.gallery img { + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + transition-property: transform; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; + -webkit-transition-timing-function: ease-in-out; + -moz-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + -webkit-transition-delay: 0s; + -moz-transition-delay: 0s; + transition-delay: 0s; +} + +::-moz-selection, +::selection { + background-color: #333333; + color: #dddddd; +} + +a { + color: #477dca; + text-decoration: none; +} + +a:hover { + color: #2c5999; +} + +p { + margin: 0 0 28px; + padding: 0; +} + +ol, +ul { + margin: 0; + padding: 0; +} + +li { + list-style-type: none; +} + +b, +strong { + font-weight: 700; +} + +blockquote, +cite, +em, +i { + font-style: italic; +} + +blockquote { + margin: 40px; +} + +blockquote::before { + content: "\201C"; + display: block; + font-size: 30px; + height: 0; + right: -20px; + position: relative; + top: -10px; +} + +/* ## Headings +--------------------------------------------- */ +h1, +h2, +h3, +h4, +h5, +h6 { + color: #333333; + font-family: Georgia, Times, "Times New Roman", serif; + font-weight: 400; + line-height: 1.2; + margin: 0 0 10px; +} + +h1 { + font-size: 36px; +} + +h2 { + font-size: 30px; +} + +h3 { + font-size: 24px; +} + +h4 { + font-size: 20px; +} + +h5 { + font-size: 18px; +} + +h6 { + font-size: 16px; +} + +/* ## Objects +--------------------------------------------- */ +embed, +iframe, +img, +object, +video, +.wp-caption { + max-width: 100%; +} + +img { + height: auto; +} + +.featured-content img, +.gallery img { + width: auto; +} + +/* ## Gallery +--------------------------------------------- */ +.gallery { + overflow: hidden; +} + +.gallery-item { + float: right; + margin: 0 0 28px; + text-align: center; +} + +.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 { + width: 20%; +} + +.gallery-columns-6 .gallery-item { + width: 16.6666%; +} + +.gallery-columns-7 .gallery-item { + width: 14.2857%; +} + +.gallery-columns-8 .gallery-item { + width: 12.5%; +} + +.gallery-columns-9 .gallery-item { + width: 11.1111%; +} + +.gallery img { + border: 1px solid #dddddd; + height: auto; + padding: 4px; +} + +.gallery img:hover { + border: 1px solid #dddddd; +} + +/* ## Forms +--------------------------------------------- */ +input, +select, +textarea { + background-color: #dddddd; + border: 1px solid #dddddd; + color: #333333; + font-size: 18px; + font-weight: 300; + padding: 16px; + width: 100%; +} + +input:focus, +textarea:focus { + border: 1px solid #dddddd; + outline: none; +} + +input[type="checkbox"], +input[type="image"], +input[type="radio"] { + width: auto; +} + +::-moz-placeholder { + color: #333333; + font-weight: 300; + opacity: 1; +} + +::-webkit-input-placeholder { + color: #333333; + font-weight: 300; +} + +button, +input[type="button"], +input[type="reset"], +input[type="submit"], +.button { + background-color: #333333; + border: none; + color: #dddddd; + cursor: pointer; + font-size: 16px; + font-weight: 300; + padding: 16px 24px; + text-transform: uppercase; + width: auto; +} + +.footer-widgets button, +.footer-widgets input[type="button"], +.footer-widgets input[type="reset"], +.footer-widgets input[type="submit"], +.footer-widgets .button { + background-color: #477dca; + color: #dddddd; +} + +button:hover, +input:hover[type="button"], +input:hover[type="reset"], +input:hover[type="submit"], +.button:hover { + background-color: #333333; + color: #dddddd; +} + +.entry-content .button:hover { + color: #dddddd; +} + +.footer-widgets button:hover, +.footer-widgets input:hover[type="button"], +.footer-widgets input:hover[type="reset"], +.footer-widgets input:hover[type="submit"], +.footer-widgets .button:hover { + background-color: #dddddd; + color: #333333; +} + +.button { + display: inline-block; +} + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button { + display: none; +} + +/* ## Tables +--------------------------------------------- */ +table { + border-collapse: collapse; + border-spacing: 0; + line-height: 2; + margin-bottom: 40px; + width: 100%; +} + +tbody { + border-bottom: 1px solid #dddddd; +} + +td, +th { + text-align: right; +} + +td { + border-top: 1px solid #dddddd; + padding: 6px 0; +} + +th { + font-weight: 400; +} + +/* # Structure and Layout +---------------------------------------------------------------------------------------------------- */ +/* ## Site Containers +--------------------------------------------- */ +.site-inner, +.wrap { + margin: 0 auto; + max-width: 100%; +} + +.site-inner { + clear: both; + padding-top: 40px; +} + +/* ## Column Widths and Positions +--------------------------------------------- */ +/* ### Wrapping div for .content and .sidebar-primary */ +.content-sidebar-wrap { + width: 100%; +} + +.content-sidebar-sidebar .content-sidebar-wrap { + float: right; +} + +.sidebar-content-sidebar .content-sidebar-wrap, +.sidebar-sidebar-content .content-sidebar-wrap { + float: left; +} + +/* ### Content */ +.content { + float: left; + width: 100%; +} + +.content-sidebar .content, +.content-sidebar-sidebar .content, +.sidebar-content-sidebar .content { + float: right; +} + +.content { + width: 100%; +} + +/* ### Primary Sidebar */ +.sidebar-primary { + float: left; + width: 100%; +} + +.sidebar-content .sidebar-primary, +.sidebar-sidebar-content .sidebar-primary { + float: right; +} + +/* ### Secondary Sidebar */ +.sidebar-secondary { + float: right; + width: 100%; +} + +.content-sidebar-sidebar .sidebar-secondary { + float: left; +} + +/* ## Column Classes +--------------------------------------------- */ +/* Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css */ +.five-sixths, +.four-sixths, +.one-fourth, +.one-half, +.one-sixth, +.one-third, +.three-fourths, +.three-sixths, +.two-fourths, +.two-sixths, +.two-thirds { + float: right; + margin: 0; + width: 100%; +} + +/* # Common Classes +---------------------------------------------------------------------------------------------------- */ +/* ## Avatar +--------------------------------------------- */ +.avatar { + float: right; +} + +.alignleft .avatar, +.author-box .avatar { + margin-left: 24px; +} + +.alignright .avatar { + margin-right: 24px; +} + +.comment .avatar { + margin: 0 0 24px 16px; +} + +/* ## Genesis +--------------------------------------------- */ +.breadcrumb { + margin-bottom: 20px; +} + +.archive-description, +.author-box { + background-color: #dddddd; + font-size: 16px; + margin-bottom: 40px; + padding: 40px; +} + +.author-box-title { + font-size: 16px; + margin-bottom: 4px; +} + +.archive-description p:last-child, +.author-box p:last-child { + margin-bottom: 0; +} + +/* ## Search Form +--------------------------------------------- */ +.search-form { + overflow: hidden; +} + +.site-header .search-form { + margin: 0 auto; + width: 80%; +} + +.genesis-nav-menu .search input[type="submit"], +.widget_search input[type="submit"] { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + padding: 0; + position: absolute; + width: 1px; +} + +/* ## Titles +--------------------------------------------- */ +.archive-title { + font-size: 20px; +} + +.entry-title { + font-size: 36px; +} + +.entry-title a, +.sidebar .widget-title a { + color: #477dca; +} + +.entry-title a:hover { + color: #2c5999; +} + +.widget-title { + font-size: 18px; + margin-bottom: 20px; +} + +.footer-widgets .widget-title { + color: #dddddd; +} + +/* ## WordPress +--------------------------------------------- */ +a.aligncenter img { + display: block; + margin: 0 auto; +} + +a.alignnone { + display: inline-block; +} + +.alignleft { + float: right; + text-align: right; +} + +.alignright { + float: left; + text-align: left; +} + +a.alignleft, +a.alignnone, +a.alignright { + max-width: 100%; +} + +img.centered, +.aligncenter { + display: block; + margin: 0 auto 24px; +} + +img.alignnone, +.alignnone { + margin-bottom: 12px; +} + +a.alignleft, +img.alignleft, +.wp-caption.alignleft { + margin: 0 0 24px 24px; +} + +a.alignright, +img.alignright, +.wp-caption.alignright { + margin: 0 24px 24px 0; +} + +.wp-caption-text { + font-size: 14px; + font-weight: 700; + text-align: center; +} + +.entry-content p.wp-caption-text { + margin-bottom: 0; +} + +/* # Widgets +---------------------------------------------------------------------------------------------------- */ +.widget { + word-wrap: break-word; +} + +.widget ol > li { + list-style-position: inside; + list-style-type: decimal; + padding-right: 20px; + text-indent: -20px; +} + +.widget li li { + border: none; + margin: 0 30px 0 0; + padding: 0; +} + +.widget_calendar table { + width: 100%; +} + +.widget_calendar td, +.widget_calendar th { + text-align: center; +} + +/* ## Featured Content +--------------------------------------------- */ +.featured-content .entry { + border-bottom: 2px solid #dddddd; + margin-bottom: 20px; + padding: 0 0 24px; +} + +.footer-widgets .entry { + border-bottom: 1px dotted #333333; +} + +.featured-content .entry-title { + font-size: 20px; +} + +/* # Plugins +---------------------------------------------------------------------------------------------------- */ +/* ## Genesis eNews Extended +--------------------------------------------- */ +.enews-widget, +.enews-widget .widget-title { + color: #dddddd; +} + +.sidebar .widget.enews-widget { + background-color: #333333; +} + +.enews-widget input, +.enews-widget input:focus { + border: 1px solid #333333; +} + +.enews-widget input { + font-size: 16px; + margin-bottom: 16px; +} + +.enews-widget input[type="submit"] { + background-color: #477dca; + color: #dddddd; + margin: 0; + width: 100%; +} + +.enews-widget input:hover[type="submit"] { + background-color: #dddddd; + color: #333333; +} + +.enews form + p { + margin-top: 24px; +} + +/* ## Jetpack +--------------------------------------------- */ +#wpstats { + display: none; +} + +/* # Site Header +---------------------------------------------------------------------------------------------------- */ +.site-header { + background-color: white; + min-height: 160px; +} + +.site-header .wrap { + padding: 40px 0; +} + +/* ## Title Area +--------------------------------------------- */ +.title-area { + float: right; + padding: 10px 0; + text-align: center; + width: 100%; +} + +.site-title { + font-size: 32px; + font-weight: 400; + line-height: 1.2; +} + +.site-title a, +.site-title a:hover { + color: #333; +} + +.header-image .site-title > a { + background: url(images/logo.png) no-repeat right; + float: right; + min-height: 60px; + width: 100%; +} + +.site-description { + font-size: 16px; + font-weight: 300; + line-height: 1.5; +} + +.site-description, +.site-title { + margin-bottom: 0; +} + +.header-image .site-description, +.header-image .site-title { + display: block; + text-indent: -9999px; +} + +/* ## Widget Area +--------------------------------------------- */ +.site-header .widget-area { + float: left; + text-align: center; + width: 100%; +} + +/* # Site Navigation +---------------------------------------------------------------------------------------------------- */ +.genesis-nav-menu { + clear: both; + font-size: 16px; + line-height: 1; + width: 100%; +} + +.genesis-nav-menu .menu-item { + display: inline-block; + text-align: right; +} + +.genesis-nav-menu a { + color: #333333; + display: block; + padding: 30px 24px; +} + +.genesis-nav-menu a:hover, +.genesis-nav-menu .current-menu-item > a, +.genesis-nav-menu .sub-menu .current-menu-item > a:hover { + color: #333333; +} + +.genesis-nav-menu .sub-menu { + right: -9999px; + opacity: 0; + position: absolute; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + transition-property: transform; + -webkit-transition-duration: 0.4s; + -moz-transition-duration: 0.4s; + transition-duration: 0.4s; + -webkit-transition-timing-function: ease-in-out; + -moz-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + -webkit-transition-delay: 0s; + -moz-transition-delay: 0s; + transition-delay: 0s; + width: 200px; + z-index: 99; +} + +.genesis-nav-menu .sub-menu a { + background-color: white; + border: 1px solid #dddddd; + border-top: none; + font-size: 14px; + padding: 20px; + position: relative; + width: 200px; +} + +.genesis-nav-menu .sub-menu .sub-menu { + margin: -55px 199px 0 0; +} + +.genesis-nav-menu .menu-item:hover { + position: static; +} + +.genesis-nav-menu .menu-item:hover > .sub-menu { + right: auto; + opacity: 1; +} + +.genesis-nav-menu > .first > a { + padding-right: 0; +} + +.genesis-nav-menu > .last > a { + padding-left: 0; +} + +.genesis-nav-menu > .right { + float: left; + list-style-type: none; + padding: 30px 0; +} + +.genesis-nav-menu > .right > a { + display: inline; + padding: 0; +} + +.genesis-nav-menu > .rss > a { + margin-right: 48px; +} + +.genesis-nav-menu > .search { + padding: 10px 0 0; +} + +/* ## Site Header Navigation +--------------------------------------------- */ +.site-header .sub-menu { + border-top: 1px solid #dddddd; +} + +.site-header .sub-menu .sub-menu { + margin-top: -56px; +} + +.site-header .genesis-nav-menu li li { + margin-right: 0; +} + +/* ## Primary Navigation +--------------------------------------------- */ +.nav-primary { + background-color: #333333; +} + +.nav-primary .genesis-nav-menu a { + color: #dddddd; +} + +.nav-primary .genesis-nav-menu .sub-menu a { + color: #333333; +} + +.nav-primary .genesis-nav-menu a:hover, +.nav-primary .genesis-nav-menu .current-menu-item > a, +.nav-primary .genesis-nav-menu .sub-menu .current-menu-item > a:hover { + color: #477dca; +} + +/* ## Secondary Navigation +--------------------------------------------- */ +.nav-secondary { + background-color: white; +} + +/* # Content Area +---------------------------------------------------------------------------------------------------- */ +/* ## Entries +--------------------------------------------- */ +.entry { + margin-bottom: 40px; + padding: 20px; +} + +.content .entry { + background-color: #dddddd; +} + +.entry-content ol, +.entry-content ul { + margin-bottom: 28px; + margin-right: 40px; +} + +.entry-content ol > li { + list-style-type: decimal; +} + +.entry-content ul > li { + list-style-type: disc; +} + +.entry-content ol ol, +.entry-content ul ul { + margin-bottom: 0; +} + +.entry-content code { + background-color: #333333; + color: #dddddd; +} + +/* ## Entry Meta +--------------------------------------------- */ +p.entry-meta { + font-size: 16px; + margin-bottom: 0; +} + +.entry-header .entry-meta { + margin-bottom: 24px; +} + +.entry-footer .entry-meta { + border-top: 2px solid #dddddd; + padding-top: 24px; +} + +.entry-categories, +.entry-tags { + display: block; +} + +.entry-comments-link::before { + content: "\2014"; + margin: 0 2px 0 6px; +} + +/* ## Pagination +--------------------------------------------- */ +.pagination { + clear: both; + margin: 40px 0; +} + +.adjacent-entry-pagination { + margin-bottom: 0; +} + +.archive-pagination li { + display: inline; +} + +.archive-pagination li a { + background-color: #333333; + color: #dddddd; + cursor: pointer; + display: inline-block; + font-size: 16px; + padding: 8px 12px; +} + +.archive-pagination li a:hover, +.archive-pagination .active a { + background-color: #477dca; +} + +/* ## Comments +--------------------------------------------- */ +.comment-respond, +.entry-comments, +.entry-pings { + background-color: white; + margin-bottom: 40px; +} + +.comment-respond, +.entry-pings { + padding: 40px 40px 16px; +} + +.entry-comments { + padding: 40px; +} + +.comment-header { + font-size: 16px; +} + +li.comment { + background-color: white; + border: 2px solid #dddddd; + border-left: none; +} + +.comment-content { + clear: both; +} + +.comment-list li { + margin-top: 24px; + padding: 32px; +} + +.comment-list li li { + margin-left: -32px; +} + +.comment-respond input[type="email"], +.comment-respond input[type="text"], +.comment-respond input[type="url"] { + width: 100%; +} + +.comment-respond label { + display: block; + margin-left: 12px; +} + +.entry-comments .comment-author { + margin-bottom: 0; +} + +.entry-pings .reply { + display: none; +} + +.form-allowed-tags { + background-color: white; + font-size: 16px; + padding: 24px; +} + +/* # Sidebars +---------------------------------------------------------------------------------------------------- */ +.sidebar { + color: #dddddd; + font-size: 16px; +} + +.sidebar .widgettitle { + color: #dddddd; +} + +.sidebar li { + border-bottom: 1px dotted #dddddd; + margin-bottom: 10px; + padding-bottom: 10px; +} + +.sidebar p:last-child, +.sidebar ul > li:last-child { + margin-bottom: 0; +} + +.sidebar .widget { + background-color: #333333; + padding: 40px; +} + +/* # Footer Widgets +---------------------------------------------------------------------------------------------------- */ +.footer-widgets { + background-color: #333333; + clear: both; + padding-top: 40px; +} + +.footer-widgets, +.footer-widgets a { + color: #477dca; +} + +.footer-widgets input { + border: 1px solid #333333; +} + +.footer-widgets a.button, +.footer-widgets a:hover { + color: #477dca; +} + +.footer-widgets li { + border-bottom: 1px dotted #dddddd; + margin-bottom: 10px; + padding-bottom: 10px; +} + +.footer-widgets .widget { + margin-bottom: 40px; +} + +.footer-widgets p:last-child { + margin-bottom: 0; +} + +.footer-widgets-1, +.footer-widgets-2, +.footer-widgets-3 { + width: 100%; +} + +.footer-widgets-1, +.footer-widgets-2 { + float: right; +} + +.footer-widgets-3 { + float: left; +} + +/* # Site Footer +---------------------------------------------------------------------------------------------------- */ +.site-footer { + clear: both; + line-height: 1; + padding: 40px 20px; + text-align: center; +} + +.site-footer p { + margin-bottom: 0; +} + +/* # Media Queries +---------------------------------------------------------------------------------------------------- */ +@media only screen and (min-width: 1024px) { + body { + background-color: #f5f5f5; + } + + .title-area { + text-align: right; + } + + .header-image .site-header .wrap { + background-position: right top; + } + + .header-image .site-header .widget-area { + padding: 40px 0; + } + + .site-header .search-form { + float: left; + padding: 10px; + } + + .content, + .site-header .widget-area { + width: 620px; + } + + .full-width-content .content { + width: 100%; + } + + .site-header .widget-area { + text-align: left; + } + + .genesis-nav-menu { + text-align: right; + } + + .genesis-nav-menu a { + padding: 28px 24px; + } + + .genesis-nav-menu > .first > a { + padding-right: 0; + } + + .genesis-nav-menu > .last > a { + padding-left: 0; + } + + .genesis-nav-menu > .right { + display: inline-block; + float: left; + list-style-type: none; + padding: 28px 0; + text-transform: uppercase; + } + + .genesis-nav-menu > .right > a { + display: inline; + padding: 0; + } + + .genesis-nav-menu > .search { + padding: 14px 0 0; + } + + .site-inner, + .wrap { + margin: 0 auto; + max-width: 960px; + } + + .content-sidebar-sidebar .content-sidebar-wrap, + .sidebar-content-sidebar .content-sidebar-wrap, + .sidebar-sidebar-content .content-sidebar-wrap { + width: 740px; + } + + .sidebar-content-sidebar .content, + .sidebar-sidebar-content .content, + .content-sidebar-sidebar .content { + width: 400px; + } + + .site-footer { + padding: 40px 0; + } + + .footer-widgets { + padding: 40px 0 16px; + } + + .sidebar-primary, + .title-area { + width: 300px; + } + + .sidebar-secondary { + width: 180px; + } + + .archive-description { + padding: 40px 40px 24px; + } + + .author-box { + padding: 40px; + } + + .comment-respond, + .entry-pings { + padding: 40px 40px 16px; + } + + .entry { + padding: 40px 40px 24px; + } + + .entry-comments { + padding: 40px; + } + + .entry-footer .entry-meta { + border-top: 2px solid #f5f5f5; + margin: 0 -40px; + padding: 32px 40px 8px; + } + + .sidebar .widget { + padding: 40px; + } + + .five-sixths, + .four-sixths, + .one-fourth, + .one-half, + .one-sixth, + .one-third, + .three-fourths, + .three-sixths, + .two-fourths, + .two-sixths, + .two-thirds { + margin-right: 2.564102564102564%; + } + + .one-half, + .three-sixths, + .two-fourths { + width: 48.717948717948715%; + } + + .one-third, + .two-sixths { + width: 31.623931623931625%; + } + + .four-sixths, + .two-thirds { + width: 65.81196581196582%; + } + + .one-fourth { + width: 23.076923076923077%; + } + + .three-fourths { + width: 74.35897435897436%; + } + + .one-sixth { + width: 14.52991452991453%; + } + + .five-sixths { + width: 82.90598290598291%; + } + + .first { + clear: both; + margin-right: 0; + } + + .footer-widgets-1, + .footer-widgets-2, + .footer-widgets-3 { + width: 31.623931623931625%; + } + + .footer-widgets-2, + .footer-widgets-3 { + margin-right: 2.564102564102564%; + } +} +@media only screen and (min-width: 1140px) { + .site-inner, + .wrap { + max-width: 1140px; + } + + .content-sidebar-sidebar .content-sidebar-wrap, + .sidebar-content-sidebar .content-sidebar-wrap, + .sidebar-sidebar-content .content-sidebar-wrap { + width: 920px; + } + + .content { + float: left; + width: 740px; + } + + .site-header .widget-area { + width: 800px; + } + + .content-sidebar-sidebar .content, + .sidebar-content-sidebar .content, + .sidebar-sidebar-content .content { + width: 520px; + } +} diff --git a/style.css b/style.css index 0b1a7b9..05fb035 100644 --- a/style.css +++ b/style.css @@ -55,9 +55,8 @@ Version: 0.2.0 - Site Footer - Media Queries - Retina Display - - Max-width: 1200px - - Max-width: 960px - - Max-width: 800px + - Min-width: 1024px + - Min-width: 1140px */ /* Import Bourbon, Neat, and Bitters */ * {