Discuss merging redesign

README.md

@@ -1,46 +1,63 @@
-http://mathdown.net
-===================
+# Mathdown
 
-Collaborative markdown with math.
-Powered by [CodeMirror][], [MathJax][] and [Firebase][]'s [Firepad][].
-Free testing [courtesy of Sause Labs](https://saucelabs.com/opensauce).
+## Collaborative Markdown + math
 
-[CodeMirror]: http://codemirror.net
-[MathJax]: http://mathjax.org
-[Firebase]: http://firebase.com
-[Firepad]: http://firepad.io
-[CodeMirror-MathJax]: http://github.com/cben/CodeMirror-MathJax
-[firebase.js]: https://github.com/firebase/firebase-bower
+### Demo
 
-**Alpha quality – will eat your math, burn your bookmarks & expose your secrets.**
+- <http://mathdown.net> (original)
+- [http://rhythmus.be/mathdown](http://rhythmus.be/mathdown/?doc=K2b13TExFUJ#Mathdown) (redesign fork)
+- [Einstein’s 1905 paper on special relativity](http://rhythmus.be/mathdown/?doc=NzbDnWwn2nF#Zur-Elektrodynamik-bewegter-K-rper)
 
-## License
+---
 
-My code is under [MIT License](LICENSE).
+ℹ **THIS REPO IS FORKED FROM [cben/mathdown](https://github.com/cben/mathdown).** [I](https://github.com/rhythmus) just did the redesign.
 
-Dependencies:
+⚠ **Alpha quality! Will eat your math, burn your bookmarks & expose your secrets.**
 
- * CodeMirror is also MIT.
- * MathJax is under Apache License 2.0.
- * My [CodeMirror-MathJax][] glue is also MIT.
- * Firebase is a **proprietary** service ([#4](https://github.com/cben/mathdown/issues/4)); their client-side javascipt API [firebase.js][] is MIT.
- * The collaborative editor [Firepad] is MIT.  It calls firebase javascipt API.
+:bug: **Known bugs are listed [here](http://rhythmus.be/mathdown/index.html?doc=DCJtdsxteYC#Mathdown-Bugs).**
 
-## Git trivia
+![](http://rhythmus.be/mathdown/screengrab.gif)
 
-After checking out, run this to materialize subdirs://
+![Typesetting special relativity in a web browser is delightful…](http://rhythmus.be/mathdown/delightful.png)](http://rhythmus.be/mathdown/index.html?doc=NzbDnWwn2nF#Zur-Elektrodynamik-bewegter-K-rper)
+
+---
+
+### Powered by
+
+- [CodeMirror](http://codemirror.net), as the basis for wysiwyg editing in `contentEditable`;
+- [MathJax](http://mathjax.org), for magical typesetting of LaTeX equations;
+- glued by [CodeMirror-MathJax](http://github.com/cben/CodeMirror-MathJax);
+- [Firebase](http://firebase.com)’s [Firepad](http://firepad.io), for real-time collaboration.
+- Free testing courtesy of [Sause Labs](https://saucelabs.com/opensauce).
+
+
+### License
+
+- [@cben](https://github.com/cben)’s code (including [CodeMirror-MathJax](http://github.com/cben/CodeMirror-MathJax)) is under [MIT License](LICENSE).
+- [My](https://github.com/rhythmus) css too.
+- CodeMirror is also MIT.
+- Firebase is a **proprietary** service ([#4](https://github.com/cben/mathdown/issues/4)); their client-side javascript API [firebase.js](https://github.com/firebase/firebase-bower) is MIT.
+- The collaborative editor [Firepad](http://firepad.io) is MIT.  It calls firebase javascript API.
+
+
+### Git trivia
+
+After checking out, run this to materialize `subdirs://`
 
     git submodule update --init --recursive
 
 Append ` --remote` to upgrade to newest versions of all submodules (need to commit afterwards if anything changed).
 
-I'm directly working in gh-pages branch without a master branch, as that's the simplest thing that could possibly work (http://oli.jp/2011/github-pages-workflow/ lists several alternatives).
+[@cben](https://github.com/cben) is directly working in the gh-pages branch without a master branch, as that’s the simplest thing that could possibly work (<http://oli.jp/2011/github-pages-workflow> lists several alternatives).
+
+### Note
 
-----
+###### About the redesign
+The redesign was inspired by [this discussion](https://github.com/quilljs/quill/issues/74#issuecomment-42942223), and as an experiment in search for how wysiwyg Markdown editing could look like.
 
-Other things called "mathdown":
+###### Other things called “mathdown”
 
- * https://github.com/mayoff/Mathdown/tree/mathjax — Markdown.pl hacked for MathJax pass-through
- * https://github.com/keishi/kernlog/blob/master/markdown/extensions/mathdown.py
- * http://kwkbtr.info/log/201010050320 — a way to combine Showdown + Mathjax.
- * http://www.urbandictionary.com/define.php?term=mathdown
+- https://github.com/mayoff/Mathdown/tree/mathjax — Markdown.pl hacked for MathJax pass-through
+- https://github.com/keishi/kernlog/blob/master/markdown/extensions/mathdown.py
+- http://kwkbtr.info/log/201010050320 — a way to combine Showdown + Mathjax
+- http://www.urbandictionary.com/define.php?term=mathdown

css/app-header.css

@@ -0,0 +1,90 @@
+@charset "utf-8";
+
+/* APPLICATION HEADER ======================================================= */
+@media print { #header { display: none; } }
+#header {
+	display: block;
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	background-color: rgb(0,20,10);
+	color:rgb(40,130,52);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-weight   : 400;
+	font-size     : 1.0rem;
+	line-height   : 1.0rem;
+	padding       : 0.5rem;
+	padding-left  : 1.0rem;
+	padding-right : 1.0rem;
+} #header > * { display: inline-block; }
+@media screen and (max-width: 500px) { #header { font-size: 1rem; } }
+#header a          { text-decoration: none; color:inherit; }
+#header a:hover    { color:white; }
+#header h1         { font-size: inherit; }
+#header h1 a#logo  { font-weight: 800; color: rgb(70,160,82); }
+#header h1 i       { font-style: normal; font-weight: 400; }
+@media screen and (max-width: 850px) { #header h1 i { display: none; } }
+#header nav        { min-width: 5rem; }
+#header nav a      { color: white; display: inline-block; }
+#header nav a:hover{
+	-webkit-transform:scale(1.5,1.5);
+		 -moz-transform:scale(1.5,1.5);
+			-ms-transform:scale(1.5,1.5);
+			 -o-transform:scale(1.5,1.5);
+					transform:scale(1.5,1.5);
+}
+#header nav a + a  { margin-left: 0.25em; }
+#header nav a:before, #header span.github {
+	font-family: FontAwesome;
+	font-style: normal;
+	font-weight: normal;
+	line-height: 1;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+#header nav a#new:before { content: "\f15c"; font-size: 0.9em; position: relative; bottom: 0.05em; }
+#header nav a#about:before { content: "\f1cd"; font-size: 0.9em; position: relative; bottom: 0.05em; }
+#header nav a#primer:before { content: "\f05a"; }
+#header nav a#bugs:before { content: "\f188"; }
+span.github:before { content: "\f126"; font-size: 0.9em; margin-right: 0.25em;}
+#header .warning,
+#header .forkme {
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+	font-size: 1rem !important;
+	text-align: center;
+	text-decoration: none;
+	position: fixed;
+	 -webkit-transform: rotate(45deg);
+		  -moz-transform: rotate(45deg);
+			 -ms-transform: rotate(45deg);
+			  -o-transform: rotate(45deg);
+	-webkit-box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.75);
+		 -moz-box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.75);
+			-ms-box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.75);
+			 -o-box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.75);
+					box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.75);
+	z-index:9;
+}
+#header .warning {
+	background-color : orange;
+	color            : rgb(190,50,0);
+	font-weight      : 800;
+	font-size        : 0.8em;
+	padding-left     : 3rem;
+	padding-right    : 3rem;
+	top              : 2rem;
+	right            : -2.5rem;
+}
+#header .forkme {
+	background-color : rgb(40,40,40);
+	color            : white;
+	font-size        : 0.5em;
+	padding-left     : 3rem;
+	padding-right    : 3rem;
+	top              : 2rem;
+	right            : -2.5rem;
+}
+#header .forkme:hover {
+	background-color : white;
+	color            : rgb(40,40,40);
+}

css/app-markdownSyntax.css

@@ -0,0 +1,77 @@
+@charset "utf-8";
+
+/* MARKDOWN SYNTAX HIGHLIGHTING --------------------------------------------- */
+/* Instead of color highlighting, we use typography (alternative font, font size),
+	 and color contrast (dimmed gray) to highlight Markdown’s syntax markers.
+	 Alternatively — or rather as an addition, we might implement colorization, too:
+	 cfr “Color-coded token highlighting”, below. */
+.cm-formatting {
+	background-color: transparent !important;
+	display:inline-block;
+	vertical-align:text-top;
+}
+.cm-formatting-header,
+.cm-formatting-em,
+.cm-formatting-strong,
+.cm-formatting-code,
+.cm-formatting-code-block,
+.cm-formatting-link,
+.cm-formatting-link-string,
+.cm-formatting-link-string + .cm-string,
+/*.cm-formatting-link + .cm-link + .cm-formatting-link + .cm-link,*/
+.cm-tag,
+.cm-formatting-quote,
+.cm-formatting-quote-1,
+/*.cm-formatting-list,
+.cm-formatting-list-ol,
+.cm-formatting-list-ul,*/
+.cm-hr {
+	color:rgb(67,67,67) !important;
+	opacity: 0.2;
+	font-family: Cousine, Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+	font-style:normal !important;
+	font-weight:normal !important;
+	font-size: 0.8rem;
+}
+.cm-tag,
+.cm-formatting-link-string + .cm-string { opacity: 0.5; }
+
+/* Hang syntax markers of block-level elements into the margin */
+/* To do:
+ - fix regex for headings (in CodeMirror submodule, markdown.js): `atxHeaderRE = /^#+\s/`
+ - fix headings’ index (ibidem): `state.header = match[0].length <= 6 ? match[0].length-1 : 6;`
+*/
+@media (min-width: 800px) {
+	.cm-formatting-header,
+	.cm-formatting-quote,
+	.cm-formatting-list,
+	.cm-hr:before {
+		color:inherit;
+		position: absolute;
+		bottom:top;
+		left:-5rem;
+		width:4.5rem;
+		text-align: right;
+		-webkit-box-sizing: border-box;
+			 -moz-box-sizing: border-box;
+				-ms-box-sizing: border-box;
+				 -o-box-sizing: border-box;
+						box-sizing: border-box;
+	}
+}
+
+.cm-formatting-list-ul           { visibility: hidden; }
+.cm-formatting-list-ul:before    { content:"–"; visibility: visible; }
+/* To do:
+ - fix regex for ordered lists (in CodeMirror submodule, markdown.js): `olRE = /^([0-9]+\.|[A-z]+\))\s+/`
+*/
+.cm-formatting-code-block        { visibility: hidden; }
+.cm-formatting-code-block:before { content:"┄"; visibility: visible; }
+.cm-hr {
+	display: block;
+	border-bottom: solid 1px rgb(150,150,150);
+	color: transparent !important;
+}.cm-hr:before {
+	content:"⁂"; /* U+2042 'ASTERISM' */
+	color: rgb(67,67,67) !important;
+}

css/app-typography.css

@@ -0,0 +1,131 @@
+@charset "utf-8";
+
+/* TYPOGRAPHY FOR TOKENIZED, SEMANTIC ELEMENTS ============================== */
+
+/* Headings ----------------------------------------------------------------- */
+.cm-header   { color:rgb(67,67,67); }
+.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4 { padding-bottom: 1rem; }
+.cm-header-1:first-of-type { line-height: 4.0rem; font-size: 3.9rem; padding-top:1.0rem; }
+.cm-header-1 { line-height: 3.0rem; font-size: 2.9rem; padding-top:3.0rem; }
+.cm-header-2 { line-height: 2.5rem; font-size: 2.4rem; padding-top:3.0rem; }
+.cm-header-3 { line-height: 2.0rem; font-size: 1.9rem; padding-top:2.0rem; }
+.cm-header-4 { line-height: 1.0rem; font-size: 1.0rem; padding-top:2.0rem; text-transform: uppercase; }
+.cm-header-5 { line-height: 1.0rem; font-size: 1.0rem; padding-top:2.0rem; font-weight:  bold; }
+.cm-header-6 { line-height: 1.0rem; font-size: 1.0rem; padding-top:2.0rem; font-style: italic; }
+.cm-formatting-header-1:first-of-type { padding-top: 1rem; }
+.cm-formatting-header-1 { padding-top: 0.70rem; }
+.cm-formatting-header-2 { padding-top: 0.55rem; }
+.cm-formatting-header-3 { padding-top: 0.45rem; }
+@media screen and (max-width: 460px) {
+  .cm-header-1:first-of-type { line-height: 2.5rem; font-size: 2.4rem; padding-top:1.0rem; }
+  .cm-header-1, .cm-header-2 { line-height: 2.0rem; font-size: 1.9rem; padding-top:2.0rem; }
+  .cm-header-3               { line-height: 1.5rem; font-size: 1.4rem; padding-top:1.5rem; }
+}
+
+/* Emphasis ----------------------------------------------------------------- */
+.cm-em { font-style:italic; }
+.cm-strong {
+	font-weight: bold;
+	-webkit-font-feature-settings: "smcp";
+		 -moz-font-feature-settings: "smcp";
+			-ms-font-feature-settings: "smcp";
+			 -o-font-feature-settings: "smcp";
+					font-feature-settings: "smcp";
+}
+
+/* Hyperlinks --------------------------------------------------------------- */
+.cm-link { color: rgb(0,0,180); text-decoration: none;}
+.cm-link:hover { color: rgb(0,0,200); text-decoration: underline; cursor:pointer;}
+
+
+/* Referenced links --------------------------------------------------------- */
+/* .cm-formatting-link + .cm-link + .cm-formatting-link + .cm-link { } */
+.cm-formatting-link + .cm-link + .cm-formatting-link + .cm-string,
+.cm-formatting-link + .cm-link + .cm-formatting-link + .cm-string + * {
+	color:red;
+	font-size: 0.7em;
+}
+
+/* Blockquotes -------------------------------------------------------------- */
+.cm-quote,
+.cm-quote-1 {
+	font-style: italic;
+	/* To do:
+		 We want an empty white space above and below the blockquote.
+		 We also want the blockquote to be indented both on the left and the right.
+		 We would do that by setting margings or paddings, but then we have to also
+		 set a display:block; on the <span>, which we cannot do, because that fucks
+		 up the editing behaviour of CodeMirror.
+	display        : block;
+	padding-top    : 0.5rem;
+	padding-bottom : 0.5rem;
+	padding-left   : 1rem;
+	padding-right  : 1rem;
+	*/
+	/* To do: bug:
+		Apparently, the blockquote needs to be followed by an empty line, if not
+		it leaks into the following line.
+	*/
+}
+
+/* (Fenced) Code blocks ----------------------------------------------------- */
+.cm-comment, .cm-leadingspace {
+	/* markdown mode styles `...` and indented code blocks as "comment". */
+	max-width: 60rem;
+	overflow-x:scroll;
+	/*white-space: nowrap;*/
+	font-family: Courier, monospace;
+	font-size:0.9em;
+	background-color: rgb(245,245,245);
+}
+
+/* Inline code -------------------------------------------------------------- */
+.cm-formatting-code + .cm-comment {
+	padding-left: 0.25em;
+	padding-right: 0.25em;
+}
+
+/* Math --------------------------------------------------------------------- */
+.math.cm-comment {
+	/* exclude math from monospace style to avoid mathjax vertically
+		 squishing formulas, especially display. */
+	font-family: serif;
+}
+/* Below are **very** ugly hacks that hack on CodeMirror’s very ugly DOM structure.
+   To do: bug: if an equation is the only marked-up element in a paragraph, it will
+   break the line as if it were a stand-alone equation. */
+.CodeMirror-code { counter-reset: equation; }
+pre > span.CodeMirror-widget { text-align: center; }
+pre > span.CodeMirror-widget:only-of-type { display:block; }
+pre > span.CodeMirror-widget:only-of-type > .math { display:block !important; width:100%; }
+pre > span.CodeMirror-widget:only-of-type > .math > .MathJax_Display { display:block !important; width:100%; counter-increment: equation; }
+pre > span.CodeMirror-widget:only-of-type > .math > .MathJax_Display:after {
+	display: block;
+	position: absolute;
+	width:2rem;
+	white-space: nowrap;
+	overflow:visible;
+	right:-3rem;
+	top:0;
+	bottom:0;
+	content:"("counter(equation, lower-greek)")";
+	text-transform: uppercase;
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+	 -webkit-flex-direction: row;
+			 -ms-flex-direction: row;
+					 flex-direction: row;
+				-webkit-flex-wrap: nowrap;
+						-ms-flex-wrap: nowrap;
+								flex-wrap: nowrap;
+	-webkit-justify-content: flex-start;
+						-ms-flex-pack: start;
+					justify-content: flex-start;
+		-webkit-align-content: center;
+			 -ms-flex-line-pack: center;
+						align-content: center;
+			-webkit-align-items: center;
+					 -ms-flex-align: center;
+							align-items: center;
+}