Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Changed flutie pixel values to ems #35

Merged
merged 2 commits into from

2 participants

@ehmorris

Fixes iOS font sizing - using pixel values is dated

@ehmorris

Also removed unnecessary margins on headers and paragraphs

@frechg

looks good

@frechg frechg merged commit fd26ed0 into thoughtbot:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
10 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,10 @@ 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: 1em;
+ margin-bottom: 1rem;
+ padding: 1em;
+ padding: 1rem;
}
/* Use this to create a horizontal ruler across a column. */
@@ -26,7 +28,7 @@ hr {
color: #ddd;
float: none;
height: 1px;
- margin: 0 0 12px;
+ margin: 0 0 .75rem;
width: 100%;
}
View
12 app/assets/stylesheets/_flashes.scss
@@ -1,11 +1,13 @@
/* 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: .75em;
+ margin-bottom: .75rem;
+ padding: .75em;
+ padding: .75rem;
}
div.error, #flash_failure {
View
56 app/assets/stylesheets/_forms.scss
@@ -11,7 +11,8 @@ input[type="submit"]::-moz-focus-inner {
form ol {
list-style: none;
- margin: 0 0 12px 0;
+ margin: 0 0 .75em 0;
+ margin: 0 0 .75rem 0;
}
form ol ol {
@@ -20,13 +21,15 @@ form ol ol {
form ol li {
list-style-position: outside;
- margin: 0 0 12px 0;
+ 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 4px 0;
+ margin: 0 0 .25em 0;
+ margin: 0 0 .25rem 0;
}
form ol li.error input {
@@ -40,7 +43,8 @@ p.inline-errors {
form ol li.file {
background: #e1e1e1;
border: 1px solid #c8c8c8;
- padding: 10px;
+ padding: .75em;
+ padding: .75rem;
}
form abbr {
@@ -66,16 +70,20 @@ a.cancel {
.inline-hints {
color: #666;
- font-size: 11px;
- margin-bottom: 4px;
+ font-size: .75em;
+ font-size: .75rem;
+ margin-bottom: .25em;
+ margin-bottom: .25rem;
}
/* Fieldsets */
fieldset {
background: #f1f1f1;
border: 1px solid #e3e3e3;
- margin: 0 0 16px 0;
- padding: 16px 16px 12px 16px;
+ margin: 0 0 1em 0;
+ margin: 0 0 1rem 0;
+ padding: 1rem 1rem .75em 1em;
+ padding: 1rem 1rem .75rem 1rem;
}
fieldset fieldset, fieldset fieldset fieldset {
@@ -86,7 +94,10 @@ fieldset fieldset, fieldset fieldset fieldset {
legend {
font-weight: bold;
}
-.ie6 legend, .ie7 legend { margin-left: -7px; }
+.ie6 legend, .ie7 legend {
+ margin-left: .5em;
+ margin-left: .5rem;
+}
fieldset.buttons {
background: inherit;
@@ -120,8 +131,8 @@ input[type="time"],
input[type="url"],
input[type="week"] {
font-size: inherit;
- padding: 3px 2px;
- width: 300px;
+ padding: .25em;
+ padding: .25rem;
}
.ie6 input {
vertical-align: text-bottom;
@@ -133,9 +144,9 @@ input[disabled='disabled'] {
}
input[type="checkbox"] {
- margin: 0 3px 0 0;
+ margin: 0 .25em 0 0;
+ margin: 0 .25rem 0 0;
position: relative;
- top: -2px;
vertical-align: middle;
}
.ie7 input[type="checkbox"] {
@@ -143,9 +154,9 @@ input[type="checkbox"] {
}
input[type="radio"] {
- margin: 0 3px 0 0;
+ margin: 0 .25em 0 0;
+ margin: 0 .25rem 0 0;
position: relative;
- top: -2px;
vertical-align: middle;
}
@@ -162,21 +173,22 @@ input[type="radio"] {
/* Textareas */
textarea {
font-size: inherit;
- height: 200px;
- margin: 0 6px 6px 0;
- padding: 5px;
- width: 440px;
+ margin: 0 .5em .5em 0;
+ margin: 0 .5rem .5rem 0;
+ padding: .5em;
+ padding: .5rem;
overflow: auto;
}
/* Select fields */
fieldset .select select {
- width: 200px;
- font-size: 11px;
+ font-size: .75em;
+ font-size: .75rem;
}
optgroup {
- margin: 0 0 6px 0;
+ margin: 0 0 .5em 0;
+ margin: 0 0 .5rem 0;
}
/* Date & Time */
View
21 app/assets/stylesheets/_lists.scss
@@ -2,7 +2,8 @@
ul, ol {
list-style-position: inside;
- margin-bottom: 16px;
+ margin-bottom: 1em;
+ margin-bottom: 1rem;
}
ul {
@@ -14,27 +15,31 @@ ol {
}
dl {
- line-height: 1.4;
- margin-bottom: 16px;
+ line-height: 1.4em;
+ margin-bottom: 1em;
+ margin-bottom: 1rem;
}
dl dt {
font-weight: bold;
- margin-top: 6px;
+ margin-top: .5em;
+ margin-top: .5rem;
}
dl dd {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
dd {
- margin-left: 6px;
+ margin-left: .5em;
+ 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: .75em;
+ margin-left: .75rem;
}
View
12 app/assets/stylesheets/_tables.scss
@@ -1,7 +1,8 @@
/* Tables */
table {
- margin-bottom: 24px;
+ margin-bottom: 1.5em;
+ margin-bottom: 1.5rem;
width: 100%;
}
@@ -16,13 +17,16 @@ td {
}
caption, th, td {
- padding: 4px 10px 4px 0;
+ padding: .25em .75em .25em 0;
+ padding: .25rem .75rem .25rem 0;
}
caption {
background: #f1f1f1;
- margin-bottom: 12px;
- padding: 10px 0;
+ margin-bottom: .75em;
+ margin-bottom: .75rem;
+ padding: .75em 0;
+ padding: .75rem 0;
}
tr, td, th {
View
60 app/assets/stylesheets/_type.scss
@@ -1,46 +1,42 @@
/* 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.75em;
+ font-size: 1.75rem;
}
h2 {
- font-size: 24px;
- line-height: 1.2;
- margin-bottom: 6px;
+ font-size: 1.5em;
+ font-size: 1.5rem;
}
h3 {
- font-size: 18px;
- line-height: 1.2;
- margin-bottom: 4px;
+ font-size: 1.25em;
+ font-size: 1.25rem;
}
h4 {
- font-size: 16px;
- line-height: 1.3;
- margin-bottom: 4px;
+ font-size: 1em;
+ font-size: 1rem;
}
h5 {
- font-size: 14px;
- margin-bottom: 4px;
+ font-size: .75em;
+ font-size: .75rem;
}
h6 {
- font-size: 12px;
- margin-bottom: 4px;
+ font-size: .5em;
+ font-size: .5rem;
}
/* Text elements */
p {
- line-height: 1.4;
- margin-bottom: 12px;
+ line-height: 1.4em;
}
/* Use this if the image is at the top of the <p>. */
@@ -49,7 +45,8 @@ p img.top {
}
img {
- margin: 0 0 12px;
+ margin: 0 0 .75em;
+ margin: 0 0 .75rem;
}
abbr, acronym {
@@ -59,7 +56,8 @@ abbr, acronym {
address {
font-style: italic;
- margin-top: 16px;
+ margin-top: 1em;
+ margin-top: 1rem;
}
del {
@@ -87,8 +85,10 @@ blockquote {
border-left: 4px solid #d1d1d1;
color: #666;
font-style: italic;
- margin: 16px 0;
- padding-left: 12px;
+ margin: 1em 0;
+ margin: 1rem 0;
+ padding-left: .75em;
+ padding-left: .75rem;
}
strong {
@@ -105,25 +105,29 @@ dfn {
}
pre, code {
- margin: 12px 0;
+ margin: .75em 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;
+ font-size: .75em;
+ font-size: .75rem;
+ line-height: 1.4em;
}
pre.code {
background: #000;
color: #fff;
- padding: 20px;
+ padding: 1.25em;
+ padding: 1.25rem;
}
tt {
display: block;
- line-height: 1.5;
- margin: 16px 0;
+ line-height: 1.4em;
+ margin: 1rem 0;
}
Something went wrong with that request. Please try again.