Skip to content
This repository

Changed flutie pixel values to ems #35

Merged
merged 2 commits into from almost 2 years ago

2 participants

Edwin Galen Frechette
Edwin

Fixes iOS font sizing - using pixel values is dated

Edwin

Also removed unnecessary margins on headers and paragraphs

Galen Frechette
Collaborator

looks good

Galen Frechette frechg merged commit fd26ed0 into from April 20, 2012
Galen Frechette frechg closed this April 20, 2012
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.
10  app/assets/stylesheets/_defaults.scss
... ...
@@ -1,6 +1,6 @@
1 1
 body {
2 2
   color: #333;
3  
-  font-size: 13px;
  3
+  font-size: 100%;
4 4
   font-family: "helvetica neue", arial, helvetica, "lucida grande", sans-serif;
5 5
 }
6 6
 
@@ -14,8 +14,10 @@ h1, h2, h3, h4, h5, h6 {
14 14
 /* Use a .box to create a padded box inside a column.  */
15 15
 .box {
16 16
   background: #eee;
17  
-  margin-bottom: 16px;
18  
-  padding: 16px;
  17
+  margin-bottom: 1em;
  18
+  margin-bottom: 1rem;
  19
+  padding: 1em;
  20
+  padding: 1rem;
19 21
 }
20 22
 
21 23
 /* Use this to create a horizontal ruler across a column. */
@@ -26,7 +28,7 @@ hr {
26 28
   color: #ddd;
27 29
   float: none;
28 30
   height: 1px;
29  
-  margin: 0 0 12px;
  31
+  margin: 0 0 .75rem;
30 32
   width: 100%;
31 33
 }
32 34
 
12  app/assets/stylesheets/_flashes.scss
... ...
@@ -1,11 +1,13 @@
1 1
 /* Success, error & notice boxes for messages and errors. */
2 2
 div.error, div.notice, div.success, #flash_failure, #flash_success, #flash_notice {
3 3
   border: 1px solid #ddd;
4  
-  -moz-border-radius: 8px;
5  
-  -webkit-border-radius: 8px;
6  
-  border-radius: 8px;
7  
-  margin-bottom: 12px;
8  
-  padding: 10px;
  4
+  -moz-border-radius: .5rem;
  5
+  -webkit-border-radius: .5rem;
  6
+  border-radius: .5rem;
  7
+  margin-bottom: .75em;
  8
+  margin-bottom: .75rem;
  9
+  padding: .75em;
  10
+  padding: .75rem;
9 11
 }
10 12
 
11 13
 div.error, #flash_failure {
