Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #19 from Pomax/gh-pages

restyled editor page
  • Loading branch information...
commit 5ec7a4ca728294abff46dd76fd92083b4b3a3ede 2 parents 05aef68 + 08991f8
Atul Varma toolness authored
1  .gitignore
View
@@ -1 +0,0 @@
-docs
BIN  demo/editor/02original.gif
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 demo/editor/blank.html
View
@@ -1,3 +1,9 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>Blank Page</title>
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Blank Page</title>
+ </head>
+ <body>
+ </body>
+</html>
BIN  demo/editor/codemirror-gutter.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
233 demo/editor/editor.css
View
@@ -0,0 +1,233 @@
+html, body {
+ height: 100%;
+ width: 100%;
+ margin: 0px;
+ padding: 0px;
+}
+
+iframe {
+ border: none;
+ height: 100%;
+ width: 100%;
+}
+
+#header {
+ position: fixed;
+ z-index: 2;
+ top: 0;
+
+ background-color: rgb(160,120,220);
+ color: rgb(255,255,210);
+ text-align: center;
+
+ height: 4em; /* NOTE: this value MUST agree with [#html-editor, #live-render].margin-bottom */
+ width: 100%;
+ margin: 0px;
+ padding: 0px;
+}
+
+
+#footer {
+ position: fixed;
+ bottom: 0;
+
+ background-color: rgb(0,130,255);
+ color: white;
+
+ height: 2em; /* NOTE: this value MUST agree with [#split-page, #html-editor, #live-render].bottom */
+ width: 100%;
+ margin: 0px;
+ padding: 0px;
+}
+
+#split-pane {
+ display: block;
+ position: fixed;
+ z-index: 1;
+ top: 0px;
+ width: 100%;
+}
+
+#split-page, #html-editor, #live-render {
+ bottom: 2em; /* NOTE: this value MUST agree with [#footer].height */
+}
+
+#html-editor, #live-render {
+ display: inline-block;
+ position: fixed;
+ top: 0px;
+ margin-top: 4em; /* NOTE: this value MUST agree with [#header].height */
+
+ width: 50%;
+ overflow: hidden;
+}
+
+#html-editor {
+ background-color: white;
+ overflow: auto;
+ background: url("codemirror-gutter.png") repeat-y, url("02original.gif") repeat;
+}
+
+#html-editor textarea,
+.CodeMirror-scroll.cm-s-jsbin {
+ height: 100%;
+ overflow: hidden;
+}
+
+#live-render {
+ border-left: 1px solid black;
+ margin-left: -1px;
+ background-color: white;
+ right: 0;
+}
+
+/* ------------------- */
+
+/*
+.error, .preview {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ width: 50%;
+ height: 100%;
+ border: none;
+}
+
+.preview {
+ border-left: 1px solid black;
+}
+
+
+.error {
+ background: rgba(128, 0, 0, 0.75);
+ color: white;
+ padding: 10px;
+ overflow: auto;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+*/
+
+.error em[data-highlight] {
+ font-style: normal;
+ cursor: pointer;
+}
+
+.error em.highlight-1, .CodeMirror span.highlight-1 {
+ color: black;
+ background: yellow;
+}
+
+.error em.highlight-2, .CodeMirror span.highlight-2 {
+ color: white;
+ background: gray;
+}
+
+.CodeMirror span.cursor-help-highlight {
+ background: rgba(0, 0, 0, 0.1);
+}
+
+.suggestions a {
+ color: inherit;
+}
+
+.suggestions li p {
+ font-size: smaller;
+}
+
+code {
+ font-family: Menlo, Monaco, consolas, monospace;
+ font-size: smaller;
+}
+
+.help a {
+ color: inherit;
+}
+
+.help a.learn-more {
+ display: inline-block;
+ text-decoration: none;
+ padding: 1px 2px 1px 2px;
+ margin: 0px 2px 0px 2px;
+ font-size: smaller;
+ background: lightgray;
+ color: #222222;
+}
+
+.help a.learn-more:hover {
+ background: white;
+ color: black;
+}
+
+#publish-box {
+ float: right;
+ position: relative;
+ top: 1em;
+ margin-right: 1em;
+}
+
+#publish, #publish-dialog {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+#publish {
+ display: inline-block;
+ font-size: small;
+ padding: 4px 4px 2px 4px;
+ background: white;
+ color: #333;
+ cursor: pointer;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+
+ margin-left: 4em;
+ font-family: 'Modern Antiqua', Verdana, sans-serif;
+}
+
+#publish-text {
+ display: inline-block;
+ font-family: 'Modern Antiqua', Georgia, sans-serif;
+}
+
+#publish:hover {
+ background: rgb(0,130,255);
+ color: white;
+}
+
+#publish-dialog {
+ position: absolute;
+ width: 600px;
+ height: 300px;
+ top: 50%;
+ left: 50%;
+ margin-top: -150px;
+ margin-left: -300px;
+ padding: 10px;
+ z-index: 1000000;
+ background-color: rgba(0, 0, 100, 0.75);
+ color: white;
+ text-align: center;
+ -webkit-border-radius: 1em;
+ -moz-border-radius: 1em;
+ border-radius: 1em;
+}
+
+#publish-dialog a {
+ color: inherit;
+}
+
+
+/* ------------------- */
+
+h1 {
+ display: inline-block;
+ position: relative;
+ top: -0.5em;
+ font-family: 'Mystery Quest', Verdana, sans-serif;
+ font-size: 220%;
+ font-weight: 400;
+ text-align: center;
+}
295 demo/editor/index.html 100644 → 100755
View
@@ -1,199 +1,112 @@
<!DOCTYPE html>
-<meta charset="utf-8">
-<base target="_blank">
-<title>Two-Paned Editor</title>
-<link rel="stylesheet" href="../codemirror2/lib/codemirror.css">
-<link rel="stylesheet" href="../jsbin-codemirror-theme.css">
-<style>
-html, body {
- height: 100%;
- margin: 0px;
- padding: 0px;
-}
-
-.html {
- position: absolute;
- top: 0px;
- left: 0px;
- bottom: 0px;
- width: 50%;
-}
-
-.CodeMirror, .CodeMirror-scroll {
- height: 100%;
-}
-
-.error, .preview {
- position: absolute;
- top: 0px;
- right: 0px;
- bottom: 0px;
- width: 50%;
- height: 100%;
- border: none;
-}
-
-.preview {
- border-left: 1px solid black;
-}
-
-.error {
- background: rgba(128, 0, 0, 0.75);
- color: white;
- padding: 10px;
- overflow: auto;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.error em[data-highlight] {
- font-style: normal;
- cursor: pointer;
-}
-
-.error em.highlight-1, .CodeMirror span.highlight-1 {
- color: black;
- background: yellow;
-}
-
-.error em.highlight-2, .CodeMirror span.highlight-2 {
- color: white;
- background: gray;
-}
-
-.CodeMirror span.cursor-help-highlight {
- background: rgba(0, 0, 0, 0.1);
-}
-
-.suggestions a {
- color: inherit;
-}
-
-.suggestions li p {
- font-size: smaller;
-}
-
-code {
- font-family: Menlo, Monaco, consolas, monospace;
- font-size: smaller;
-}
-
-.help {
- position: absolute;
- right: 0px;
- bottom: 0px;
- max-width: 50%;
- padding: 10px;
- background-color: rgba(0, 0, 0, 0.5);
- color: white;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: small;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
+<html>
+ <head>
+ <meta charset="utf-8">
+ <base target="_blank">
+ <title>Two-Paned Editor</title>
+ <link rel="stylesheet" href="../codemirror2/lib/codemirror.css">
+ <link rel="stylesheet" href="../jsbin-codemirror-theme.css">
+ <link rel="stylesheet" href="editor.css">
+
+ <link href='http://fonts.googleapis.com/css?family=Mystery+Quest' rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Modern+Antiqua' rel='stylesheet' type='text/css'>
+ </html>
+ <body>
+
+ <!-- header -->
+ <div id="header">
+ <h1 class="title">Web Page Maker - remix the web!</h1>
+ <div id="publish-box">
+ <div id="publish">Publish</div>
+ <div id="publish-text">← Click here when you're done remixing!</div>
+ </div>
+ </div>
+
+ <!-- modal overlay -->
+ <div id="publish-dialog" style="display: none">
+ <h1>Hold on a sec.</h1>
+ <p>We are publishing your thing.</p>
+ <div class="done">
+ <p>Ok, we are done.</p>
+ <p>View your thing at <a class="view" href="" target="_blank"></a>.</p>
+ <p>Remix your thing at <a class="remix" href="" target="_blank"></a>.</p>
+ <p><a class="close" href="#">Go back to the editor</a>.</p>
+ </div>
+ </div>
+
+ <!-- our main content -->
+ <div id="split-pane">
+ <div id="html-editor">
+ <textarea class="html"></textarea> <!-- html editor part -->
+ </div>
+
+ <div id="live-render">
+ <iframe src="blank.html" class="preview"></iframe> <!-- website view -->
+ </div>
+ </div>
+
+ <!-- footer -->
+ <div id="footer">
+ <div class="error" class="hidden"></div>
+ <div class="help" class="hidden"></div>
+ </div>
+
+ <!-- (invisible) template for help -->
+ <div id="templates" style="display: none">
+ <div class="selector-help">This is a CSS selector.
+ It describes the kinds of HTML elements that a CSS
+ rule's style will be applied to.</div>
+ <a class="learn-more" href="">more…</a>
+ <div class="error-msgs"></div>
+ <div class="suggestions">
+ <p>Following are some suggestions that may help.
+ Click on one for more detailed information.</p>
+ <ul>
+ <li>
+ <code><a href=""></a></code>
+ <p></p>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </body>
-.help a {
- color: inherit;
-}
-
-.help a.learn-more {
- display: inline-block;
- text-decoration: none;
- padding: 1px 2px 1px 2px;
- margin: 0px 2px 0px 2px;
- font-size: smaller;
- background: lightgray;
- color: #222222;
-}
-
-.help a.learn-more:hover {
- background: white;
- color: black;
-}
-
-#publish, #publish-dialog {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-#publish {
- font-size: small;
- padding: 4px;
- background: rgba(255, 255, 0, 0.5);
- position: absolute;
- left: 0px;
- bottom: 0px;
- z-index: 100000;
- cursor: pointer;
-}
-
-#publish:hover {
- background: green;
- color: white;
-}
-
-#publish-dialog {
- position: absolute;
- top: 0px;
- right: 0px;
- left: 0px;
- bottom: 0px;
- padding: 10px;
- z-index: 1000000;
- background-color: rgba(0, 0, 0, 0.75);
- color: white;
-}
-
-#publish-dialog a {
- color: inherit;
-}
-</style>
-<textarea class="html"></textarea>
<script type="text/html" id="initial-html">
<style>
+ body {
+ background-color: white;
+ color: #333;
+ padding-top: 1em;
+ }
+ h1 {
+ color: #333;
+ font-family: Georgia;
+ text-align: center;
+ text-shadow: 2px 2px 3px #CCC;
+ }
p {
- color: blue;
+ text-align: justify;
+ text-shadow: 2px 2px 3px #999;
}
</style>
-<p>Tinker with me.</p>
+
+<h1>Let's remix the web! It's easy!</h1>
+
+<p>Remixing the web is easier than you think. A bit of styling
+ here, an image replacement there, and suddenly a page can
+ look completely different! Give it a try with some of our
+ templates, or load your favourite site and let's get mixin'.</p>
</script>
-<div id="publish">Publish</div>
-<div id="publish-dialog" style="display: none">
- <h1>Hold on a sec.</h1>
- <p>We are publishing your thing.</p>
- <div class="done">
- <p>Ok, we are done.</p>
- <p>View your thing at <a class="view" href="" target="_blank"></a>.</p>
- <p>Remix your thing at <a class="remix" href="" target="_blank"></a>.</p>
- <p><a class="close" href="#">Go back to the editor</a>.</p>
- </div>
-</div>
-<iframe class="preview" src="blank.html"></iframe>
-<div class="error" style="display: none"></div>
-<div class="help" style="display: none"></div>
-<div id="templates" style="display: none">
- <div class="selector-help">This is a CSS selector. It describes the kinds of HTML elements that a CSS rule's style will be applied to.</div>
- <a class="learn-more" href="">more&hellip;</a>
- <div class="error-msgs"></div>
- <div class="suggestions">
- <p>Following are some suggestions that may help. Click on one for more detailed information.</p>
- <ul>
- <li>
- <code><a href=""></a></code>
- <p></p>
- </li>
- </ul>
- </div>
-</div>
-<script src="../jquery.min.js"></script>
-<script src="../underscore.min.js"></script>
-<script src="../codemirror2/lib/codemirror.js"></script>
-<script src="../codemirror2/mode/xml/xml.js"></script>
-<script src="../codemirror2/mode/javascript/javascript.js"></script>
-<script src="../codemirror2/mode/css/css.js"></script>
-<script src="../codemirror2/mode/htmlmixed/htmlmixed.js"></script>
-<script src="../../slowparse.js"></script>
-<script src="hacktionary-data.js"></script>
-<script src="editor.js"></script>
-<script src="publish.js"></script>
+
+ <script src="../jquery.min.js"></script>
+ <script src="../underscore.min.js"></script>
+ <script src="../codemirror2/lib/codemirror.js"></script>
+ <script src="../codemirror2/mode/xml/xml.js"></script>
+ <script src="../codemirror2/mode/javascript/javascript.js"></script>
+ <script src="../codemirror2/mode/css/css.js"></script>
+ <script src="../codemirror2/mode/htmlmixed/htmlmixed.js"></script>
+ <script src="../../slowparse.js"></script>
+ <script src="hacktionary-data.js"></script>
+ <script src="editor.js"></script>
+ <script src="publish.js"></script>
+</html>
6 slowparse.js
View
@@ -458,9 +458,9 @@ var Slowparse = (function() {
"dominant-baseline","drop-initial-after-adjust",
"drop-initial-after-align","drop-initial-before-adjust",
"drop-initial-before-align","drop-initial-size","drop-initial-value",
- "elevation","empty-cells","fit","fit-position","flex-align","flex-flow",
- "flex-line-pack","flex-order","flex-pack","float","float-offset","font",
- "font-family","font-size","font-size-adjust","font-stretch",
+ "elevation","empty-cells","filter","fit","fit-position","flex-align",
+ "flex-flow","flex-line-pack","flex-order","flex-pack","float","float-offset",
+ "font","font-family","font-size","font-size-adjust","font-stretch",
"font-style","font-variant","font-weight","grid-columns","grid-rows",
"hanging-punctuation","height","hyphenate-after","hyphenate-before",
"hyphenate-character","hyphenate-lines","hyphenate-resource","hyphens",
Please sign in to comment.
Something went wrong with that request. Please try again.