From 3cfd00eca4cfdf35dc4ac0fcf5630402f5b3d2a7 Mon Sep 17 00:00:00 2001
From: Edwin Morris <edwin.h.morris@gmail.com>
Date: Fri, 13 Apr 2012 11:33:52 -0400
Subject: [PATCH 1/2] changed all pixel margins, font-sizes, and padding to rem
 - changed line-heights to em

---
 app/assets/stylesheets/_defaults.scss |  8 ++---
 app/assets/stylesheets/_flashes.scss  | 10 +++---
 app/assets/stylesheets/_forms.scss    | 38 ++++++++++------------
 app/assets/stylesheets/_lists.scss    | 16 +++++-----
 app/assets/stylesheets/_tables.scss   |  8 ++---
 app/assets/stylesheets/_type.scss     | 46 +++++++++++----------------
 6 files changed, 55 insertions(+), 71 deletions(-)

diff --git a/app/assets/stylesheets/_defaults.scss b/app/assets/stylesheets/_defaults.scss
index ee35361..a4d9c33 100644
--- a/app/assets/stylesheets/_defaults.scss
+++ b/app/assets/stylesheets/_defaults.scss
@@ -1,6 +1,6 @@
 body {
   color: #333;
-  font-size: 13px;
+  font-size: 100%;
   font-family: "helvetica neue", arial, helvetica, "lucida grande", sans-serif;
 }
 
@@ -14,8 +14,8 @@ h1, h2, h3, h4, h5, h6 {
 /* Use a .box to create a padded box inside a column.  */
 .box {
   background: #eee;
-  margin-bottom: 16px;
-  padding: 16px;
+  margin-bottom: 1rem;
+  padding: 1rem;
 }
 
 /* Use this to create a horizontal ruler across a column. */
@@ -26,7 +26,7 @@ hr {
   color: #ddd;
   float: none;
   height: 1px;
-  margin: 0 0 12px;
+  margin: 0 0 .75rem;
   width: 100%;
 }
 
diff --git a/app/assets/stylesheets/_flashes.scss b/app/assets/stylesheets/_flashes.scss
index 63e063a..091510a 100644
--- a/app/assets/stylesheets/_flashes.scss
+++ b/app/assets/stylesheets/_flashes.scss
@@ -1,11 +1,11 @@
 /* Success, error & notice boxes for messages and errors. */
 div.error, div.notice, div.success, #flash_failure, #flash_success, #flash_notice {
   border: 1px solid #ddd;
-  -moz-border-radius: 8px;
-  -webkit-border-radius: 8px;
-  border-radius: 8px;
-  margin-bottom: 12px;
-  padding: 10px;
+  -moz-border-radius: .5rem;
+  -webkit-border-radius: .5rem;
+  border-radius: .5rem;
+  margin-bottom: .75rem;
+  padding: .75rem;
 }
 
 div.error, #flash_failure {