56  app/assets/stylesheets/_forms.scss
@@ -11,7 +11,8 @@ input[type="submit"]::-moz-focus-inner {
11 11
 
12 12
 form ol {
13 13
   list-style: none;
14  
-  margin: 0 0 12px 0;
  14
+  margin: 0 0 .75em 0;
  15
+  margin: 0 0 .75rem 0;
15 16
 }
16 17
 
17 18
 form ol ol {
@@ -20,13 +21,15 @@ form ol ol {
20 21
 
21 22
 form ol li {
22 23
   list-style-position: outside;
23  
-  margin: 0 0 12px 0;
  24
+  margin: 0 0 .75em 0;
  25
+  margin: 0 0 .75rem 0;
24 26
 }
25 27
 
26 28
 /*list-style-position fixes IE label margin bug*/
27 29
 form ol ol li {
28 30
   list-style-position: outside;
29  
-  margin: 0 0 4px 0;
  31
+  margin: 0 0 .25em 0;
  32
+  margin: 0 0 .25rem 0;
30 33
 }
31 34
 
32 35
 form ol li.error input {
@@ -40,7 +43,8 @@ p.inline-errors {
40 43
 form ol li.file {
41 44
   background: #e1e1e1;
42 45
   border: 1px solid #c8c8c8;
43  
-  padding: 10px;
  46
+  padding: .75em;
  47
+  padding: .75rem;
44 48
 }
45 49
 
46 50
 form abbr {
@@ -66,16 +70,20 @@ a.cancel {
66 70
 
67 71
 .inline-hints {
68 72
   color: #666;
69  
-  font-size: 11px;
70  
-  margin-bottom: 4px;
  73
+  font-size: .75em;
  74
+  font-size: .75rem;
  75
+  margin-bottom: .25em;
  76
+  margin-bottom: .25rem;
71 77
 }
72 78
 
73 79
 /* Fieldsets */
74 80
 fieldset {
75 81
   background: #f1f1f1;
76 82
   border: 1px solid #e3e3e3;
77  
-  margin: 0 0 16px 0;
78  
-  padding: 16px 16px 12px 16px;
  83
+  margin: 0 0 1em 0;
  84
+  margin: 0 0 1rem 0;
  85
+  padding: 1rem 1rem .75em 1em;
  86
+  padding: 1rem 1rem .75rem 1rem;
79 87
 }
80 88
 
81 89
 fieldset fieldset, fieldset fieldset fieldset {
@@ -86,7 +94,10 @@ fieldset fieldset, fieldset fieldset fieldset {
86 94
 legend {
87 95
   font-weight: bold;
88 96
 }
89  
-.ie6 legend, .ie7 legend { margin-left: -7px; }
  97
+.ie6 legend, .ie7 legend { 
  98
+  margin-left: .5em; 
  99
+  margin-left: .5rem; 
  100
+}
90 101
 
91 102
 fieldset.buttons {
92 103
   background: inherit;
@@ -120,8 +131,8 @@ input[type="time"],
120 131
 input[type="url"],
121 132
 input[type="week"] {
122 133
   font-size: inherit;
123  
-  padding: 3px 2px;
124  
-  width: 300px;
  134
+  padding: .25em;
  135
+  padding: .25rem;
125 136
 }
126 137
 .ie6 input {
127 138
   vertical-align: text-bottom;
@@ -133,9 +144,9 @@ input[disabled='disabled'] {
133 144
 }
134 145
 
135 146
 input[type="checkbox"] {
136  
-  margin: 0 3px 0 0;
  147
+  margin: 0 .25em 0 0;
  148
+  margin: 0 .25rem 0 0;
137 149
   position: relative;
138  
-  top: -2px;
139 150
   vertical-align: middle;
140 151
 }
141 152
 .ie7 input[type="checkbox"] {
@@ -143,9 +154,9 @@ input[type="checkbox"] {
143 154
 }
144 155
 
145 156
 input[type="radio"] {
146  
-  margin: 0 3px 0 0;
  157
+  margin: 0 .25em 0 0;
  158
+  margin: 0 .25rem 0 0;
147 159
   position: relative;
148  
-  top: -2px;
149 160
   vertical-align: middle;
150 161
 }
151 162
 
@@ -162,21 +173,22 @@ input[type="radio"] {
162 173
 /* Textareas */
163 174
 textarea {
164 175
   font-size: inherit;
165  
-  height: 200px;
166  
-  margin: 0 6px 6px 0;
167  
-  padding: 5px;
168  
-  width: 440px;
  176
+  margin: 0 .5em .5em 0;
  177
+  margin: 0 .5rem .5rem 0;
  178
+  padding: .5em;
  179
+  padding: .5rem;
169 180
   overflow: auto;
170 181
 }
171 182
 
172 183
 /* Select fields */
173 184
 fieldset .select select {
174  
-  width: 200px;
175  
-  font-size: 11px;
  185
+  font-size: .75em;
  186
+  font-size: .75rem;
176 187
 }
177 188
 
178 189
 optgroup {
179  
-  margin: 0 0 6px 0;
  190
+  margin: 0 0 .5em 0;
  191
+  margin: 0 0 .5rem 0;
180 192
 }
181 193
 
182 194
 /* Date & Time */
21  app/assets/stylesheets/_lists.scss
@@ -2,7 +2,8 @@
2 2
 
3 3
 ul, ol {
4 4
   list-style-position: inside;
5  
-  margin-bottom:  16px;
  5
+  margin-bottom: 1em;
  6
+  margin-bottom: 1rem;
6 7
 }
7 8
 
8 9
 ul {
@@ -14,27 +15,31 @@ ol {
14 15
 }
15 16
 
16 17
 dl {
17  
-  line-height: 1.4;
18  
-  margin-bottom: 16px;
  18
+  line-height: 1.4em;
  19
+  margin-bottom: 1em;
  20
+  margin-bottom: 1rem;
19 21
 }
20 22
 
21 23
 dl dt {
22 24
   font-weight: bold;
23  
-  margin-top: 6px;
  25
+  margin-top: .5em;
  26
+  margin-top: .5rem;
24 27
 }
25 28
 
26 29
 dl dd {
27  
-  margin-bottom: 0em;
  30
+  margin-bottom: 0;
28 31
 }
29 32
 
30 33
 dd {
31  
-  margin-left: 6px;
  34
+  margin-left: .5em;
  35
+  margin-left: .5rem;
32 36
 }
33 37
 
34 38
 li {
35  
-  line-height: 1.4;
  39
+  line-height: 1.4em;
36 40
 }
37 41
 
38 42
 ol ol, ol ul, ul ul, ul ol {
39  
-  margin-left: 12px;
  43
+  margin-left: .75em;
  44
+  margin-left: .75rem;
40 45
 }
12  app/assets/stylesheets/_tables.scss
... ...
@@ -1,7 +1,8 @@
1 1
 /* Tables */
2 2
 
3 3
 table {
4  
-  margin-bottom: 24px;
  4
+  margin-bottom: 1.5em;
  5
+  margin-bottom: 1.5rem;
5 6
   width: 100%;
6 7
 }
7 8
 
@@ -16,13 +17,16 @@ td {
16 17
 }
17 18
 
18 19
 caption, th, td {
19  
-  padding: 4px 10px 4px 0;
  20
+  padding: .25em .75em .25em 0;
  21
+  padding: .25rem .75rem .25rem 0;
20 22
 }
21 23
 
22 24
 caption {
23 25
   background: #f1f1f1;
24  
-  margin-bottom: 12px;
25  
-  padding: 10px 0;
  26
+  margin-bottom: .75em;
  27
+  margin-bottom: .75rem;
  28
+  padding: .75em 0;
  29
+  padding: .75rem 0;
26 30
 }
27 31
 
28 32
 tr, td, th {
60  app/assets/stylesheets/_type.scss
... ...
@@ -1,46 +1,42 @@
1 1
 /* Headings */
2 2
 h1, h2, h3, h4, h5, h6 {
3 3
   font-weight: bold;
  4
+  line-height: 1.2em;
4 5
 }
5 6
 
6 7
 h1 {
7  
-  font-size: 28px;
8  
-  line-height: 1.2;
9  
-  margin-bottom: 12px;
  8
+  font-size: 1.75em;
  9
+  font-size: 1.75rem;
10 10
 }
11 11
 
12 12
 h2 {
13  
-  font-size: 24px;
14  
-  line-height: 1.2;
15  
-  margin-bottom: 6px;
  13
+  font-size: 1.5em;
  14
+  font-size: 1.5rem;
16 15
 }
17 16
 
18 17
 h3 {
19  
-  font-size: 18px;
20  
-  line-height: 1.2;
21  
-  margin-bottom: 4px;
  18
+  font-size: 1.25em;
  19
+  font-size: 1.25rem;
22 20
 }
23 21
 
24 22
 h4 {
25  
-  font-size: 16px;
26  
-  line-height: 1.3;
27  
-  margin-bottom: 4px;
  23
+  font-size: 1em;
  24
+  font-size: 1rem;
28 25
 }
29 26
 
30 27
 h5 {
31  
-  font-size: 14px;
32  
-  margin-bottom: 4px;
  28
+  font-size: .75em;
  29
+  font-size: .75rem;
33 30
 }
34 31
 
35 32
 h6 {
36  
-  font-size: 12px;
37  
-  margin-bottom: 4px;
  33
+  font-size: .5em;
  34
+  font-size: .5rem;
38 35
 }
39 36
 
40 37
 /* Text elements */
41 38
 p {
42  
-  line-height: 1.4;
43  
-  margin-bottom: 12px;
  39
+  line-height: 1.4em;
44 40
 }
45 41
 
46 42
 /* Use this if the image is at the top of the <p>. */
@@ -49,7 +45,8 @@ p img.top {
49 45
 }
50 46
 
51 47
 img {
52  
-  margin: 0 0 12px;
  48
+  margin: 0 0 .75em;
  49
+  margin: 0 0 .75rem;
53 50
 }
54 51
 
55 52
 abbr, acronym {
@@ -59,7 +56,8 @@ abbr, acronym {
59 56
 
60 57
 address {
61 58
   font-style: italic;
62  
-  margin-top: 16px;
  59
+  margin-top: 1em;
  60
+  margin-top: 1rem;
63 61
 }
64 62
 
65 63
 del {
@@ -87,8 +85,10 @@ blockquote {
87 85
   border-left: 4px solid #d1d1d1;
88 86
   color: #666;
89 87
   font-style: italic;
90  
-  margin: 16px 0;
91  
-  padding-left: 12px;
  88
+  margin: 1em 0;
  89
+  margin: 1rem 0;
  90
+  padding-left: .75em;
  91
+  padding-left: .75rem;
92 92
 }
93 93
 
94 94
 strong {
@@ -105,25 +105,29 @@ dfn {
105 105
 }
106 106
 
107 107
 pre, code {
108  
-  margin: 12px 0;
  108
+  margin: .75em 0;
  109
+  margin: .75rem 0;
109 110
   white-space: pre; /* CSS2 */
110 111
   white-space: pre-wrap; /* CSS 2.1 */
111 112
   word-wrap: break-word; /* IE */
112 113
 }
113 114
 
114 115
 pre, code, tt {
115  
-  font: 12px 'andale mono', 'monotype.com', 'lucida console', monospace;
116  
-  line-height: 1.5;
  116
+  font: .75rem 'andale mono', 'monotype.com', 'lucida console', monospace;
  117
+  font-size: .75em;
  118
+  font-size: .75rem;
  119
+  line-height: 1.4em;
117 120
 }
118 121
 
119 122
 pre.code {
120 123
   background: #000;
121 124
   color: #fff;
122  
-  padding: 20px;
  125
+  padding: 1.25em;
  126
+  padding: 1.25rem;
123 127
 }
124 128
 
125 129
 tt {
126 130
   display: block;
127  
-  line-height: 1.5;
128  
-  margin: 16px 0;
  131
+  line-height: 1.4em;
  132
+  margin: 1rem 0;
129 133
 }
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.