webby 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. data/History.txt +5 -0
  2. data/Manifest.txt +0 -4
  3. data/README.txt +31 -8
  4. data/Rakefile +2 -5
  5. data/data/content/css/blueprint/Readme.txt +10 -3
  6. data/data/content/css/blueprint/lib/buttons.css +2 -2
  7. data/data/content/css/blueprint/lib/compressed.css +112 -102
  8. data/data/content/css/blueprint/lib/grid.css +78 -106
  9. data/data/content/css/blueprint/lib/img/grid.png +0 -0
  10. data/data/content/css/blueprint/lib/reset.css +6 -3
  11. data/data/content/css/blueprint/lib/typography.css +55 -53
  12. data/data/content/css/blueprint/print.css +9 -5
  13. data/data/content/css/blueprint/screen.css +15 -19
  14. data/data/content/css/coderay.css +1 -1
  15. data/lib/webby.rb +2 -2
  16. data/lib/webby/coderay_filter.rb +3 -2
  17. data/lib/webby/renderer.rb +10 -10
  18. data/tasks/setup.rb +3 -1
  19. data/website/content/css/blueprint/lib/buttons.css +2 -2
  20. data/website/content/css/blueprint/lib/compressed.css +112 -102
  21. data/website/content/css/blueprint/lib/grid.css +78 -106
  22. data/website/content/css/blueprint/lib/img/grid.png +0 -0
  23. data/website/content/css/blueprint/lib/reset.css +6 -3
  24. data/website/content/css/blueprint/lib/typography.css +55 -53
  25. data/website/content/css/blueprint/print.css +9 -5
  26. data/website/content/css/blueprint/screen.css +15 -19
  27. data/website/content/css/site.css +15 -4
  28. data/website/content/index.txt +13 -0
  29. data/website/content/tips_and_tricks.txt +29 -27
  30. data/website/layouts/default.rhtml +0 -3
  31. metadata +12 -7
  32. data/data/content/css/blueprint/lib/img/baseline-black.png +0 -0
  33. data/data/content/css/blueprint/lib/img/baseline.png +0 -0
  34. data/website/content/css/blueprint/lib/img/baseline-black.png +0 -0
  35. data/website/content/css/blueprint/lib/img/baseline.png +0 -0
@@ -1,26 +1,28 @@
1
1
  /* --------------------------------------------------------------
2
2
 
3
3
  Grid.css
4
- * Creates an easy to use grid of 14 columns.
4
+ * Version: 0.5 (28/8/2007)
5
+ * Website: http://code.google.com/p/blueprintcss/
5
6
 
6
7
  Based on work by:
8
+ * Olav Bjorkoy [bjorkoy.com]
7
9
  * Nathan Borror [playgroundblues.com]
8
10
  * Jeff Croft [jeffcroft.com]
9
11
  * Christian Metts [mintchaos.com]
10
12
  * Khoi Vinh [subtraction.com]
11
13
 
12
- By default, the grid is 960px wide, with columns
13
- spanning 50px, and a 20px margin between columns.
14
+ By default, the grid is 950px wide, with 24 columns
15
+ spanning 30px, and a 10px margin between columns.
14
16
 
15
17
  If you need fewer or more columns, use this
16
18
  formula to find the new total width:
17
19
 
18
- Total width = (columns * 70) - 20
20
+ Total width = (columns * 30) - 10
19
21
 
20
22
  -------------------------------------------------------------- */
21
23
 
22
24
  body {
23
- text-align: center; /* IE Fix */
25
+ text-align: center; /* IE6 Fix */
24
26
  margin:36px 0;
25
27
  }
26
28
 
@@ -30,7 +32,7 @@ body {
30
32
  position: relative;
31
33
  padding: 0;
32
34
  margin: 0 auto; /* Centers layout */
33
- width: 960px; /* Total width */
35
+ width: 950px; /* Total width */
34
36
  }
35
37
 
36
38
 
