pretty_doc 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,346 @@
1
+ @import "compass";
2
+ @import "normalize";
3
+ @import "mixin";
4
+
5
+ html, body {
6
+ margin: 0;
7
+ padding: 0;
8
+ }
9
+
10
+ li {
11
+ list-style: none;
12
+
13
+ a {
14
+ text-decoration: none;
15
+ &:hover {
16
+ color: darken(#0088cc, 20%);
17
+ }
18
+ }
19
+ }
20
+
21
+ @media print {
22
+ @page {
23
+ margin: 1cm;
24
+ }
25
+
26
+ body {
27
+ width: 19cm;
28
+ min-width: 19cm;
29
+ max-width: 19cm;
30
+ }
31
+
32
+ img, .thumbnail {
33
+ page-break-inside: avoid;
34
+ }
35
+ }
36
+
37
+ @media screen {
38
+ html, body {
39
+ background: gray;
40
+ }
41
+
42
+ body {
43
+ margin: 1cm auto;
44
+ width: 21cm;
45
+ min-height: 29.7cm;
46
+ @include box-sizing(border-box);
47
+ padding: 1cm;
48
+ background: white;
49
+ box-shadow: 0px 0px 0.5cm black;
50
+ }
51
+ }
52
+
53
+ body {
54
+ font-size: $baseSize;
55
+ line-height: 1.4;
56
+ color: $normalText;
57
+ }
58
+
59
+ article {
60
+ /* ---------------------
61
+ * Basic Elements
62
+ * --------------------- */
63
+ h1, h2, h3, h4, h5, h6 {
64
+ margin: 1em 0 0.5em 0;
65
+ font-size: 1em;
66
+ }
67
+
68
+ h1 {
69
+ font-size: 2.5em;
70
+ margin-top: 0;
71
+ }
72
+
73
+ h2 {
74
+ font-size: 2em;
75
+ }
76
+
77
+ h3 {
78
+ font-size: 1.5em;
79
+ }
80
+
81
+ h4, h5, h6 {
82
+ margin-top: 1.5em;
83
+ }
84
+
85
+ dl, ul, ol, p, table, pre, blockquote {
86
+ margin-top: 0;
87
+ margin-bottom: 1em;
88
+ }
89
+
90
+ img, video {
91
+ max-width: 100%;
92
+ }
93
+
94
+ a {
95
+ color: #0088cc;
96
+ }
97
+
98
+ blockquote {
99
+ margin-left: 0.3em;
100
+ padding: 0 0 0 1em;
101
+ border-left: 5px solid #eeeeee;
102
+ }
103
+
104
+ dl {
105
+ dt {
106
+ margin: 0.8em 0 0.5em 0;
107
+ }
108
+
109
+ dd {
110
+ margin-left: 1.5em;
111
+ display: block;
112
+
113
+ > code {
114
+ @extend .box;
115
+ display: inline-block;
116
+ line-height: $baseLineHeight;
117
+ font-size: 0.9em;
118
+ }
119
+ }
120
+ }
121
+
122
+ ul, ol {
123
+ padding-left: 2.5em;
124
+
125
+ li {
126
+ margin: 0.5em 0;
127
+ }
128
+ }
129
+
130
+ p, li, td {
131
+ > code {
132
+ @extend .box;
133
+ color: rgb(221, 17, 68);
134
+ padding: 0.05em 0.5em;
135
+ white-space: nowrap;
136
+ font-size: 0.85em;
137
+ }
138
+ }
139
+
140
+ p + pre {
141
+ margin-top: -0.5em;
142
+ }
143
+
144
+ code {
145
+ @include experimental(tab-size, 4);
146
+ }
147
+
148
+ pre {
149
+ white-space: pre;
150
+ background-color: rgb(247, 247, 249);
151
+ border: 1px solid rgb(225, 225, 232);
152
+ padding: 0.5em 1em;
153
+ border-radius: 0.3em;
154
+ overflow-x: auto;
155
+
156
+ code {
157
+ font-size: 0.8em;
158
+ background-color: transparent;
159
+ border: none;
160
+ padding: 0;
161
+ white-space: inherit;
162
+ color: inherit;
163
+ }
164
+ }
165
+
166
+ table {
167
+ border-spacing: 0;
168
+ border: 1px solid #ddd;
169
+ border-radius: 0.3em;
170
+ width: 100%;
171
+
172
+ td, th {
173
+ border-top: 1px solid #ddd;
174
+ border-left: 1px solid #ddd;
175
+ padding: 0.5em;
176
+ text-align: left;
177
+
178
+
179
+ &:first-child {
180
+ border-left-width: 0;
181
+ }
182
+ }
183
+
184
+ tr:first-child {
185
+ td, th {
186
+ border-top-width: 0;
187
+ }
188
+ }
189
+
190
+ thead + tbody {
191
+ tr:first-child {
192
+ td, th {
193
+ border-top-width: 1px;
194
+ }
195
+ }
196
+ }
197
+ }
198
+
199
+ /* ---------------------
200
+ * Class Elements
201
+ * --------------------- */
202
+ .thumbnail {
203
+ margin: 1em 2em;
204
+ display: block;
205
+ padding: 0.3em;
206
+ border: 1px solid #ddd;
207
+ border-radius: 0.3em;
208
+ text-align: center;
209
+
210
+ figcaption {
211
+ margin-top: 0.2em;
212
+ // text-align: center;
213
+ font-style: italic;
214
+ }
215
+ }
216
+
217
+ .highlight {
218
+ margin-bottom: 1em;
219
+
220
+ table {
221
+ border: none;
222
+ margin: 0;
223
+
224
+ td, th {
225
+ border: none;
226
+ }
227
+ }
228
+
229
+ .lines {
230
+ width: 33px;
231
+ background-color: #fbfbfc;
232
+ border: 1px solid #e1e1e8;
233
+ border-right-color: #ececf0;
234
+ border-radius: 0.3em 0 0 0.3em;
235
+
236
+ pre {
237
+ color: #bebec5;
238
+ }
239
+
240
+ .line-number:after {
241
+ content: ".";
242
+ }
243
+ }
244
+
245
+ .code {
246
+ border: 1px solid #e1e1e8;
247
+ border-left: 0;
248
+ background-color: #f7f7f9;
249
+ border-radius: 0 0.3em 0.3em 0;
250
+ pre {
251
+ width: 17.0cm;
252
+ }
253
+ }
254
+
255
+ pre {
256
+ border: none;
257
+ margin: 0;
258
+ padding: 0;
259
+ background: transparent;
260
+
261
+ code {
262
+ span {
263
+ font-family: monospace !important;
264
+ }
265
+ }
266
+ }
267
+
268
+ .c { color: #999988; font-style: italic } /* Comment */
269
+ .err { color: #a61717; background-color: #e3d2d2 } /* Error */
270
+ .k { color: #000000; /* font-weight: bold */ } /* Keyword */
271
+ .o { color: #000000; /* font-weight: bold */ } /* Operator */
272
+ .cm { color: #999988; font-style: italic } /* Comment.Multiline */
273
+ .cp { color: #999999; /* font-weight: bold */; font-style: italic } /* Comment.Preproc */
274
+ .c1 { color: #999988; font-style: italic } /* Comment.Single */
275
+ .cs { color: #999999; /* font-weight: bold */; font-style: italic } /* Comment.Special */
276
+ .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
277
+ .ge { color: #000000; font-style: italic } /* Generic.Emph */
278
+ .gr { color: #aa0000 } /* Generic.Error */
279
+ .gh { color: #999999 } /* Generic.Heading */
280
+ .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
281
+ .go { color: #888888 } /* Generic.Output */
282
+ .gp { color: #555555 } /* Generic.Prompt */
283
+ .gs { /* font-weight: bold */ } /* Generic.Strong */
284
+ .gu { color: #aaaaaa } /* Generic.Subheading */
285
+ .gt { color: #aa0000 } /* Generic.Traceback */
286
+ .kc { color: #000000; /* font-weight: bold */ } /* Keyword.Constant */
287
+ .kd { color: #000000; /* font-weight: bold */ } /* Keyword.Declaration */
288
+ .kn { color: #000000; /* font-weight: bold */ } /* Keyword.Namespace */
289
+ .kp { color: #000000; /* font-weight: bold */ } /* Keyword.Pseudo */
290
+ .kr { color: #000000; /* font-weight: bold */ } /* Keyword.Reserved */
291
+ .kt { color: #445588; /* font-weight: bold */ } /* Keyword.Type */
292
+ .m { color: #009999 } /* Literal.Number */
293
+ .s { color: #d01040 } /* Literal.String */
294
+ .na { color: #008080 } /* Name.Attribute */
295
+ .nb { color: #0086B3 } /* Name.Builtin */
296
+ .nc { color: #445588; /* font-weight: bold */ } /* Name.Class */
297
+ .no { color: #008080 } /* Name.Constant */
298
+ .nd { color: #3c5d5d; /* font-weight: bold */ } /* Name.Decorator */
299
+ .ni { color: #800080 } /* Name.Entity */
300
+ .ne { color: #990000; /* font-weight: bold */ } /* Name.Exception */
301
+ .nf { color: #990000; /* font-weight: bold */ } /* Name.Function */
302
+ .nl { color: #990000; /* font-weight: bold */ } /* Name.Label */
303
+ .nn { color: #555555 } /* Name.Namespace */
304
+ .nt { color: #000080 } /* Name.Tag */
305
+ .nv { color: #008080 } /* Name.Variable */
306
+ .ow { color: #000000; /* font-weight: bold */ } /* Operator.Word */
307
+ .w { color: #bbbbbb } /* Text.Whitespace */
308
+ .mf { color: #009999 } /* Literal.Number.Float */
309
+ .mh { color: #009999 } /* Literal.Number.Hex */
310
+ .mi { color: #009999 } /* Literal.Number.Integer */
311
+ .mo { color: #009999 } /* Literal.Number.Oct */
312
+ .sb { color: #d01040 } /* Literal.String.Backtick */
313
+ .sc { color: #d01040 } /* Literal.String.Char */
314
+ .sd { color: #d01040 } /* Literal.String.Doc */
315
+ .s2 { color: #d01040 } /* Literal.String.Double */
316
+ .se { color: #d01040 } /* Literal.String.Escape */
317
+ .sh { color: #d01040 } /* Literal.String.Heredoc */
318
+ .si { color: #d01040 } /* Literal.String.Interpol */
319
+ .sx { color: #d01040 } /* Literal.String.Other */
320
+ .sr { color: #009926 } /* Literal.String.Regex */
321
+ .s1 { color: #d01040 } /* Literal.String.Single */
322
+ .ss { color: #990073 } /* Literal.String.Symbol */
323
+ .bp { color: #999999 } /* Name.Builtin.Pseudo */
324
+ .vc { color: #008080 } /* Name.Variable.Class */
325
+ .vg { color: #008080 } /* Name.Variable.Global */
326
+ .vi { color: #008080 } /* Name.Variable.Instance */
327
+ .il { color: #009999 } /* Literal.Number.Integer.Long */
328
+ }
329
+
330
+ .alert-error {
331
+ @extend .box-danger;
332
+ }
333
+
334
+ .alert-info {
335
+ @extend .box-info;
336
+ }
337
+ }
338
+
339
+ article {
340
+ .no-lines {
341
+ .code {
342
+ border-radius: 0.3em 0.3em 0.3em 0.3em;
343
+ border-left: 1px solid #e1e1e8;
344
+ }
345
+ }
346
+ }
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title><%= @title %></title>
6
+ <link rel="stylesheet" type="text/css" href="style.css" />
7
+ </head>
8
+ <body>
9
+ <article id='container'>
10
+ <%= @content %>
11
+ </article>
12
+ </body>
13
+ </html>