[library-web/responsive: 1/2] prepare for responsive layout

[Jakub Steiner <jimmac src gnome org>]

commit 46306f304bf653bb6e250e0948a94ebbadadf401
Author: Jakub Steiner <jimmac gmail com>
Date:   Thu Jan 31 10:10:07 2013 +0100

    prepare for responsive layout
    
    - don't pull 24 column grid that isn't actually used
    - don't hardcode width
    - use a simple 6 column 960 responsive stylesheet
      with width resetting rules being pulled
      from the main style.css stylesheet

 data/skin/960_24_col.css |    1 -
 data/skin/foldy960.css   |  199 ++++++++++++++++++++++++++++++++++++++++++++++
 data/skin/lgo2010.css    |    3 +-
 3 files changed, 200 insertions(+), 3 deletions(-)
---
diff --git a/data/skin/foldy960.css b/data/skin/foldy960.css
new file mode 100644
index 0000000..5e7f7dc
--- /dev/null
+++ b/data/skin/foldy960.css
@@ -0,0 +1,199 @@
+/*------------------------------------------------------------
+
+	Style.css
+
+	Created by:	Dave Rupert
+	Contact:		http://github.com/davatron5000/foldy960
+
+	Copyright 2012
+	License:	  WTFPL + "Not going to maintain this because
+              the rent is too damn high licence."
+
+--------------------------------------------------------------*/
+
+/* Responsive Resets
+-------------------------------------------------------------- */
+ -o-viewport {
+  width: device-width;
+}
+ -ms-viewport {
+  width: device-width;
+}
+ viewport {
+  width: device-width;
+}
+
+html {
+  overflow-y: auto;
+}
+
+img,
+audio,
+video,
+canvas {
+  max-width: 100%;
+}
+
+/* Grid > 6 Column Mobile First
+-------------------------------------------------------------- */
+.container {
+  /*
+    The `max-width` property is the width governer. I dare you to experiment
+    with setting this larger, something like 1280px.
+  */
+	max-width: 1280px;
+	width:92%;
+	margin:0px auto;
+	position: relative;
+}
+
+.row {
+  clear: both;
+}
+
+ media screen and (min-width: 480px) {
+  .container {
+    width: 98%;
+  }
+
+  .grid-1,
+  .grid-2,
+  .grid-3,
+  .grid-4,
+  .grid-5,
+  .grid-6,
+  .grid-half,
+  .grid-full,
+  .grid-unit {
+    float: left;
+    width:96.969696969697%;
+    margin:0 1.515151515152% 1em;
+  }
+
+  .gallery .grid-unit,
+  .grid-half {
+    width:46.969696969697%;
+    margin: 0 1.515151515152% 1em;
+  }
+
+  .grid-flow-opposite{
+    float:right
+  }
+
+}
+
+ media screen and (min-width: 640px) {
+  .grid-1     { width: 13.636363636364%; }
+  .grid-2     { width: 30.30303030303%; }
+  .grid-3,
+  .grid-half  { width: 46.969696969697%; }
+  .grid-4     { width: 63.636363636364%; }
+  .grid-5     { width: 80.30303030303%; }
+  .grid-6,
+  .grid-full  { width: 96.969696969697%; }
+
+  .gallery .grid-unit {
+    width: 30.30303030303%;
+  }
+
+  .content-pad-right {
+    padding-right: 4%; /* Use (or don't) as necessary. */
+  }
+
+  .content-pad-left {
+    padding-left: 4%;
+  }
+
+}
+
+/* Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/
+For best results, use your favorite clearfix here.
+-------------------------------------------------------------- */
+.cf:before, .cf:after { content:""; display:table; }
+.cf:after { clear:both; }
+.cf { zoom:1; } /* For IE 6/7 (trigger hasLayout) */
+
+/* Layout
+-------------------------------------------------------------- */
+body {
+  font: 100%/1.5 sans-serif;
+}
+
+section {
+  margin-bottom: 2em;
+}
+
+footer {
+  font-size: 0.9em;
+  border-top: 1px solid #ccc;
+  padding: 0.5em 0 2.5em;
+}
+
+/* Typography
+-------------------------------------------------------------- */
+.heading {
+  font-size: 3em;
+  margin: 0;
+}
+
+.sub-heading {
+  font-size: 2em;
+  margin-bottom: 0.5em;
+}
+
+a {
+  color: #0066cc;
+}
+
+a:focus,
+a:hover {
+  color: #003399;
+}
+
+/* Elements
+-------------------------------------------------------------- */
+figure {
+  margin: 0;
+  background: #f8f8f8;
+}
+
+figcaption {
+  padding: 0.5em 1em 1em;
+  font-size: 0.875em;
+}
+
+code {
+  padding: 0.5em;
+  background: #efefef;
+}
+
+/* Helpers
+-------------------------------------------------------------- */
+.show-grid div[class*='grid-'] {
+  background-color: #eee;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: block;
+  padding: 0.5em 1em;
+  margin-bottom: 1em;
+  text-align: center;
+}
+
+/* Unset hardcoded sizes */
+#container {
+    width: inherit;
+}
+
+#container .content, #container .page_title {
+    width: inherit;
+}
+#container.two_columns .content {
+    width: inherit;
+}
+#container.two_columns .content.without_sidebar {
+    width: inherit;
+}
+#container.two_columns .sidebar {
+    width: inherit;
+}
diff --git a/data/skin/lgo2010.css b/data/skin/lgo2010.css
index f593f06..9789626 100644
--- a/data/skin/lgo2010.css
+++ b/data/skin/lgo2010.css
@@ -289,7 +289,7 @@ div.row {
     background-position: 0 -96px;
 }
 
-.grid_4.subtle_box {
+.grid-2.subtle_box {
 	margin-top: 1em;
 }
 
@@ -339,7 +339,6 @@ span.citem {
 }
 
 table#platform-overview {
-	width: 700px;
 	table-layout: fixed;
 }