@@ -43,135 +45,105 @@ body {
43
45
 
44
46
  .column {
45
47
  float: left;
46
- margin: 0 10px;
48
+ margin-right: 10px;
47
49
  padding: 0;
48
50
  }
49
51
  * html .column { overflow-x: hidden; } /* IE6 fix */
50
52
 
51
-
52
53
  /* Add this class to a column if you want a border on its
53
54
  right hand side. This should be customized to fit your needs. */
54
55
 
55
56
  .border {
56
- padding-right: 9px;
57
- margin-right: 0;
57
+ padding-right: 4px;
58
+ margin-right: 5px;
58
59
  border-right: 1px solid #ddd;
59
60
  }
60
61
 
61
62
 
62
- /* The first and last elements in a multi-column
63
- block needs one of these classes each. */
64
-
65
- .first { margin-left: 0; }
66
- .last { margin-right: 0; }
67
-
68
-
69
63
  /* Use these classes to set how wide a column should be. */
70
- .span-1 { width: 50px; }
71
- .span-2 { width: 120px; }
72
- .span-3 { width: 190px; }
73
- .span-4 { width: 260px; }
74
- .span-5 { width: 330px; }
75
- .span-6 { width: 400px; }
76
- .span-7 { width: 470px; }
77
- .span-8 { width: 540px; }
78
- .span-9 { width: 610px; }
79
- .span-10 { width: 680px; }
80
- .span-11 { width: 750px; }
81
- .span-12 { width: 820px; }
82
- .span-13 { width: 890px; }
83
- .span-14 { width: 960px; margin: 0; }
64
+ .span-1 { width: 30px; }
65
+ .span-2 { width: 70px; }
66
+ .span-3 { width: 110px; }
67
+ .span-4 { width: 150px; }
68
+ .span-5 { width: 190px; }
69
+ .span-6 { width: 230px; }
70
+ .span-7 { width: 270px; }
71
+ .span-8 { width: 310px; }
72
+ .span-9 { width: 350px; }
73
+ .span-10 { width: 390px; }
74
+ .span-11 { width: 430px; }
75
+ .span-12 { width: 470px; }
76
+ .span-13 { width: 510px; }
77
+ .span-14 { width: 550px; }
78
+ .span-15 { width: 590px; }
79
+ .span-16 { width: 630px; }
80
+ .span-17 { width: 670px; }
81
+ .span-18 { width: 710px; }
82
+ .span-19 { width: 750px; }
83
+ .span-20 { width: 790px; }
84
+ .span-21 { width: 830px; }
85
+ .span-22 { width: 870px; }
86
+ .span-23 { width: 910px; }
87
+ .span-24 { width: 950px; margin: 0; }
88
+
89
+ /* The last element in a multi-column block needs this class. */
90
+ .last { margin-right: 0; }
84
91
 
85
92
  /* Add these to a column to append empty cols. */
86
- .append-1 { padding-right: 70px; }
87
- .append-2 { padding-right: 140px; }
88
- .append-3 { padding-right: 210px; }
89
- .append-4 { padding-right: 280px; }
90
- .append-5 { padding-right: 350px; }
91
- .append-6 { padding-right: 420px; }
92
- .append-7 { padding-right: 490px; }
93
- .append-8 { padding-right: 560px; }
94
- .append-9 { padding-right: 630px; }
95
- .append-10 { padding-right: 700px; }
96
- .append-11 { padding-right: 770px; }
97
- .append-12 { padding-right: 840px; }
98
- .append-13 { padding-right: 910px; }
93
+ .append-1 { padding-right: 40px; }
94
+ .append-2 { padding-right: 80px; }
95
+ .append-3 { padding-right: 120px; }
96
+ .append-4 { padding-right: 160px; }
97
+ .append-5 { padding-right: 200px; }
98
+ .append-6 { padding-right: 240px; }
99
+ .append-7 { padding-right: 280px; }
100
+ .append-8 { padding-right: 320px; }
101
+ .append-9 { padding-right: 360px; }
102
+ .append-10 { padding-right: 400px; }
103
+ .append-11 { padding-right: 440px; }
104
+ .append-12 { padding-right: 480px; }
99
105
 
100
106
  /* Add these to a column to prepend empty cols. */
101
- .prepend-1 { padding-left: 70px; }
102
- .prepend-2 { padding-left: 140px; }
103
- .prepend-3 { padding-left: 210px; }
104
- .prepend-4 { padding-left: 280px; }
105
- .prepend-5 { padding-left: 350px; }
106
- .prepend-6 { padding-left: 420px; }
107
- .prepend-7 { padding-left: 490px; }
108
- .prepend-8 { padding-left: 560px; }
109
- .prepend-9 { padding-left: 630px; }
110
- .prepend-10 { padding-left: 700px; }
111
- .prepend-11 { padding-left: 770px; }
112
- .prepend-12 { padding-left: 840px; }
113
- .prepend-13 { padding-left: 910px; }
114
-
115
-
116
- /* Use a .box to create a padded box inside a column.
117
- Sticking to the the baseline. */
118
-
119
- .box {
120
- padding: 1.5em;
121
- margin-bottom: 1.5em;
122
- background: #f0f0f0;
123
- }
124
-
125
-
126
- /* Clearing floats without extra markup
127
- Based on How To Clear Floats Without Structural Markup by PiE
128
- [http://www.positioniseverything.net/easyclearing.html] */
129
-
130
- .clear { display: inline-block; }
131
- .clear:after, .container:after {
132
- content: ".";
133
- display: block;
134
- height: 0;
135
- clear: both;
136
- visibility: hidden;
137
- }
138
- * html .clear { height: 1%; }
139
- .clear { display: block; }
107
+ .prepend-1 { padding-left: 40px; }
108
+ .prepend-2 { padding-left: 80px; }
109
+ .prepend-3 { padding-left: 120px; }
110
+ .prepend-4 { padding-left: 160px; }
111
+ .prepend-5 { padding-left: 200px; }
112
+ .prepend-6 { padding-left: 240px; }
113
+ .prepend-7 { padding-left: 280px; }
114
+ .prepend-8 { padding-left: 320px; }
115
+ .prepend-9 { padding-left: 360px; }
116
+ .prepend-10 { padding-left: 400px; }
117
+ .prepend-11 { padding-left: 440px; }
118
+ .prepend-12 { padding-left: 480px; }
140
119
 
141
120
 
142
- /* Nudge your elements [subtraction.com/archives/2007/0606_nudge_your_e.php]:
143
- All block elements (not hr) inside a col should have a 5px padding on each side.
144
- (Not everyone wants this, but feel free to uncomment if you do.)
145
-
146
- p,ul,ol,dl,h1,h2,h3,h4,h5,h6,
147
- caption,pre,blockquote,input,textarea {
148
- padding-left: 5px;
149
- padding-right: 5px;
150
- }
151
- div, table {
152
- margin-left: 5px;
153
- margin-right: 5px;
154
- padding: 0;
155
- } */
156
-
157
121
 
158
122
  /* Images
159
123
  -------------------------------------------------------------- */
160
124
 
161
125
  /* Remember the baseline (typography.css). */
162
- img { margin: 0 0 1.5em 0; }
126
+ img { margin: 0 0 18px 0; }
163
127
 
164
128
 
165
129
  /* Use these classes to make an image flow into the column before
166
130
  or after it. This techique can also be used on other objects. */
167
131
 
168
- .pull-1 { margin-left: -70px; }
169
- .pull-2 { margin-left: -140px; }
170
- .pull-3 { margin-left: -210px; }
132
+ .pull-1 { margin-left: -40px; }
133
+ .pull-2 { margin-left: -80px; }
134
+ .pull-3 { margin-left: -120px; }
135
+ .pull-4 { margin-left: -160px; }
171
136
 
172
- .push-0 { margin: 0 0 0 1.5em; float: right; } /* Right aligns the image. */
173
- .push-1 { margin: 0 -88px 0 1.5em; float: right; }
174
- .push-2 { margin: 0 -158px 0 1.5em; float: right; }
175
- .push-3 { margin: 0 -228px 0 1.5em; float: right; }
137
+ .push-0 { margin: 0 0 0 18px; float: right; } /* Right aligns the image. */
138
+ .push-1 { margin: 0 -40px 0 18px; float: right; }
139
+ .push-2 { margin: 0 -80px 0 18px; float: right; }
140
+ .push-3 { margin: 0 -120px 0 18px; float: right; }
141
+ .push-4 { margin: 0 -160px 0 18px; float: right; }
142
+
143
+ .pull-1, .pull-2, .pull-3, .pull-4,
144
+ .push-1, .push-2, .push-3, .push-4 {
145
+ overflow-x: visible; /* Overrides previous IE6 fix (needs improvement). */
146
+ }
176
147
 
148
+ /* EOF */
177
149
 
@@ -1,9 +1,10 @@
1
1
  /* --------------------------------------------------------------
2
2
 
3
3
  Reset.css
4
- * Resets default browser CSS styles.
4
+ * Version: 0.5 (28/8/2007)
5
+ * Website: http://code.google.com/p/blueprintcss/
5
6
 
6
- Original by Erik Meyer:
7
+ Original by Eric Meyer:
7
8
  * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
8
9
 
9
10
  -------------------------------------------------------------- */
@@ -12,7 +13,7 @@ html, body, div, span, applet, object, iframe,
12
13
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
13
14
  a, abbr, acronym, address, big, cite, code,
14
15
  del, dfn, em, font, img, ins, kbd, q, s, samp,
15
- small, strike, strong, sub, sup, tt, var,
16
+ strike, strong, sub, sup, tt, var,
16
17
  dl, dt, dd, ol, ul, li,
17
18
  fieldset, form, label, legend,
18
19
  table, caption, tbody, tfoot, thead, tr, th, td {
@@ -35,3 +36,5 @@ caption, th, td { text-align: left; font-weight: normal; }
35
36
  /* Remove possible quote marks (") from <q>, <blockquote>. */
36
37
  blockquote:before, blockquote:after, q:before, q:after { content: ""; }
37
38
  blockquote, q { quotes: "" ""; }
39
+
40
+ /* EOF */
@@ -1,9 +1,11 @@
1
1
  /* --------------------------------------------------------------
2
2
 
3
3
  Typography.css
4
- * Sets some default typography.
4
+ * Version: 0.5 (28/8/2007)
5
+ * Website: http://code.google.com/p/blueprintcss/
5
6
 
6
7
  Based on work by:
8
+ * Olav Bjorkoy [bjorkoy.com]
7
9
  * Nathan Borror [playgroundblues.com]
8
10
  * Jeff Croft [jeffcroft.com]
9
11
  * Christian Metts [mintchaos.com]
@@ -12,65 +14,59 @@
12
14
  Read more about using a baseline here:
13
15
  * alistapart.com/articles/settingtypeontheweb
14
16
 
15
- -------------------------------------------------------------- */
17
+ -------------------------------------------------------------- */
16
18
 
17
- body {
18
- font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
19
- line-height: 1.5; /* Unitless for proper inheritance */
19
+ body {
20
+ font-size: 12px;
21
+ line-height: 18px; /* All elements should be a multiple of this value. */
20
22
  }
21
23
 
22
- /* This is where you set your desired font size. The line-height
23
- and vertical margins are automatically calculated from this.
24
-
25
- You have to add an extra calculation here because of IE, so that
26
- all users may resize text manually in their browsers.
27
-
28
- The top one is for IE: The percentage is of 16px (default IE text size)
29
- 10px is 62.5%, 12px is 75%, 13px is 81.25%, and so forth).
30
- The second value is what all other browsers see (the wanted font size). */
31
-
32
- body { font-size: 75%; } /* IE */
33
- html > body { font-size: 12px; } /* Other browsers */
24
+
25
+ /* Default fonts */
26
+ h1,h2,h3,
27
+ h4,h5,h6 { font-family: Constantia, "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, serif; }
28
+ body { font-family: Frutiger, Univers, "Helvetica Neue", "Lucida Grande", Calibri, Helvetica, Verdana, sans-serif; }
29
+ pre { font-family: Corbel, Verdana, "Bitstream Vera Sans", sans-serif; }
30
+ code { font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Monaco, Courier, monospace; }
34
31
 
35
32
 
36
33
  /* Headings
37
34
  -------------------------------------------------------------- */
38
35
 
39
36
  h1,h2,h3,h4,h5,h6 {
40
- font-family: Helvetica, Arial, "Lucida Grande", Verdana, sans-serif;
41
37
  color:#111;
42
38
  clear:both;
43
39
  }
44
40
 
45
- h1 { font-size: 3em; }
46
- h2 { font-size: 2em; }
47
- h3 { font-size: 1.5em; line-height:2; }
48
- h4 { font-size: 1.2em; line-height:1.25; font-weight:bold; }
49
- h5 { font-size: 1em; font-weight:bold; }
50
- h6 { font-size: 1em; }
41
+ h1 { font-size: 30px; line-height:36px; padding:0 0 18px 0; }
42
+ h2 { font-size: 20px; line-height:36px; }
43
+ h3 { font-size: 16px; line-height:36px; }
44
+ h4 { font-size: 14px; font-weight:bold; }
45
+ h5 { font-size: 12px; font-weight:bold; }
46
+ h6 { font-size: 12px; }
51
47
 
52
48
 
53
49
  /* Text elements
54
50
  -------------------------------------------------------------- */
55
51
 
56
- p { margin: 0 0 1.5em 0; text-align:justify; }
52
+ p { margin: 0 0 18px 0; text-align:justify; }
57
53
  p.last { margin-bottom:0; }
58
- p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding:0; }
54
+ p img { float: left; margin:18px 18px 18px 0; padding:0; }
59
55
  p img.top { margin-top:0; } /* Use this if the image is at the top of the <p>. */
60
56
 
61
- ul, ol { margin: 0 0 1.5em 1.5em; }
57
+ a { color: #125AA7; text-decoration: underline; }
58
+ a:hover { color: #000; }
59
+
60
+ ul, ol { margin: 0 0 18px 18px; }
61
+ ul { list-style-type: circle; }
62
62
  ol { list-style-type: decimal; }
63
- dl { margin: 1.5em 0; }
63
+ dl { margin: 0 0 18px 0; }
64
64
  dl dt { font-weight: bold; }
65
65
 
66
- a { color: #125AA7; text-decoration: underline; outline: none; }
67
- a:hover { color: #000; }
68
-
69
- blockquote { margin: 1.5em 0 1.5em 1.5em; color: #666; font-style: italic; }
66
+ blockquote { margin: 0 0 18px 18px; color: #666; font-style: italic; }
70
67
  strong { font-weight: bold; }
71
68
  em { font-style: italic; }
72
- pre { margin-bottom: 1.3em; background: #eee; border:0.1em solid #ddd; padding:1.5em; }
73
- code { font:0.9em Monaco, monospace; }
69
+ pre { margin-bottom: 18px; background: #eee; border:1px solid #ddd; padding:16px; }
74
70
 
75
71
  /* Use this to create a horizontal ruler across a column. */
76
72
  hr {
@@ -79,33 +75,25 @@ hr {
79
75
  clear: both;
80
76
  float: none;
81
77
  width: 100%;
82
- height: 0.1em;
83
- margin: 0 0 1.4em 0;
78
+ height: 2px;
79
+ margin: 0 0 16px 0;
84
80
  border: none;
85
81
  }
86
- * html hr { margin: 0 0 1.2em 0; } /* IE6 fix */
87
82
 
88
83
 
89
84
  /* Tables
90
85
  -------------------------------------------------------------- */
91
86
 
92
- table { margin-bottom: 1.4em; border-top:0.1em solid #ddd; border-left:0.1em solid #ddd; }
93
- th,td { height: 1em; padding:0.2em 0.4em; border-bottom:0.1em solid #ddd; border-right:0.1em solid #ddd; }
87
+ table { margin-bottom: 16px; border-top:1px solid #ddd; border-left:1px solid #ddd; }
88
+ th,td { height: 13px; padding:2px 4px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; }
94
89
  th { font-weight:bold; }
95
90
 
96
91
 
97
- /* Forms
98
- -------------------------------------------------------------- */
99
-
100
- label { font-weight: bold; }
101
- textarea { height: 180px; width: 300px; }
102
-
103
-
104
92
  /* Some default classes
105
93
  -------------------------------------------------------------- */
106
94
 
107
- p.small { font-size: 0.8em; margin-bottom: 1.875em; line-height: 1.875em; }
108
- p.large { font-size: 1.2em; line-height: 2.5em; }
95
+ p.small { font-size: 10px; margin-bottom: 18px; }
96
+ p.large { font-size: 14px; line-height:36px; }
109
97
  p.quiet { color: #666; }
110
98
  .hide { display: none; }
111
99
 
@@ -119,13 +107,13 @@ p.quiet { color: #666; }
119
107
 
120
108
  .alt {
121
109
  color: #666;
122
- font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", serif;
110
+ font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif;
123
111
  font-size: 1.2em;
124
112
  line-height: 1%; /* Maintain correct baseline */
125
113
  font-style: italic;
126
114
  }
127
115
 
128
- /* For great looking quote marks in titles, replace "asdf" width:
116
+ /* For great looking quote marks in titles, replace "asdf" with:
129
117
  <span class="dquo">&#8220;</span>asdf&#8221;
130
118
  (That is, when the title starts with a quote mark).
131
119
  (You may have to change this value depending on your font size). */
@@ -148,12 +136,26 @@ p.quiet { color: #666; }
148
136
  New line-height value:
149
137
  12px x 1.5 = 18px (old line-height)
150
138
  18px x 4 = 72px
151
- 60px / 5 = 14.4px (new line height)
139
+ 72px / 5 = 14.4px (new line height)
152
140
  14.4px / 10px = 1.44 (new line height in em's) */
153
141
 
154
142
  p.incr, .incr p {
155
- font-size: 0.83333em; /* font size 10px */
143
+ font-size: 10px;
156
144
  line-height: 1.44em;
157
- margin-bottom: 1.8em; /* Still 1.5 x normal font size as baseline */
145
+ margin-bottom: 18px; /* Still 1.5 x normal font size as baseline */
146
+ }
147
+
148
+
149
+ /* Surround uppercase words and abbreviations with this class.
150
+ Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/] */
151
+
152
+ .caps {
153
+ font-variant: small-caps;
154
+ letter-spacing: 1px;
155
+ text-transform: lowercase;
156
+ font-size:1.2em;
157
+ line-height:1%;
158
+ font-weight:bold;
158
159
  }
159
160
 
161
+ /* EOF */