Skip to content

Commit 4a9dd70

Browse files
marijnhmarijnh
committed
integrate page design
1 parent d3b5576 commit 4a9dd70

25 files changed

+771
-153
lines changed

‎compress.html‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<title>CodeMirror 2: Compression Helper</title>
4+
<title>CodeMirror: Compression Helper</title>
5+
<link rel="stylesheet" type="text/css" href="css/docs.css"/>
56
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6-
<link rel="stylesheet" href="docs.css">
77
</head>
88
<body>
9-
<h1>CodeMirror 2: Compression Helper</h1>
9+
10+
<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
11+
12+
<pre class="grey">
13+
<img src="css/baboon.png" class="logo" alt="logo"/>/* Script compression
14+
helper */
15+
</pre>
16+
17+
<p>To optimize loading CodeMirror, especially when including a
18+
bunch of different modes, it is recommended that you combine and
19+
minify (and preferably also gzip) the scrips. This page makes
20+
those first two steps very easy. Simply select the version and
21+
scripts you need in the form below, and
22+
click <strong>Compress</strong> to download the minified script
23+
file.</p>
1024

1125
<form id="form" action="http://marijnhaverbeke.nl/uglifyjs" method="post">
1226
<input type="hidden" id="download" name="download" value="codemirror-compressed.js"/>
@@ -30,6 +44,7 @@ <h1>CodeMirror 2: Compression Helper</h1>
3044
<option value="http://codemirror.net/2/mode/php/php.js">php.js</option>
3145
<option value="http://codemirror.net/2/mode/haskell/haskell.js">haskell.js</option>
3246
<option value="http://codemirror.net/2/mode/diff/diff.js">diff.js</option>
47+
<option value="http://codemirror.net/2/mode/stex/stex.js">stex.js</option>
3348
</optgroup>
3449
</select></p>
3550

@@ -55,6 +70,7 @@ <h1>CodeMirror 2: Compression Helper</h1>
5570
}
5671
}
5772
</script>
73+
<script type="text/javascript" src="css/font.js"></script>
5874

5975
</body>
6076
</html>

‎css/baboon.png‎

22.8 KB
Loading

‎css/baboon_vector.svg‎

Lines changed: 153 additions & 0 deletions
Loading

‎css/docs.css‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
line-height: 1.5;
4+
max-width: 64.3em;
5+
margin: 3em auto;
6+
padding: 0 1em;
7+
}
8+
body.droid {
9+
font-family: Droid Sans, Arial, sans-serif;
10+
}
11+
12+
h1 {
13+
letter-spacing: -3px;
14+
font-size: 3.23em;
15+
font-weight: bold;
16+
margin: 0;
17+
}
18+
19+
h2 {
20+
font-size: 1.23em;
21+
font-weight: bold;
22+
margin: .5em 0;
23+
letter-spacing: -1px;
24+
}
25+
26+
h3 {
27+
font-size: 1em;
28+
font-weight: bold;
29+
margin: .4em 0;
30+
}
31+
32+
pre {
33+
font-family: Courier New, monospaced;
34+
background-color: #eee;
35+
-moz-border-radius: 6px;
36+
-webkit-border-radius: 6px;
37+
border-radius: 6px;
38+
padding: 1em;
39+
}
40+
41+
pre.code {
42+
margin: 0 1em;
43+
}
44+
45+
.grey {
46+
font-size: 2em;
47+
padding: .5em 1em;
48+
line-height: 1.2em;
49+
margin-top: .5em;
50+
position: relative;
51+
}
52+
53+
img.logo {
54+
position: absolute;
55+
right: -25px;
56+
bottom: 4px;
57+
}
58+
59+
a:link, a:visited, .quasilink {
60+
color: #df0019;
61+
cursor: pointer;
62+
text-decoration: none;
63+
}
64+
65+
a:hover, .quasilink:hover {
66+
color: #800004;
67+
}
68+
69+
h1 a:link, h1 a:visited, h1 a:hover {
70+
color: black;
71+
}
72+
73+
ul {
74+
margin: 0;
75+
padding-left: 1.2em;
76+
}
77+
78+
a.download {
79+
color: white;
80+
background-color: #df0019;
81+
width: 100%;
82+
display: block;
83+
text-align: center;
84+
font-size: 1.23em;
85+
font-weight: bold;
86+
text-decoration: none;
87+
-moz-border-radius: 6px;
88+
-webkit-border-radius: 6px;
89+
border-radius: 6px;
90+
padding: .5em 0;
91+
margin-bottom: 1em;
92+
}
93+
94+
a.download:hover {
95+
background-color: #bb0010;
96+
}
97+
98+
.rel {
99+
margin-bottom: 0;
100+
}
101+
102+
.rel-note {
103+
color: #777;
104+
font-size: .9em;
105+
margin-top: .1em;
106+
}
107+
108+
.logo-braces {
109+
color: #df0019;
110+
position: relative;
111+
top: -4px;
112+
}
113+
114+
.blk {
115+
float: left;
116+
}
117+
118+
.left {
119+
width: 37em;
120+
padding-right: 6.53em;
121+
padding-bottom: 1em;
122+
}
123+
124+
.left1 {
125+
width: 15.24em;
126+
padding-right: 6.45em;
127+
}
128+
129+
.left2 {
130+
width: 15.24em;
131+
}
132+
133+
.right {
134+
width: 20.68em;
135+
}
136+
137+
.leftbig {
138+
width: 42.44em;
139+
padding-right: 6.53em;
140+
}
141+
142+
.rightsmall {
143+
width: 15.24em;
144+
}
145+
146+
.clear:after {
147+
visibility: hidden;
148+
display: block;
149+
font-size: 0;
150+
content: " ";
151+
clear: both;
152+
height: 0;
153+
}
154+
.clear { display: inline-block; }
155+
/* start commented backslash hack \*/
156+
* html .clear { height: 1%; }
157+
.clear { display: block; }
158+
/* close commented backslash hack */

