From 5dc49fb4449ef3e6ed5497d9dc1484d8b12ce0cc Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 19:04:38 +0200 Subject: [PATCH 01/24] playing around --- css/app-header.css | 90 +++++++++++++++ css/app-markdownSyntax.css | 70 ++++++++++++ css/app-typography.css | 132 ++++++++++++++++++++++ css/app-views.css | 58 ++++++++++ css/cm-codemirror.css | 224 +++++++++++++++++++++++++++++++++++++ css/cm-dialog.css | 28 +++++ css/cm-foldgutter.css | 55 +++++++++ css/fonts.css | 32 ++++++ index.html | 98 +++++++++++----- mathdown.css | 167 +++++++++++++++++---------- 10 files changed, 865 insertions(+), 89 deletions(-) create mode 100644 css/app-header.css create mode 100644 css/app-markdownSyntax.css create mode 100644 css/app-typography.css create mode 100644 css/app-views.css create mode 100644 css/cm-codemirror.css create mode 100644 css/cm-dialog.css create mode 100644 css/cm-foldgutter.css create mode 100644 css/fonts.css diff --git a/css/app-header.css b/css/app-header.css new file mode 100644 index 0000000..85efad9 --- /dev/null +++ b/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(1,25,35); + color:rgb(0,110,200); + -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(50,160,250); } +#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); +} diff --git a/css/app-markdownSyntax.css b/css/app-markdownSyntax.css new file mode 100644 index 0000000..e0b13de --- /dev/null +++ b/css/app-markdownSyntax.css @@ -0,0 +1,70 @@ +@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 */ +@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; } +.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; +} diff --git a/css/app-typography.css b/css/app-typography.css new file mode 100644 index 0000000..1a96e71 --- /dev/null +++ b/css/app-typography.css @@ -0,0 +1,132 @@ +@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 , 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; +} diff --git a/css/app-views.css b/css/app-views.css new file mode 100644 index 0000000..a5a784e --- /dev/null +++ b/css/app-views.css @@ -0,0 +1,58 @@ +/* ALTERNATIVE VIEWS ======================================================== */ +/* To Do: Put controls in the GUI which allow the user to toggle alternative views on and off. + We assume a view’s class name will be set on the .CodeMirror container. */ + +/* Justified layout --------------------------------------------------------- */ +.justified .CodeMirror-sizer { + max-width: 35rem; + margin-left: auto !important; + margin-right: auto !important; +} +.justified .CodeMirror-code pre { + text-align: justify; + white-space: normal !important; /* https://bugs.webkit.org/show_bug.cgi?id=84448 */ +} + +/* Hide formatting syntax markers ------------------------------------------- */ +/* Cfr https://github.com/cben/mathdown/issues/29 */ +.hideSyntax .cm-formatting, +.hideSyntax .cm-hr:before, +.hideSyntax .cm-formatting-link-string + .cm-string { display: none; } + +/* Color-coded token highlighting ------------------------------------------- */ +/* To Do (if colored token highlighting would be desirable at all): + implement theme with subtle color scheme, + e.g. http://chriskempson.github.io/base16/#eighties */ +.colorize .cm-keyword { /* color: #708; */ } +.colorize .cm-atom { /* color: #219; */ } +.colorize .cm-number { /* color: #164; */ } +.colorize .cm-def { /* color: #00f; */ } +.colorize .cm-variable { /* color: black;*/ } +.colorize .cm-variable-2 { /* color: #05a; */ } +.colorize .cm-variable-3 { /* color: #085; */ } +.colorize .cm-property { /* color: black;*/ } +.colorize .cm-operator { /* color: black;*/ } +.colorize .cm-comment { /* color: #a50; */ } +.colorize .cm-string { /* color: #a11; */ } +.colorize .cm-string-2 { /* color: #f50; */ } +.colorize .cm-meta { /* color: #555; */ } +.colorize .cm-qualifier { /* color: #555; */ } +.colorize .cm-builtin { /* color: #30a; */ } +.colorize .cm-bracket { /* color: #997; */ } +.colorize .cm-tag { /* color: #170; */ } +.colorize .cm-attribute { /* color: #00c; */ } +.colorize .cm-header { } +.colorize .cm-quote { /* color: #090; */ } +.colorize .cm-hr { /* color: #999; */ } +.colorize .cm-link { /* color: #00c; */ } +.colorize .cm-negative { /* color: #d44; */ } +.colorize .cm-positive { /* color: #292; */ } +.colorize .cm-header { } +.colorize .cm-strong { } +.colorize .cm-em { } +.colorize .cm-link { } +.colorize .cm-error { /* color: #f00; */ } +.colorize .cm-invalidchar { /* color: #f00; */ } +.colorize .CodeMirror-matchingbracket { /* color: #0f0; */ } +.colorize .CodeMirror-nonmatchingbracket { /* color: #f22; */ } +.colorize .CodeMirror-activeline-background { /* background: #e8f2ff; */ } diff --git a/css/cm-codemirror.css b/css/cm-codemirror.css new file mode 100644 index 0000000..c80c431 --- /dev/null +++ b/css/cm-codemirror.css @@ -0,0 +1,224 @@ +/* CODEMIRROR MECHANICS ===================================================== */ +/* Adapted from `CodeMirror/lib/codemirror.css` */ + +/* BASICS ------------------------------------------------------------------- */ +.CodeMirror { + line-height: 1.3; + position: relative; + overflow: hidden; + background: white; + color: black; +} +.CodeMirror-scroll { + /* Set scrolling behaviour here */ + overflow: auto; + /* 30px is the magic margin used to hide the element's real scrollbars */ + /* See overflow: hidden in .CodeMirror */ + margin-bottom: -30px; + margin-right: -30px; + padding-bottom: 30px; + height: 100%; + outline: none; /* Prevent dragging from highlighting the element */ + position: relative; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + -ms-box-sizing: content-box; + -o-box-sizing: content-box; + box-sizing: content-box; +} + +/* PADDING ------------------------------------------------------------------ */ +.CodeMirror-lines { } /* Vertical padding around content */ +.CodeMirror pre { } /* Horizontal padding of content */ +.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + background-color: transparent; /* The little square between H and V scrollbars */ +} + +/* GUTTER ------------------------------------------------------------------- */ +.CodeMirror-gutter { background-color: transparent; } +.CodeMirror-gutter-wrapper { background-color: transparent; } +.CodeMirror-gutters { background-color: transparent; + white-space: nowrap; + border-right: 1px dotted #ddd; +} +.CodeMirror-linenumbers {} +.CodeMirror-linenumber { + padding : 0 3px 0 5px; + min-width : 20px; + text-align : right; + color : #999; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + -ms-box-sizing: content-box; + -o-box-sizing: content-box; + box-sizing: content-box; +} + +/* CURSOR ------------------------------------------------------------------- */ +.CodeMirror-cursor, +.CodeMirror-secondarycursor { + z-index: 3; + border-style: solid; + border-left-width: 2px; + border-right-width: 1px; +} .CodeMirror-cursor { + border-color: rgba(20,170,255,0.6); +} .CodeMirror-secondarycursor { + /* Shown when moving in bi-directional text */ + border-color: silver; +} +.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor { + width: auto; + border: 0; + background-color: rgba(20,170,255,0.6); + z-index: 1; +} +/* Can style cursor different in overwrite (non-insert) mode */ +.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite { } +.cm-tab { display: inline-block; } +.CodeMirror-ruler { position: absolute; } +@media print { + /* Hide the cursor when printing */ + .CodeMirror div.CodeMirror-cursor { + visibility: hidden; + } +} + +/* STOP --------------------------------------------------------------------- */ + +.CodeMirror-sizer { + position: relative; + padding: 1em; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + -ms-box-sizing: content-box; + -o-box-sizing: content-box; + box-sizing: content-box; +} +@media (min-width: 800px) { + .CodeMirror-sizer { padding:5em; } +} + +/* The fake, visible scrollbars. Used to force redraw during scrolling + before actuall scrolling happens, thus preventing shaking and + flickering artifacts. */ +.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + position: absolute; + z-index: 6; + display: none; +} +.CodeMirror-vscrollbar { + right: 0; top: 0; + overflow-x: hidden; + overflow-y: scroll; +} +.CodeMirror-hscrollbar { + bottom: 0; left: 0; + overflow-y: hidden; + overflow-x: scroll; +} +.CodeMirror-scrollbar-filler { + right: 0; bottom: 0; +} +.CodeMirror-gutter-filler { + left: 0; bottom: 0; +} + +.CodeMirror-gutters { + position: absolute; left: 0; top: 0; + padding-bottom: 30px; + z-index: 3; +} +.CodeMirror-gutter { + white-space: normal; + height: 100%; + -moz-box-sizing: content-box; + box-sizing: content-box; + padding-bottom: 30px; + margin-bottom: -32px; + display: inline-block; + /* Hack to make IE7 behave */ + *zoom:1; + *display:inline; +} + +.CodeMirror-gutter-elt { + cursor: default; + z-index: 4; + position: absolute; +} + +.CodeMirror-lines { + cursor: text; +} +.CodeMirror pre { + /* Reset some styles that the rest of the page might have set */ + -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; + border-width: 0; + background: transparent; + font-family: inherit; + /*font-size: inherit;*/ + margin: 0; + white-space: pre; + word-wrap: normal; + /* + line-height: inherit; + */ + color: inherit; + z-index: 2; + position: relative; + overflow: visible; +} +.CodeMirror-wrap pre { + word-wrap: break-word; + white-space: pre-wrap; + word-break: normal; +} + +.CodeMirror-linebackground { + position: absolute; + left: 0; right: 0; top: 0; bottom: 0; + z-index: 0; +} + +.CodeMirror-linewidget { + position: relative; + z-index: 2; + overflow: auto; +} + +.CodeMirror-widget {} + +.CodeMirror-wrap .CodeMirror-scroll { + overflow-x: hidden; +} + +.CodeMirror-measure { + position: absolute; + width: 100%; + height: 0; + overflow: hidden; + visibility: hidden; +} +.CodeMirror-measure pre { position: static; } + +.CodeMirror div.CodeMirror-cursor { + position: absolute; + visibility: hidden; + border-right: none; + width: 0; +} +.CodeMirror-focused div.CodeMirror-cursor { + visibility: visible; +} + +.CodeMirror-selected { background: yellow; } +.CodeMirror-focused .CodeMirror-selected { background: yellow; } + +.cm-searching { + background: #ffa; + background: rgba(255, 255, 0, .4); +} + +/* IE7 hack to prevent it from returning funny offsetTops on the spans */ +.CodeMirror span { *vertical-align: text-bottom; } diff --git a/css/cm-dialog.css b/css/cm-dialog.css new file mode 100644 index 0000000..583a35a --- /dev/null +++ b/css/cm-dialog.css @@ -0,0 +1,28 @@ +/* CODEMIRROR DIALOG ----------------------------------------------------- */ +/* Adapted from `CodeMirror/addon/dialog/dialog.css` ------------------------ */ +.CodeMirror-dialog { + z-index: 15; + position: absolute; + left: 0; right: 0; + overflow: hidden; + padding-left : 1.0rem; + padding-right : 1.0rem; + padding-top : 0.6rem; + padding-bottom : 0.4rem; + font-size: 0.7rem; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + background-color: rgb(30,30,30); + color: rgb(200,200,200); +} +.CodeMirror-dialog-top { top : 0; border-bottom: 1px solid #eee; } +.CodeMirror-dialog-bottom { bottom: 0; border-top : 1px solid #eee; } +.CodeMirror-dialog input { + border: none; + outline: none; + background: transparent; + width: 50em; + color: white; + font-size: 2em; + font-family: Cousine, Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; +} +.CodeMirror-dialog button { } diff --git a/css/cm-foldgutter.css b/css/cm-foldgutter.css new file mode 100644 index 0000000..9460200 --- /dev/null +++ b/css/cm-foldgutter.css @@ -0,0 +1,55 @@ +/* CODEMIRROR FOLD GUTTER ------------------------------------------------ */ +/* Adapted from `CodeMirror/addon/fold/foldgutter.css` ---------------------- */ + +.CodeMirror-foldmarker { + cursor: pointer; + line-height: .3; + display: inline-block; + -webkit-transform:scale(.7,.7); + -moz-transform:scale(.7,.7); + -ms-transform:scale(.7,.7); + -o-transform:scale(.7,.7); + transform:scale(.7,.7); +} .CodeMirror-foldmarker:after { + display: inline-block; + content: "…"; + font-family: Cousine, Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; + font-size: 1rem; + margin-left:1rem; + padding-top:5px; + padding-bottom: 5px; + padding-left: 7px; + padding-right: 7px; + height:10px; + bottom:5px; + background-color: rgb(20,170,255);; + color:white; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + border-radius: 2px; + position: absolute; +} + +.CodeMirror-foldgutter { + background-color: transparent; + width: 1.5rem; + /* Small triagles are not covered by default fonts on WinXP and Android. */ + font-family: Cousine, Consolas, "Lucida Sans Unicode", "Droid Sans Fallback", "Arial Unicode", Arial, serif; +} +.CodeMirror-foldgutter-open, +.CodeMirror-foldgutter-folded { + cursor: pointer; +} +.CodeMirror-foldgutter-open:after { + content: "▾"; /* U+25BE BLACK DOWN-POINTING SMALL TRIANGLE */ + color:rgb(200,200,200); +} +.CodeMirror-foldgutter-folded:after { + content: "▸"; /* U+25B8 BLACK RIGHT-POINTING SMALL TRIANGLE */ + color:rgb(20,170,255); +} + +.CodeMirror-gutter-elt { + left:-0.5rem !important; +} diff --git a/css/fonts.css b/css/fonts.css new file mode 100644 index 0000000..d4eb7b7 --- /dev/null +++ b/css/fonts.css @@ -0,0 +1,32 @@ +/* Get Web fonts ------------------------------------------------------------ */ + +@font-face { + font-family: 'FontAwesome'; + src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff') format('woff'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg'); + font-weight: normal; + font-style: normal; +} + +/* To do: Don’t load fonts as an external dependency, but serve our own, + likely from the MathJax lib. */ +@font-face { + font-family: "Computer Modern"; + src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunbi.otf'); + font-weight: bold; + font-style: italic; +} +@font-face { + font-family: "Computer Modern"; + src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunrb.otf'); + font-weight: bold; +} +@font-face { + font-family: "Computer Modern"; + src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunci.otf'); + font-style: italic; +} +@font-face { + font-family: "Computer Modern"; + src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunrm.otf'); + font-weight: normal; +} diff --git a/index.html b/index.html index 71965b0..8e69353 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,6 @@ - - - + + ℳ↧ ⋯ - - ⋯ | mathdown + + + + + + + @@ -32,9 +39,21 @@ - - - + + + + + + + + + + + + + + + - - - - - - - - - + + + Fork me + +
diff --git a/mathdown.css b/mathdown.css index 31badc6..c1f3c62 100644 --- a/mathdown.css +++ b/mathdown.css @@ -1,56 +1,127 @@ -#logo { - color: black; text-decoration: none; /* Don't look like a link */ - display: inline-block; width: 4em; +@charset "utf-8"; + +/* OVERRIDE LIBS ============================================================ */ + +/* Override fixed editor size from firepad.css ------------------------------ */ +.firepad { height: 100%; } +.firepad .CodeMirror { height: 100%; position: relative; } +.powered-by-firepad { background-image: none; } /* Disable Firepad logo */ + +/* CodeMirror Hacks --------------------------------------------------------- */ +/* These are relevant to the app; other overrides of the original CodeMirror css + are in `css/cm-codemirror.css` */ +.CodeMirror { min-height: 100vh; } +@media (min-width: 800px) { .CodeMirror-gutter-wrapper { + height: 100%; + left:-5.5rem !important; + } } -.warning { color: orange; } +.CodeMirror-code > pre, +.CodeMirror-code > div { text-indent: 0 !important; padding-left: 0; } +.CodeMirror pre[style] { text-indent: 0; padding-left:0 !important; } +/* We set (in "renderLine" event) negative text-indent on indented lines, + which if inherited by any nested inline-block breaks their positioning + (math overlaps text, tabs become almost invisible). Thanks to + https://github.com/mathjax/MathJax/issues/473 for easy fix. */ +.CodeMirror pre > * { text-indent: 0 !important; } -@media print { #header { display: none; } } +.CodeMirror-selected { background: yellow; } +.CodeMirror-focused .CodeMirror-selected { background: yellow; } +.CodeMirror-gutter-elt { + /* To do: When there are more lines in a header, the gutter folding arrow + should sit on the baseline of the first line. */ + position: absolute; + bottom:1rem; +} -#content { clear: both; } +/* NORMALIZE BROWSERS ======================================================= */ +html { + height: 100%; + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} +html * { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} +body { height: 100%; width: 100%; margin:0; } -@media screen { .CodeMirror { border: 1px solid silver; } } -@media print { .CodeMirror { border: 1px none; } } +/* Auto-responsive scaling for various screen sizes ------------------------- */ -/* Expand editor to fit most of the page. */ -html, body, form, textarea, .CodeMirror { - height: 100%; width: 100%; - -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; +@media screen and (max-width: 460px) { + html { font-size: 14px; } +} +@media screen and (min-width: 461px) and (max-width: 800px) { + html { font-size: 16px; } +} +@media screen and (min-width: 801px) { + html { font-size: 18px; } +} + + + +/* DEFAULT STYLES & SETUP =================================================== */ + +/* Setup and Dimensions of Editor Canvas ------------------------------------ */ +#content { + clear: both; + background-color: rgb(250,250,250); + min-height: 100%; +} +form, textarea, .CodeMirror { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; + padding-right: 1rem; } /* TODO: downsizing body is ugly but works better than downsizing form. */ -body { height: 80%; width: 95%; } +/*body { height: 80%; width: 95%; }*/ /* These would make the editor exactly fill the available space, but also cause CM to auto-resize and never scroll (instead whole page scrolls), which makes CM slower. body { display: table; } form { display: table-row; } */ -/* Override fixed editor size from firepad.css */ -.firepad { height: 100%; } -.firepad .CodeMirror { height: 100%; position: relative; } -/* Disable Firepad logo */ -.powered-by-firepad { background-image: none; } +.firedpad { + max-width: 100%; +} +.CodeMirror-sizer { + max-width: 35rem; + /*margin-right: 22px;*/ +} +.CodeMirror-code { + max-width: 35rem; +} -.CodeMirror { - /* Font choices based on Math.SE: http://graphicdesign.stackexchange.com/a/12961 */ - font-family: Georgia, "Bitstream Charter", "Times New Roman", Times, serif; + +/* Fonts & Colors ----------------------------------------------------------- */ +.CodeMirror, +.CodeMirror-code { + /* Homage to Don Knuth’s Computer Modern fonts; for alternatives + cfr Math.SE: http://graphicdesign.stackexchange.com/a/12961 */ + font-family: "Computer Modern", "Times New Roman", Times, serif; + -webkit-text-rendering: optimizeLegibility; + text-rendering: optimizeLegibility; + -webkit-font-kerning: auto; + font-kerning: auto; + line-height: 1.3em; + color: rgb(67,67,67); } -/* Match h1..h6 default sizes in WebKit, Mozilla & IE as of 2013. */ -pre.cm-header-1 { font-size: 2.00em; } -pre.cm-header-2 { font-size: 1.50em; } -pre.cm-header-3 { font-size: 1.17em; } -pre.cm-header-4 { font-size: 1.00em; } -pre.cm-header-5 { font-size: 0.83em; } -pre.cm-header-6 { font-size: 0.67em; } -/* Arbitrary margins for headers (non-hegligible but not too big). */ -pre.cm-header { padding-top: 0.5em; padding-bottom: 0.5em; } -/* De-emphasize markup characters. Whitewash colors by *0.4 factor. */ -.cm-s-default .cm-formatting-header { color: #66F; } -.cm-s-default .cm-formatting-em { color: #666; } -.cm-s-default .cm-formatting-strong { color: #666; } -.cm-s-default .cm-formatting-code { color: #c96; } -.cm-s-default .cm-formatting-list { font-weight: bold; } + + +/* TO DO’s ===================================================================*/ + /* Want to disable/de-emphasize coloring of list lines, leaving only bullet colored. - But can't, as long as color is important for lining up continuation lines. + But can't, as long as color is important for lining up continuation lines. .cm-s-default .cm-variable-2 { color: #003366; } .cm-s-default .cm-variable-2.cm-formatting-list { color: #05a; } .cm-s-default .cm-variable-3 { color: #005233; } @@ -58,25 +129,3 @@ pre.cm-header { padding-top: 0.5em; padding-bottom: 0.5em; } .cm-s-default .cm-keyword { color: #470052; } .cm-s-default .cm-keyword.cm-formatting-list { color: #708; } */ -/* markdown mode styles `...` and indented code blocks as "comment". */ -.cm-comment, .cm-leadingspace, .cm-formatting-list { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; } -/* exclude math from monospace style to avoid mathjax vertically - squishing formulas, especially display. */ -.math.cm-comment { font-family: serif; } - -/* We set (in "renderLine" event) negative text-indent on indented lines, - which if inherited by any nested inline-block breaks their positioning - (math overlaps text, tabs become almost invisible). Thanks to - https://github.com/mathjax/MathJax/issues/473 for easy fix. */ -.CodeMirror pre > * { text-indent: 0; } - -/* Vertically center gutter markers - looks better on our variable-height - padded headings. */ -.CodeMirror-gutter-wrapper { height: 100%; } -.CodeMirror-gutter-elt { height: 100%; display: table; } -.CodeMirror-foldgutter-open, -.CodeMirror-foldgutter-folded { - height: 100%; display: table-cell; vertical-align: middle; - /* Small triagles are not covered by default fonts on WinXP and Android. */ - font-family: "Lucida Sans Unicode", "Droid Sans Fallback", "Arial"; -} From c370b798b7e80fca8ba2f730858aed7068346f09 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 19:05:02 +0200 Subject: [PATCH 02/24] Revert "playing around" This reverts commit 5dc49fb4449ef3e6ed5497d9dc1484d8b12ce0cc. --- css/app-header.css | 90 --------------- css/app-markdownSyntax.css | 70 ------------ css/app-typography.css | 132 ---------------------- css/app-views.css | 58 ---------- css/cm-codemirror.css | 224 ------------------------------------- css/cm-dialog.css | 28 ----- css/cm-foldgutter.css | 55 --------- css/fonts.css | 32 ------ index.html | 98 +++++----------- mathdown.css | 167 ++++++++++----------------- 10 files changed, 89 insertions(+), 865 deletions(-) delete mode 100644 css/app-header.css delete mode 100644 css/app-markdownSyntax.css delete mode 100644 css/app-typography.css delete mode 100644 css/app-views.css delete mode 100644 css/cm-codemirror.css delete mode 100644 css/cm-dialog.css delete mode 100644 css/cm-foldgutter.css delete mode 100644 css/fonts.css diff --git a/css/app-header.css b/css/app-header.css deleted file mode 100644 index 85efad9..0000000 --- a/css/app-header.css +++ /dev/null @@ -1,90 +0,0 @@ -@charset "utf-8"; - -/* APPLICATION HEADER ======================================================= */ -@media print { #header { display: none; } } -#header { - display: block; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - background-color: rgb(1,25,35); - color:rgb(0,110,200); - -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(50,160,250); } -#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); -} diff --git a/css/app-markdownSyntax.css b/css/app-markdownSyntax.css deleted file mode 100644 index e0b13de..0000000 --- a/css/app-markdownSyntax.css +++ /dev/null @@ -1,70 +0,0 @@ -@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 */ -@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; } -.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; -} diff --git a/css/app-typography.css b/css/app-typography.css deleted file mode 100644 index 1a96e71..0000000 --- a/css/app-typography.css +++ /dev/null @@ -1,132 +0,0 @@ -@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 , 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; -} diff --git a/css/app-views.css b/css/app-views.css deleted file mode 100644 index a5a784e..0000000 --- a/css/app-views.css +++ /dev/null @@ -1,58 +0,0 @@ -/* ALTERNATIVE VIEWS ======================================================== */ -/* To Do: Put controls in the GUI which allow the user to toggle alternative views on and off. - We assume a view’s class name will be set on the .CodeMirror container. */ - -/* Justified layout --------------------------------------------------------- */ -.justified .CodeMirror-sizer { - max-width: 35rem; - margin-left: auto !important; - margin-right: auto !important; -} -.justified .CodeMirror-code pre { - text-align: justify; - white-space: normal !important; /* https://bugs.webkit.org/show_bug.cgi?id=84448 */ -} - -/* Hide formatting syntax markers ------------------------------------------- */ -/* Cfr https://github.com/cben/mathdown/issues/29 */ -.hideSyntax .cm-formatting, -.hideSyntax .cm-hr:before, -.hideSyntax .cm-formatting-link-string + .cm-string { display: none; } - -/* Color-coded token highlighting ------------------------------------------- */ -/* To Do (if colored token highlighting would be desirable at all): - implement theme with subtle color scheme, - e.g. http://chriskempson.github.io/base16/#eighties */ -.colorize .cm-keyword { /* color: #708; */ } -.colorize .cm-atom { /* color: #219; */ } -.colorize .cm-number { /* color: #164; */ } -.colorize .cm-def { /* color: #00f; */ } -.colorize .cm-variable { /* color: black;*/ } -.colorize .cm-variable-2 { /* color: #05a; */ } -.colorize .cm-variable-3 { /* color: #085; */ } -.colorize .cm-property { /* color: black;*/ } -.colorize .cm-operator { /* color: black;*/ } -.colorize .cm-comment { /* color: #a50; */ } -.colorize .cm-string { /* color: #a11; */ } -.colorize .cm-string-2 { /* color: #f50; */ } -.colorize .cm-meta { /* color: #555; */ } -.colorize .cm-qualifier { /* color: #555; */ } -.colorize .cm-builtin { /* color: #30a; */ } -.colorize .cm-bracket { /* color: #997; */ } -.colorize .cm-tag { /* color: #170; */ } -.colorize .cm-attribute { /* color: #00c; */ } -.colorize .cm-header { } -.colorize .cm-quote { /* color: #090; */ } -.colorize .cm-hr { /* color: #999; */ } -.colorize .cm-link { /* color: #00c; */ } -.colorize .cm-negative { /* color: #d44; */ } -.colorize .cm-positive { /* color: #292; */ } -.colorize .cm-header { } -.colorize .cm-strong { } -.colorize .cm-em { } -.colorize .cm-link { } -.colorize .cm-error { /* color: #f00; */ } -.colorize .cm-invalidchar { /* color: #f00; */ } -.colorize .CodeMirror-matchingbracket { /* color: #0f0; */ } -.colorize .CodeMirror-nonmatchingbracket { /* color: #f22; */ } -.colorize .CodeMirror-activeline-background { /* background: #e8f2ff; */ } diff --git a/css/cm-codemirror.css b/css/cm-codemirror.css deleted file mode 100644 index c80c431..0000000 --- a/css/cm-codemirror.css +++ /dev/null @@ -1,224 +0,0 @@ -/* CODEMIRROR MECHANICS ===================================================== */ -/* Adapted from `CodeMirror/lib/codemirror.css` */ - -/* BASICS ------------------------------------------------------------------- */ -.CodeMirror { - line-height: 1.3; - position: relative; - overflow: hidden; - background: white; - color: black; -} -.CodeMirror-scroll { - /* Set scrolling behaviour here */ - overflow: auto; - /* 30px is the magic margin used to hide the element's real scrollbars */ - /* See overflow: hidden in .CodeMirror */ - margin-bottom: -30px; - margin-right: -30px; - padding-bottom: 30px; - height: 100%; - outline: none; /* Prevent dragging from highlighting the element */ - position: relative; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - -ms-box-sizing: content-box; - -o-box-sizing: content-box; - box-sizing: content-box; -} - -/* PADDING ------------------------------------------------------------------ */ -.CodeMirror-lines { } /* Vertical padding around content */ -.CodeMirror pre { } /* Horizontal padding of content */ -.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { - background-color: transparent; /* The little square between H and V scrollbars */ -} - -/* GUTTER ------------------------------------------------------------------- */ -.CodeMirror-gutter { background-color: transparent; } -.CodeMirror-gutter-wrapper { background-color: transparent; } -.CodeMirror-gutters { background-color: transparent; - white-space: nowrap; - border-right: 1px dotted #ddd; -} -.CodeMirror-linenumbers {} -.CodeMirror-linenumber { - padding : 0 3px 0 5px; - min-width : 20px; - text-align : right; - color : #999; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - -ms-box-sizing: content-box; - -o-box-sizing: content-box; - box-sizing: content-box; -} - -/* CURSOR ------------------------------------------------------------------- */ -.CodeMirror-cursor, -.CodeMirror-secondarycursor { - z-index: 3; - border-style: solid; - border-left-width: 2px; - border-right-width: 1px; -} .CodeMirror-cursor { - border-color: rgba(20,170,255,0.6); -} .CodeMirror-secondarycursor { - /* Shown when moving in bi-directional text */ - border-color: silver; -} -.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor { - width: auto; - border: 0; - background-color: rgba(20,170,255,0.6); - z-index: 1; -} -/* Can style cursor different in overwrite (non-insert) mode */ -.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite { } -.cm-tab { display: inline-block; } -.CodeMirror-ruler { position: absolute; } -@media print { - /* Hide the cursor when printing */ - .CodeMirror div.CodeMirror-cursor { - visibility: hidden; - } -} - -/* STOP --------------------------------------------------------------------- */ - -.CodeMirror-sizer { - position: relative; - padding: 1em; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - -ms-box-sizing: content-box; - -o-box-sizing: content-box; - box-sizing: content-box; -} -@media (min-width: 800px) { - .CodeMirror-sizer { padding:5em; } -} - -/* The fake, visible scrollbars. Used to force redraw during scrolling - before actuall scrolling happens, thus preventing shaking and - flickering artifacts. */ -.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { - position: absolute; - z-index: 6; - display: none; -} -.CodeMirror-vscrollbar { - right: 0; top: 0; - overflow-x: hidden; - overflow-y: scroll; -} -.CodeMirror-hscrollbar { - bottom: 0; left: 0; - overflow-y: hidden; - overflow-x: scroll; -} -.CodeMirror-scrollbar-filler { - right: 0; bottom: 0; -} -.CodeMirror-gutter-filler { - left: 0; bottom: 0; -} - -.CodeMirror-gutters { - position: absolute; left: 0; top: 0; - padding-bottom: 30px; - z-index: 3; -} -.CodeMirror-gutter { - white-space: normal; - height: 100%; - -moz-box-sizing: content-box; - box-sizing: content-box; - padding-bottom: 30px; - margin-bottom: -32px; - display: inline-block; - /* Hack to make IE7 behave */ - *zoom:1; - *display:inline; -} - -.CodeMirror-gutter-elt { - cursor: default; - z-index: 4; - position: absolute; -} - -.CodeMirror-lines { - cursor: text; -} -.CodeMirror pre { - /* Reset some styles that the rest of the page might have set */ - -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; - border-width: 0; - background: transparent; - font-family: inherit; - /*font-size: inherit;*/ - margin: 0; - white-space: pre; - word-wrap: normal; - /* - line-height: inherit; - */ - color: inherit; - z-index: 2; - position: relative; - overflow: visible; -} -.CodeMirror-wrap pre { - word-wrap: break-word; - white-space: pre-wrap; - word-break: normal; -} - -.CodeMirror-linebackground { - position: absolute; - left: 0; right: 0; top: 0; bottom: 0; - z-index: 0; -} - -.CodeMirror-linewidget { - position: relative; - z-index: 2; - overflow: auto; -} - -.CodeMirror-widget {} - -.CodeMirror-wrap .CodeMirror-scroll { - overflow-x: hidden; -} - -.CodeMirror-measure { - position: absolute; - width: 100%; - height: 0; - overflow: hidden; - visibility: hidden; -} -.CodeMirror-measure pre { position: static; } - -.CodeMirror div.CodeMirror-cursor { - position: absolute; - visibility: hidden; - border-right: none; - width: 0; -} -.CodeMirror-focused div.CodeMirror-cursor { - visibility: visible; -} - -.CodeMirror-selected { background: yellow; } -.CodeMirror-focused .CodeMirror-selected { background: yellow; } - -.cm-searching { - background: #ffa; - background: rgba(255, 255, 0, .4); -} - -/* IE7 hack to prevent it from returning funny offsetTops on the spans */ -.CodeMirror span { *vertical-align: text-bottom; } diff --git a/css/cm-dialog.css b/css/cm-dialog.css deleted file mode 100644 index 583a35a..0000000 --- a/css/cm-dialog.css +++ /dev/null @@ -1,28 +0,0 @@ -/* CODEMIRROR DIALOG ----------------------------------------------------- */ -/* Adapted from `CodeMirror/addon/dialog/dialog.css` ------------------------ */ -.CodeMirror-dialog { - z-index: 15; - position: absolute; - left: 0; right: 0; - overflow: hidden; - padding-left : 1.0rem; - padding-right : 1.0rem; - padding-top : 0.6rem; - padding-bottom : 0.4rem; - font-size: 0.7rem; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - background-color: rgb(30,30,30); - color: rgb(200,200,200); -} -.CodeMirror-dialog-top { top : 0; border-bottom: 1px solid #eee; } -.CodeMirror-dialog-bottom { bottom: 0; border-top : 1px solid #eee; } -.CodeMirror-dialog input { - border: none; - outline: none; - background: transparent; - width: 50em; - color: white; - font-size: 2em; - font-family: Cousine, Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; -} -.CodeMirror-dialog button { } diff --git a/css/cm-foldgutter.css b/css/cm-foldgutter.css deleted file mode 100644 index 9460200..0000000 --- a/css/cm-foldgutter.css +++ /dev/null @@ -1,55 +0,0 @@ -/* CODEMIRROR FOLD GUTTER ------------------------------------------------ */ -/* Adapted from `CodeMirror/addon/fold/foldgutter.css` ---------------------- */ - -.CodeMirror-foldmarker { - cursor: pointer; - line-height: .3; - display: inline-block; - -webkit-transform:scale(.7,.7); - -moz-transform:scale(.7,.7); - -ms-transform:scale(.7,.7); - -o-transform:scale(.7,.7); - transform:scale(.7,.7); -} .CodeMirror-foldmarker:after { - display: inline-block; - content: "…"; - font-family: Cousine, Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; - font-size: 1rem; - margin-left:1rem; - padding-top:5px; - padding-bottom: 5px; - padding-left: 7px; - padding-right: 7px; - height:10px; - bottom:5px; - background-color: rgb(20,170,255);; - color:white; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - -ms-border-radius: 2px; - border-radius: 2px; - position: absolute; -} - -.CodeMirror-foldgutter { - background-color: transparent; - width: 1.5rem; - /* Small triagles are not covered by default fonts on WinXP and Android. */ - font-family: Cousine, Consolas, "Lucida Sans Unicode", "Droid Sans Fallback", "Arial Unicode", Arial, serif; -} -.CodeMirror-foldgutter-open, -.CodeMirror-foldgutter-folded { - cursor: pointer; -} -.CodeMirror-foldgutter-open:after { - content: "▾"; /* U+25BE BLACK DOWN-POINTING SMALL TRIANGLE */ - color:rgb(200,200,200); -} -.CodeMirror-foldgutter-folded:after { - content: "▸"; /* U+25B8 BLACK RIGHT-POINTING SMALL TRIANGLE */ - color:rgb(20,170,255); -} - -.CodeMirror-gutter-elt { - left:-0.5rem !important; -} diff --git a/css/fonts.css b/css/fonts.css deleted file mode 100644 index d4eb7b7..0000000 --- a/css/fonts.css +++ /dev/null @@ -1,32 +0,0 @@ -/* Get Web fonts ------------------------------------------------------------ */ - -@font-face { - font-family: 'FontAwesome'; - src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff') format('woff'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg'); - font-weight: normal; - font-style: normal; -} - -/* To do: Don’t load fonts as an external dependency, but serve our own, - likely from the MathJax lib. */ -@font-face { - font-family: "Computer Modern"; - src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunbi.otf'); - font-weight: bold; - font-style: italic; -} -@font-face { - font-family: "Computer Modern"; - src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunrb.otf'); - font-weight: bold; -} -@font-face { - font-family: "Computer Modern"; - src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunci.otf'); - font-style: italic; -} -@font-face { - font-family: "Computer Modern"; - src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunrm.otf'); - font-weight: normal; -} diff --git a/index.html b/index.html index 8e69353..71965b0 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,9 @@ + + + - - ℳ↧ ⋯ - - - - - - - + + ⋯ | mathdown @@ -39,21 +32,9 @@ - - - - - - - - - - - - - - - + + + + + + + + + - + +
diff --git a/mathdown.css b/mathdown.css index c1f3c62..31badc6 100644 --- a/mathdown.css +++ b/mathdown.css @@ -1,127 +1,56 @@ -@charset "utf-8"; - -/* OVERRIDE LIBS ============================================================ */ - -/* Override fixed editor size from firepad.css ------------------------------ */ -.firepad { height: 100%; } -.firepad .CodeMirror { height: 100%; position: relative; } -.powered-by-firepad { background-image: none; } /* Disable Firepad logo */ - -/* CodeMirror Hacks --------------------------------------------------------- */ -/* These are relevant to the app; other overrides of the original CodeMirror css - are in `css/cm-codemirror.css` */ -.CodeMirror { min-height: 100vh; } -@media (min-width: 800px) { .CodeMirror-gutter-wrapper { - height: 100%; - left:-5.5rem !important; - } +#logo { + color: black; text-decoration: none; /* Don't look like a link */ + display: inline-block; width: 4em; } -.CodeMirror-code > pre, -.CodeMirror-code > div { text-indent: 0 !important; padding-left: 0; } -.CodeMirror pre[style] { text-indent: 0; padding-left:0 !important; } -/* We set (in "renderLine" event) negative text-indent on indented lines, - which if inherited by any nested inline-block breaks their positioning - (math overlaps text, tabs become almost invisible). Thanks to - https://github.com/mathjax/MathJax/issues/473 for easy fix. */ -.CodeMirror pre > * { text-indent: 0 !important; } +.warning { color: orange; } -.CodeMirror-selected { background: yellow; } -.CodeMirror-focused .CodeMirror-selected { background: yellow; } -.CodeMirror-gutter-elt { - /* To do: When there are more lines in a header, the gutter folding arrow - should sit on the baseline of the first line. */ - position: absolute; - bottom:1rem; -} +@media print { #header { display: none; } } -/* NORMALIZE BROWSERS ======================================================= */ -html { - height: 100%; - width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - -o-box-sizing: border-box; - box-sizing: border-box; -} -html * { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - -o-box-sizing: border-box; - box-sizing: border-box; -} -body { height: 100%; width: 100%; margin:0; } +#content { clear: both; } -/* Auto-responsive scaling for various screen sizes ------------------------- */ +@media screen { .CodeMirror { border: 1px solid silver; } } +@media print { .CodeMirror { border: 1px none; } } -@media screen and (max-width: 460px) { - html { font-size: 14px; } -} -@media screen and (min-width: 461px) and (max-width: 800px) { - html { font-size: 16px; } -} -@media screen and (min-width: 801px) { - html { font-size: 18px; } -} - - - -/* DEFAULT STYLES & SETUP =================================================== */ - -/* Setup and Dimensions of Editor Canvas ------------------------------------ */ -#content { - clear: both; - background-color: rgb(250,250,250); - min-height: 100%; -} -form, textarea, .CodeMirror { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - -o-box-sizing: border-box; - box-sizing: border-box; - padding-right: 1rem; +/* Expand editor to fit most of the page. */ +html, body, form, textarea, .CodeMirror { + height: 100%; width: 100%; + -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* TODO: downsizing body is ugly but works better than downsizing form. */ -/*body { height: 80%; width: 95%; }*/ +body { height: 80%; width: 95%; } /* These would make the editor exactly fill the available space, but also cause CM to auto-resize and never scroll (instead whole page scrolls), which makes CM slower. body { display: table; } form { display: table-row; } */ -.firedpad { - max-width: 100%; -} -.CodeMirror-sizer { - max-width: 35rem; - /*margin-right: 22px;*/ -} -.CodeMirror-code { - max-width: 35rem; -} - +/* Override fixed editor size from firepad.css */ +.firepad { height: 100%; } +.firepad .CodeMirror { height: 100%; position: relative; } +/* Disable Firepad logo */ +.powered-by-firepad { background-image: none; } -/* Fonts & Colors ----------------------------------------------------------- */ -.CodeMirror, -.CodeMirror-code { - /* Homage to Don Knuth’s Computer Modern fonts; for alternatives - cfr Math.SE: http://graphicdesign.stackexchange.com/a/12961 */ - font-family: "Computer Modern", "Times New Roman", Times, serif; - -webkit-text-rendering: optimizeLegibility; - text-rendering: optimizeLegibility; - -webkit-font-kerning: auto; - font-kerning: auto; - line-height: 1.3em; - color: rgb(67,67,67); +.CodeMirror { + /* Font choices based on Math.SE: http://graphicdesign.stackexchange.com/a/12961 */ + font-family: Georgia, "Bitstream Charter", "Times New Roman", Times, serif; } - - -/* TO DO’s ===================================================================*/ - +/* Match h1..h6 default sizes in WebKit, Mozilla & IE as of 2013. */ +pre.cm-header-1 { font-size: 2.00em; } +pre.cm-header-2 { font-size: 1.50em; } +pre.cm-header-3 { font-size: 1.17em; } +pre.cm-header-4 { font-size: 1.00em; } +pre.cm-header-5 { font-size: 0.83em; } +pre.cm-header-6 { font-size: 0.67em; } +/* Arbitrary margins for headers (non-hegligible but not too big). */ +pre.cm-header { padding-top: 0.5em; padding-bottom: 0.5em; } +/* De-emphasize markup characters. Whitewash colors by *0.4 factor. */ +.cm-s-default .cm-formatting-header { color: #66F; } +.cm-s-default .cm-formatting-em { color: #666; } +.cm-s-default .cm-formatting-strong { color: #666; } +.cm-s-default .cm-formatting-code { color: #c96; } +.cm-s-default .cm-formatting-list { font-weight: bold; } /* Want to disable/de-emphasize coloring of list lines, leaving only bullet colored. - But can't, as long as color is important for lining up continuation lines. + But can't, as long as color is important for lining up continuation lines. .cm-s-default .cm-variable-2 { color: #003366; } .cm-s-default .cm-variable-2.cm-formatting-list { color: #05a; } .cm-s-default .cm-variable-3 { color: #005233; } @@ -129,3 +58,25 @@ form, textarea, .CodeMirror { .cm-s-default .cm-keyword { color: #470052; } .cm-s-default .cm-keyword.cm-formatting-list { color: #708; } */ +/* markdown mode styles `...` and indented code blocks as "comment". */ +.cm-comment, .cm-leadingspace, .cm-formatting-list { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; } +/* exclude math from monospace style to avoid mathjax vertically + squishing formulas, especially display. */ +.math.cm-comment { font-family: serif; } + +/* We set (in "renderLine" event) negative text-indent on indented lines, + which if inherited by any nested inline-block breaks their positioning + (math overlaps text, tabs become almost invisible). Thanks to + https://github.com/mathjax/MathJax/issues/473 for easy fix. */ +.CodeMirror pre > * { text-indent: 0; } + +/* Vertically center gutter markers - looks better on our variable-height + padded headings. */ +.CodeMirror-gutter-wrapper { height: 100%; } +.CodeMirror-gutter-elt { height: 100%; display: table; } +.CodeMirror-foldgutter-open, +.CodeMirror-foldgutter-folded { + height: 100%; display: table-cell; vertical-align: middle; + /* Small triagles are not covered by default fonts on WinXP and Android. */ + font-family: "Lucida Sans Unicode", "Droid Sans Fallback", "Arial"; +} From 2d71badea27c9556a1c2d53021bbd11c27ee3488 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 19:15:34 +0200 Subject: [PATCH 03/24] redesign app header (menu bar) --- css/app-header.css | 90 ++++++++++++++++++++++++++++++++++++++++++++++ css/fonts.css | 8 +++++ index.html | 39 +++++++++++++------- mathdown.css | 10 +----- 4 files changed, 125 insertions(+), 22 deletions(-) create mode 100644 css/app-header.css create mode 100644 css/fonts.css diff --git a/css/app-header.css b/css/app-header.css new file mode 100644 index 0000000..85efad9 --- /dev/null +++ b/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(1,25,35); + color:rgb(0,110,200); + -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(50,160,250); } +#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); +} diff --git a/css/fonts.css b/css/fonts.css new file mode 100644 index 0000000..4db3489 --- /dev/null +++ b/css/fonts.css @@ -0,0 +1,8 @@ +/* Get Web fonts ------------------------------------------------------------ */ + +@font-face { + font-family: 'FontAwesome'; + src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff') format('woff'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg'); + font-weight: normal; + font-style: normal; +} diff --git a/index.html b/index.html index 71965b0..535e187 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,9 @@ + + + diff --git a/mathdown.css b/mathdown.css index 31badc6..9e4abd0 100644 --- a/mathdown.css +++ b/mathdown.css @@ -1,11 +1,3 @@ -#logo { - color: black; text-decoration: none; /* Don't look like a link */ - display: inline-block; width: 4em; -} -.warning { color: orange; } - -@media print { #header { display: none; } } - #content { clear: both; } @media screen { .CodeMirror { border: 1px solid silver; } } @@ -50,7 +42,7 @@ pre.cm-header { padding-top: 0.5em; padding-bottom: 0.5em; } .cm-s-default .cm-formatting-code { color: #c96; } .cm-s-default .cm-formatting-list { font-weight: bold; } /* Want to disable/de-emphasize coloring of list lines, leaving only bullet colored. - But can't, as long as color is important for lining up continuation lines. + But can't, as long as color is important for lining up continuation lines. .cm-s-default .cm-variable-2 { color: #003366; } .cm-s-default .cm-variable-2.cm-formatting-list { color: #05a; } .cm-s-default .cm-variable-3 { color: #005233; } From 3c7c752e08e2b72f1b57c009306010645c3ac1a7 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 19:20:53 +0200 Subject: [PATCH 04/24] normalize browsers, default styles & setup --- mathdown.css | 54 ++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 46 insertions(+), 8 deletions(-) diff --git a/mathdown.css b/mathdown.css index 9e4abd0..3ec54df 100644 --- a/mathdown.css +++ b/mathdown.css @@ -1,15 +1,53 @@ -#content { clear: both; } +@charset "utf-8"; -@media screen { .CodeMirror { border: 1px solid silver; } } -@media print { .CodeMirror { border: 1px none; } } +/* NORMALIZE BROWSERS ======================================================= */ +html { + height: 100%; + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} +html * { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} +body { height: 100%; width: 100%; margin:0; } + +/* Auto-responsive scaling for various screen sizes ------------------------- */ -/* Expand editor to fit most of the page. */ -html, body, form, textarea, .CodeMirror { - height: 100%; width: 100%; - -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; +@media screen and (max-width: 460px) { + html { font-size: 14px; } +} +@media screen and (min-width: 461px) and (max-width: 800px) { + html { font-size: 16px; } +} +@media screen and (min-width: 801px) { + html { font-size: 18px; } +} + + +#content { + clear: both; + background-color: rgb(250,250,250); + min-height: 100%; +} + +form, textarea, .CodeMirror { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; + padding-right: 1rem; } /* TODO: downsizing body is ugly but works better than downsizing form. */ -body { height: 80%; width: 95%; } + /* These would make the editor exactly fill the available space, but also cause CM to auto-resize and never scroll (instead whole page scrolls), which makes CM slower. From 11cb2100119ac4cd87648692381b05b39541c310 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 19:33:41 +0200 Subject: [PATCH 05/24] substitute CodeMirror css dependencies with our own overrules --- css/cm-codemirror.css | 224 ++++++++++++++++++++++++++++ css/cm-dialog.css | 28 ++++ css/cm-foldgutter.css | 55 +++++++ css/firepad.css | 340 ++++++++++++++++++++++++++++++++++++++++++ index.html | 17 ++- mathdown.css | 76 ++++++---- 6 files changed, 705 insertions(+), 35 deletions(-) create mode 100644 css/cm-codemirror.css create mode 100644 css/cm-dialog.css create mode 100644 css/cm-foldgutter.css create mode 100644 css/firepad.css diff --git a/css/cm-codemirror.css b/css/cm-codemirror.css new file mode 100644 index 0000000..c80c431 --- /dev/null +++ b/css/cm-codemirror.css @@ -0,0 +1,224 @@ +/* CODEMIRROR MECHANICS ===================================================== */ +/* Adapted from `CodeMirror/lib/codemirror.css` */ + +/* BASICS ------------------------------------------------------------------- */ +.CodeMirror { + line-height: 1.3; + position: relative; + overflow: hidden; + background: white; + color: black; +} +.CodeMirror-scroll { + /* Set scrolling behaviour here */ + overflow: auto; + /* 30px is the magic margin used to hide the element's real scrollbars */ + /* See overflow: hidden in .CodeMirror */ + margin-bottom: -30px; + margin-right: -30px; + padding-bottom: 30px; + height: 100%; + outline: none; /* Prevent dragging from highlighting the element */ + position: relative; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + -ms-box-sizing: content-box; + -o-box-sizing: content-box; + box-sizing: content-box; +} + +/* PADDING ------------------------------------------------------------------ */ +.CodeMirror-lines { } /* Vertical padding around content */ +.CodeMirror pre { } /* Horizontal padding of content */ +.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + background-color: transparent; /* The little square between H and V scrollbars */ +} + +/* GUTTER ------------------------------------------------------------------- */ +.CodeMirror-gutter { background-color: transparent; } +.CodeMirror-gutter-wrapper { background-color: transparent; } +.CodeMirror-gutters { background-color: transparent; + white-space: nowrap; + border-right: 1px dotted #ddd; +} +.CodeMirror-linenumbers {} +.CodeMirror-linenumber { + padding : 0 3px 0 5px; + min-width : 20px; + text-align : right; + color : #999; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + -ms-box-sizing: content-box; + -o-box-sizing: content-box; + box-sizing: content-box; +} + +/* CURSOR ------------------------------------------------------------------- */ +.CodeMirror-cursor, +.CodeMirror-secondarycursor { + z-index: 3; + border-style: solid; + border-left-width: 2px; + border-right-width: 1px; +} .CodeMirror-cursor { + border-color: rgba(20,170,255,0.6); +} .CodeMirror-secondarycursor { + /* Shown when moving in bi-directional text */ + border-color: silver; +} +.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor { + width: auto; + border: 0; + background-color: rgba(20,170,255,0.6); + z-index: 1; +} +/* Can style cursor different in overwrite (non-insert) mode */ +.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite { } +.cm-tab { display: inline-block; } +.CodeMirror-ruler { position: absolute; } +@media print { + /* Hide the cursor when printing */ + .CodeMirror div.CodeMirror-cursor { + visibility: hidden; + } +} + +/* STOP --------------------------------------------------------------------- */ + +.CodeMirror-sizer { + position: relative; + padding: 1em; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + -ms-box-sizing: content-box; + -o-box-sizing: content-box; + box-sizing: content-box; +} +@media (min-width: 800px) { + .CodeMirror-sizer { padding:5em; } +} + +/* The fake, visible scrollbars. Used to force redraw during scrolling + before actuall scrolling happens, thus preventing shaking and + flickering artifacts. */ +.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + position: absolute; + z-index: 6; + display: none; +} +.CodeMirror-vscrollbar { + right: 0; top: 0; + overflow-x: hidden; + overflow-y: scroll; +} +.CodeMirror-hscrollbar { + bottom: 0; left: 0; + overflow-y: hidden; + overflow-x: scroll; +} +.CodeMirror-scrollbar-filler { + right: 0; bottom: 0; +} +.CodeMirror-gutter-filler { + left: 0; bottom: 0; +} + +.CodeMirror-gutters { + position: absolute; left: 0; top: 0; + padding-bottom: 30px; + z-index: 3; +} +.CodeMirror-gutter { + white-space: normal; + height: 100%; + -moz-box-sizing: content-box; + box-sizing: content-box; + padding-bottom: 30px; + margin-bottom: -32px; + display: inline-block; + /* Hack to make IE7 behave */ + *zoom:1; + *display:inline; +} + +.CodeMirror-gutter-elt { + cursor: default; + z-index: 4; + position: absolute; +} + +.CodeMirror-lines { + cursor: text; +} +.CodeMirror pre { + /* Reset some styles that the rest of the page might have set */ + -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; + border-width: 0; + background: transparent; + font-family: inherit; + /*font-size: inherit;*/ + margin: 0; + white-space: pre; + word-wrap: normal; + /* + line-height: inherit; + */ + color: inherit; + z-index: 2; + position: relative; + overflow: visible; +} +.CodeMirror-wrap pre { + word-wrap: break-word; + white-space: pre-wrap; + word-break: normal; +} + +.CodeMirror-linebackground { + position: absolute; + left: 0; right: 0; top: 0; bottom: 0; + z-index: 0; +} + +.CodeMirror-linewidget { + position: relative; + z-index: 2; + overflow: auto; +} + +.CodeMirror-widget {} + +.CodeMirror-wrap .CodeMirror-scroll { + overflow-x: hidden; +} + +.CodeMirror-measure { + position: absolute; + width: 100%; + height: 0; + overflow: hidden; + visibility: hidden; +} +.CodeMirror-measure pre { position: static; } + +.CodeMirror div.CodeMirror-cursor { + position: absolute; + visibility: hidden; + border-right: none; + width: 0; +} +.CodeMirror-focused div.CodeMirror-cursor { + visibility: visible; +} + +.CodeMirror-selected { background: yellow; } +.CodeMirror-focused .CodeMirror-selected { background: yellow; } + +.cm-searching { + background: #ffa; + background: rgba(255, 255, 0, .4); +} + +/* IE7 hack to prevent it from returning funny offsetTops on the spans */ +.CodeMirror span { *vertical-align: text-bottom; } diff --git a/css/cm-dialog.css b/css/cm-dialog.css new file mode 100644 index 0000000..583a35a --- /dev/null +++ b/css/cm-dialog.css @@ -0,0 +1,28 @@ +/* CODEMIRROR DIALOG ----------------------------------------------------- */ +/* Adapted from `CodeMirror/addon/dialog/dialog.css` ------------------------ */ +.CodeMirror-dialog { + z-index: 15; + position: absolute; + left: 0; right: 0; + overflow: hidden; + padding-left : 1.0rem; + padding-right : 1.0rem; + padding-top : 0.6rem; + padding-bottom : 0.4rem; + font-size: 0.7rem; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + background-color: rgb(30,30,30); + color: rgb(200,200,200); +} +.CodeMirror-dialog-top { top : 0; border-bottom: 1px solid #eee; } +.CodeMirror-dialog-bottom { bottom: 0; border-top : 1px solid #eee; } +.CodeMirror-dialog input { + border: none; + outline: none; + background: transparent; + width: 50em; + color: white; + font-size: 2em; + font-family: Cousine, Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; +} +.CodeMirror-dialog button { } diff --git a/css/cm-foldgutter.css b/css/cm-foldgutter.css new file mode 100644 index 0000000..9460200 --- /dev/null +++ b/css/cm-foldgutter.css @@ -0,0 +1,55 @@ +/* CODEMIRROR FOLD GUTTER ------------------------------------------------ */ +/* Adapted from `CodeMirror/addon/fold/foldgutter.css` ---------------------- */ + +.CodeMirror-foldmarker { + cursor: pointer; + line-height: .3; + display: inline-block; + -webkit-transform:scale(.7,.7); + -moz-transform:scale(.7,.7); + -ms-transform:scale(.7,.7); + -o-transform:scale(.7,.7); + transform:scale(.7,.7); +} .CodeMirror-foldmarker:after { + display: inline-block; + content: "…"; + font-family: Cousine, Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; + font-size: 1rem; + margin-left:1rem; + padding-top:5px; + padding-bottom: 5px; + padding-left: 7px; + padding-right: 7px; + height:10px; + bottom:5px; + background-color: rgb(20,170,255);; + color:white; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + border-radius: 2px; + position: absolute; +} + +.CodeMirror-foldgutter { + background-color: transparent; + width: 1.5rem; + /* Small triagles are not covered by default fonts on WinXP and Android. */ + font-family: Cousine, Consolas, "Lucida Sans Unicode", "Droid Sans Fallback", "Arial Unicode", Arial, serif; +} +.CodeMirror-foldgutter-open, +.CodeMirror-foldgutter-folded { + cursor: pointer; +} +.CodeMirror-foldgutter-open:after { + content: "▾"; /* U+25BE BLACK DOWN-POINTING SMALL TRIANGLE */ + color:rgb(200,200,200); +} +.CodeMirror-foldgutter-folded:after { + content: "▸"; /* U+25B8 BLACK RIGHT-POINTING SMALL TRIANGLE */ + color:rgb(20,170,255); +} + +.CodeMirror-gutter-elt { + left:-0.5rem !important; +} diff --git a/css/firepad.css b/css/firepad.css new file mode 100644 index 0000000..f14dc46 --- /dev/null +++ b/css/firepad.css @@ -0,0 +1,340 @@ +.firepad { + /* Default height for a firepad. */ + height: 400px; + position: relative; +} + +.firepad { + text-align: left; + line-height: normal; +} + +.firepad .CodeMirror { + /* Use width / height of the firepad wrapper element. */ + position: absolute; + height: auto; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.firepad-richtext .CodeMirror { + font-family: Verdana, sans-serif; + font-size: 14px; +} + +.firepad-with-toolbar .CodeMirror { + /* Leave room for toolbar and add some padding on the left. */ + top: 70px; + left: 10px; +} + +/** Styles for all of the rich-text formatting we support. */ +.firepad-b { font-weight: bold; } +.firepad-i { font-style: italic; } +.firepad-u { text-decoration: underline; } +.firepad-s { text-decoration: line-through; } +.firepad-u.firepad-s { text-decoration: underline line-through; } + +.firepad-f-arial { font-family: Arial, Helvetica, sans-serif; } +.firepad-f-comic-sans-ms { font-family: "Comic Sans MS", cursive, sans-serif; } +.firepad-f-courier-new { font-family: "Courier New", Courier, monospace; } +.firepad-f-impact { font-family: Impact, Charcoal, sans-serif; } +.firepad-f-times-new-roman { font-family: "Times New Roman", Times, serif; } +.firepad-f-verdana { font-family: Verdana, Geneva, sans-serif; } + +.firepad-la-left { text-align: left; } +.firepad-la-center { text-align: center; } +.firepad-la-right { text-align: right; } + +/** Line Styles */ +pre.firepad-lt-o, pre.firepad-lt-u, pre.firepad-lt-t, pre.firepad-lt-tc { + margin-left: 40px; +} + +.firepad-list-left { + display:inline-block; + margin-left: -40px; + width: 40px; + padding-right: 5px; + text-align: right; +} + +.firepad-todo-left { + display:inline-block; + margin-left: -20px; + width: 20px; +} + +.powered-by-firepad { + position: absolute; + display: block; + z-index: 5; + right: 20px; + bottom: 20px; + width: 129px; + height: 23px; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIEAAAAXCAYAAAAsnywOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowN0M3OUFEQTk4ODUxMUUyQUFBRTg2NUQxMTExQTUxQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowN0M3OUFEQjk4ODUxMUUyQUFBRTg2NUQxMTExQTUxQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRBNEIyOTA5OTg4NDExRTJBQUFFODY1RDExMTFBNTFDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRBNEIyOTBBOTg4NDExRTJBQUFFODY1RDExMTFBNTFDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+o21teAAABctJREFUeNrEWttV8zgQFjl5X1EBTgVr3vKGqYBQQZIKgAoMFUAqiKkgTgUxT/CGUwH+K8DbwVrnjDbzKzOjS9jdOUcnCVjyXD7NTTp7f39XkZQPoxjGn8PI4Lulbhi3w2jht4bnzXMX8Jkx6zbD+DWMSnj3Yhh38H2J3vMTlCN+DfUeXixlwJPVSwfrtDBeE/g0a85hbhf4fDmM7TDqmBdNp1N1FgACDco3Rp/Bb4mM8p6G8ZxojEeY79Ia+MC0DDSUS8ZYV/ApAfMFeOmZ/5fAr4/MOg8R/O3Q5jIgWMEaHN0jfdvnK4HvIBBoMPgNfP7X5AJBUnYIEGYA4sLxXD8NSokePIa09AxGdeksYU7l8w4GBCMCUQaF3yDk/wEAatdKu03i07jor2FsYI0i4f17ZuctItcpPV5UC8ZUHt63Qvg0sn+iMHdEY0dhsS68g9E6rmcPa2We+XieXWvr5BTrAD7WkFP0xN+zRPD1sHtrxqCxZL1rRQD1MzBnaZj/3QTM3YFHe5FAoAONXiND9Z5nS/h8A0apmN4yqG+B8ewEBfeRgLbJ3J4Bld1dOhFYc4LHTeDcPzxGdmXJGE9zA8n7P7KNnF0pZbGG+QnsjiZAwS28jNtNPfO+BRj/ixDOzLlm5t0xPEjUILkmwO8T8MvJd8XkDecQt8/g+5LI7AtC1lBPlXt0jcnKQslRgH41BYIeGO8j405MbHcNIClZMwBo4LMnlJQH8rwEY10zxpISTDf/qIkKQqPhyxNS9SflLQXwdQuAeHT4yzEQRgSizgmldLH1J2GgLNBAnLDYA3BeJCeAVjNAK8AIdjwHGGxDGPYV8b2A+P4F62nPeplQSVAhTwuhjNODLdkvCSCUbk6AGw9ZpFv1EZW41IygGVNnt6iJEuNGMybkLJj3L5k1HoXyLDSud45X4UrSF9BZwezwlPyhg420RiC5//j4WI0dpnom9mwRExpqbktvgmvnBOaSylww5KcnLlIhpgiY44IjJ8LNPBJkHK08fDWoJ9EQILg60SO3INs3ts0YjLpTv7dLqRJsLSheqhSoWP0akXSpwH4FFdtTSzlNxPhTCTeLSkEGqT+xAF20sF6XwMcRsEbq0PdOFdjXhYvJ2lOaUzahperv2OZQBbHTl9XHUANrvnj0VavDWUzJhFAbLmfgGWeCjjn9rqU+wSlC1h4X6xqtSSiDKCC9Kr5HvmYA0xBA9x30NJG82UR6RQBqHlF5+DxWz4Skvwi9lsz6b2MQ/jExvnRMIsUBQCm+z58FKncFCu483ilnXHKVIKuJ0/eCJ2oBKHukF07GxQ9svB71azJCVtxx3QiezPBZjZEhpfZsDQu/CeVZaB28OgEEvtM0KQQ1gQDQhGfh8p1JZFwuBe8U4wVwyCoYj1p6wph57+10Ou3HaHfeEfXlRMW1Xl33lhHIywJqWyWUY3O0CyRDKk8ymqPncojBOdGTkAAaAwDOCzyAjmeMh6FKdu1Jpn09j1ahlv0YMZgTbjsUABoplbpsghWxQ8lc7eklcHnDDgzQoBK1c4QsIiocl3YOf6ckhlIu0CLvZN53AfG8QSCkjqy1J+RKdHRHYiwgPaZNHHvsbGMVLps0s0u4I9iMaPo0sON/nWgwDZ6xFnZbk+AZJe9UEfLFJou+BP6J4nsU0XjxJSopdCGUjT0A5DrC7RbgCn/i2tmDJxy0kaDSTK4l5Q9U67lzbBNySHatDucuigNBm9h4kBobPqrV7zd2toTbsrxdquNDEEnhXcJOxUq+dJTbnugpe8LgvUfnSwYkywAw2g00kYxvCV8vK9ThgCT2TpyZ84VQ26O4tke7qfEgdwPur1b8ieZC+a+9naMEibsX2anDhdBOHV9oceX7dhR/mRBibGfWHrP7Nt4CeQNbxTVE2PhEsqxiymDujmGRuItsFtud6FUyFX7DdqYOJ4Ia1c+VUAnElLju+woiCf235HP16quGshS5DAj+FmAA6gfBqr4bldAAAAAASUVORK5CYII='); + opacity: 0.5; +} + +.powered-by-firepad:hover { + opacity: 1; +} + +.firepad-toolbar { + position: absolute; + top: 20px; + left: 10px; + right: 0; + white-space: nowrap; + + /* Don't select text when double-clicking in toolbar */ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.firepad-btn-group { + margin: 0 5px; + display: inline-block; +} + +a.firepad-btn, a.firepad-btn:visited, a.firepad-btn:active { + font-family: "Arial" sans-serif; + cursor: pointer; + text-decoration: none; + display: inline-block; + padding: 6px 6px 4px 6px; + text-align: center; + vertical-align: middle; + font-size: 16px; + background-color: #fcfcfc; + border: 1px solid #c9c9c9; + border-bottom-width: 4px; + color: #9c9c9c; +} + +a.firepad-btn:hover { + color: #fff; + background-color: #ffbf86; + border-color: #e6a165; + text-decoration: none; +} + +a.firepad-btn:active { + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); + -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); + box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); +} + +.firepad-btn-group > .firepad-btn { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + margin-left: -1px; +} + + +.firepad-btn-group > .firepad-btn:first-child { + border-bottom-left-radius: 6px; + border-top-left-radius: 6px; + -webkit-border-bottom-left-radius: 6px; + -webkit-border-top-left-radius: 6px; + -moz-border-radius-bottomleft: 6px; + -moz-border-radius-topleft: 6px; + margin-left: 0px; +} + +.firepad-btn-group > .firepad-btn:last-child { + border-bottom-right-radius: 6px; + border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; + -webkit-border-top-right-radius: 6px; + -moz-border-radius-bottomright: 6px; + -moz-border-radius-topright: 6px; +} + +.firepad-dropdown { + position: relative; +} + +.firepad-dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + padding: 4px 0; + margin: 4px 0 0; + list-style: none; + background-color: #ffffff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + *border-right-width: 2px; + *border-bottom-width: 2px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +.firepad-dropdown-menu a { + text-align: left; + display: block; + padding: 3px 15px; + clear: both; + font-weight: normal; + line-height: 18px; + color: #333333; + white-space: nowrap; +} + +.firepad-dropdown-menu a:hover { + color: #fff; + text-decoration: none; + background-color: #ffbf86; +} + +.firepad-color-dropdown-item { + height: 25px; + width: 25px; +} + +.firepad-dialog { + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + z-index: 1000; +} + +.firepad-dialog-div { + position: relative; + width: 520px; + height: 100px; + margin: 100px auto; + background-color: #fff; + border: 1px solid #000; + padding: 15px; +} + +.firepad-dialog-input { + width: 500px; + display: block; + padding: 5px 5px; + margin: 10px 10px 10px 5px; + clear: both; + font-weight: normal; + line-height: 25px; + color: #333333; + white-space: nowrap; +} + +/******************************************************************** + * Generated via icomoon.io. + If you want to make changes, you can go to http://icomoon.io/app/, go to the bottom right and click the + database-looking icon, then "Load Session" and use the checked-in font/firepad-icomoon.json file. + + Note: When you download the generated font, turn on the "Base 64 Encode ..." option to generate the font inline + in the CSS (to avoid needing to distribute a font file with firepad). + */ +@font-face { + font-family: 'firepad'; + src:url('firepad.eot'); +} +@font-face { + font-family: 'firepad'; + src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff'), + url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'); + font-weight: normal; + font-style: normal; +} + +.firepad-tb-bold, .firepad-tb-italic, .firepad-tb-underline, .firepad-tb-strikethrough, .firepad-tb-list, .firepad-tb-list-2, .firepad-tb-numbered-list, .firepad-tb-paragraph-left, .firepad-tb-paragraph-center, .firepad-tb-paragraph-right, .firepad-tb-paragraph-justify, .firepad-tb-menu, .firepad-tb-link, .firepad-tb-undo, .firepad-tb-redo, .firepad-tb-box-add, .firepad-tb-box-remove, .firepad-tb-print, .firepad-tb-indent-decrease, .firepad-tb-indent-increase, .firepad-tb-insert-image, .firepad-tb-bubble { + font-family: 'firepad'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} +.firepad-tb-bold:before { + content: "\e000"; +} +.firepad-tb-italic:before { + content: "\e001"; +} +.firepad-tb-underline:before { + content: "\e002"; +} +.firepad-tb-strikethrough:before { + content: "\e003"; +} +.firepad-tb-list:before { + content: "\e004"; +} +.firepad-tb-list-2:before { + content: "\e005"; +} +.firepad-tb-numbered-list:before { + content: "\e006"; +} +.firepad-tb-paragraph-left:before { + content: "\e007"; +} +.firepad-tb-paragraph-center:before { + content: "\e008"; +} +.firepad-tb-paragraph-right:before { + content: "\e009"; +} +.firepad-tb-paragraph-justify:before { + content: "\e00a"; +} +.firepad-tb-menu:before { + content: "\e00b"; +} +.firepad-tb-link:before { + content: "\e00c"; +} +.firepad-tb-undo:before { + content: "\e00d"; +} +.firepad-tb-redo:before { + content: "\e00e"; +} +.firepad-tb-box-add:before { + content: "\e010"; +} +.firepad-tb-box-remove:before { + content: "\e011"; +} +.firepad-tb-print:before { + content: "\e012"; +} +.firepad-tb-indent-decrease:before { + content: "\e013"; +} +.firepad-tb-indent-increase:before { + content: "\e014"; +} +.firepad-tb-insert-image:before { + content: "\e015"; +} +.firepad-tb-bubble:before { + content: "\e00f"; +} diff --git a/index.html b/index.html index 535e187..39a87ea 100644 --- a/index.html +++ b/index.html @@ -32,13 +32,19 @@ - - - + + + + + + + + + - - - - - diff --git a/mathdown.css b/mathdown.css index 3ec54df..7b6029f 100644 --- a/mathdown.css +++ b/mathdown.css @@ -20,7 +20,6 @@ html * { body { height: 100%; width: 100%; margin:0; } /* Auto-responsive scaling for various screen sizes ------------------------- */ - @media screen and (max-width: 460px) { html { font-size: 14px; } } @@ -32,12 +31,14 @@ body { height: 100%; width: 100%; margin:0; } } +/* DEFAULT STYLES & SETUP =================================================== */ + +/* Setup and Dimensions of Editor Canvas ------------------------------------ */ #content { clear: both; background-color: rgb(250,250,250); min-height: 100%; } - form, textarea, .CodeMirror { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -47,18 +48,50 @@ form, textarea, .CodeMirror { padding-right: 1rem; } /* TODO: downsizing body is ugly but works better than downsizing form. */ - +/*body { height: 80%; width: 95%; }*/ /* These would make the editor exactly fill the available space, but also cause CM to auto-resize and never scroll (instead whole page scrolls), which makes CM slower. body { display: table; } form { display: table-row; } */ -/* Override fixed editor size from firepad.css */ + +/* OVERRIDE LIBS ============================================================ */ + +/* Override fixed editor size from firepad.css ------------------------------ */ .firepad { height: 100%; } .firepad .CodeMirror { height: 100%; position: relative; } -/* Disable Firepad logo */ -.powered-by-firepad { background-image: none; } +.powered-by-firepad { background-image: none; } /* Disable Firepad logo */ + +/* CodeMirror Hacks --------------------------------------------------------- */ +/* These are relevant to the app; other overrides of the original CodeMirror css + are in `css/cm-codemirror.css` */ +.CodeMirror { min-height: 100vh; } +@media (min-width: 800px) { .CodeMirror-gutter-wrapper { + height: 100%; + left:-5.5rem !important; + } +} +.CodeMirror-code > pre, +.CodeMirror-code > div { text-indent: 0 !important; padding-left: 0; } +.CodeMirror pre[style] { text-indent: 0; padding-left:0 !important; } +/* We set (in "renderLine" event) negative text-indent on indented lines, + which if inherited by any nested inline-block breaks their positioning + (math overlaps text, tabs become almost invisible). Thanks to + https://github.com/mathjax/MathJax/issues/473 for easy fix. */ +.CodeMirror pre > * { text-indent: 0 !important; } + +.CodeMirror-selected { background: yellow; } +.CodeMirror-focused .CodeMirror-selected { background: yellow; } +.CodeMirror-gutter-elt { + /* To do: When there are more lines in a header, the gutter folding arrow + should sit on the baseline of the first line. */ + position: absolute; + bottom:1rem; +} + + +/* Fonts & Colors ----------------------------------------------------------- */ .CodeMirror { /* Font choices based on Math.SE: http://graphicdesign.stackexchange.com/a/12961 */ @@ -79,6 +112,16 @@ pre.cm-header { padding-top: 0.5em; padding-bottom: 0.5em; } .cm-s-default .cm-formatting-strong { color: #666; } .cm-s-default .cm-formatting-code { color: #c96; } .cm-s-default .cm-formatting-list { font-weight: bold; } + +/* markdown mode styles `...` and indented code blocks as "comment". */ +.cm-comment, .cm-leadingspace, .cm-formatting-list { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; } +/* exclude math from monospace style to avoid mathjax vertically + squishing formulas, especially display. */ +.math.cm-comment { font-family: serif; } + + +/* TO DO’s ===================================================================*/ + /* Want to disable/de-emphasize coloring of list lines, leaving only bullet colored. But can't, as long as color is important for lining up continuation lines. .cm-s-default .cm-variable-2 { color: #003366; } @@ -88,25 +131,4 @@ pre.cm-header { padding-top: 0.5em; padding-bottom: 0.5em; } .cm-s-default .cm-keyword { color: #470052; } .cm-s-default .cm-keyword.cm-formatting-list { color: #708; } */ -/* markdown mode styles `...` and indented code blocks as "comment". */ -.cm-comment, .cm-leadingspace, .cm-formatting-list { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; } -/* exclude math from monospace style to avoid mathjax vertically - squishing formulas, especially display. */ -.math.cm-comment { font-family: serif; } -/* We set (in "renderLine" event) negative text-indent on indented lines, - which if inherited by any nested inline-block breaks their positioning - (math overlaps text, tabs become almost invisible). Thanks to - https://github.com/mathjax/MathJax/issues/473 for easy fix. */ -.CodeMirror pre > * { text-indent: 0; } - -/* Vertically center gutter markers - looks better on our variable-height - padded headings. */ -.CodeMirror-gutter-wrapper { height: 100%; } -.CodeMirror-gutter-elt { height: 100%; display: table; } -.CodeMirror-foldgutter-open, -.CodeMirror-foldgutter-folded { - height: 100%; display: table-cell; vertical-align: middle; - /* Small triagles are not covered by default fonts on WinXP and Android. */ - font-family: "Lucida Sans Unicode", "Droid Sans Fallback", "Arial"; -} From 1c0bc7e0ea59df910c6932a204670e0875a90991 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 19:36:12 +0200 Subject: [PATCH 06/24] add metadata for mobile devices --- index.html | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 39a87ea..3c4348b 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,6 @@ - - - + + ℳ↧ ⋯ - - ⋯ | mathdown + + + + + + + @@ -56,9 +63,7 @@ }); - - -
From 1bfc214ed098dccda7ecf8a27decb15cc1668d32 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 19:42:42 +0200 Subject: [PATCH 07/24] add rules for Markdown syntax highlighting --- css/app-markdownSyntax.css | 37 +++++++++++++++++++++++++++++++++++++ index.html | 1 + mathdown.css | 7 +------ 3 files changed, 39 insertions(+), 6 deletions(-) create mode 100644 css/app-markdownSyntax.css diff --git a/css/app-markdownSyntax.css b/css/app-markdownSyntax.css new file mode 100644 index 0000000..dff2ad6 --- /dev/null +++ b/css/app-markdownSyntax.css @@ -0,0 +1,37 @@ +@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; } diff --git a/index.html b/index.html index 3c4348b..47ff618 100644 --- a/index.html +++ b/index.html @@ -49,6 +49,7 @@ + diff --git a/mathdown.css b/mathdown.css index 7b6029f..431bfc3 100644 --- a/mathdown.css +++ b/mathdown.css @@ -106,12 +106,7 @@ pre.cm-header-5 { font-size: 0.83em; } pre.cm-header-6 { font-size: 0.67em; } /* Arbitrary margins for headers (non-hegligible but not too big). */ pre.cm-header { padding-top: 0.5em; padding-bottom: 0.5em; } -/* De-emphasize markup characters. Whitewash colors by *0.4 factor. */ -.cm-s-default .cm-formatting-header { color: #66F; } -.cm-s-default .cm-formatting-em { color: #666; } -.cm-s-default .cm-formatting-strong { color: #666; } -.cm-s-default .cm-formatting-code { color: #c96; } -.cm-s-default .cm-formatting-list { font-weight: bold; } + /* markdown mode styles `...` and indented code blocks as "comment". */ .cm-comment, .cm-leadingspace, .cm-formatting-list { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; } From a89c59f93a0b379f0be7ca50317225b2010fefe6 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 19:46:01 +0200 Subject: [PATCH 08/24] syntax highlighting: hang markers for block-level elements into the margin --- css/app-markdownSyntax.css | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/css/app-markdownSyntax.css b/css/app-markdownSyntax.css index dff2ad6..4df1b53 100644 --- a/css/app-markdownSyntax.css +++ b/css/app-markdownSyntax.css @@ -35,3 +35,28 @@ } .cm-tag, .cm-formatting-link-string + .cm-string { opacity: 0.5; } + +/* Hang syntax markers of block-level elements into the margin */ +@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; + } +} + +/* 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;` +*/ From d707641938bff5ef1158e8fb35e5f4d43592efdd Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 19:49:14 +0200 Subject: [PATCH 09/24] syntax highlighting: normalize list markers --- css/app-markdownSyntax.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/css/app-markdownSyntax.css b/css/app-markdownSyntax.css index 4df1b53..7eddae3 100644 --- a/css/app-markdownSyntax.css +++ b/css/app-markdownSyntax.css @@ -39,6 +39,10 @@ /* Hang syntax markers of block-level elements into the margin */ @media (min-width: 800px) { .cm-formatting-header, +/* 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;` +*/ .cm-formatting-quote, .cm-formatting-list, .cm-hr:before { @@ -56,7 +60,8 @@ } } +.cm-formatting-list-ul { visibility: hidden; } +.cm-formatting-list-ul:before { content:"–"; visibility: visible; } /* 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;` + - fix regex for ordered lists (in markdown.js): `olRE = /^([0-9]+\.|[A-z]+\))\s+/` */ From 51cb5bccf5a66e6a7235adf2ca2934e0cd745a46 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 19:50:20 +0200 Subject: [PATCH 10/24] syntax highlighting: normalize code block markers & horizontal rules --- css/app-markdownSyntax.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/css/app-markdownSyntax.css b/css/app-markdownSyntax.css index 7eddae3..f7aa308 100644 --- a/css/app-markdownSyntax.css +++ b/css/app-markdownSyntax.css @@ -65,3 +65,13 @@ /* To do: - fix regex for ordered lists (in 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; +} From 4e7febfaae3fbf29bf4b173126a2672fc7f231a6 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 19:55:51 +0200 Subject: [PATCH 11/24] add rules for tokenized elements (typographic stylesheet) --- css/app-markdownSyntax.css | 6 +++--- css/app-typography.css | 4 ++++ index.html | 1 + mathdown.css | 24 +++++++++--------------- 4 files changed, 17 insertions(+), 18 deletions(-) create mode 100644 css/app-typography.css diff --git a/css/app-markdownSyntax.css b/css/app-markdownSyntax.css index f7aa308..497415e 100644 --- a/css/app-markdownSyntax.css +++ b/css/app-markdownSyntax.css @@ -37,12 +37,12 @@ .cm-formatting-link-string + .cm-string { opacity: 0.5; } /* Hang syntax markers of block-level elements into the margin */ -@media (min-width: 800px) { - .cm-formatting-header, /* 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 { @@ -63,7 +63,7 @@ .cm-formatting-list-ul { visibility: hidden; } .cm-formatting-list-ul:before { content:"–"; visibility: visible; } /* To do: - - fix regex for ordered lists (in markdown.js): `olRE = /^([0-9]+\.|[A-z]+\))\s+/` + - 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; } diff --git a/css/app-typography.css b/css/app-typography.css new file mode 100644 index 0000000..de409d8 --- /dev/null +++ b/css/app-typography.css @@ -0,0 +1,4 @@ +@charset "utf-8"; + +/* TYPOGRAPHY FOR TOKENIZED, SEMANTIC ELEMENTS ============================== */ + diff --git a/index.html b/index.html index 47ff618..dd8f9de 100644 --- a/index.html +++ b/index.html @@ -50,6 +50,7 @@ + diff --git a/mathdown.css b/mathdown.css index 431bfc3..6984b70 100644 --- a/mathdown.css +++ b/mathdown.css @@ -92,24 +92,18 @@ form, textarea, .CodeMirror { /* Fonts & Colors ----------------------------------------------------------- */ - -.CodeMirror { +.CodeMirror, +.CodeMirror-code { /* Font choices based on Math.SE: http://graphicdesign.stackexchange.com/a/12961 */ font-family: Georgia, "Bitstream Charter", "Times New Roman", Times, serif; + -webkit-text-rendering: optimizeLegibility; + text-rendering: optimizeLegibility; + -webkit-font-kerning: auto; + font-kerning: auto; + line-height: 1.3em; + color: rgb(67,67,67); } -/* Match h1..h6 default sizes in WebKit, Mozilla & IE as of 2013. */ -pre.cm-header-1 { font-size: 2.00em; } -pre.cm-header-2 { font-size: 1.50em; } -pre.cm-header-3 { font-size: 1.17em; } -pre.cm-header-4 { font-size: 1.00em; } -pre.cm-header-5 { font-size: 0.83em; } -pre.cm-header-6 { font-size: 0.67em; } -/* Arbitrary margins for headers (non-hegligible but not too big). */ -pre.cm-header { padding-top: 0.5em; padding-bottom: 0.5em; } - - -/* markdown mode styles `...` and indented code blocks as "comment". */ -.cm-comment, .cm-leadingspace, .cm-formatting-list { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; } + /* exclude math from monospace style to avoid mathjax vertically squishing formulas, especially display. */ .math.cm-comment { font-family: serif; } From eada6be8bf62fb45d08e6208f4f210ee11e750d4 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 19:59:19 +0200 Subject: [PATCH 12/24] typography: headings --- css/app-typography.css | 19 +++++++++++ index.html | 2 +- mathdown.css | 76 ++++++++++++++++++++++++------------------ 3 files changed, 64 insertions(+), 33 deletions(-) diff --git a/css/app-typography.css b/css/app-typography.css index de409d8..2f1bd70 100644 --- a/css/app-typography.css +++ b/css/app-typography.css @@ -2,3 +2,22 @@ /* 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; } +} diff --git a/index.html b/index.html index dd8f9de..598e566 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,7 @@ - + diff --git a/mathdown.css b/mathdown.css index 6984b70..fcb7327 100644 --- a/mathdown.css +++ b/mathdown.css @@ -1,5 +1,39 @@ @charset "utf-8"; +/* OVERRIDE LIBS ============================================================ */ + +/* Override fixed editor size from firepad.css ------------------------------ */ +.firepad { height: 100%; } +.firepad .CodeMirror { height: 100%; position: relative; } +.powered-by-firepad { background-image: none; } /* Disable Firepad logo */ + +/* CodeMirror Hacks --------------------------------------------------------- */ +/* These are relevant to the app; other overrides of the original CodeMirror css + are in `css/cm-codemirror.css` */ +.CodeMirror { min-height: 100vh; } +@media (min-width: 800px) { .CodeMirror-gutter-wrapper { + height: 100%; + left:-5.5rem !important; + } +} +.CodeMirror-code > pre, +.CodeMirror-code > div { text-indent: 0 !important; padding-left: 0; } +.CodeMirror pre[style] { text-indent: 0; padding-left:0 !important; } +/* We set (in "renderLine" event) negative text-indent on indented lines, + which if inherited by any nested inline-block breaks their positioning + (math overlaps text, tabs become almost invisible). Thanks to + https://github.com/mathjax/MathJax/issues/473 for easy fix. */ +.CodeMirror pre > * { text-indent: 0 !important; } + +.CodeMirror-selected { background: yellow; } +.CodeMirror-focused .CodeMirror-selected { background: yellow; } +.CodeMirror-gutter-elt { + /* To do: When there are more lines in a header, the gutter folding arrow + should sit on the baseline of the first line. */ + position: absolute; + bottom:1rem; +} + /* NORMALIZE BROWSERS ======================================================= */ html { height: 100%; @@ -20,6 +54,7 @@ html * { body { height: 100%; width: 100%; margin:0; } /* Auto-responsive scaling for various screen sizes ------------------------- */ + @media screen and (max-width: 460px) { html { font-size: 14px; } } @@ -31,6 +66,7 @@ body { height: 100%; width: 100%; margin:0; } } + /* DEFAULT STYLES & SETUP =================================================== */ /* Setup and Dimensions of Editor Canvas ------------------------------------ */ @@ -55,39 +91,15 @@ form, textarea, .CodeMirror { body { display: table; } form { display: table-row; } */ - -/* OVERRIDE LIBS ============================================================ */ - -/* Override fixed editor size from firepad.css ------------------------------ */ -.firepad { height: 100%; } -.firepad .CodeMirror { height: 100%; position: relative; } -.powered-by-firepad { background-image: none; } /* Disable Firepad logo */ - -/* CodeMirror Hacks --------------------------------------------------------- */ -/* These are relevant to the app; other overrides of the original CodeMirror css - are in `css/cm-codemirror.css` */ -.CodeMirror { min-height: 100vh; } -@media (min-width: 800px) { .CodeMirror-gutter-wrapper { - height: 100%; - left:-5.5rem !important; - } +.firedpad { + max-width: 100%; } -.CodeMirror-code > pre, -.CodeMirror-code > div { text-indent: 0 !important; padding-left: 0; } -.CodeMirror pre[style] { text-indent: 0; padding-left:0 !important; } -/* We set (in "renderLine" event) negative text-indent on indented lines, - which if inherited by any nested inline-block breaks their positioning - (math overlaps text, tabs become almost invisible). Thanks to - https://github.com/mathjax/MathJax/issues/473 for easy fix. */ -.CodeMirror pre > * { text-indent: 0 !important; } - -.CodeMirror-selected { background: yellow; } -.CodeMirror-focused .CodeMirror-selected { background: yellow; } -.CodeMirror-gutter-elt { - /* To do: When there are more lines in a header, the gutter folding arrow - should sit on the baseline of the first line. */ - position: absolute; - bottom:1rem; +.CodeMirror-sizer { + max-width: 35rem; + /*margin-right: 22px;*/ +} +.CodeMirror-code { + max-width: 35rem; } From 30a8addbf36b5c87d323acfc42c71880ce3746a1 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 19:59:57 +0200 Subject: [PATCH 13/24] typography: emphasis --- css/app-typography.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/css/app-typography.css b/css/app-typography.css index 2f1bd70..195b4e7 100644 --- a/css/app-typography.css +++ b/css/app-typography.css @@ -21,3 +21,14 @@ .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"; +} From dedd89a614096c2fbedf7f751f2a70efb991aa2f Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 20:00:45 +0200 Subject: [PATCH 14/24] typography: links --- css/app-typography.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/css/app-typography.css b/css/app-typography.css index 195b4e7..9bf1037 100644 --- a/css/app-typography.css +++ b/css/app-typography.css @@ -32,3 +32,16 @@ -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; +} From 5780533ab5a79e1aa90c2a9fa8fa86f6acf13c84 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 20:01:56 +0200 Subject: [PATCH 15/24] typography: blockquotes --- css/app-typography.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/css/app-typography.css b/css/app-typography.css index 9bf1037..cb237c3 100644 --- a/css/app-typography.css +++ b/css/app-typography.css @@ -45,3 +45,25 @@ 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 , 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. + */ +} From a976478c631b6da17112767ffe13889f3ef89592 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 20:02:54 +0200 Subject: [PATCH 16/24] typography: code --- css/app-typography.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/css/app-typography.css b/css/app-typography.css index cb237c3..ed396c3 100644 --- a/css/app-typography.css +++ b/css/app-typography.css @@ -67,3 +67,20 @@ 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; +} From e548ce987588b1ec1e5244ada0f3b6b97b71ba3d Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 20:03:58 +0200 Subject: [PATCH 17/24] typography: math: number equations using css counter-increment --- css/app-typography.css | 47 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/css/app-typography.css b/css/app-typography.css index ed396c3..0e00a4c 100644 --- a/css/app-typography.css +++ b/css/app-typography.css @@ -84,3 +84,50 @@ 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; +} + + From 3bd91de58ffe363ceb5c2e1cc5e3298bc138170f Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 20:06:25 +0200 Subject: [PATCH 18/24] prepare for alternative views --- css/app-typography.css | 2 -- css/app-views.css | 58 ++++++++++++++++++++++++++++++++++++++++++ index.html | 1 + 3 files changed, 59 insertions(+), 2 deletions(-) create mode 100644 css/app-views.css diff --git a/css/app-typography.css b/css/app-typography.css index 0e00a4c..fc18b39 100644 --- a/css/app-typography.css +++ b/css/app-typography.css @@ -129,5 +129,3 @@ pre > span.CodeMirror-widget:only-of-type > .math > .MathJax_Display:after { -ms-flex-align: center; align-items: center; } - - diff --git a/css/app-views.css b/css/app-views.css new file mode 100644 index 0000000..a5a784e --- /dev/null +++ b/css/app-views.css @@ -0,0 +1,58 @@ +/* ALTERNATIVE VIEWS ======================================================== */ +/* To Do: Put controls in the GUI which allow the user to toggle alternative views on and off. + We assume a view’s class name will be set on the .CodeMirror container. */ + +/* Justified layout --------------------------------------------------------- */ +.justified .CodeMirror-sizer { + max-width: 35rem; + margin-left: auto !important; + margin-right: auto !important; +} +.justified .CodeMirror-code pre { + text-align: justify; + white-space: normal !important; /* https://bugs.webkit.org/show_bug.cgi?id=84448 */ +} + +/* Hide formatting syntax markers ------------------------------------------- */ +/* Cfr https://github.com/cben/mathdown/issues/29 */ +.hideSyntax .cm-formatting, +.hideSyntax .cm-hr:before, +.hideSyntax .cm-formatting-link-string + .cm-string { display: none; } + +/* Color-coded token highlighting ------------------------------------------- */ +/* To Do (if colored token highlighting would be desirable at all): + implement theme with subtle color scheme, + e.g. http://chriskempson.github.io/base16/#eighties */ +.colorize .cm-keyword { /* color: #708; */ } +.colorize .cm-atom { /* color: #219; */ } +.colorize .cm-number { /* color: #164; */ } +.colorize .cm-def { /* color: #00f; */ } +.colorize .cm-variable { /* color: black;*/ } +.colorize .cm-variable-2 { /* color: #05a; */ } +.colorize .cm-variable-3 { /* color: #085; */ } +.colorize .cm-property { /* color: black;*/ } +.colorize .cm-operator { /* color: black;*/ } +.colorize .cm-comment { /* color: #a50; */ } +.colorize .cm-string { /* color: #a11; */ } +.colorize .cm-string-2 { /* color: #f50; */ } +.colorize .cm-meta { /* color: #555; */ } +.colorize .cm-qualifier { /* color: #555; */ } +.colorize .cm-builtin { /* color: #30a; */ } +.colorize .cm-bracket { /* color: #997; */ } +.colorize .cm-tag { /* color: #170; */ } +.colorize .cm-attribute { /* color: #00c; */ } +.colorize .cm-header { } +.colorize .cm-quote { /* color: #090; */ } +.colorize .cm-hr { /* color: #999; */ } +.colorize .cm-link { /* color: #00c; */ } +.colorize .cm-negative { /* color: #d44; */ } +.colorize .cm-positive { /* color: #292; */ } +.colorize .cm-header { } +.colorize .cm-strong { } +.colorize .cm-em { } +.colorize .cm-link { } +.colorize .cm-error { /* color: #f00; */ } +.colorize .cm-invalidchar { /* color: #f00; */ } +.colorize .CodeMirror-matchingbracket { /* color: #0f0; */ } +.colorize .CodeMirror-nonmatchingbracket { /* color: #f22; */ } +.colorize .CodeMirror-activeline-background { /* background: #e8f2ff; */ } diff --git a/index.html b/index.html index 598e566..37863b7 100644 --- a/index.html +++ b/index.html @@ -51,6 +51,7 @@ + From 66f5f4ac85136e1abc0e926ba591707518152e44 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 20:08:46 +0200 Subject: [PATCH 19/24] load Computer Modern fonts for default body text --- css/fonts.css | 24 ++++++++++++++++++++++++ mathdown.css | 5 +++-- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/css/fonts.css b/css/fonts.css index 4db3489..d4eb7b7 100644 --- a/css/fonts.css +++ b/css/fonts.css @@ -6,3 +6,27 @@ font-weight: normal; font-style: normal; } + +/* To do: Don’t load fonts as an external dependency, but serve our own, + likely from the MathJax lib. */ +@font-face { + font-family: "Computer Modern"; + src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunbi.otf'); + font-weight: bold; + font-style: italic; +} +@font-face { + font-family: "Computer Modern"; + src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunrb.otf'); + font-weight: bold; +} +@font-face { + font-family: "Computer Modern"; + src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunci.otf'); + font-style: italic; +} +@font-face { + font-family: "Computer Modern"; + src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunrm.otf'); + font-weight: normal; +} diff --git a/mathdown.css b/mathdown.css index fcb7327..14bb7eb 100644 --- a/mathdown.css +++ b/mathdown.css @@ -106,8 +106,9 @@ form, textarea, .CodeMirror { /* Fonts & Colors ----------------------------------------------------------- */ .CodeMirror, .CodeMirror-code { - /* Font choices based on Math.SE: http://graphicdesign.stackexchange.com/a/12961 */ - font-family: Georgia, "Bitstream Charter", "Times New Roman", Times, serif; + /* Homage to Don Knuth’s Computer Modern fonts; for alternatives + cfr Math.SE: http://graphicdesign.stackexchange.com/a/12961 */ + font-family: "Computer Modern", "Times New Roman", Times, serif; -webkit-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; -webkit-font-kerning: auto; From 4e250cf5e652ce9a910269be20dc4cd7d2352054 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Fri, 23 May 2014 20:09:56 +0200 Subject: [PATCH 20/24] have MathJax use Latin-Modern fonts to match Computer Modern face of body text --- index.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/index.html b/index.html index 37863b7..b6b3b60 100644 --- a/index.html +++ b/index.html @@ -63,6 +63,23 @@ processEscapes: true, preview: "none" }, + "HTML-CSS": { + // TO DO: + // As we do not want to rely on locally installed fonts, we will always + // load webfonts, hence tell MathJax it should not look for locally + // installed fonts (empty set): + availableFonts: [], + // MathJax’s default fonts are STIX (a Times face). To match Don + // Knuth’s TeX Computer Modern face (which we use for the body text) + // we’ll use Latin-Modern for math, and need to tell MathJax to use + // these instead. (We *must* set a font, since if we would leave the + // value blank, MathJax won’t render anything at all.) + webFont: "Latin-Modern" + // TO DO: loading all fonts and their dozens of respective scripts + // takes way too long; we should probably concatenate these into + // a single, minified, gzipped file. + // MathJax docs: http://docs.mathjax.org/en/v1.1-latest/options/HTML-CSS.html + } }); From 1ee45f2b6abdf7f314da5ec1023aedb8f3916632 Mon Sep 17 00:00:00 2001 From: Wouter Soudan Date: Sat, 24 May 2014 15:09:28 +0200 Subject: [PATCH 21/24] change theme color --- css/app-header.css | 6 +++--- css/cm-codemirror.css | 4 ++-- index.html | 14 ++------------ mathdown.css | 5 ----- 4 files changed, 7 insertions(+), 22 deletions(-) diff --git a/css/app-header.css b/css/app-header.css index 85efad9..ef02bc3 100644 --- a/css/app-header.css +++ b/css/app-header.css @@ -5,8 +5,8 @@ #header { display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - background-color: rgb(1,25,35); - color:rgb(0,110,200); + background-color: rgb(0,20,10); + color:rgb(40,130,52); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight : 400; @@ -20,7 +20,7 @@ #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(50,160,250); } +#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; } diff --git a/css/cm-codemirror.css b/css/cm-codemirror.css index c80c431..ab338b3 100644 --- a/css/cm-codemirror.css +++ b/css/cm-codemirror.css @@ -62,7 +62,7 @@ border-left-width: 2px; border-right-width: 1px; } .CodeMirror-cursor { - border-color: rgba(20,170,255,0.6); + border-color: rgba(70,160,82,0.6); } .CodeMirror-secondarycursor { /* Shown when moving in bi-directional text */ border-color: silver; @@ -70,7 +70,7 @@ .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor { width: auto; border: 0; - background-color: rgba(20,170,255,0.6); + background-color: rgba(70,160,82,0.6); z-index: 1; } /* Can style cursor different in overwrite (non-insert) mode */ diff --git a/index.html b/index.html index b6b3b60..fa697f9 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,6 @@ To Do too: Create a favicon with the ℳ↧ logo and remove from the document’s title. --> ℳ↧ ⋯ - @@ -26,7 +25,6 @@ - @@ -38,23 +36,18 @@ - - - - - -