diff --git a/app/assets/stylesheets/_forms.scss b/app/assets/stylesheets/_forms.scss
index 4055f36..0ffe569 100644
--- a/app/assets/stylesheets/_forms.scss
+++ b/app/assets/stylesheets/_forms.scss
@@ -11,7 +11,7 @@ input[type="submit"]::-moz-focus-inner {
 
 form ol {
   list-style: none;
-  margin: 0 0 12px 0;
+  margin: 0 0 .75rem 0;
 }
 
 form ol ol {
@@ -20,13 +20,13 @@ form ol ol {
 
 form ol li {
   list-style-position: outside;
-  margin: 0 0 12px 0;
+  margin: 0 0 .75rem 0;
 }
 
 /*list-style-position fixes IE label margin bug*/
 form ol ol li {
   list-style-position: outside;
-  margin: 0 0 4px 0;
+  margin: 0 0 .25rem 0;
 }
 
 form ol li.error input {
@@ -40,7 +40,7 @@ p.inline-errors {
 form ol li.file {
   background: #e1e1e1;
   border: 1px solid #c8c8c8;
-  padding: 10px;
+  padding: .75rem;
 }
 
 form abbr {
@@ -66,16 +66,16 @@ a.cancel {
 
 .inline-hints {
   color: #666;
-  font-size: 11px;
-  margin-bottom: 4px;
+  font-size: .75rem;
+  margin-bottom: .25rem;
 }
 
 /* Fieldsets */
 fieldset {
   background: #f1f1f1;
   border: 1px solid #e3e3e3;
-  margin: 0 0 16px 0;
-  padding: 16px 16px 12px 16px;
+  margin: 0 0 1rem 0;
+  padding: 1rem 1rem .75rem 1rem;
 }
 
 fieldset fieldset, fieldset fieldset fieldset {
@@ -86,7 +86,7 @@ fieldset fieldset, fieldset fieldset fieldset {
 legend {
   font-weight: bold;
 }
-.ie6 legend, .ie7 legend { margin-left: -7px; }
+.ie6 legend, .ie7 legend { margin-left: .5rem; }
 
 fieldset.buttons {
   background: inherit;
@@ -120,8 +120,7 @@ input[type="time"],
 input[type="url"],
 input[type="week"] {
   font-size: inherit;
-  padding: 3px 2px;
-  width: 300px;
+  padding: .25rem;
 }
 .ie6 input {
   vertical-align: text-bottom;
@@ -133,9 +132,8 @@ input[disabled='disabled'] {
 }
 
 input[type="checkbox"] {
-  margin: 0 3px 0 0;
+  margin: 0 .25rem 0 0;
   position: relative;
-  top: -2px;
   vertical-align: middle;
 }
 .ie7 input[type="checkbox"] {
@@ -143,9 +141,8 @@ input[type="checkbox"] {
 }
 
 input[type="radio"] {
-  margin: 0 3px 0 0;
+  margin: 0 .25rem 0 0;
   position: relative;
-  top: -2px;
   vertical-align: middle;
 }
 
@@ -162,21 +159,18 @@ input[type="radio"] {
 /* Textareas */
 textarea {
   font-size: inherit;
-  height: 200px;
-  margin: 0 6px 6px 0;
-  padding: 5px;
-  width: 440px;
+  margin: 0 .5rem .5rem 0;
+  padding: .5rem;
   overflow: auto;
 }
 
 /* Select fields */
 fieldset .select select {
-  width: 200px;
-  font-size: 11px;
+  font-size: .75rem;
 }
 
 optgroup {
-  margin: 0 0 6px 0;
+  margin: 0 0 .5rem 0;
 }
 
 /* Date & Time */
diff --git a/app/assets/stylesheets/_lists.scss b/app/assets/stylesheets/_lists.scss
index 5675411..33722bb 100644
--- a/app/assets/stylesheets/_lists.scss
+++ b/app/assets/stylesheets/_lists.scss
@@ -2,7 +2,7 @@
 
 ul, ol {
   list-style-position: inside;
-  margin-bottom:  16px;
+  margin-bottom: 1rem;
 }
 
 ul {
@@ -14,27 +14,27 @@ ol {
 }
 
 dl {
-  line-height: 1.4;
-  margin-bottom: 16px;
+  line-height: 1.4em;
+  margin-bottom: 1rem;
 }
 
 dl dt {
   font-weight: bold;
-  margin-top: 6px;
+  margin-top: .5rem;
 }
 
 dl dd {
-  margin-bottom: 0em;
+  margin-bottom: 0;
 }
 
 dd {
-  margin-left: 6px;
+  margin-left: .5rem;
 }
 
 li {
-  line-height: 1.4;
+  line-height: 1.4em;
 }
 
 ol ol, ol ul, ul ul, ul ol {
-  margin-left: 12px;
+  margin-left: .75rem;
 }
diff --git a/app/assets/stylesheets/_tables.scss b/app/assets/stylesheets/_tables.scss
index 027a81c..d0f5e07 100644
--- a/app/assets/stylesheets/_tables.scss
+++ b/app/assets/stylesheets/_tables.scss
@@ -1,7 +1,7 @@
 /* Tables */
 
 table {
-  margin-bottom: 24px;
+  margin-bottom: 1.5rem;
   width: 100%;
 }
 
@@ -16,13 +16,13 @@ td {
 }
 
 caption, th, td {
-  padding: 4px 10px 4px 0;
+  padding: .25rem .75rem .25rem 0;
 }
 
 caption {
   background: #f1f1f1;
-  margin-bottom: 12px;
-  padding: 10px 0;
+  margin-bottom: .75rem;
+  padding: .75rem 0;
 }
 
 tr, td, th {
diff --git a/app/assets/stylesheets/_type.scss b/app/assets/stylesheets/_type.scss
index a727a40..78d7a42 100644
--- a/app/assets/stylesheets/_type.scss
+++ b/app/assets/stylesheets/_type.scss
@@ -1,46 +1,36 @@
 /* Headings */
 h1, h2, h3, h4, h5, h6 {
   font-weight: bold;
+  line-height: 1.2em;
 }
 
 h1 {
-  font-size: 28px;
-  line-height: 1.2;
-  margin-bottom: 12px;
+  font-size: 1.75rem;
 }
 
 h2 {
-  font-size: 24px;
-  line-height: 1.2;
-  margin-bottom: 6px;
+  font-size: 1.5rem;
 }
 
 h3 {
-  font-size: 18px;
-  line-height: 1.2;
-  margin-bottom: 4px;
+  font-size: 1.25rem;
 }
 
 h4 {
-  font-size: 16px;
-  line-height: 1.3;
-  margin-bottom: 4px;
+  font-size: 1rem;
 }
 
 h5 {
-  font-size: 14px;
-  margin-bottom: 4px;
+  font-size: .75rem;
 }
 
 h6 {
-  font-size: 12px;
-  margin-bottom: 4px;
+  font-size: .5rem;
 }
 
 /* Text elements */
 p {
-  line-height: 1.4;
-  margin-bottom: 12px;
+  line-height: 1.4rem;
 }
 
 /* Use this if the image is at the top of the <p>. */
@@ -49,7 +39,7 @@ p img.top {
 }
 
 img {
-  margin: 0 0 12px;
+  margin: 0 0 .75rem;
 }
 
 abbr, acronym {
@@ -59,7 +49,7 @@ abbr, acronym {
 
 address {
   font-style: italic;
-  margin-top: 16px;
+  margin-top: 1rem;
 }
 
 del {
@@ -87,8 +77,8 @@ blockquote {
   border-left: 4px solid #d1d1d1;
   color: #666;
   font-style: italic;
-  margin: 16px 0;
-  padding-left: 12px;
+  margin: 1rem 0;
+  padding-left: .75rem;
 }
 
 strong {
@@ -105,25 +95,25 @@ dfn {
 }
 
 pre, code {
-  margin: 12px 0;
+  margin: .75rem 0;
   white-space: pre; /* CSS2 */
   white-space: pre-wrap; /* CSS 2.1 */
   word-wrap: break-word; /* IE */
 }
 
 pre, code, tt {
-  font: 12px 'andale mono', 'monotype.com', 'lucida console', monospace;
-  line-height: 1.5;
+  font: .75rem 'andale mono', 'monotype.com', 'lucida console', monospace;
+  line-height: 1.4em;
 }
 
 pre.code {
   background: #000;
   color: #fff;
-  padding: 20px;
+  padding: 1.25em;
 }
 
 tt {
   display: block;
-  line-height: 1.5;
-  margin: 16px 0;
+  line-height: 1.4em;
+  margin: 1rem 0;
 }

From 95d8d9827398464d52259da789e41e1ae76d2867 Mon Sep 17 00:00:00 2001
From: Edwin Morris <edwin.h.morris@gmail.com>
Date: Fri, 13 Apr 2012 13:29:47 -0400
Subject: [PATCH 2/2] added fallback for all rem units

---
 app/assets/stylesheets/_defaults.scss |  2 ++
 app/assets/stylesheets/_flashes.scss  |  2 ++
 app/assets/stylesheets/_forms.scss    | 20 +++++++++++++++++++-
 app/assets/stylesheets/_lists.scss    |  5 +++++
 app/assets/stylesheets/_tables.scss   |  4 ++++
 app/assets/stylesheets/_type.scss     | 16 +++++++++++++++-
 6 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/_defaults.scss b/app/assets/stylesheets/_defaults.scss
index a4d9c33..d58e14b 100644
--- a/app/assets/stylesheets/_defaults.scss
+++ b/app/assets/stylesheets/_defaults.scss
@@ -14,7 +14,9 @@ h1, h2, h3, h4, h5, h6 {
 /* Use a .box to create a padded box inside a column.  */
 .box {
   background: #eee;
+  margin-bottom: 1em;
   margin-bottom: 1rem;
+  padding: 1em;
   padding: 1rem;
 }
 
diff --git a/app/assets/stylesheets/_flashes.scss b/app/assets/stylesheets/_flashes.scss
index 091510a..1b8eef6 100644
--- a/app/assets/stylesheets/_flashes.scss
+++ b/app/assets/stylesheets/_flashes.scss
@@ -4,7 +4,9 @@ div.error, div.notice, div.success, #flash_failure, #flash_success, #flash_notic
   -moz-border-radius: .5rem;
   -webkit-border-radius: .5rem;
   border-radius: .5rem;
+  margin-bottom: .75em;
   margin-bottom: .75rem;
+  padding: .75em;
   padding: .75rem;
 }
 
diff --git a/app/assets/stylesheets/_forms.scss b/app/assets/stylesheets/_forms.scss
index 0ffe569..fd8e769 100644
--- a/app/assets/stylesheets/_forms.scss
+++ b/app/assets/stylesheets/_forms.scss
@@ -11,6 +11,7 @@ input[type="submit"]::-moz-focus-inner {
 
 form ol {
   list-style: none;
+  margin: 0 0 .75em 0;
   margin: 0 0 .75rem 0;
 }
 
@@ -20,12 +21,14 @@ form ol ol {
 
 form ol li {
   list-style-position: outside;
+  margin: 0 0 .75em 0;
   margin: 0 0 .75rem 0;
 }
 
 /*list-style-position fixes IE label margin bug*/
 form ol ol li {
   list-style-position: outside;
+  margin: 0 0 .25em 0;
   margin: 0 0 .25rem 0;
 }
 
@@ -40,6 +43,7 @@ p.inline-errors {
 form ol li.file {
   background: #e1e1e1;
   border: 1px solid #c8c8c8;
+  padding: .75em;
   padding: .75rem;
 }
 
@@ -66,7 +70,9 @@ a.cancel {
 
 .inline-hints {
   color: #666;
+  font-size: .75em;
   font-size: .75rem;
+  margin-bottom: .25em;
   margin-bottom: .25rem;
 }
 
@@ -74,7 +80,9 @@ a.cancel {
 fieldset {
   background: #f1f1f1;
   border: 1px solid #e3e3e3;
+  margin: 0 0 1em 0;
   margin: 0 0 1rem 0;
+  padding: 1rem 1rem .75em 1em;
   padding: 1rem 1rem .75rem 1rem;
 }
 
@@ -86,7 +94,10 @@ fieldset fieldset, fieldset fieldset fieldset {
 legend {
   font-weight: bold;
 }
-.ie6 legend, .ie7 legend { margin-left: .5rem; }
+.ie6 legend, .ie7 legend { 
+  margin-left: .5em; 
+  margin-left: .5rem; 
+}
 
 fieldset.buttons {
   background: inherit;
@@ -120,6 +131,7 @@ input[type="time"],
 input[type="url"],
 input[type="week"] {
   font-size: inherit;
+  padding: .25em;
   padding: .25rem;
 }
 .ie6 input {
@@ -132,6 +144,7 @@ input[disabled='disabled'] {
 }
 
 input[type="checkbox"] {
+  margin: 0 .25em 0 0;
   margin: 0 .25rem 0 0;
   position: relative;
   vertical-align: middle;
@@ -141,6 +154,7 @@ input[type="checkbox"] {
 }
 
 input[type="radio"] {
+  margin: 0 .25em 0 0;
   margin: 0 .25rem 0 0;
   position: relative;
   vertical-align: middle;
@@ -159,17 +173,21 @@ input[type="radio"] {
 /* Textareas */
 textarea {
   font-size: inherit;
+  margin: 0 .5em .5em 0;
   margin: 0 .5rem .5rem 0;
+  padding: .5em;
   padding: .5rem;
   overflow: auto;
 }
 
 /* Select fields */
 fieldset .select select {
+  font-size: .75em;
   font-size: .75rem;
 }
 
 optgroup {
+  margin: 0 0 .5em 0;
   margin: 0 0 .5rem 0;
 }
 
diff --git a/app/assets/stylesheets/_lists.scss b/app/assets/stylesheets/_lists.scss
index 33722bb..f526048 100644
--- a/app/assets/stylesheets/_lists.scss
+++ b/app/assets/stylesheets/_lists.scss
@@ -2,6 +2,7 @@
 
 ul, ol {
   list-style-position: inside;
+  margin-bottom: 1em;
   margin-bottom: 1rem;
 }
 
@@ -15,11 +16,13 @@ ol {
 
 dl {
   line-height: 1.4em;
+  margin-bottom: 1em;
   margin-bottom: 1rem;
 }
 
 dl dt {
   font-weight: bold;
+  margin-top: .5em;
   margin-top: .5rem;
 }
 
@@ -28,6 +31,7 @@ dl dd {
 }
 
 dd {
+  margin-left: .5em;
   margin-left: .5rem;
 }
 
@@ -36,5 +40,6 @@ li {
 }
 
 ol ol, ol ul, ul ul, ul ol {
+  margin-left: .75em;
   margin-left: .75rem;
 }
diff --git a/app/assets/stylesheets/_tables.scss b/app/assets/stylesheets/_tables.scss
index d0f5e07..c274d0d 100644
--- a/app/assets/stylesheets/_tables.scss
+++ b/app/assets/stylesheets/_tables.scss
@@ -1,6 +1,7 @@
 /* Tables */
 
 table {
+  margin-bottom: 1.5em;
   margin-bottom: 1.5rem;
   width: 100%;
 }
@@ -16,12 +17,15 @@ td {
 }
 
 caption, th, td {
+  padding: .25em .75em .25em 0;
   padding: .25rem .75rem .25rem 0;
 }
 
 caption {
   background: #f1f1f1;
+  margin-bottom: .75em;
   margin-bottom: .75rem;
+  padding: .75em 0;
   padding: .75rem 0;
 }
 
diff --git a/app/assets/stylesheets/_type.scss b/app/assets/stylesheets/_type.scss
index 78d7a42..238edce 100644
--- a/app/assets/stylesheets/_type.scss
+++ b/app/assets/stylesheets/_type.scss
@@ -5,32 +5,38 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
+  font-size: 1.75em;
   font-size: 1.75rem;
 }
 
 h2 {
+  font-size: 1.5em;
   font-size: 1.5rem;
 }
 
 h3 {
+  font-size: 1.25em;
   font-size: 1.25rem;
 }
 
 h4 {
+  font-size: 1em;
   font-size: 1rem;
 }
 
 h5 {
+  font-size: .75em;
   font-size: .75rem;
 }
 
 h6 {
+  font-size: .5em;
   font-size: .5rem;
 }
 
 /* Text elements */
 p {
-  line-height: 1.4rem;
+  line-height: 1.4em;
 }
 
 /* Use this if the image is at the top of the <p>. */
@@ -39,6 +45,7 @@ p img.top {
 }
 
 img {
+  margin: 0 0 .75em;
   margin: 0 0 .75rem;
 }
 
@@ -49,6 +56,7 @@ abbr, acronym {
 
 address {
   font-style: italic;
+  margin-top: 1em;
   margin-top: 1rem;
 }
 
@@ -77,7 +85,9 @@ blockquote {
   border-left: 4px solid #d1d1d1;
   color: #666;
   font-style: italic;
+  margin: 1em 0;
   margin: 1rem 0;
+  padding-left: .75em;
   padding-left: .75rem;
 }
 
@@ -95,6 +105,7 @@ dfn {
 }
 
 pre, code {
+  margin: .75em 0;
   margin: .75rem 0;
   white-space: pre; /* CSS2 */
   white-space: pre-wrap; /* CSS 2.1 */
@@ -103,6 +114,8 @@ pre, code {
 
 pre, code, tt {
   font: .75rem 'andale mono', 'monotype.com', 'lucida console', monospace;
+  font-size: .75em;
+  font-size: .75rem;
   line-height: 1.4em;
 }
 
@@ -110,6 +123,7 @@ pre.code {
   background: #000;
   color: #fff;
   padding: 1.25em;
+  padding: 1.25rem;
 }
 
 tt {