Permalink
Browse files

Merge branch 'feature/responsive-design' into develop

  • Loading branch information...
2 parents 3e5df97 + a9a5873 commit e110cad539731f20bb60697cd508c97538bcdd5f @founddrama committed Apr 12, 2012
View
@@ -12,13 +12,18 @@
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
+<meta name="viewport" content="width=device-width, maximum-scale=0.5">
<title><?php
wp_title( '|', true, 'right' );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
+<link rel="stylesheet" type="text/css" media="only screen and (min-width:1024px)" href="<?php bloginfo('template_directory'); ?>/css/mq.css" />
+<!--[if IE 8]>
+<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/css/mq.css" />
+<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/css/ie.css" />
<![endif]-->
View
@@ -0,0 +1,40 @@
+# need a plan :
+
+* 1024px (iPad ... low res monitors)
+ * working out just fine actually
+
+* consider the iPhone
+ * 320px wide (portrait)
+ * 480px tall
+ * (goes both ways)
+ * 4 + 4S are double
+
+# changes?
+
+*. masthead
+ * height: 8em; [COMMENTED OUT]
+* .masthead nav ul
+ * right:0;left:0;bottom:0; [CHECK]
+* .masthead-widgets
+ * display:none; [TENATIVE - netter way?]
+* .orin-container [CHECK]
+ * (current styles only apply when width > 1023px)
+ * margin: 0 1em;
+* .orin-chronology [CHECK]
+ * width (only applies > 1023px)
+* .post-decorator [CHECK]
+ * padding : 40px 20px 20px;
+ * margin-bottom : 32px;
+* article blockquote [CHECK]
+ * margin: 1em 0;
+* aside [CHECK]
+ * (current styles only apply when width > 1023px)
+
+# problems etc. following 1st attempt :
+* text still very small on iphone :(
+* if you start at the small size (on desktop ... say 320px) then it doesn't
+ quite calculate where the right edge is (not well, not exactly)
+* if you go from "a big size" down to <=1023px then the aside will properly
+ "drop down" under the main content -- but if you go "back" to a window size
+ that is 1024px or above then the aside still "sits" under the main content,
+ even though it has floated over to where it should be (!?!?)
View
@@ -25,7 +25,7 @@ article {
blockquote {
color: white;
padding: 1em;
- margin: 2em;
+ margin: 1em 0;
border: 0.25em solid white;
@include article-shadow(4px, $f_d-grey);
@include basic-linear-grader(darken($f_d-color, 10%), $f_d-dark, 92%);
View
@@ -25,6 +25,10 @@
#reply-title { padding-top: $_24th; }
.post, .page {
- input, textarea { display: block; }
+ input, textarea {
+ display: block;
+ width: 100%;
+ font-size: 2em;
+ }
.required { color: $f_d-color; }
-}
+}
View
@@ -11,10 +11,10 @@
&>ul {
text-align: left;
- width: $_4th;
- display: inline-block;
+ width: auto;
+ display: block;
vertical-align: top;
- margin: 2em 0;
+ margin: 2em;
list-style-type: none;
}
}
View
@@ -22,7 +22,7 @@ h2, h3, h4, h5, h6 {
h1 {
@include h-font-base(6em, 1em);
position: absolute;
- margin-left: $_12th;
+ margin-left: $_12th / 2;
@include text-shadow($f_d-dark 2px 0 2px, $f_d-dark -2px 0 2px);
-ms-transition: 0.3s linear;
@include transition(0.3s linear);
View
@@ -3,20 +3,25 @@
@include basic-linear-grader(white, $f_d-grey, 128px);
height: $_sect_h;
position: relative;
+ //@media all and (max-width: 1023px) {
+ // & { height: 8em; }
+ //}
hgroup .desc {
@extend ._sans-serif;
font-size: 1.5em;
font-weight: bold;
position: absolute;
- margin-left: $_3rd / 2;
+ margin-left: $_12th;
margin-top: $_12th;
color: $f_d-dark;
}
nav ul {
position: absolute;
- right: $_24th;
+ right: 0;
+ left: 0;
+ bottom: 0;
li {
float: left;
View
@@ -8,8 +8,12 @@
/**
* WP-Calendar
*/
-//#wp-calendar tfoot td:last-of-type { text-align: right; }
#next { text-align: right; }
+#wp-calendar {
+ width: 100%;
+ font-size: 2em;
+ tbody td { text-align: center; }
+}
/**
* Delicious.com
View
@@ -1,6 +1,6 @@
aside {
- float: right;
- width: $_3rd - $_48th;
+ float: none;
+ width: 100%;
ul { list-style-type: none; }
@@ -74,4 +74,11 @@ article {
.form-allowed-tags { font-size: 0.8125em; }
.comment .permalink,
-.orin-footer { font-size: 0.75em; }
+.orin-footer { font-size: 0.75em; }
+
+@media all and (max-width: 1023px) {
+ .masthead li, .orin-chronology, .orin-footer {
+ font-size: 1.5em;
+ line-height: 1.5em * 1.5;
+ }
+}
View
@@ -3,4 +3,5 @@
top: 6.5em;
margin-left: $_3rd / 2;
margin-right: 2em;
+ display: none;
}
View
@@ -4,6 +4,7 @@
*/
@import "variables";
+@import "mq.scss";
/**
* IE7 and below...
View
@@ -0,0 +1,83 @@
+// Compass imports //
+@import "compass/css3";
+// imports //
+@import "variables";
+@import "layout";
+@import "mixins";
+
+// headings
+h1 { margin-left: $_12th; }
+
+// masthead
+.masthead {
+ hgroup .desc {
+ margin-left: $_3rd / 2;
+ }
+
+ nav ul {
+ right: $_24th;
+ left: auto;
+ bottom: auto;
+ }
+}
+
+// style
+.orin-container {
+ float: right;
+ width: $_960_base;
+ margin-right: 2em;
+ padding: 0;
+}
+
+.orin-chronology {
+ float: left;
+ width: $_3rd * 2;
+
+ .page-decorator, .post-decorator {
+ padding: $_24th;
+ padding-bottom: $_24th / 2;
+ margin-bottom: 64px;
+ }
+}
+
+input, textarea {
+ width: auto;
+ font-size: 12px;
+}
+
+// articles
+article blockquote {
+ margin: 2em;
+}
+
+// comments
+.post, .page {
+ input, textarea {
+ width: auto;
+ font-size: 12px;
+ }
+}
+
+// sidebar
+aside {
+ float: right;
+ width: $_3rd - $_48th;
+}
+
+// footer
+.orin-footer section>ul {
+ width: $_4th;
+ margin: 2em 0;
+ display: inline-block;
+}
+
+// widgets
+.masthead-widgets {
+ display: block;
+}
+
+#wp-calendar {
+ width: auto;
+ font-size: 1em;
+ tbody td { text-align: left; }
+}
View
@@ -32,30 +32,29 @@ body {
@import "masthead";
-a {
- color: $f_d-color;
-}
+a { color: $f_d-color; }
.orin-container {
- float: right;
- width: $_960_base;
- margin-right: 2em;
+ float: none;
+ width: auto;
+ margin-right: 0;
+ padding: 0 1em;
}
.orin-chronology {
display: inline-block;
- width: $_3rd * 2;
+ float: none;
+ width: 100%;
- .page-decorator,
- .post-decorator {
+ .page-decorator, .post-decorator {
@include border-radius(8px);
- padding: $_24th;
- padding-bottom: $_24th / 2;
+ padding: $_24th / 2;
+ padding-top: $_24th;
@include basic-linear-grader(white, $f_d-desat, 56px);
- margin-bottom: 64px;
+ margin-bottom : 32px;
@include article-shadow(8px, rgba($f_d-grey, .8));
border: 1px solid $f_d-grey;
@@ -124,6 +123,11 @@ textarea {
@extend .orin-field;
}
+input, textarea {
+ width: 100%;
+ font-size: 2em;
+}
+
// inside : #orin-chronology
@import "articles";
@import "comments";

0 comments on commit e110cad

Please sign in to comment.