|
- <!doctype html>
- <html>
- <head>
- <title>Write.as</title>
- <style>
- body, input[type=submit], button, label[for=norm], textarea.norm {
- font-family: Lora, serif;
- }
- #url, #result-holder, label[for=sans], textarea.sans {
- font-family: 'Open Sans', sans-serif;
- }
- body {
- font-size: 100%;
- padding: 0.5em;
- }
- textarea, textarea:focus {
- border: 1px solid #dfdfdf;
- }
- textarea, textarea:focus, input {
- outline: 0;
- }
- textarea {
- margin-bottom: 0.5em;
- min-width: 38em;
- min-height: 20em;
- width: 100%;
- padding: 1em;
- font-size: 1em;
- box-sizing: border-box;
- resize: none;
- }
- input {
- padding: 0.5em;
- }
- input[type=submit], button {
- border: 1px solid rgb(114, 120, 191);
- background: rgb(114, 120, 191);
- color: white;
- margin-left: 0.5em;
- width: 7em;
- text-align: center;
- font-size: 0.86em;
- transition: all .2s ease-out;
- border-radius: .25em;
- }
- button {
- padding: 0.25em 1em;
- width: auto;
- }
- button.secondary {
- background: #aaa;
- border: 1px solid #aaa;
- }
- #buttons {
- text-align: right;
- }
- input[type=submit]:hover, button.primary:hover {
- background-color: #7d82c4;
- }
- button.secondary:hover {
- background-color: #afafaf;
- }
- input[type=submit].disabled, input[type=submit].disabled:hover {
- background: #ddd;
- color: #999;
- border-color: #eee;
- }
- #publish-holder, #result-holder {
- text-align: right;
- }
- body.popout a#popout, #result-holder, #account-tools, #modal {
- display: none;
- }
- #url {
- width: 18em;
- margin-right: 0.5em;
- }
- label[for=mono], label[for=wrap], label[for=code], textarea.mono, textarea.wrap, textarea.code {
- font-family: monospace, monospace;
- font-size: 1em;
- }
- textarea.mono, textarea.code {
- white-space: pre;
- }
- label, label[for=mono], label[for=wrap], label[for=code] {
- font-size: 0.86em;
- }
- body.popout #publish-holder, body.popout #result-holder {
- position: fixed;
- bottom: 1em;
- left: 1em;
- right: 1em;
- }
- #account-tools {
- margin-top: -0.5em;
- margin-bottom: 0.5em;
- font-size: 0.86em;
- }
- #account-tools a {
- line-height: 24px;
- margin-left: 0.5em;
- }
- body.popout textarea {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 4em;
- border: 0;
- border-bottom: 1px solid #dfdfdf;
- min-height: 0;
- }
- a#popout {
- padding: 0.5em;
- position: absolute;
- left: 0.75em;
- bottom: 0.75em;
- }
- a#popout img {
- vertical-align: middle;
- }
- #username {
- font-weight: bold;
- }
- #sync.disabled {
- display: inline;
- color: #999;
- font-style: italic;
- text-decoration: none;
- }
- #modal {
- position: absolute;
- top: 0;
- background: white;
- padding: 0.5em 2em 2em;
- border-bottom: 1px solid #dfdfdf;
- }
- </style>
-
- <script src="H.js"></script>
- <script src="popup.js"></script>
- </head>
- <body>
- <form name="postForm" method="post">
- <div id="account-tools">
- Writing as <span id="username">write.as</span>. <a id="sync" href="#">Sync...</a>
- </div>
- <div style="position: relative">
- <div id="modal">
- <div id="modal-body"></div>
- <div id="buttons"><button class="secondary">Cancel</button> <button class="primary">Sync</button></div>
- </div>
- </div>
- <textarea id="content" placeholder="Write..."></textarea>
- <div id="result-holder">
- <input id="url" type="url" readonly />
- <a id="url-link" target="_blank">Open</a>
- </div>
- <div id="publish-holder">
- <input type="radio" name="font" value="sans" id="sans" checked="checked" /><label for="sans"> Sans</label>
- <input type="radio" name="font" value="norm" id="norm" /><label for="norm"> Serif</label>
- <input type="radio" name="font" value="mono" id="mono" /><label for="mono"> Monospace</label>
- <input type="radio" name="font" value="wrap" id="wrap" /><label for="wrap"> Wrap</label>
- <input type="radio" name="font" value="code" id="code" /><label for="code"> Code</label>
- <input id="publish" type="submit" value="Publish" />
- <a href="#" id="popout"><img src="img/ic_launch.svg" /></a>
- </div>
- </form>
-
- <link href='fonts.css' rel='stylesheet' type='text/css'>
- </body>
- </html>
|