‎css/font.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
function waitForStyles() {
2+
for (var i = 0; i < document.styleSheets.length; i++)
3+
if (/googleapis/.test(document.styleSheets[i].href))
4+
return document.body.className += " droid";
5+
setTimeout(waitForStyles, 100);
6+
}
7+
setTimeout(function() {
8+
if (/AppleWebKit/.test(navigator.userAgent) && /iP[oa]d|iPhone/.test(navigator.userAgent)) return;
9+
var link = document.createElement("LINK");
10+
link.type = "text/css";
11+
link.rel = "stylesheet";
12+
link.href = "http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold";
13+
document.documentElement.getElementsByTagName("HEAD")[0].appendChild(link);
14+
waitForStyles();
15+
}, 10);

‎demo/activeline.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>CodeMirror 2: Active Line Demo</title>
5+
<link rel="stylesheet" href="../lib/codemirror.css">
6+
<script src="../lib/codemirror.js"></script>
7+
<link rel="stylesheet" href="../mode/xml/xml.css">
8+
<script src="../mode/xml/xml.js"></script>
9+
<link rel="stylesheet" href="../css/docs.css">
10+
11+
<style type="text/css">
12+
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
13+
.activeline {background: #f0fcff !important;}
14+
</style>
15+
</head>
16+
<body>
17+
<h1>CodeMirror 2: Active Line Demo</h1>
18+
19+
<form><textarea id="code" name="code">
20+
<?xml version="1.0" encoding="UTF-8"?>
21+
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
22+
xmlns:georss="http://www.georss.org/georss"
23+
xmlns:twitter="http://api.twitter.com">
24+
<channel>
25+
<title>Twitter / codemirror</title>
26+
<link>http://twitter.com/codemirror</link>
27+
<atom:link type="application/rss+xml"
28+
href="http://twitter.com/statuses/user_timeline/242283288.rss" rel="self"/>
29+
<description>Twitter updates from CodeMirror / codemirror.</description>
30+
<language>en-us</language>
31+
<ttl>40</ttl>
32+
<item>
33+
<title>codemirror: http://cloud-ide.com &#8212; they're springing up like mushrooms. This one
34+
uses CodeMirror as its editor.</title>
35+
<description>codemirror: http://cloud-ide.com &#8212; they're springing up like mushrooms. This
36+
one uses CodeMirror as its editor.</description>
37+
<pubDate>Thu, 17 Mar 2011 23:34:47 +0000</pubDate>
38+
<guid>http://twitter.com/codemirror/statuses/48527733722058752</guid>
39+
<link>http://twitter.com/codemirror/statuses/48527733722058752</link>
40+
<twitter:source>web</twitter:source>
41+
<twitter:place/>
42+
</item>
43+
<item>
44+
<title>codemirror: Posted a description of the CodeMirror 2 internals at
45+
http://codemirror.net/2/internals.html</title>
46+
<description>codemirror: Posted a description of the CodeMirror 2 internals at
47+
http://codemirror.net/2/internals.html</description>
48+
<pubDate>Wed, 02 Mar 2011 12:15:09 +0000</pubDate>
49+
<guid>http://twitter.com/codemirror/statuses/42920879788789760</guid>
50+
<link>http://twitter.com/codemirror/statuses/42920879788789760</link>
51+
<twitter:source>web</twitter:source>
52+
<twitter:place/>
53+
</item>
54+
</feed></textarea></form>
55+
56+
<script>
57+
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
58+
mode: "application/xml",
59+
lineNumbers: true,
60+
onCursorActivity: function() {
61+
editor.setLineClass(hlLine, null);
62+
hlLine = editor.setLineClass(editor.getCursor().line, "activeline");
63+
}
64+
});
65+
var hlLine = editor.setLineClass(0, "activeline");
66+
</script>
67+
68+
<p>Styling the current cursor line.</p>
69+
70+
</body>
71+
</html>

‎demo/complete.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<script src="../lib/codemirror.js"></script>
77
<link rel="stylesheet" href="../mode/javascript/javascript.css">
88
<script src="../mode/javascript/javascript.js"></script>
9-
<link rel="stylesheet" href="../docs.css">
9+
<link rel="stylesheet" href="../css/docs.css">
1010

1111
<style type="text/css">
1212
.completions {

‎demo/marker.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<script src="../lib/codemirror.js"></script>
77
<link rel="stylesheet" href="../mode/javascript/javascript.css">
88
<script src="../mode/javascript/javascript.js"></script>
9-
<link rel="stylesheet" href="../docs.css">
9+
<link rel="stylesheet" href="../css/docs.css">
1010

1111
<style type="text/css">
1212
.CodeMirror-gutter {

‎demo/mustache.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<script src="../lib/overlay.js"></script>
88
<link rel="stylesheet" href="../mode/xml/xml.css">
99
<script src="../mode/xml/xml.js"></script>
10-
<link rel="stylesheet" href="../docs.css">
10+
<link rel="stylesheet" href="../css/docs.css">
1111

1212
<style type="text/css">
1313
.CodeMirror {border: 1px solid black;}

‎demo/resize.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<script src="../lib/codemirror.js"></script>
77
<link rel="stylesheet" href="../mode/css/css.css">
88
<script src="../mode/css/css.js"></script>
9-
<link rel="stylesheet" href="../docs.css">
9+
<link rel="stylesheet" href="../css/docs.css">
1010

1111
<style type="text/css">
1212
.CodeMirror {

0 commit comments

Comments
 (0)