| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <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>
- </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>
- -->
|