|
3 | 3 | <head> |
4 | 4 | <meta charset="utf-8"> |
5 | 5 | <title>Turndown Demo</title> |
6 | | -<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" /> |
| 6 | +<meta name="viewport" content="width=device-width"> |
7 | 7 | <style> |
8 | | - .cf:before, |
9 | | - .cf:after { |
10 | | - content: " "; |
11 | | - display: table; |
12 | | - } |
13 | | - |
14 | | - .cf:after { |
15 | | - clear: both; |
16 | | - } |
17 | | - |
18 | | - .cf { |
19 | | - *zoom: 1; |
20 | | - } |
21 | | - |
22 | 8 | * { |
23 | 9 | -webkit-box-sizing: border-box; |
24 | 10 | -moz-box-sizing: border-box; |
25 | 11 | box-sizing: border-box; |
26 | 12 | } |
27 | 13 |
|
28 | 14 | body { |
29 | | - background-color: #ccc; |
30 | 15 | margin: 0 auto; |
31 | | - font-size: 14px; |
32 | | - font-family: sans-serif; |
33 | | - line-height: 1.4; |
| 16 | + font-family: courier, monospace, sans-serif; |
| 17 | + line-height: 1.3125; |
34 | 18 | color: #333; |
35 | 19 | } |
36 | 20 |
|
37 | 21 | header { |
38 | | - padding: 1em; |
39 | | - overflow: hidden; |
| 22 | + padding: 0.5em; |
40 | 23 | background-color: #fff; |
| 24 | + text-align: center; |
41 | 25 | } |
42 | 26 |
|
43 | 27 | footer { |
| 28 | + font-size: 0.875em; |
44 | 29 | text-align: center; |
45 | 30 | color: #666; |
46 | | - text-shadow: 0 1px 0 #ddd; |
47 | 31 | } |
48 | 32 |
|
49 | | - a, |
50 | | - a:visited { |
| 33 | + h1, |
| 34 | + label[for="input"], |
| 35 | + label[for="output"] { |
| 36 | + margin: 0; |
| 37 | + font-size: 1em; |
51 | 38 | font-weight: 700; |
52 | | - text-decoration: none; |
| 39 | + letter-spacing: 0.0625em; |
| 40 | + text-transform: uppercase; |
53 | 41 | } |
54 | 42 |
|
55 | | - h1 { |
56 | | - float: left; |
57 | | - margin: 0; |
58 | | - font-size: 1em; |
| 43 | + label[for="input"], |
| 44 | + label[for="output"] { |
| 45 | + font-weight: 400; |
59 | 46 | } |
60 | 47 |
|
61 | | - h2 { |
62 | | - color: #fff; |
63 | | - margin-bottom: 0; |
| 48 | + .source-link { |
| 49 | + font-size: 0.875em; |
| 50 | + } |
| 51 | + |
| 52 | + .row:before, |
| 53 | + .row:after { |
| 54 | + content: " "; |
| 55 | + display: table; |
| 56 | + } |
| 57 | + |
| 58 | + .row:after { |
| 59 | + clear: both; |
| 60 | + } |
| 61 | + |
| 62 | + .row { |
| 63 | + *zoom: 1; |
64 | 64 | } |
65 | 65 |
|
66 | 66 | .col, |
67 | 67 | .form-group { |
68 | | - padding: 0 10px; |
| 68 | + padding: 0 0.5em; |
69 | 69 | } |
70 | 70 |
|
71 | | - .form-group { |
72 | | - float: left; |
| 71 | + @media (min-width: 36em) { |
| 72 | + .col { |
| 73 | + float: left; |
| 74 | + width: 50%; |
| 75 | + } |
73 | 76 | } |
74 | 77 |
|
75 | 78 | textarea { |
76 | 79 | width: 100%; |
77 | | - height: 600px; |
| 80 | + height: 36em; |
78 | 81 | margin: 0; |
79 | | - padding: .5em; |
| 82 | + padding: 0.5em; |
80 | 83 | overflow: auto; |
81 | | - border: none; |
| 84 | + border: 1px solid; |
82 | 85 | background-color: #fff; |
83 | | - font-family: courier, monospace; |
| 86 | + font-family: inherit; |
84 | 87 | font-size: inherit; |
| 88 | + line-height: inherit; |
85 | 89 | color: inherit; |
86 | 90 | } |
87 | 91 |
|
88 | 92 | #input { |
89 | | - background: #333; |
| 93 | + background-color: #333; |
90 | 94 | color: #fff; |
91 | | - } |
92 | | - |
93 | | - .toolbar { |
94 | | - padding-top: 5px; |
95 | | - padding-bottom: 5px; |
96 | | - background-color: #e6e6e6; |
| 95 | + border: none; |
97 | 96 | } |
98 | 97 |
|
99 | 98 | select { |
100 | 99 | display: block; |
101 | 100 | width: 100%; |
102 | | - font-size: 14px; |
| 101 | + font-size: inherit; |
103 | 102 | } |
104 | 103 |
|
105 | | - @media (min-width: 768px) { |
106 | | - body { |
107 | | - font-size: 16px; |
108 | | - } |
109 | | - |
110 | | - .col { |
111 | | - float: left; |
112 | | - width: 50%; |
113 | | - padding: 0 15px; |
114 | | - } |
115 | | - |
116 | | - .row { |
117 | | - padding-right: 15px; |
118 | | - padding-left: 15px; |
119 | | - } |
| 104 | + .form-group { |
| 105 | + display: inline-block; |
120 | 106 | } |
121 | 107 |
|
122 | 108 | .form-group label { |
123 | | - font-size: 14px; |
| 109 | + font-size: 0.875em; |
124 | 110 | } |
125 | 111 | </style> |
126 | 112 | <script src="https://unpkg.com/turndown/dist/turndown.js"></script> |
127 | 113 | </head> |
128 | 114 | <body> |
129 | 115 | <header> |
130 | 116 | <h1>turndown</h1> |
131 | | - <a style="float: right" href="https://github.com/domchristie/turndown">Source on GitHub</a> |
| 117 | + <a class="source-link" href="https://github.com/domchristie/turndown">Source on GitHub</a> |
132 | 118 | </header> |
133 | | -<div class="row cf"> |
| 119 | +<div class="row"> |
134 | 120 | <div class="col"> |
135 | | - <h2>HTML</h2> |
| 121 | + <label for="input">HTML</label> |
136 | 122 | <textarea cols="100" rows=10 id="input"><h1>Turndown Demo</h1> |
137 | 123 |
|
138 | 124 | <p>This demonstrates <a href="https://github.com/domchristie/turndown">turndown</a> – an HTML to Markdown converter in JavaScript.</p> |
@@ -162,12 +148,12 @@ <h2>Usage</h2> |
162 | 148 | </ul></textarea> |
163 | 149 | </div> |
164 | 150 | <div class="col"> |
165 | | - <h2>Markdown</h2> |
| 151 | + <label for="output">Markdown</label> |
166 | 152 | <textarea readonly cols="100" rows=10 id="output"></textarea> |
167 | 153 | </div> |
168 | 154 | </div> |
169 | 155 |
|
170 | | -<div class="row cf"> |
| 156 | +<div class="row"> |
171 | 157 | <form method="get" action="/turndown" id="options"> |
172 | 158 | <div class="form-group"> |
173 | 159 | <label for="headingStyle">Heading style</label> |
@@ -246,7 +232,7 @@ <h2>Markdown</h2> |
246 | 232 | </form> |
247 | 233 | </div> |
248 | 234 |
|
249 | | -<footer><p>turndown is copyright © 2017 <a href="http://www.domchristie.co.uk/">Dom Christie</a> and is released under the MIT license</p></footer> |
| 235 | +<footer><p>Turndown is copyright © 2017 <a href="http://www.domchristie.co.uk/">Dom Christie</a> and is released under the MIT license</p></footer> |
250 | 236 | <script> |
251 | 237 | ;(function () { |
252 | 238 | var input = document.getElementById('input') |
|
0 commit comments