commit b016015d4ede0ee0ab0d2e94a25ef5a7d469c7e5
parent 2478a385ae2738f5a085f68763914ec1d3a3a339
Author: Emily Eisenberg <xymostech@gmail.com>
Date: Tue, 9 Jul 2013 15:53:35 -0700
Sync styles with khan-exercises
Summary:
Get the styles into a form that they can be directly copied over to
khan-exercises, with no changes. Mostly just changing #math to .mathmathmath
and adding a font style and size.
Test Plan: Make sure that the local test still works.
Reviewers: spicyj
Reviewed By: spicyj
Differential Revision: http://phabricator.benalpert.com/D47
Diffstat:
5 files changed, 160 insertions(+), 160 deletions(-)
diff --git a/Makefile b/Makefile
@@ -6,7 +6,7 @@ build/MJLite.js: MJLite.js parser.jison lexer.js
copy: build
cp build/MJLite.js ../exercises/utils/MJLite.js
- cp static/style.css ../exercises/css/mjlite.css
+ cp static/mjlite.css ../exercises/css/
cp -R static/fonts ../exercises/css/
serve:
diff --git a/static/index.html b/static/index.html
@@ -5,10 +5,11 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js" type="text/javascript"></script>
<script src="MJLite.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
- <link href="style.css" rel="stylesheet" type="text/css">
+ <link href="mjlite.css" rel="stylesheet" type="text/css">
+ <link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<input type="text" value="2x^2 + 3" id="input" />
- <div id="math"></div>
+ <div id="math" class="mathmathmath"></div>
</body>
</html>
diff --git a/static/main.css b/static/main.css
@@ -0,0 +1,9 @@
+body {
+ margin: 0px;
+ padding: 0px;
+}
+
+input {
+ margin: 0px;
+ font-size: 100%;
+}
diff --git a/static/mjlite.css b/static/mjlite.css
@@ -0,0 +1,147 @@
+@import "fonts/fonts.css";
+
+/*
+thin space: 1/6 quad
+medium space: 2/9 quad
+thick space: 5/18 quad
+
+things to do:
+^ _ and styles
+\sin
+\sum, \int, \lim
+\frac
+\sqrt
+big parens
+*/
+
+.mathmathmath {
+ font: normal 1.21em mjlite_main;
+ line-height: 1.4;
+}
+
+.mathit {
+ font-family: mjlite_math;
+ font-style: italic;
+}
+
+.mord + .mbin {
+ margin-left: 0.22222em;
+}
+
+.mbin + .mord {
+ margin-left: 0.22222em;
+}
+
+.mbin + .mopen {
+ margin-left: 0.22222em;
+}
+
+.mclose + .mbin {
+ margin-left: 0.22222em;
+}
+
+.mrel + .mord {
+ margin-left: 0.27778em;
+}
+
+.mord + .mrel {
+ margin-left: 0.27778em;
+}
+
+.mrel + .mopen {
+ margin-left: 0.27778em;
+}
+
+.mclose + .mrel {
+ margin-left: 0.27778em;
+}
+
+.msub {
+ vertical-align: bottom;
+ font-size: 70%;
+ position: relative;
+ top: 0.2em;
+}
+
+.msup {
+ position: relative;
+ top: -0.5em;
+ font-size: 70%;
+}
+
+.msupsub {
+ display: inline-table;
+ table-layout: fixed;
+ vertical-align: middle;
+}
+
+.msupsub > .msup, .msupsub > .msub {
+ display: table-row;
+ vertical-align: baseline;
+ line-height: 1em;
+}
+
+.mfrac {
+ display: inline-table;
+ vertical-align: 0.66em;
+ padding-left: 0.16667em;
+ padding-right: 0.16667em;
+}
+
+.mfracnum, .mfracmid, .mfracden {
+ display: table-row;
+ text-align: center;
+}
+
+.mfracmid > span {
+ background: black;
+ display: block;
+ height: 0.05em;
+ min-height: 1px;
+}
+
+.mfracnum > span {
+ display: inline-block;
+ vertical-align: bottom;
+}
+
+.mspace {
+ display: inline-block;
+}
+
+.mspace.thinspace {
+ width: 0.16667em;
+}
+
+.mspace.mediumspace {
+ width: 0.22222em;
+}
+
+.mspace.thickspace {
+ width: 0.27778em;
+}
+
+.mspace.quad {
+ width: 1em;
+}
+
+.mspace.qquad {
+ width: 2em;
+}
+
+
+.mord.blue { color: #6495ed; }
+.mord.orange { color: #ffa500; }
+.mord.pink { color: #ff00af; }
+.mord.red { color: #df0030; }
+.mord.green { color: #28ae7b; }
+.mord.gray { color: gray; }
+.mord.purple { color: #9d38bd; }
+
+.blue .mfracmid > span { background: #6495ed; }
+.orange .mfracmid > span { background: #ffa500; }
+.pink .mfracmid > span { background: #ff00af; }
+.red .mfracmid > span { background: #df0030; }
+.green .mfracmid > span { background: #28ae7b; }
+.gray .mfracmid > span { background: gray; }
+.purple .mfracmid > span { background: #9d38bd; }
diff --git a/static/style.css b/static/style.css
@@ -1,157 +0,0 @@
-@import "fonts/fonts.css";
-
-/*
-thin space: 1/6 quad
-medium space: 2/9 quad
-thick space: 5/18 quad
-
-things to do:
-^ _ and styles
-\sin
-\sum, \int, \lim
-\frac
-\sqrt
-big parens
-*/
-
-body {
- margin: 0px;
- padding: 0px;
-}
-
-input {
- margin: 0px;
- font-size: 100%;
-}
-
-#math {
- font-family: mjlite_main;
- line-height: 1.4;
-}
-
-.mathit {
- font-family: mjlite_math;
- font-style: italic;
-}
-
-.mord + .mbin {
- margin-left: 0.22222em;
-}
-
-.mbin + .mord {
- margin-left: 0.22222em;
-}
-
-.mbin + .mopen {
- margin-left: 0.22222em;
-}
-
-.mclose + .mbin {
- margin-left: 0.22222em;
-}
-
-.mrel + .mord {
- margin-left: 0.27778em;
-}
-
-.mord + .mrel {
- margin-left: 0.27778em;
-}
-
-.mrel + .mopen {
- margin-left: 0.27778em;
-}
-
-.mclose + .mrel {
- margin-left: 0.27778em;
-}
-
-.msub {
- vertical-align: bottom;
- font-size: 70%;
- position: relative;
- top: 0.2em;
-}
-
-.msup {
- position: relative;
- top: -0.5em;
- font-size: 70%;
-}
-
-.msupsub {
- display: inline-table;
- table-layout: fixed;
- vertical-align: middle;
-}
-
-.msupsub > .msup, .msupsub > .msub {
- display: table-row;
- vertical-align: baseline;
- line-height: 1em;
-}
-
-.mfrac {
- display: inline-table;
- vertical-align: 0.66em;
- padding-left: 0.16667em;
- padding-right: 0.16667em;
-}
-
-.mfracnum, .mfracmid, .mfracden {
- display: table-row;
- text-align: center;
-}
-
-.mfracmid > span {
- background: black;
- display: block;
- height: 0.05em;
- min-height: 1px;
-}
-
-.mfracnum > span {
- display: inline-block;
- vertical-align: bottom;
-}
-
-.mspace {
- display: inline-block;
-}
-
-.mspace.thinspace {
- width: 0.16667em;
-}
-
-.mspace.mediumspace {
- width: 0.22222em;
-}
-
-.mspace.thickspace {
- width: 0.27778em;
-}
-
-.mspace.quad {
- width: 1em;
-}
-
-.mspace.qquad {
- width: 2em;
-}
-
-
-.mord.blue { color: #6495ed; }
-.mord.orange { color: #ffa500; }
-.mord.pink { color: #ff00af; }
-.mord.red { color: #df0030; }
-.mord.green { color: #28ae7b; }
-.mord.gray { color: gray; }
-.mord.purple { color: #9d38bd; }
-
-.blue .mfracmid > span { background: #6495ed; }
-.orange .mfracmid > span { background: #ffa500; }
-.pink .mfracmid > span { background: #ff00af; }
-.red .mfracmid > span { background: #df0030; }
-.green .mfracmid > span { background: #28ae7b; }
-.gray .mfracmid > span { background: gray; }
-.purple .mfracmid > span { background: #9d38bd; }
