From 731ae79f73e53cba390ec56f022eadfd66808056 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Mon, 23 Mar 2015 10:15:24 +0000 Subject: [PATCH] Mobile styling amends --- .../opdavies/opdavies/assets/css/styles.css | 70 +++++++++++++------ .../assets/scss/modules/_content.scss | 6 +- .../opdavies/assets/scss/modules/_footer.scss | 6 +- .../opdavies/assets/scss/modules/_header.scss | 40 +++++++---- .../opdavies/opdavies/assets/scss/styles.scss | 1 + .../assets/scss/variables/_layout.scss | 0 .../assets/scss/variables/_responsive.scss | 2 + source/themes/opdavies/opdavies/config.rb | 1 + 8 files changed, 89 insertions(+), 37 deletions(-) delete mode 100644 source/themes/opdavies/opdavies/assets/scss/variables/_layout.scss create mode 100644 source/themes/opdavies/opdavies/assets/scss/variables/_responsive.scss diff --git a/source/themes/opdavies/opdavies/assets/css/styles.css b/source/themes/opdavies/opdavies/assets/css/styles.css index 7c0baf49..9ec3f541 100644 --- a/source/themes/opdavies/opdavies/assets/css/styles.css +++ b/source/themes/opdavies/opdavies/assets/css/styles.css @@ -50,7 +50,7 @@ html { line-height: 1.5em; } .content { - max-width: 960px; + max-width: 95%; margin-left: auto; margin-right: auto; padding: 1em 0; } @@ -58,6 +58,15 @@ html { content: " "; display: block; clear: both; } + @media (min-width: 1025px) { + .content { + max-width: 960px; + margin-left: auto; + margin-right: auto; } + .content:after { + content: " "; + display: block; + clear: both; } } .content a { text-decoration: none; } .content a:link, .content a:visited { @@ -66,7 +75,7 @@ html { color: black; } footer[role="contentinfo"] { - max-width: 960px; + max-width: 95%; margin-left: auto; margin-right: auto; border-top: 1px solid #CCC; @@ -76,6 +85,15 @@ footer[role="contentinfo"] { content: " "; display: block; clear: both; } + @media (min-width: 1025px) { + footer[role="contentinfo"] { + max-width: 960px; + margin-left: auto; + margin-right: auto; } + footer[role="contentinfo"]:after { + content: " "; + display: block; + clear: both; } } header[role="banner"] { line-height: 1.5em; @@ -83,30 +101,42 @@ header[role="banner"] { color: white; padding: 1.5em 0; } header[role="banner"] .inner { - max-width: 960px; + max-width: 95%; margin-left: auto; margin-right: auto; } header[role="banner"] .inner:after { content: " "; display: block; clear: both; } - header[role="banner"] .inner .site-name { - width: 23.72881%; - float: left; - margin-left: 0; } - header[role="banner"] .inner .main-menu { - width: 74.57627%; - float: left; - margin-left: 1.69492%; - text-align: right; } - header[role="banner"] .inner .main-menu a { - border-bottom: 1px solid #064771; - color: white; - display: block; - margin-left: .5em; - text-decoration: none; } - header[role="banner"] .inner .main-menu a.active { - border-color: white; } + @media (min-width: 1025px) { + header[role="banner"] .inner { + max-width: 960px; + margin-left: auto; + margin-right: auto; } + header[role="banner"] .inner:after { + content: " "; + display: block; + clear: both; } } + header[role="banner"] .inner .main-menu a { + border-bottom: 1px solid #064771; + color: white; + display: block; + margin: 0 .5em 0 0; + text-decoration: none; } + header[role="banner"] .inner .main-menu a.active { + border-color: white; } + @media (min-width: 322px) { + header[role="banner"] .inner .site-name { + width: 32.20339%; + float: left; + margin-left: 0; } + header[role="banner"] .inner .main-menu { + width: 66.10169%; + float: left; + margin-left: 1.69492%; + text-align: right; } + header[role="banner"] .inner .main-menu a { + margin: 0 0 0 .5em; } } .main-menu ul { margin: 0; diff --git a/source/themes/opdavies/opdavies/assets/scss/modules/_content.scss b/source/themes/opdavies/opdavies/assets/scss/modules/_content.scss index f5ffab07..54ec59f9 100644 --- a/source/themes/opdavies/opdavies/assets/scss/modules/_content.scss +++ b/source/themes/opdavies/opdavies/assets/scss/modules/_content.scss @@ -1,7 +1,11 @@ .content { - @include container(960px); + @include container(95%); padding: 1em 0; + @include breakpoint($desktop) { + @include container(960px); + } + a { text-decoration: none; diff --git a/source/themes/opdavies/opdavies/assets/scss/modules/_footer.scss b/source/themes/opdavies/opdavies/assets/scss/modules/_footer.scss index 3899de19..dac17699 100644 --- a/source/themes/opdavies/opdavies/assets/scss/modules/_footer.scss +++ b/source/themes/opdavies/opdavies/assets/scss/modules/_footer.scss @@ -1,6 +1,10 @@ footer[role="contentinfo"] { - @include container(960px); + @include container(95%); border-top: 1px solid #CCC; margin-top: 1em; padding: 1em 0; + + @include breakpoint($desktop) { + @include container(960px); + } } \ No newline at end of file diff --git a/source/themes/opdavies/opdavies/assets/scss/modules/_header.scss b/source/themes/opdavies/opdavies/assets/scss/modules/_header.scss index 2870f829..b7e6f723 100644 --- a/source/themes/opdavies/opdavies/assets/scss/modules/_header.scss +++ b/source/themes/opdavies/opdavies/assets/scss/modules/_header.scss @@ -5,25 +5,35 @@ header[role="banner"] { padding: 1.5em 0; .inner { - @include container(960px); - - .site-name { - @include span(first 3); + @include container(95%); + + @include breakpoint($desktop) { + @include container(960px); } - .main-menu { - @include span(9); - text-align: right; + .main-menu a { + border-bottom: 1px solid #064771; + color: white; + display: block; + margin: 0 .5em 0 0; + text-decoration: none; - a { - border-bottom: 1px solid #064771; - color: white; - display: block; - margin-left: .5em; - text-decoration: none; + &.active { + border-color: white; + } + } - &.active { - border-color: white; + @include breakpoint($mobile + 1) { + .site-name { + @include span(first 4); + } + + .main-menu { + @include span(8); + text-align: right; + + a { + margin: 0 0 0 .5em; } } } diff --git a/source/themes/opdavies/opdavies/assets/scss/styles.scss b/source/themes/opdavies/opdavies/assets/scss/styles.scss index 43689d54..6a5f8245 100644 --- a/source/themes/opdavies/opdavies/assets/scss/styles.scss +++ b/source/themes/opdavies/opdavies/assets/scss/styles.scss @@ -3,6 +3,7 @@ @import 'compass/css3'; @import 'compass/typography/vertical_rhythm'; @import 'susy'; +@import 'breakpoint'; @import "variables/**/*"; @import "layout/**/*"; diff --git a/source/themes/opdavies/opdavies/assets/scss/variables/_layout.scss b/source/themes/opdavies/opdavies/assets/scss/variables/_layout.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/source/themes/opdavies/opdavies/assets/scss/variables/_responsive.scss b/source/themes/opdavies/opdavies/assets/scss/variables/_responsive.scss new file mode 100644 index 00000000..40449ca8 --- /dev/null +++ b/source/themes/opdavies/opdavies/assets/scss/variables/_responsive.scss @@ -0,0 +1,2 @@ +$mobile: 321px; +$desktop: 1025px; \ No newline at end of file diff --git a/source/themes/opdavies/opdavies/config.rb b/source/themes/opdavies/opdavies/config.rb index 546adb6b..59bd921b 100644 --- a/source/themes/opdavies/opdavies/config.rb +++ b/source/themes/opdavies/opdavies/config.rb @@ -16,6 +16,7 @@ javascripts_dir = "assets/js" # Require any additional compass plugins installed on your system. require 'susy' require 'sass-globbing' +require 'breakpoint' ## ## You probably don't need to edit anything below this.