| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296 |
- <head>
- <style>
- body {
- max-width: 800px;
- margin: 20px auto;
- }
- .box {
- border: 1px solid hsl(0, 0%, 20%);
- padding: 2px;
- background: hsl(0, 0%, 40%);
- }
- .box-meta {
- border: 1px solid hsl(0, 0%, 80%);
- background: hsl(0, 0%, 60%);
- }
- .box-content-field {
- padding: .5em;
- background: hsl(0, 0%, 100%);
- border: 1px solid hsl(0, 0%, 80%)
- }
- </style>
- </head>
- <div id="editor">
- <div class="box">
- <div class="box__wrapper">
- <div class="box-meta box-meta-header">
- <div class="box-meta-header-icon"></div>
- <div class="box-meta-header-title">
- <h2>I'm a title</h2>
- </div>
- </div>
- <div class="box-content">
- <div class="box-content-field"><p>Foo</p></div>
- <div class="box-content-field">
- <ul>
- <li>Bar</li>
- </ul>
- </div>
- <div class="box-content-field"><p>Baz</p></div>
- </div>
- <div class="box-meta box-meta-author">
- <a href="www.example.com">@john</a>
- </div>
- </div>
- </div>
- <figure class="table">
- <table>
- <thead>
- <tr>
- <th colspan="40"><p>foo bar baz</p></th>
- </tr>
- <tr>
- <th colspan="40"><p>foo bar baz</p></th>
- </tr>
- <tr>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- </tr>
- <tr>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- <th><p>foo bar baz</p></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td colspan="40"><p>foo bar baz</p></td>
- </tr>
- <tr>
- <td colspan="40"><p>foo bar baz</p></td>
- </tr>
- <tr>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- </tr>
- <tr>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- </tr>
- <tr>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- <td><p>foo bar baz</p></td>
- </tr>
- </tbody>
- </table>
- </figure>
- </div>
- <!--
- <box type="foo" icon="icon.png" author="@john" authorWebsite="www.example.com">
- <boxField>
- <p>Foo bar</p>
- <ul>
- <li>baz</li>
- </ul>
- </boxField>
- ...
- <boxField></boxField>
- </box>
- -->
|