Permalink
Browse files

Updated for responsive

  • Loading branch information...
parente committed Apr 16, 2012
1 parent 914d149 commit d5874bbf8e0cc39cb6e8dfa99041b5224f0634f9
Showing with 68 additions and 3 deletions.
  1. +28 −0 css/fluid.css
  2. +28 −3 css/fluid.less
  3. +12 −0 css/grid.css
View
@@ -28,6 +28,34 @@ body:after {
width: 70.96692881629362%;
margin: 0 2.016535591853196%;
}
+@media screen and (min-device-width: 768px) and (orientation: portrait) {
+ #maincolumn,
+ #sidebar,
+ #siteFooter {
+ display: inline;
+ float: left;
+ width: 95.96692881629362%;
+ margin: 0 2.016535591853196%;
+ margin-bottom: 1em;
+ }
+ #maincolumn {
+ border-bottom: 1px solid #ddd;
+ }
+}
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+ #maincolumn,
+ #sidebar,
+ #siteFooter {
+ display: inline;
+ float: left;
+ width: 95.96692881629362%;
+ margin: 0 2.016535591853196%;
+ margin-bottom: 1em;
+ }
+ #maincolumn {
+ border-bottom: 1px solid #ddd;
+ }
+}
body {
line-height: 1.725em;
color: #111;
View
@@ -8,17 +8,42 @@
// Remove the definition below for a pixel-based layout
@total-width: 100%;
-// main column & sidebar
+// main column & true sidebar
#maincolumn {
.column(9);
}
#sidebar {
.column(3);
}
-#siteFooter {
- .column(9);
+
+#siteFooter {
+ .column(9);
+}
+
+// main column & sidebar below
+@media screen and (min-device-width: 768px) and (orientation : portrait) {
+ #maincolumn, #sidebar, #siteFooter {
+ .column(12);
+ margin-bottom: 1em;
+ }
+
+ #maincolumn {
+ border-bottom: 1px solid #ddd;
+ }
}
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ #maincolumn, #sidebar, #siteFooter {
+ .column(12);
+ margin-bottom: 1em;
+ }
+
+ #maincolumn {
+ border-bottom: 1px solid #ddd;
+ }
+}
+
+
body {
line-height: 1.725em;
color: #111;
View
@@ -0,0 +1,12 @@
+body {
+ width: 100%;
+ *zoom: 1;
+}
+body:before,
+body:after {
+ content: "";
+ display: table;
+}
+body:after {
+ clear: both;
+}

0 comments on commit d5874bb

Please sign in to comment.