opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Mobile styling amends

Browse source
This commit is contained in:
Oliver Davies 2015-03-23 10:15:24 +00:00
parent 5f97d46fde
commit 731ae79f73
8 changed files with 89 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
source/themes/opdavies/opdavies/assets/css/styles.css
View file

@ -50,7 +50,7 @@ html {
line-height: 1.5em; } line-height: 1.5em; }
.content { .content {
max-width: 960px; max-width: 95%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 1em 0; } padding: 1em 0; }
@ -58,6 +58,15 @@ html {
content: " "; content: " ";
display: block; display: block;
clear: both; } 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 { .content a {
text-decoration: none; } text-decoration: none; }
.content a:link, .content a:visited { .content a:link, .content a:visited {
@ -66,7 +75,7 @@ html {
color: black; } color: black; }
footer[role="contentinfo"] { footer[role="contentinfo"] {
max-width: 960px; max-width: 95%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
border-top: 1px solid #CCC; border-top: 1px solid #CCC;
@ -76,6 +85,15 @@ footer[role="contentinfo"] {
content: " "; content: " ";
display: block; display: block;
clear: both; } 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"] { header[role="banner"] {
line-height: 1.5em; line-height: 1.5em;
@ -83,30 +101,42 @@ header[role="banner"] {
color: white; color: white;
padding: 1.5em 0; } padding: 1.5em 0; }
header[role="banner"] .inner { header[role="banner"] .inner {
max-width: 960px; max-width: 95%;
margin-left: auto; margin-left: auto;
margin-right: auto; } margin-right: auto; }
header[role="banner"] .inner:after { header[role="banner"] .inner:after {
content: " "; content: " ";
display: block; display: block;
clear: both; } clear: both; }
header[role="banner"] .inner .site-name { @media (min-width: 1025px) {
width: 23.72881%; header[role="banner"] .inner {
float: left; max-width: 960px;
margin-left: 0; } margin-left: auto;
header[role="banner"] .inner .main-menu { margin-right: auto; }
width: 74.57627%; header[role="banner"] .inner:after {
float: left; content: " ";
margin-left: 1.69492%; display: block;
text-align: right; } clear: both; } }
header[role="banner"] .inner .main-menu a { header[role="banner"] .inner .main-menu a {
border-bottom: 1px solid #064771; border-bottom: 1px solid #064771;
color: white; color: white;
display: block; display: block;
margin-left: .5em; margin: 0 .5em 0 0;
text-decoration: none; } text-decoration: none; }
header[role="banner"] .inner .main-menu a.active { header[role="banner"] .inner .main-menu a.active {
border-color: white; } 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 { .main-menu ul {
margin: 0; margin: 0;

6
source/themes/opdavies/opdavies/assets/scss/modules/_content.scss
View file

@ -1,7 +1,11 @@
.content { .content {
@include container(960px); @include container(95%);
padding: 1em 0; padding: 1em 0;
@include breakpoint($desktop) {
@include container(960px);
}
a { a {
text-decoration: none; text-decoration: none;

6
source/themes/opdavies/opdavies/assets/scss/modules/_footer.scss
View file

@ -1,6 +1,10 @@
footer[role="contentinfo"] { footer[role="contentinfo"] {
@include container(960px); @include container(95%);
border-top: 1px solid #CCC; border-top: 1px solid #CCC;
margin-top: 1em; margin-top: 1em;
padding: 1em 0; padding: 1em 0;
@include breakpoint($desktop) {
@include container(960px);
}
} }

40
source/themes/opdavies/opdavies/assets/scss/modules/_header.scss
View file

@ -5,25 +5,35 @@ header[role="banner"] {
padding: 1.5em 0; padding: 1.5em 0;
.inner { .inner {
@include container(960px); @include container(95%);
.site-name { @include breakpoint($desktop) {
@include span(first 3); @include container(960px);
} }
.main-menu { .main-menu a {
@include span(9); border-bottom: 1px solid #064771;
text-align: right; color: white;
display: block;
margin: 0 .5em 0 0;
text-decoration: none;
a { &.active {
border-bottom: 1px solid #064771; border-color: white;
color: white; }
display: block; }
margin-left: .5em;
text-decoration: none;
&.active { @include breakpoint($mobile + 1) {
border-color: white; .site-name {
@include span(first 4);
}
.main-menu {
@include span(8);
text-align: right;
a {
margin: 0 0 0 .5em;
} }
} }
} }

1
source/themes/opdavies/opdavies/assets/scss/styles.scss
View file

@ -3,6 +3,7 @@
@import 'compass/css3'; @import 'compass/css3';
@import 'compass/typography/vertical_rhythm'; @import 'compass/typography/vertical_rhythm';
@import 'susy'; @import 'susy';
@import 'breakpoint';
@import "variables/**/*"; @import "variables/**/*";
@import "layout/**/*"; @import "layout/**/*";

0
source/themes/opdavies/opdavies/assets/scss/variables/_layout.scss
View file

2
source/themes/opdavies/opdavies/assets/scss/variables/_responsive.scss Normal file
View file

@ -0,0 +1,2 @@
$mobile: 321px;
$desktop: 1025px;

1
source/themes/opdavies/opdavies/config.rb
View file

@ -16,6 +16,7 @@ javascripts_dir = "assets/js"
# Require any additional compass plugins installed on your system. # Require any additional compass plugins installed on your system.
require 'susy' require 'susy'
require 'sass-globbing' require 'sass-globbing'
require 'breakpoint'
## ##
## You probably don't need to edit anything below this. ## You probably don't need to edit anything below this.