accidentally merged gh-pages into master, removing this stuff :(
This commit is contained in:
parent
600c9619c3
commit
8d4b454f65
@ -1,36 +0,0 @@
|
||||
/* -----------------------------------------------------------------------
|
||||
|
||||
|
||||
Blueprint CSS Framework 1.0
|
||||
http://blueprintcss.org
|
||||
|
||||
* Copyright (c) 2007-Present. See LICENSE for more info.
|
||||
* See README for instructions on how to use Blueprint.
|
||||
* For credits and origins, see AUTHORS.
|
||||
* This is a compressed file. See the sources in the 'src' directory.
|
||||
|
||||
----------------------------------------------------------------------- */
|
||||
|
||||
/* ie.css */
|
||||
body {text-align:center;}
|
||||
.container {text-align:left;}
|
||||
* html .column, * html .span-1, * html .span-2, * html .span-3, * html .span-4, * html .span-5, * html .span-6, * html .span-7, * html .span-8, * html .span-9, * html .span-10, * html .span-11, * html .span-12, * html .span-13, * html .span-14, * html .span-15, * html .span-16, * html .span-17, * html .span-18, * html .span-19, * html .span-20, * html .span-21, * html .span-22, * html .span-23, * html .span-24 {display:inline;overflow-x:hidden;}
|
||||
* html legend {margin:0px -8px 16px 0;padding:0;}
|
||||
sup {vertical-align:text-top;}
|
||||
sub {vertical-align:text-bottom;}
|
||||
html>body p code {*white-space:normal;}
|
||||
hr {margin:-8px auto 11px;}
|
||||
img {-ms-interpolation-mode:bicubic;}
|
||||
.clearfix, .container {display:inline-block;}
|
||||
* html .clearfix, * html .container {height:1%;}
|
||||
fieldset {padding-top:0;}
|
||||
legend {margin-top:-0.2em;margin-bottom:1em;margin-left:-0.5em;}
|
||||
textarea {overflow:auto;}
|
||||
label {vertical-align:middle;position:relative;top:-0.25em;}
|
||||
input.text, input.title, textarea {background-color:#fff;border:1px solid #bbb;}
|
||||
input.text:focus, input.title:focus {border-color:#666;}
|
||||
input.text, input.title, textarea, select {margin:0.5em 0;}
|
||||
input.checkbox, input.radio {position:relative;top:.25em;}
|
||||
form.inline div, form.inline p {vertical-align:middle;}
|
||||
form.inline input.checkbox, form.inline input.radio, form.inline input.button, form.inline button {margin:0.5em 0;}
|
||||
button, input.button {position:relative;top:0.25em;}
|
@ -1,29 +0,0 @@
|
||||
/* -----------------------------------------------------------------------
|
||||
|
||||
|
||||
Blueprint CSS Framework 1.0
|
||||
http://blueprintcss.org
|
||||
|
||||
* Copyright (c) 2007-Present. See LICENSE for more info.
|
||||
* See README for instructions on how to use Blueprint.
|
||||
* For credits and origins, see AUTHORS.
|
||||
* This is a compressed file. See the sources in the 'src' directory.
|
||||
|
||||
----------------------------------------------------------------------- */
|
||||
|
||||
/* print.css */
|
||||
body {line-height:1.5;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color:#000;background:none;font-size:10pt;}
|
||||
.container {background:none;}
|
||||
hr {background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;border:none;}
|
||||
hr.space {background:#fff;color:#fff;visibility:hidden;}
|
||||
h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;}
|
||||
code {font:.9em "Courier New", Monaco, Courier, monospace;}
|
||||
a img {border:none;}
|
||||
p img.top {margin-top:0;}
|
||||
blockquote {margin:1.5em;padding:1em;font-style:italic;font-size:.9em;}
|
||||
.small {font-size:.9em;}
|
||||
.large {font-size:1.1em;}
|
||||
.quiet {color:#999;}
|
||||
.hide {display:none;}
|
||||
a:link, a:visited {background:transparent;font-weight:700;text-decoration:underline;}
|
||||
a:link:after, a:visited:after {content:" (" attr(href) ")";font-size:90%;}
|
@ -1,265 +0,0 @@
|
||||
/* -----------------------------------------------------------------------
|
||||
|
||||
|
||||
Blueprint CSS Framework 1.0
|
||||
http://blueprintcss.org
|
||||
|
||||
* Copyright (c) 2007-Present. See LICENSE for more info.
|
||||
* See README for instructions on how to use Blueprint.
|
||||
* For credits and origins, see AUTHORS.
|
||||
* This is a compressed file. See the sources in the 'src' directory.
|
||||
|
||||
----------------------------------------------------------------------- */
|
||||
|
||||
/* reset.css */
|
||||
html {margin:0;padding:0;border:0;}
|
||||
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
|
||||
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
|
||||
body {line-height:1.5;background:white;}
|
||||
table {border-collapse:separate;border-spacing:0;}
|
||||
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
|
||||
table, th, td {vertical-align:middle;}
|
||||
blockquote:before, blockquote:after, q:before, q:after {content:'';}
|
||||
blockquote, q {quotes:"" "";}
|
||||
a img {border:none;}
|
||||
:focus {outline:0;}
|
||||
|
||||
/* typography.css */
|
||||
html {font-size:100.01%;}
|
||||
body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
|
||||
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
|
||||
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
|
||||
h2 {font-size:2em;margin-bottom:0.75em;}
|
||||
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
|
||||
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
|
||||
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
|
||||
h6 {font-size:1em;font-weight:bold;}
|
||||
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
|
||||
p {margin:0 0 1.5em;}
|
||||
.left {float:left !important;}
|
||||
p .left {margin:1.5em 1.5em 1.5em 0;padding:0;}
|
||||
.right {float:right !important;}
|
||||
p .right {margin:1.5em 0 1.5em 1.5em;padding:0;}
|
||||
a:focus, a:hover {color:#09f;}
|
||||
a {color:#06c;text-decoration:underline;}
|
||||
blockquote {margin:1.5em;color:#666;font-style:italic;}
|
||||
strong, dfn {font-weight:bold;}
|
||||
em, dfn {font-style:italic;}
|
||||
sup, sub {line-height:0;}
|
||||
abbr, acronym {border-bottom:1px dotted #666;}
|
||||
address {margin:0 0 1.5em;font-style:italic;}
|
||||
del {color:#666;}
|
||||
pre {margin:1.5em 0;white-space:pre;}
|
||||
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
|
||||
li ul, li ol {margin:0;}
|
||||
ul, ol {margin:0 1.5em 1.5em 0;padding-left:1.5em;}
|
||||
ul {list-style-type:disc;}
|
||||
ol {list-style-type:decimal;}
|
||||
dl {margin:0 0 1.5em 0;}
|
||||
dl dt {font-weight:bold;}
|
||||
dd {margin-left:1.5em;}
|
||||
table {margin-bottom:1.4em;width:100%;}
|
||||
th {font-weight:bold;}
|
||||
thead th {background:#c3d9ff;}
|
||||
th, td, caption {padding:4px 10px 4px 5px; border: 1px solid #ccc;}
|
||||
/*tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}*/
|
||||
tfoot {font-style:italic;}
|
||||
caption {background:#eee;}
|
||||
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
|
||||
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
|
||||
.hide {display:none;}
|
||||
.quiet {color:#666;}
|
||||
.loud {color:#000;}
|
||||
.highlight {background:#ff0;}
|
||||
.added {background:#060;color:#fff;}
|
||||
.removed {background:#900;color:#fff;}
|
||||
.first {margin-left:0;padding-left:0;}
|
||||
.last {margin-right:0;padding-right:0;}
|
||||
.top {margin-top:0;padding-top:0;}
|
||||
.bottom {margin-bottom:0;padding-bottom:0;}
|
||||
|
||||
/* forms.css */
|
||||
label {font-weight:bold;}
|
||||
fieldset {padding:0 1.4em 1.4em 1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
|
||||
legend {font-weight:bold;font-size:1.2em;margin-top:-0.2em;margin-bottom:1em;}
|
||||
fieldset, #IE8#HACK {padding-top:1.4em;}
|
||||
legend, #IE8#HACK {margin-top:0;margin-bottom:0;}
|
||||
input[type=text], input[type=password], input.text, input.title, textarea {background-color:#fff;border:1px solid #bbb;}
|
||||
input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus {border-color:#666;}
|
||||
select {background-color:#fff;border-width:1px;border-style:solid;}
|
||||
input[type=text], input[type=password], input.text, input.title, textarea, select {margin:0.5em 0;}
|
||||
input.text, input.title {width:300px;padding:5px;}
|
||||
input.title {font-size:1.5em;}
|
||||
textarea {width:390px;height:250px;padding:5px;}
|
||||
form.inline {line-height:3;}
|
||||
form.inline p {margin-bottom:0;}
|
||||
.error, .alert, .notice, .success, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}
|
||||
.error, .alert {background:#fbe3e4;color:#8a1f11;border-color:#fbc2c4;}
|
||||
.notice {background:#fff6bf;color:#514721;border-color:#ffd324;}
|
||||
.success {background:#e6efc2;color:#264409;border-color:#c6d880;}
|
||||
.info {background:#d5edf8;color:#205791;border-color:#92cae4;}
|
||||
.error a, .alert a {color:#8a1f11;}
|
||||
.notice a {color:#514721;}
|
||||
.success a {color:#264409;}
|
||||
.info a {color:#205791;}
|
||||
|
||||
/* grid.css */
|
||||
.container {width:950px;margin:0 auto;}
|
||||
.showgrid {background:url(src/grid.png);}
|
||||
.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {float:left;margin-right:10px;}
|
||||
.last {margin-right:0;}
|
||||
.span-1 {width:30px;}
|
||||
.span-2 {width:70px;}
|
||||
.span-3 {width:110px;}
|
||||
.span-4 {width:150px;}
|
||||
.span-5 {width:190px;}
|
||||
.span-6 {width:230px;}
|
||||
.span-7 {width:270px;}
|
||||
.span-8 {width:310px;}
|
||||
.span-9 {width:350px;}
|
||||
.span-10 {width:390px;}
|
||||
.span-11 {width:430px;}
|
||||
.span-12 {width:470px;}
|
||||
.span-13 {width:510px;}
|
||||
.span-14 {width:550px;}
|
||||
.span-15 {width:590px;}
|
||||
.span-16 {width:630px;}
|
||||
.span-17 {width:670px;}
|
||||
.span-18 {width:710px;}
|
||||
.span-19 {width:750px;}
|
||||
.span-20 {width:790px;}
|
||||
.span-21 {width:830px;}
|
||||
.span-22 {width:870px;}
|
||||
.span-23 {width:910px;}
|
||||
.span-24 {width:950px;margin-right:0;}
|
||||
input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {border-left-width:1px;border-right-width:1px;padding-left:5px;padding-right:5px;}
|
||||
input.span-1, textarea.span-1 {width:18px;}
|
||||
input.span-2, textarea.span-2 {width:58px;}
|
||||
input.span-3, textarea.span-3 {width:98px;}
|
||||
input.span-4, textarea.span-4 {width:138px;}
|
||||
input.span-5, textarea.span-5 {width:178px;}
|
||||
input.span-6, textarea.span-6 {width:218px;}
|
||||
input.span-7, textarea.span-7 {width:258px;}
|
||||
input.span-8, textarea.span-8 {width:298px;}
|
||||
input.span-9, textarea.span-9 {width:338px;}
|
||||
input.span-10, textarea.span-10 {width:378px;}
|
||||
input.span-11, textarea.span-11 {width:418px;}
|
||||
input.span-12, textarea.span-12 {width:458px;}
|
||||
input.span-13, textarea.span-13 {width:498px;}
|
||||
input.span-14, textarea.span-14 {width:538px;}
|
||||
input.span-15, textarea.span-15 {width:578px;}
|
||||
input.span-16, textarea.span-16 {width:618px;}
|
||||
input.span-17, textarea.span-17 {width:658px;}
|
||||
input.span-18, textarea.span-18 {width:698px;}
|
||||
input.span-19, textarea.span-19 {width:738px;}
|
||||
input.span-20, textarea.span-20 {width:778px;}
|
||||
input.span-21, textarea.span-21 {width:818px;}
|
||||
input.span-22, textarea.span-22 {width:858px;}
|
||||
input.span-23, textarea.span-23 {width:898px;}
|
||||
input.span-24, textarea.span-24 {width:938px;}
|
||||
.append-1 {padding-right:40px;}
|
||||
.append-2 {padding-right:80px;}
|
||||
.append-3 {padding-right:120px;}
|
||||
.append-4 {padding-right:160px;}
|
||||
.append-5 {padding-right:200px;}
|
||||
.append-6 {padding-right:240px;}
|
||||
.append-7 {padding-right:280px;}
|
||||
.append-8 {padding-right:320px;}
|
||||
.append-9 {padding-right:360px;}
|
||||
.append-10 {padding-right:400px;}
|
||||
.append-11 {padding-right:440px;}
|
||||
.append-12 {padding-right:480px;}
|
||||
.append-13 {padding-right:520px;}
|
||||
.append-14 {padding-right:560px;}
|
||||
.append-15 {padding-right:600px;}
|
||||
.append-16 {padding-right:640px;}
|
||||
.append-17 {padding-right:680px;}
|
||||
.append-18 {padding-right:720px;}
|
||||
.append-19 {padding-right:760px;}
|
||||
.append-20 {padding-right:800px;}
|
||||
.append-21 {padding-right:840px;}
|
||||
.append-22 {padding-right:880px;}
|
||||
.append-23 {padding-right:920px;}
|
||||
.prepend-1 {padding-left:40px;}
|
||||
.prepend-2 {padding-left:80px;}
|
||||
.prepend-3 {padding-left:120px;}
|
||||
.prepend-4 {padding-left:160px;}
|
||||
.prepend-5 {padding-left:200px;}
|
||||
.prepend-6 {padding-left:240px;}
|
||||
.prepend-7 {padding-left:280px;}
|
||||
.prepend-8 {padding-left:320px;}
|
||||
.prepend-9 {padding-left:360px;}
|
||||
.prepend-10 {padding-left:400px;}
|
||||
.prepend-11 {padding-left:440px;}
|
||||
.prepend-12 {padding-left:480px;}
|
||||
.prepend-13 {padding-left:520px;}
|
||||
.prepend-14 {padding-left:560px;}
|
||||
.prepend-15 {padding-left:600px;}
|
||||
.prepend-16 {padding-left:640px;}
|
||||
.prepend-17 {padding-left:680px;}
|
||||
.prepend-18 {padding-left:720px;}
|
||||
.prepend-19 {padding-left:760px;}
|
||||
.prepend-20 {padding-left:800px;}
|
||||
.prepend-21 {padding-left:840px;}
|
||||
.prepend-22 {padding-left:880px;}
|
||||
.prepend-23 {padding-left:920px;}
|
||||
.border {padding-right:4px;margin-right:5px;border-right:1px solid #ddd;}
|
||||
.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #ddd;}
|
||||
.pull-1 {margin-left:-40px;}
|
||||
.pull-2 {margin-left:-80px;}
|
||||
.pull-3 {margin-left:-120px;}
|
||||
.pull-4 {margin-left:-160px;}
|
||||
.pull-5 {margin-left:-200px;}
|
||||
.pull-6 {margin-left:-240px;}
|
||||
.pull-7 {margin-left:-280px;}
|
||||
.pull-8 {margin-left:-320px;}
|
||||
.pull-9 {margin-left:-360px;}
|
||||
.pull-10 {margin-left:-400px;}
|
||||
.pull-11 {margin-left:-440px;}
|
||||
.pull-12 {margin-left:-480px;}
|
||||
.pull-13 {margin-left:-520px;}
|
||||
.pull-14 {margin-left:-560px;}
|
||||
.pull-15 {margin-left:-600px;}
|
||||
.pull-16 {margin-left:-640px;}
|
||||
.pull-17 {margin-left:-680px;}
|
||||
.pull-18 {margin-left:-720px;}
|
||||
.pull-19 {margin-left:-760px;}
|
||||
.pull-20 {margin-left:-800px;}
|
||||
.pull-21 {margin-left:-840px;}
|
||||
.pull-22 {margin-left:-880px;}
|
||||
.pull-23 {margin-left:-920px;}
|
||||
.pull-24 {margin-left:-960px;}
|
||||
.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}
|
||||
.push-1 {margin:0 -40px 1.5em 40px;}
|
||||
.push-2 {margin:0 -80px 1.5em 80px;}
|
||||
.push-3 {margin:0 -120px 1.5em 120px;}
|
||||
.push-4 {margin:0 -160px 1.5em 160px;}
|
||||
.push-5 {margin:0 -200px 1.5em 200px;}
|
||||
.push-6 {margin:0 -240px 1.5em 240px;}
|
||||
.push-7 {margin:0 -280px 1.5em 280px;}
|
||||
.push-8 {margin:0 -320px 1.5em 320px;}
|
||||
.push-9 {margin:0 -360px 1.5em 360px;}
|
||||
.push-10 {margin:0 -400px 1.5em 400px;}
|
||||
.push-11 {margin:0 -440px 1.5em 440px;}
|
||||
.push-12 {margin:0 -480px 1.5em 480px;}
|
||||
.push-13 {margin:0 -520px 1.5em 520px;}
|
||||
.push-14 {margin:0 -560px 1.5em 560px;}
|
||||
.push-15 {margin:0 -600px 1.5em 600px;}
|
||||
.push-16 {margin:0 -640px 1.5em 640px;}
|
||||
.push-17 {margin:0 -680px 1.5em 680px;}
|
||||
.push-18 {margin:0 -720px 1.5em 720px;}
|
||||
.push-19 {margin:0 -760px 1.5em 760px;}
|
||||
.push-20 {margin:0 -800px 1.5em 800px;}
|
||||
.push-21 {margin:0 -840px 1.5em 840px;}
|
||||
.push-22 {margin:0 -880px 1.5em 880px;}
|
||||
.push-23 {margin:0 -920px 1.5em 920px;}
|
||||
.push-24 {margin:0 -960px 1.5em 960px;}
|
||||
.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:left;position:relative;}
|
||||
div.prepend-top, .prepend-top {margin-top:1.5em;}
|
||||
div.append-bottom, .append-bottom {margin-bottom:1.5em;}
|
||||
.box {padding:1.5em;margin-bottom:1.5em;background:#e5eCf9;}
|
||||
hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:0 0 1.45em;border:none;}
|
||||
hr.space {background:#fff;color:#fff;visibility:hidden;}
|
||||
.clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
|
||||
.clearfix, .container {display:block;}
|
||||
.clear {clear:both;}
|
@ -1,237 +0,0 @@
|
||||
body {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: white;
|
||||
|
||||
padding: 15px 40px 20px;
|
||||
width: 790px;
|
||||
|
||||
border: 1px solid #dfdfdf;
|
||||
border-top: 0;
|
||||
|
||||
box-shadow: 0 0 40px #e0e0e0;
|
||||
-moz-box-shadow: 0 0 40px #e0e0e0;
|
||||
-webkit-box-shadow: 0 0 40px #e0e0e0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
height: 0;
|
||||
padding-top: 65px;
|
||||
width: 187px;
|
||||
overflow: hidden;
|
||||
background: url(../images/logo.png) 0 0 no-repeat;
|
||||
margin-left: -10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
font-weight: bold;
|
||||
margin-top: 2.5em;
|
||||
padding: 4px 12px 3px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
background: #edeeef;
|
||||
border-right: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
color: white;
|
||||
|
||||
background-color: #b0de5c;
|
||||
background-image: -moz-linear-gradient(top, #b0de5c, #82cb00); /* FF3.6 */
|
||||
background-image: -o-linear-gradient(top, #b0de5c, #82cb00); /* Opera 11.10+ */
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#b0de5c), to(#82cb00)); /* Saf4+, Chrome */
|
||||
background-image: -webkit-linear-gradient(top, #b0de5c, #82cb00); /* Chrome 10+, Saf5.1+ */
|
||||
background-image: linear-gradient(top, #b0de5c, #82cb00);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#b0de5c', EndColorStr='#82cb00'); /* IE6–IE9 */
|
||||
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
|
||||
text-shadow: -1px -1px 0 #999;
|
||||
}
|
||||
h3 {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
h3.alt {
|
||||
margin-top: 0;
|
||||
}
|
||||
h4 {
|
||||
margin-bottom: 0.2em;
|
||||
line-height: inherit;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
h3.alt {
|
||||
color: #999;
|
||||
font-family: Georgia, serif;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "Courier New", monospace;
|
||||
}
|
||||
.container pre code {
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #ccc;
|
||||
background: white;
|
||||
color: #444;
|
||||
|
||||
box-shadow: 0 0 15px #ddd;
|
||||
-moz-box-shadow: 0 0 15px #ddd;
|
||||
-webkit-box-shadow: 0 0 15px #ddd;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th {
|
||||
background:/*#e5ecf9;*/ #f3f3f3;
|
||||
}
|
||||
th, td {
|
||||
padding: 4px 5px;
|
||||
}
|
||||
|
||||
|
||||
.nav {
|
||||
padding: 0;
|
||||
margin: 2em 0;
|
||||
|
||||
list-style: none;
|
||||
font-size: 1.2em;
|
||||
border: 1px solid #dcddde;
|
||||
overflow: hidden;
|
||||
|
||||
background-color: #ffffff;
|
||||
background-image: -moz-linear-gradient(top, #ffffff, #eff0f1); /* FF3.6 */
|
||||
background-image: -o-linear-gradient(top, #ffffff, #eff0f1); /* Opera 11.10+ */
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #eff0f1)); /* Saf4+, Chrome */
|
||||
background-image: -webkit-linear-gradient(#ffffff, #eff0f1); /* Chrome 10+, Saf5.1+ */
|
||||
background-image: linear-gradient(top, #ffffff, #eff0f1);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eff0f1'); /* IE6–IE9 */
|
||||
|
||||
border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
|
||||
box-shadow: 0 0 8px #eee;
|
||||
-moz-box-shadow: 0 0 8px #eee;
|
||||
-webkit-box-shadow: 0 0 8px #eee;
|
||||
}
|
||||
.nav li a, .nav li span {
|
||||
float: left;
|
||||
padding: 10px 15px;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.nav a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
.nav li span {
|
||||
color: #000;
|
||||
|
||||
background-color: #f8f9fa;
|
||||
background-image: -moz-linear-gradient(top, #f8f9fa, #d4d5d6);
|
||||
background-image: -o-linear-gradient(top, #f8f9fa, #d4d5d6);
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f9fa),color-stop(1, #d4d5d6));
|
||||
background-image: -webkit-linear-gradient(#f8f9fa, #d4d5d6);
|
||||
background-image: linear-gradient(top, #f8f9fa, #d4d5d6);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f9fa', EndColorStr='#d4d5d6');
|
||||
}
|
||||
.nav li a:hover {
|
||||
color: black;
|
||||
|
||||
background-color: #eff0f1;
|
||||
background-image: -moz-linear-gradient(top, #eff0f1, #f6f7f8);
|
||||
background-image: -o-linear-gradient(top, #eff0f1, #f6f7f8);
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eff0f1),color-stop(1, #f6f7f8));
|
||||
background-image: -webkit-linear-gradient(#eff0f1, #f6f7f8);
|
||||
background-image: linear-gradient(top, #eff0f1, #f6f7f8);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eff0f1', EndColorStr='#f6f7f8');
|
||||
}
|
||||
.nav li a.github-link,
|
||||
.nav li a.twitter-link {
|
||||
padding-left: 35px;
|
||||
font-weight: normal;
|
||||
float: right;
|
||||
border-right: none;
|
||||
border-left: 1px solid #ddd;
|
||||
filter: none;
|
||||
}
|
||||
/*.nav li a.cloudmade-link {
|
||||
padding: 4px 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.nav li a.cloudmade-link img {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}*/
|
||||
.nav li a.github-link {
|
||||
background: url(https://github.com/favicon.png) 15px 12px no-repeat;
|
||||
}
|
||||
.nav li a.twitter-link {
|
||||
background: url(http://twitter.com/phoenix/favicon.ico) 15px 12px no-repeat;
|
||||
}
|
||||
|
||||
#forkme {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: 0;
|
||||
opacity: 0.4;
|
||||
}
|
||||
a:hover #forkme {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#toc {
|
||||
padding-left: 20px;
|
||||
}
|
||||
#toc ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
#toc .colborder {
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
#map-class {
|
||||
margin-top: 1em;
|
||||
}
|
||||
a.nodocs {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
#features {
|
||||
margin-top: -1.5em;
|
||||
}
|
||||
#features .quiet {
|
||||
color: #777;
|
||||
}
|
||||
.noimpl {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 300px;
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 20px;
|
||||
|
||||
/*box-shadow: 0px 0px 10px #ccc;
|
||||
-moz-box-shadow: 0px 0px 10px #ccc;
|
||||
-webkit-box-shadow: 0px 0px 10px #ccc;*/
|
||||
}
|
||||
|
||||
h3 span {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.example-img {
|
||||
float: left;
|
||||
margin: 0 18px 18px 0;
|
||||
}
|
File diff suppressed because one or more lines are too long
@ -1,44 +0,0 @@
|
||||
/*
|
||||
|
||||
Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
|
||||
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
background: white; color: black;
|
||||
}
|
||||
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .filter .argument,
|
||||
pre .addition,
|
||||
pre .change,
|
||||
pre .apache .tag,
|
||||
pre .apache .cbracket,
|
||||
pre .nginx .built_in,
|
||||
pre .tex .formula {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .shebang,
|
||||
pre .doctype,
|
||||
pre .pi,
|
||||
pre .javadoc,
|
||||
pre .deletion,
|
||||
pre .apache .sqbracket {
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .tag .title,
|
||||
pre .ini .title,
|
||||
pre .winutils,
|
||||
pre .flow,
|
||||
pre .lisp .title,
|
||||
pre .apache .tag,
|
||||
pre .tex .command {
|
||||
font-weight: bold;
|
||||
}
|
@ -1,103 +0,0 @@
|
||||
/*
|
||||
|
||||
Brown Paper style from goldblog.com.ua (c) Zaripov Yura <yur4ik7@ukr.net>
|
||||
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
background:#b7a68e url(./brown_papersq.png);
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .literal,
|
||||
pre .change,
|
||||
pre .winutils,
|
||||
pre .flow,
|
||||
pre .lisp .title,
|
||||
pre .tex .special {
|
||||
color:#005599;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
pre code,
|
||||
pre .ruby .subst,
|
||||
pre .tag .keyword {
|
||||
color: #363C69;
|
||||
}
|
||||
|
||||
pre .string,
|
||||
pre .function .title,
|
||||
pre .class .title,
|
||||
pre .ini .title,
|
||||
pre .tag .value,
|
||||
pre .css .rules .value,
|
||||
pre .preprocessor,
|
||||
pre .ruby .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .ruby .symbol .keyword,
|
||||
pre .ruby .symbol .keymethods,
|
||||
pre .ruby .instancevar,
|
||||
pre .ruby .class .parent,
|
||||
pre .built_in,
|
||||
pre .sql .aggregate,
|
||||
pre .django .template_tag,
|
||||
pre .django .variable,
|
||||
pre .smalltalk .class,
|
||||
pre .javadoc,
|
||||
pre .ruby .string,
|
||||
pre .django .filter .argument,
|
||||
pre .smalltalk .localvars,
|
||||
pre .smalltalk .array,
|
||||
pre .attr_selector,
|
||||
pre .pseudo,
|
||||
pre .addition,
|
||||
pre .stream,
|
||||
pre .envvar,
|
||||
pre .apache .tag,
|
||||
pre .apache .cbracket,
|
||||
pre .tex .number {
|
||||
color: #2C009F;
|
||||
}
|
||||
|
||||
pre .comment,
|
||||
pre .java .annotation,
|
||||
pre .python .decorator,
|
||||
pre .template_comment,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .deletion,
|
||||
pre .shebang,
|
||||
pre .apache .sqbracket,
|
||||
pre .nginx .built_in,
|
||||
pre .tex .formula {
|
||||
color: #802022;
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .literal,
|
||||
pre .css .id,
|
||||
pre .phpdoc,
|
||||
pre .function .title,
|
||||
pre .class .title,
|
||||
pre .vbscript .built_in,
|
||||
pre .sql .aggregate,
|
||||
pre .rsl .built_in,
|
||||
pre .smalltalk .class,
|
||||
pre .xml .tag .title,
|
||||
pre .diff .header,
|
||||
pre .chunk,
|
||||
pre .winutils,
|
||||
pre .bash .variable,
|
||||
pre .lisp .title,
|
||||
pre .apache .tag,
|
||||
pre .tex .command {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
pre .html .css,
|
||||
pre .html .javascript,
|
||||
pre .html .vbscript,
|
||||
pre .tex .formula {
|
||||
opacity: 0.8;
|
||||
}
|
Binary file not shown.
Before Width: | Height: | Size: 18 KiB |
@ -1,100 +0,0 @@
|
||||
/*
|
||||
|
||||
Dark style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
|
||||
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
background: #444;
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .literal,
|
||||
pre .change,
|
||||
pre .winutils,
|
||||
pre .flow,
|
||||
pre .lisp .title,
|
||||
pre .tex .special {
|
||||
color: white;
|
||||
}
|
||||
|
||||
pre code,
|
||||
pre .ruby .subst {
|
||||
color: #DDD;
|
||||
}
|
||||
|
||||
pre .string,
|
||||
pre .function .title,
|
||||
pre .class .title,
|
||||
pre .ini .title,
|
||||
pre .tag .value,
|
||||
pre .css .rules .value,
|
||||
pre .preprocessor,
|
||||
pre .ruby .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .ruby .symbol .keyword,
|
||||
pre .ruby .symbol .keymethods,
|
||||
pre .ruby .instancevar,
|
||||
pre .ruby .class .parent,
|
||||
pre .built_in,
|
||||
pre .sql .aggregate,
|
||||
pre .django .template_tag,
|
||||
pre .django .variable,
|
||||
pre .smalltalk .class,
|
||||
pre .javadoc,
|
||||
pre .ruby .string,
|
||||
pre .django .filter .argument,
|
||||
pre .smalltalk .localvars,
|
||||
pre .smalltalk .array,
|
||||
pre .attr_selector,
|
||||
pre .pseudo,
|
||||
pre .addition,
|
||||
pre .stream,
|
||||
pre .envvar,
|
||||
pre .apache .tag,
|
||||
pre .apache .cbracket,
|
||||
pre .tex .command {
|
||||
color: #D88;
|
||||
}
|
||||
|
||||
pre .comment,
|
||||
pre .java .annotation,
|
||||
pre .python .decorator,
|
||||
pre .template_comment,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .deletion,
|
||||
pre .shebang,
|
||||
pre .apache .sqbracket,
|
||||
pre .tex .formula {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .literal,
|
||||
pre .css .id,
|
||||
pre .phpdoc,
|
||||
pre .function .title,
|
||||
pre .class .title,
|
||||
pre .vbscript .built_in,
|
||||
pre .sql .aggregate,
|
||||
pre .rsl .built_in,
|
||||
pre .smalltalk .class,
|
||||
pre .xml .tag .title,
|
||||
pre .diff .header,
|
||||
pre .chunk,
|
||||
pre .winutils,
|
||||
pre .bash .variable,
|
||||
pre .lisp .title,
|
||||
pre .apache .tag,
|
||||
pre .tex .special {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
pre .html .css,
|
||||
pre .html .javascript,
|
||||
pre .html .vbscript,
|
||||
pre .tex .formula {
|
||||
opacity: 0.5;
|
||||
}
|
@ -1,115 +0,0 @@
|
||||
/*
|
||||
|
||||
Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
|
||||
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
background: #F0F0F0;
|
||||
}
|
||||
|
||||
pre code,
|
||||
pre .ruby .subst,
|
||||
pre .tag .title,
|
||||
pre .lisp .title {
|
||||
color: black;
|
||||
}
|
||||
|
||||
pre .string,
|
||||
pre .title,
|
||||
pre .constant,
|
||||
pre .parent,
|
||||
pre .tag .value,
|
||||
pre .rules .value,
|
||||
pre .rules .value .number,
|
||||
pre .preprocessor,
|
||||
pre .ruby .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .ruby .symbol .keyword,
|
||||
pre .ruby .symbol .keymethods,
|
||||
pre .instancevar,
|
||||
pre .aggregate,
|
||||
pre .template_tag,
|
||||
pre .django .variable,
|
||||
pre .smalltalk .class,
|
||||
pre .addition,
|
||||
pre .flow,
|
||||
pre .stream,
|
||||
pre .bash .variable,
|
||||
pre .apache .tag,
|
||||
pre .apache .cbracket,
|
||||
pre .tex .command,
|
||||
pre .tex .special {
|
||||
color: #800;
|
||||
}
|
||||
|
||||
pre .comment,
|
||||
pre .annotation,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .chunk {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
pre .number,
|
||||
pre .date,
|
||||
pre .regexp,
|
||||
pre .literal,
|
||||
pre .smalltalk .symbol,
|
||||
pre .smalltalk .char,
|
||||
pre .change {
|
||||
color: #080;
|
||||
}
|
||||
|
||||
pre .label,
|
||||
pre .javadoc,
|
||||
pre .ruby .string,
|
||||
pre .decorator,
|
||||
pre .filter .argument,
|
||||
pre .localvars,
|
||||
pre .array,
|
||||
pre .attr_selector,
|
||||
pre .important,
|
||||
pre .pseudo,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .deletion,
|
||||
pre .envvar,
|
||||
pre .shebang,
|
||||
pre .apache .sqbracket,
|
||||
pre .nginx .built_in,
|
||||
pre .tex .formula {
|
||||
color: #88F;
|
||||
}
|
||||
|
||||
pre .javadoctag,
|
||||
pre .phpdoc,
|
||||
pre .yardoctag {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .id,
|
||||
pre .phpdoc,
|
||||
pre .title,
|
||||
pre .built_in,
|
||||
pre .aggregate,
|
||||
pre .smalltalk .class,
|
||||
pre .winutils,
|
||||
pre .bash .variable,
|
||||
pre .apache .tag,
|
||||
pre .tex .command {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
pre .nginx .built_in {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
pre .html .css,
|
||||
pre .html .javascript,
|
||||
pre .html .vbscript,
|
||||
pre .tex .formula {
|
||||
opacity: 0.5;
|
||||
}
|
@ -1,114 +0,0 @@
|
||||
/*
|
||||
|
||||
FAR Style (c) MajestiC <majestic2k@gmail.com>
|
||||
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
background: #000080;
|
||||
}
|
||||
|
||||
pre code,
|
||||
.ruby .subst {
|
||||
color: #0FF;
|
||||
}
|
||||
|
||||
pre .string,
|
||||
pre .ruby .string,
|
||||
pre .function .title,
|
||||
pre .class .title,
|
||||
pre .ini .title,
|
||||
pre .tag .value,
|
||||
pre .css .rules .value,
|
||||
pre .css .rules .value .number,
|
||||
pre .preprocessor,
|
||||
pre .ruby .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .ruby .symbol .keyword,
|
||||
pre .ruby .symbol .keymethods,
|
||||
pre .built_in,
|
||||
pre .sql .aggregate,
|
||||
pre .django .template_tag,
|
||||
pre .django .variable,
|
||||
pre .smalltalk .class,
|
||||
pre .addition,
|
||||
pre .apache .tag,
|
||||
pre .apache .cbracket,
|
||||
pre .tex .command {
|
||||
color: #FF0;
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .css .id,
|
||||
pre .function .title,
|
||||
pre .class .title,
|
||||
pre .ini .title,
|
||||
pre .vbscript .built_in,
|
||||
pre .sql .aggregate,
|
||||
pre .rsl .built_in,
|
||||
pre .smalltalk .class,
|
||||
pre .xml .tag .title,
|
||||
pre .winutils,
|
||||
pre .flow,
|
||||
pre .lisp .title,
|
||||
pre .change,
|
||||
pre .envvar,
|
||||
pre .bash .variable,
|
||||
pre .tex .special {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
pre .comment,
|
||||
pre .phpdoc,
|
||||
pre .javadoc,
|
||||
pre .java .annotation,
|
||||
pre .template_comment,
|
||||
pre .deletion,
|
||||
pre .apache .sqbracket,
|
||||
pre .tex .formula {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
pre .number,
|
||||
pre .date,
|
||||
pre .regexp,
|
||||
pre .literal,
|
||||
pre .smalltalk .symbol,
|
||||
pre .smalltalk .char {
|
||||
color: #0F0;
|
||||
}
|
||||
|
||||
pre .python .decorator,
|
||||
pre .django .filter .argument,
|
||||
pre .smalltalk .localvars,
|
||||
pre .smalltalk .array,
|
||||
pre .attr_selector,
|
||||
pre .pseudo,
|
||||
pre .xml .pi,
|
||||
pre .diff .header,
|
||||
pre .chunk,
|
||||
pre .shebang,
|
||||
pre .nginx .built_in {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .css .id,
|
||||
pre .function .title,
|
||||
pre .class .title,
|
||||
pre .ini .title,
|
||||
pre .vbscript .built_in,
|
||||
pre .sql .aggregate,
|
||||
pre .rsl .built_in,
|
||||
pre .smalltalk .class,
|
||||
pre .xml .tag .title,
|
||||
pre .winutils,
|
||||
pre .flow,
|
||||
pre .lisp .title,
|
||||
pre .apache .tag,
|
||||
pre .nginx .built_in,
|
||||
pre .tex .command,
|
||||
pre .tex .special {
|
||||
font-weight: bold;
|
||||
}
|
@ -1,128 +0,0 @@
|
||||
/*
|
||||
|
||||
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #000;
|
||||
background: #f8f8ff
|
||||
}
|
||||
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #998;
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .subst {
|
||||
color: #000;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
pre .number,
|
||||
pre .hexcolor {
|
||||
color: #40a070
|
||||
}
|
||||
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #d14
|
||||
}
|
||||
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #900;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
|
||||
pre .class .title,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
pre .tag,
|
||||
pre .css .keyword,
|
||||
pre .html .keyword,
|
||||
pre .tag .title,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .instancevar,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
|
||||
pre .regexp {
|
||||
color: #009926
|
||||
}
|
||||
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .ruby .symbol .keyword,
|
||||
pre .ruby .symbol .keymethods,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special {
|
||||
color: #990073
|
||||
}
|
||||
|
||||
pre .builtin,
|
||||
pre .built_in,
|
||||
pre .lisp .title {
|
||||
color: #0086b3
|
||||
}
|
||||
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
|
||||
pre .tex .formula {
|
||||
opacity: 0.5;
|
||||
}
|
@ -1,117 +0,0 @@
|
||||
/*
|
||||
|
||||
Intellij Idea-like styling (c) Vasily Polovnyov <vast@whiteants.net>
|
||||
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
pre .subst,
|
||||
pre .title {
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .javadoc,
|
||||
pre .diff .header {
|
||||
color: #808080;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
pre .annotation,
|
||||
pre .decorator,
|
||||
pre .preprocessor,
|
||||
pre .doctype,
|
||||
pre .pi,
|
||||
pre .chunk,
|
||||
pre .shebang,
|
||||
pre .apache .cbracket {
|
||||
color: #808000;
|
||||
}
|
||||
|
||||
pre .tag,
|
||||
pre .pi {
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
pre .tag .title,
|
||||
pre .id,
|
||||
pre .attr_selector,
|
||||
pre .pseudo,
|
||||
pre .literal,
|
||||
pre .keyword,
|
||||
pre .hexcolor,
|
||||
pre .css .function,
|
||||
pre .ini .title,
|
||||
pre .css .class,
|
||||
pre .list .title,
|
||||
pre .tex .command {
|
||||
font-weight: bold;
|
||||
color: #000080;
|
||||
}
|
||||
|
||||
pre .attribute,
|
||||
pre .rules .keyword,
|
||||
pre .number,
|
||||
pre .date,
|
||||
pre .regexp,
|
||||
pre .tex .special {
|
||||
font-weight: bold;
|
||||
color: #0000ff;
|
||||
}
|
||||
|
||||
pre .number,
|
||||
pre .regexp {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
pre .string,
|
||||
pre .value,
|
||||
pre .filter .argument,
|
||||
pre .css .function .params,
|
||||
pre .apache .tag {
|
||||
color: #008000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .ruby .symbol .keyword,
|
||||
pre .ruby .symbol .keymethods,
|
||||
pre .char,
|
||||
pre .tex .formula {
|
||||
color: #000;
|
||||
background: #d0eded;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
pre .phpdoc,
|
||||
pre .yardoctag,
|
||||
pre .javadoctag {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre .variable,
|
||||
pre .envvar,
|
||||
pre .apache .sqbracket,
|
||||
pre .nginx .built_in {
|
||||
color: #660e7a;
|
||||
}
|
||||
|
||||
pre .addition {
|
||||
background: #baeeba;
|
||||
}
|
||||
|
||||
pre .deletion {
|
||||
background: #ffc8bd;
|
||||
}
|
||||
|
||||
pre .diff .change {
|
||||
background: #bccff9;
|
||||
}
|
@ -1,102 +0,0 @@
|
||||
/*
|
||||
IR_Black style (c) Vasily Mikhailitchenko <vaskas@programica.ru>
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
background: #000; color: #f8f8f8;
|
||||
}
|
||||
|
||||
pre .shebang,
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .javadoc {
|
||||
color: #7c7c7c;
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .tag,
|
||||
pre .ruby .function .keyword,
|
||||
pre .tex .command {
|
||||
color: #96CBFE;
|
||||
}
|
||||
|
||||
pre .function .keyword,
|
||||
pre .sub .keyword,
|
||||
pre .method,
|
||||
pre .list .title {
|
||||
color: #FFFFB6;
|
||||
}
|
||||
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .cdata,
|
||||
pre .filter .argument,
|
||||
pre .attr_selector,
|
||||
pre .apache .cbracket,
|
||||
pre .date {
|
||||
color: #A8FF60;
|
||||
}
|
||||
|
||||
pre .subst {
|
||||
color: #DAEFA3;
|
||||
}
|
||||
|
||||
pre .regexp {
|
||||
color: #E9C062;
|
||||
}
|
||||
|
||||
pre .function .title,
|
||||
pre .sub .identifier,
|
||||
pre .pi,
|
||||
pre .decorator,
|
||||
pre .ini .title,
|
||||
pre .tex .special {
|
||||
color: #FFFFB6;
|
||||
}
|
||||
|
||||
pre .class .title,
|
||||
pre .constant,
|
||||
pre .smalltalk .class,
|
||||
pre .javadoctag,
|
||||
pre .yardoctag,
|
||||
pre .phpdoc,
|
||||
pre .nginx .built_in {
|
||||
color: #FFFFB6;
|
||||
}
|
||||
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .ruby .symbol .keyword,
|
||||
pre .ruby .symbol .keymethods,
|
||||
pre .number,
|
||||
pre .variable,
|
||||
pre .vbscript,
|
||||
pre .literal {
|
||||
color: #C6C5FE;
|
||||
}
|
||||
|
||||
pre .css .keyword {
|
||||
color: #96CBFE;
|
||||
}
|
||||
|
||||
pre .css .rule .keyword,
|
||||
pre .css .id {
|
||||
color: #FFFFB6;
|
||||
}
|
||||
|
||||
pre .css .class {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
pre .hexcolor {
|
||||
color: #C6C5FE;
|
||||
}
|
||||
|
||||
pre .number {
|
||||
color:#FF73FD;
|
||||
}
|
||||
|
||||
pre .tex .formula {
|
||||
opacity: 0.7;
|
||||
}
|
@ -1,117 +0,0 @@
|
||||
/*
|
||||
Description: Magula style for highligh.js
|
||||
Author: Ruslan Keba <rukeba@gmail.com>
|
||||
Website: http://rukeba.com/
|
||||
Version: 1.0
|
||||
Date: 2009-01-03
|
||||
Music: Aphex Twin / Xtal
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
pre code,
|
||||
pre .ruby .subst,
|
||||
pre .lisp .title {
|
||||
color: black;
|
||||
}
|
||||
|
||||
pre .string,
|
||||
pre .title,
|
||||
pre .parent,
|
||||
pre .tag .value,
|
||||
pre .rules .value,
|
||||
pre .rules .value .number,
|
||||
pre .preprocessor,
|
||||
pre .ruby .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .ruby .symbol .keyword,
|
||||
pre .ruby .symbol .keymethods,
|
||||
pre .instancevar,
|
||||
pre .aggregate,
|
||||
pre .template_tag,
|
||||
pre .django .variable,
|
||||
pre .smalltalk .class,
|
||||
pre .addition,
|
||||
pre .flow,
|
||||
pre .stream,
|
||||
pre .bash .variable,
|
||||
pre .apache .cbracket {
|
||||
color: #050;
|
||||
}
|
||||
|
||||
pre .comment,
|
||||
pre .annotation,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .chunk {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
pre .number,
|
||||
pre .date,
|
||||
pre .regexp,
|
||||
pre .literal,
|
||||
pre .smalltalk .symbol,
|
||||
pre .smalltalk .char,
|
||||
pre .change,
|
||||
pre .tex .special {
|
||||
color: #800;
|
||||
}
|
||||
|
||||
pre .label,
|
||||
pre .javadoc,
|
||||
pre .ruby .string,
|
||||
pre .decorator,
|
||||
pre .filter .argument,
|
||||
pre .localvars,
|
||||
pre .array,
|
||||
pre .attr_selector,
|
||||
pre .pseudo,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .deletion,
|
||||
pre .envvar,
|
||||
pre .shebang,
|
||||
pre .apache .sqbracket,
|
||||
pre .nginx .built_in,
|
||||
pre .tex .formula {
|
||||
color: #00e;
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .id,
|
||||
pre .phpdoc,
|
||||
pre .title,
|
||||
pre .built_in,
|
||||
pre .aggregate,
|
||||
pre .smalltalk .class,
|
||||
pre .winutils,
|
||||
pre .bash .variable,
|
||||
pre .apache .tag,
|
||||
pre .xml .tag,
|
||||
pre .xml .title,
|
||||
pre .tex .command {
|
||||
font-weight: bold;
|
||||
color: navy;
|
||||
}
|
||||
|
||||
pre .nginx .built_in {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
pre .html .css,
|
||||
pre .html .javascript,
|
||||
pre .html .vbscript,
|
||||
pre .tex .formula {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* --- */
|
||||
pre .apache .tag {
|
||||
font-weight: bold;
|
||||
color: blue;
|
||||
}
|
||||
|
@ -1,109 +0,0 @@
|
||||
/*
|
||||
|
||||
School Book style from goldblog.com.ua (c) Zaripov Yura <yur4ik7@ukr.net>
|
||||
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block; padding: 15px 0.5em 0.5em 30px;
|
||||
font-size: 11px !important;
|
||||
line-height:16px !important;
|
||||
}
|
||||
|
||||
pre{
|
||||
background:#f6f6ae url(./school_book.png);
|
||||
border-top: solid 2px #d2e8b9;
|
||||
border-bottom: solid 1px #d2e8b9;
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .literal,
|
||||
pre .change,
|
||||
pre .winutils,
|
||||
pre .flow,
|
||||
pre .lisp .title,
|
||||
pre .tex .special {
|
||||
color:#005599;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
pre code,
|
||||
pre .ruby .subst,
|
||||
pre .tag .keyword {
|
||||
color: #3E5915;
|
||||
}
|
||||
|
||||
pre .string,
|
||||
pre .function .title,
|
||||
pre .class .title,
|
||||
pre .ini .title,
|
||||
pre .tag .value,
|
||||
pre .css .rules .value,
|
||||
pre .preprocessor,
|
||||
pre .ruby .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .ruby .symbol .keyword,
|
||||
pre .ruby .symbol .keymethods,
|
||||
pre .ruby .instancevar,
|
||||
pre .ruby .class .parent,
|
||||
pre .built_in,
|
||||
pre .sql .aggregate,
|
||||
pre .django .template_tag,
|
||||
pre .django .variable,
|
||||
pre .smalltalk .class,
|
||||
pre .javadoc,
|
||||
pre .ruby .string,
|
||||
pre .django .filter .argument,
|
||||
pre .smalltalk .localvars,
|
||||
pre .smalltalk .array,
|
||||
pre .attr_selector,
|
||||
pre .pseudo,
|
||||
pre .addition,
|
||||
pre .stream,
|
||||
pre .envvar,
|
||||
pre .apache .tag,
|
||||
pre .apache .cbracket,
|
||||
pre .nginx .built_in,
|
||||
pre .tex .command {
|
||||
color: #2C009F;
|
||||
}
|
||||
|
||||
pre .comment,
|
||||
pre .java .annotation,
|
||||
pre .python .decorator,
|
||||
pre .template_comment,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .deletion,
|
||||
pre .shebang,
|
||||
pre .apache .sqbracket {
|
||||
color: #E60415;
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .literal,
|
||||
pre .css .id,
|
||||
pre .phpdoc,
|
||||
pre .function .title,
|
||||
pre .class .title,
|
||||
pre .vbscript .built_in,
|
||||
pre .sql .aggregate,
|
||||
pre .rsl .built_in,
|
||||
pre .smalltalk .class,
|
||||
pre .xml .tag .title,
|
||||
pre .diff .header,
|
||||
pre .chunk,
|
||||
pre .winutils,
|
||||
pre .bash .variable,
|
||||
pre .lisp .title,
|
||||
pre .apache .tag,
|
||||
pre .tex .command {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
pre .html .css,
|
||||
pre .html .javascript,
|
||||
pre .html .vbscript,
|
||||
pre .tex .formula {
|
||||
opacity: 0.5;
|
||||
}
|
Binary file not shown.
Before Width: | Height: | Size: 486 B |
@ -1,145 +0,0 @@
|
||||
/*
|
||||
|
||||
Sunburst-like style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
font: 1em / 1.3em 'Lucida Console', 'courier new', monospace;
|
||||
background: #000; color: #f8f8f8;
|
||||
}
|
||||
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .javadoc {
|
||||
color: #aeaeae;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .ruby .function .keyword {
|
||||
color: #E28964;
|
||||
}
|
||||
|
||||
pre .function .keyword,
|
||||
pre .sub .keyword,
|
||||
pre .method,
|
||||
pre .list .title {
|
||||
color: #99CF50;
|
||||
}
|
||||
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .cdata,
|
||||
pre .filter .argument,
|
||||
pre .attr_selector,
|
||||
pre .apache .cbracket,
|
||||
pre .date,
|
||||
pre .tex .command {
|
||||
color: #65B042;
|
||||
}
|
||||
|
||||
pre .subst {
|
||||
color: #DAEFA3;
|
||||
}
|
||||
|
||||
pre .regexp {
|
||||
color: #E9C062;
|
||||
}
|
||||
|
||||
pre .function .title,
|
||||
pre .sub .identifier,
|
||||
pre .pi,
|
||||
pre .tag,
|
||||
pre .tag .keyword,
|
||||
pre .decorator,
|
||||
pre .ini .title,
|
||||
pre .shebang {
|
||||
color: #89BDFF;
|
||||
}
|
||||
|
||||
pre .class .title,
|
||||
pre .smalltalk .class,
|
||||
pre .javadoctag,
|
||||
pre .yardoctag,
|
||||
pre .phpdoc {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .ruby .symbol .keyword,
|
||||
pre .ruby .symbol .keymethods,
|
||||
pre .number {
|
||||
color: #3387CC;
|
||||
}
|
||||
|
||||
pre .params,
|
||||
pre .variable {
|
||||
color: #3E87E3;
|
||||
}
|
||||
|
||||
pre .css .keyword,
|
||||
pre .pseudo,
|
||||
pre .tex .special {
|
||||
color: #CDA869;
|
||||
}
|
||||
|
||||
pre .css .class {
|
||||
color: #9B703F;
|
||||
}
|
||||
|
||||
pre .rules .keyword {
|
||||
color: #C5AF75;
|
||||
}
|
||||
|
||||
pre .rules .value {
|
||||
color: #CF6A4C;
|
||||
}
|
||||
|
||||
pre .css .id {
|
||||
color: #8B98AB;
|
||||
}
|
||||
|
||||
pre .annotation,
|
||||
pre .apache .sqbracket,
|
||||
pre .nginx .built_in {
|
||||
color: #9B859D;
|
||||
}
|
||||
|
||||
pre .preprocessor {
|
||||
color: #8996A8;
|
||||
}
|
||||
|
||||
pre .hexcolor,
|
||||
pre .css .value .number {
|
||||
color: #DD7B3B;
|
||||
}
|
||||
|
||||
pre .css .function {
|
||||
color: #DAD085;
|
||||
}
|
||||
|
||||
pre .diff .header,
|
||||
pre .chunk,
|
||||
pre .tex .formula {
|
||||
background-color: #0E2231;
|
||||
color: #F8F8F8;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
pre .diff .change {
|
||||
background-color: #4A410D;
|
||||
color: #F8F8F8;
|
||||
}
|
||||
|
||||
pre .addition {
|
||||
background-color: #253B22;
|
||||
color: #F8F8F8;
|
||||
}
|
||||
|
||||
pre .deletion {
|
||||
background-color: #420E09;
|
||||
color: #F8F8F8;
|
||||
}
|
@ -1,79 +0,0 @@
|
||||
/*
|
||||
|
||||
Visual Studio-like style based on original C# coloring by Jason Diamond <jason@diamond.name>
|
||||
|
||||
*/
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
}
|
||||
|
||||
pre .comment,
|
||||
pre .annotation,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .chunk,
|
||||
pre .apache .cbracket {
|
||||
color: rgb(0, 128, 0);
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .id,
|
||||
pre .title,
|
||||
pre .built_in,
|
||||
pre .aggregate,
|
||||
pre .smalltalk .class,
|
||||
pre .winutils,
|
||||
pre .bash .variable,
|
||||
pre .tex .command {
|
||||
color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
pre .string,
|
||||
pre .title,
|
||||
pre .parent,
|
||||
pre .tag .value,
|
||||
pre .rules .value,
|
||||
pre .rules .value .number,
|
||||
pre .ruby .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .ruby .symbol .keyword,
|
||||
pre .ruby .symbol .keymethods,
|
||||
pre .instancevar,
|
||||
pre .aggregate,
|
||||
pre .template_tag,
|
||||
pre .django .variable,
|
||||
pre .addition,
|
||||
pre .flow,
|
||||
pre .stream,
|
||||
pre .apache .tag,
|
||||
pre .date,
|
||||
pre .tex .formula {
|
||||
color: rgb(163, 21, 21);
|
||||
}
|
||||
|
||||
pre .ruby .string,
|
||||
pre .decorator,
|
||||
pre .filter .argument,
|
||||
pre .localvars,
|
||||
pre .array,
|
||||
pre .attr_selector,
|
||||
pre .pseudo,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .deletion,
|
||||
pre .envvar,
|
||||
pre .shebang,
|
||||
pre .preprocessor,
|
||||
pre .userType,
|
||||
pre .apache .sqbracket,
|
||||
pre .nginx .built_in,
|
||||
pre .tex .special {
|
||||
color: rgb(43, 145, 175);
|
||||
}
|
||||
|
||||
pre .phpdoc,
|
||||
pre .javadoc,
|
||||
pre .xmlDocTag {
|
||||
color: rgb(128, 128, 128);
|
||||
}
|
||||
|
@ -1,112 +0,0 @@
|
||||
/*
|
||||
|
||||
Zenburn style from voldmar.ru (c) Vladimir Epifanov <voldmar@voldmar.ru>
|
||||
based on dark.css by Ivan Sagalaev
|
||||
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
background: #3F3F3F;
|
||||
color: #DCDCDC;
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .tag,
|
||||
pre .django .tag,
|
||||
pre .django .keyword,
|
||||
pre .css .class,
|
||||
pre .css .id,
|
||||
pre .lisp .title {
|
||||
color: #E3CEAB;
|
||||
}
|
||||
|
||||
pre .django .template_tag,
|
||||
pre .django .variable,
|
||||
pre .django .filter .argument {
|
||||
color: #DCDCDC;
|
||||
}
|
||||
|
||||
pre .number,
|
||||
pre .date {
|
||||
color: #8CD0D3;
|
||||
}
|
||||
|
||||
pre .dos .envvar,
|
||||
pre .dos .stream,
|
||||
pre .variable,
|
||||
pre .apache .sqbracket {
|
||||
color: #EFDCBC;
|
||||
}
|
||||
|
||||
pre .dos .flow,
|
||||
pre .diff .change,
|
||||
pre .python .exception,
|
||||
pre .python .built_in,
|
||||
pre .literal,
|
||||
pre .tex .special {
|
||||
color: #EFEFAF;
|
||||
}
|
||||
|
||||
pre .diff .chunk,
|
||||
pre .ruby .subst {
|
||||
color: #8F8F8F;
|
||||
}
|
||||
|
||||
pre .dos .keyword,
|
||||
pre .python .decorator,
|
||||
pre .class .title,
|
||||
pre .function .title,
|
||||
pre .ini .title,
|
||||
pre .diff .header,
|
||||
pre .ruby .class .parent,
|
||||
pre .apache .tag,
|
||||
pre .nginx .built_in,
|
||||
pre .tex .command {
|
||||
color: #efef8f;
|
||||
}
|
||||
|
||||
pre .dos .winutils,
|
||||
pre .ruby .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .ruby .symbol .keyword,
|
||||
pre .ruby .symbol .keymethods,
|
||||
pre .ruby .string,
|
||||
pre .ruby .instancevar {
|
||||
color: #DCA3A3;
|
||||
}
|
||||
|
||||
pre .diff .deletion,
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .preprocessor,
|
||||
pre .built_in,
|
||||
pre .sql .aggregate,
|
||||
pre .javadoc,
|
||||
pre .smalltalk .class,
|
||||
pre .smalltalk .localvars,
|
||||
pre .smalltalk .array,
|
||||
pre .css .rules .value,
|
||||
pre .attr_selector,
|
||||
pre .pseudo,
|
||||
pre .apache .cbracket,
|
||||
pre .tex .formula {
|
||||
color: #CC9393;
|
||||
}
|
||||
|
||||
pre .shebang,
|
||||
pre .diff .addition,
|
||||
pre .comment,
|
||||
pre .java .annotation,
|
||||
pre .template_comment,
|
||||
pre .pi,
|
||||
pre .doctype {
|
||||
color: #7F9F7F;
|
||||
}
|
||||
|
||||
pre .html .css,
|
||||
pre .html .javascript,
|
||||
pre .tex .formula {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
Binary file not shown.
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
Before Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
Before Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
Before Width: | Height: | Size: 7.7 KiB |
@ -1,77 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Download</title>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
|
||||
<meta property="og:description" content="Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API." />
|
||||
|
||||
<link rel="icon" type="image/png" href="docs/images/favicon.png" />
|
||||
|
||||
<!-- Blueprint -->
|
||||
<link rel="stylesheet" href="docs/css/blueprint/screen.css" media="screen, projection">
|
||||
<link rel="stylesheet" href="docs/css/blueprint/print.css" media="print">
|
||||
<!--[if lt IE 8]><link rel="stylesheet" href="docs/css/blueprint/ie.css" media="screen, projection"><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="docs/css/screen.css" media="screen, projection" />
|
||||
|
||||
<script src="docs/highlight/highlight.pack.js"></script>
|
||||
<link rel="stylesheet" href="docs/highlight/styles/github.css" />
|
||||
|
||||
<!-- Leaflet -->
|
||||
<link rel="stylesheet" href="dist/leaflet.css" />
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="dist/leaflet.ie.css" /><![endif]-->
|
||||
<script src="dist/leaflet.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Leaflet</h1>
|
||||
<h3 class="alt">A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
|
||||
|
||||
<ul class="nav clearfix">
|
||||
<li><a href="index.html">Overview</a></li>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="examples.html">Examples</a></li>
|
||||
<li><a href="reference.html">Documentation</a></li>
|
||||
<li><span>Download</span></li>
|
||||
<li><a class="twitter-link" href="http://twitter.com/LeafletJS">@LeafletJS</a></li>
|
||||
<li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub Repo</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Download Leaflet</h3>
|
||||
|
||||
<p>Besides the library itself, the download package contains full source code, unit tests, files for debugging and a build system.</p>
|
||||
|
||||
<p><a href="http://github.com/CloudMade/Leaflet/zipball/master">Download Leaflet edge</a> (zip)</p>
|
||||
|
||||
<p>
|
||||
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://leaflet.cloudmade.com" data-text="Leaflet — a modern, lightweight open-source JavaScript library for interactive maps by @cloudmade" data-count="horizontal" data-via="LeafletJS" data-related="CloudMade">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fleaflet.cloudmade.com&layout=standard&show_faces=false&width=660&action=like&font=arial&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:660px; height:24px;" allowTransparency="true"></iframe>
|
||||
</p>
|
||||
|
||||
<h3>Including Leaflet on your page</h3>
|
||||
<p>Place the contents of the <code>dist</code> folder somewhere in your directory tree and include it in the <code>head</code> section of your HTML with the following code:</p>
|
||||
<pre><code class="html"><!-- Leaflet CSS -->
|
||||
<link rel="stylesheet" href="<path_to_dist>/leaflet.css" />
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="<path_to_dist>/leaflet.ie.css" /><![endif]-->
|
||||
|
||||
<!-- Leaflet JavaScript -->
|
||||
<script src="<path_to_dist>/leaflet.js"></script></code></pre>
|
||||
|
||||
<h3>Building a custom version of Leaflet</h3>
|
||||
<p>Open <code>build/build.html</code> page from the download package, check the components you want to see in your build and run the generated command in the <code>build</code> directory — your custom build will appear as <code>dist/leaflet-custom.js</code>.</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<p class="quiet">© 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data © 2011 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
|
||||
</div>
|
||||
|
||||
<a href="http://github.com/CloudMade/Leaflet"><img id="forkme" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
||||
|
||||
<script>
|
||||
hljs.tabReplace = ' ';
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,94 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Examples</title>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
|
||||
<meta property="og:description" content="Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API." />
|
||||
|
||||
<link rel="icon" type="image/png" href="docs/images/favicon.png" />
|
||||
|
||||
<!-- Blueprint -->
|
||||
<link rel="stylesheet" href="docs/css/blueprint/screen.css" media="screen, projection">
|
||||
<link rel="stylesheet" href="docs/css/blueprint/print.css" media="print">
|
||||
<!--[if lt IE 8]><link rel="stylesheet" href="docs/css/blueprint/ie.css" media="screen, projection"><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="docs/css/screen.css" media="screen, projection" />
|
||||
|
||||
<script src="docs/highlight/highlight.pack.js"></script>
|
||||
<link rel="stylesheet" href="docs/highlight/styles/github.css" />
|
||||
|
||||
<!-- Leaflet -->
|
||||
<link rel="stylesheet" href="dist/leaflet.css" />
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="dist/leaflet.ie.css" /><![endif]-->
|
||||
<script src="dist/leaflet.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Leaflet</h1>
|
||||
<h3 class="alt">A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
|
||||
|
||||
<ul class="nav clearfix">
|
||||
<li><a href="index.html">Overview</a></li>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><span>Examples</span></li>
|
||||
<li><a href="reference.html">Documentation</a></li>
|
||||
<li><a href="download.html">Download</a></li>
|
||||
<li><a class="twitter-link" href="http://twitter.com/LeafletJS">@LeafletJS</a></li>
|
||||
<li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub Repo</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Leaflet examples</h3>
|
||||
|
||||
<p>Every example here comes with step-by-step code explanation and is easy enough even for beginner JavaScript developers.</p>
|
||||
|
||||
<p>
|
||||
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://leaflet.cloudmade.com" data-text="Leaflet — a modern, lightweight open-source JavaScript library for interactive maps by @cloudmade" data-count="horizontal" data-via="LeafletJS" data-related="CloudMade">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fleaflet.cloudmade.com&layout=standard&show_faces=false&width=660&action=like&font=arial&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:660px; height:24px;" allowTransparency="true"></iframe>
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<a href="examples/quick-start.html"><img src="docs/images/quick-start.png" class="example-img" /></a>
|
||||
<h3><a href="examples/quick-start.html">Leaflet Quick Start Guide</a></h3>
|
||||
<p>A simple step-by-step guide that will quickly get you started with Leaflet basics, including setting up a Leaflet map (with CloudMade tiles) on your page, working with markers, polylines and popups, and dealing with events.</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<a href="examples/mobile.html"><img src="docs/images/mobile.png" class="example-img" /></a>
|
||||
<h3><a href="examples/mobile.html">Leaflet on Mobile</a></h3>
|
||||
<p>In this example, you'll learn how to create a fullscreen map tuned for mobile devices like iPhone, iPad or Android phones, and how to easily detect and use the current user location.</p>
|
||||
<hr />
|
||||
|
||||
<h3><a class="noimpl" href="#">Markers With Custom Icons</a></h3>
|
||||
<p>This example will show you how to create customized markers for your map.</p>
|
||||
<hr />
|
||||
|
||||
<h3><a class="noimpl" href="#">Custom Controls</a></h3>
|
||||
<p>A brief tutorial on implementing custom map controls.</p>
|
||||
<hr />
|
||||
|
||||
<h3><a class="noimpl" href="#">Custom Overlays</a></h3>
|
||||
<p>If markers, popups and vectors are not enough for you, here's a guide for creating your own map overlays (things to put on a map).</p>
|
||||
<hr />
|
||||
|
||||
<h3><a class="noimpl" href="#">OOP in Leaflet</a></h3>
|
||||
<p>Here you will learn how to use Leaflet <acronym title="Object Oriented Programming">OOP</acronym> facilities to simplify and organize your code.</p>
|
||||
<hr />
|
||||
|
||||
<p>More examples coming soon!</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<p class="quiet">© 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data © 2011 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
|
||||
</div>
|
||||
|
||||
<a href="http://github.com/CloudMade/Leaflet"><img id="forkme" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
||||
|
||||
<script>
|
||||
hljs.tabReplace = ' ';
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,53 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet mobile example</title>
|
||||
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
|
||||
<link rel="stylesheet" href="../dist/leaflet.css" />
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
|
||||
|
||||
<script src="../dist/leaflet.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<script>
|
||||
var map = new L.Map('map');
|
||||
|
||||
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
||||
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
|
||||
|
||||
map.addLayer(cloudmade);
|
||||
|
||||
map.on('locationfound', onLocationFound);
|
||||
map.on('locationerror', onLocationError);
|
||||
|
||||
map.locateAndSetView();
|
||||
|
||||
function onLocationFound(e) {
|
||||
var marker = new L.Marker(e.latlng);
|
||||
map.addLayer(marker);
|
||||
|
||||
marker.bindPopup("You are within " + (e.accuracy/2) + " meters from this point").openPopup();
|
||||
}
|
||||
|
||||
function onLocationError(e) {
|
||||
alert("Geolocation error: " + e.message);
|
||||
map.fitWorld();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,119 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Leaflet on Mobile Example</title>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
|
||||
<meta property="og:description" content="Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API." />
|
||||
|
||||
<link rel="icon" type="image/png" href="../docs/images/favicon.png" />
|
||||
|
||||
<!-- Blueprint -->
|
||||
<link rel="stylesheet" href="../docs/css/blueprint/screen.css" media="screen, projection">
|
||||
<link rel="stylesheet" href="../docs/css/blueprint/print.css" media="print">
|
||||
<!--[if lt IE 8]><link rel="stylesheet" href="../docs/css/blueprint/ie.css" media="screen, projection"><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../docs/css/screen.css" media="screen, projection" />
|
||||
|
||||
<script src="../docs/highlight/highlight.pack.js"></script>
|
||||
<link rel="stylesheet" href="../docs/highlight/styles/github.css" />
|
||||
|
||||
<!-- Leaflet -->
|
||||
<link rel="stylesheet" href="../dist/leaflet.css" />
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
|
||||
<script src="../dist/leaflet.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Leaflet</h1>
|
||||
<h3 class="alt">A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
|
||||
|
||||
<ul class="nav clearfix">
|
||||
<li><a href="../index.html">Overview</a></li>
|
||||
<li><a href="../features.html">Features</a></li>
|
||||
<li><a href="../examples.html">Examples</a></li>
|
||||
<li><a href="../reference.html">Documentation</a></li>
|
||||
<li><a href="../download.html">Download</a></li>
|
||||
<li><a class="twitter-link" href="http://twitter.com/LeafletJS">@LeafletJS</a></li>
|
||||
<li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub Repo</a></li>
|
||||
</ul>
|
||||
|
||||
<p><a href="../examples.html">← Back to the list of examples</a></p>
|
||||
<h3>Leaflet on Mobile</h3>
|
||||
|
||||
<p>In this example, you'll learn how to create a fullscreen map tuned for mobile devices like iPhone, iPad or Android phones, and how to easily detect and use the current user location.</p>
|
||||
|
||||
<p><a target="_blank" href="mobile-example.html">View example →</a></p>
|
||||
|
||||
<h3>Preparing the page</h3>
|
||||
|
||||
<p>First we'll take a look at the HTML & CSS code of the page. To make our map <code>div</code> element stretch to all available space (fullscreen), we can use the following CSS code:</p>
|
||||
|
||||
<pre><code class="css">body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
}</code></pre>
|
||||
|
||||
<p>Also, we need to tell the mobile browser to disable scaling of the page and set it to its actual size by placing the following line in the <code>head</code> section:</p>
|
||||
|
||||
<pre><code class="html"><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /></code></pre>
|
||||
|
||||
<h3>Initializing the map</h3>
|
||||
|
||||
<p>We'll now initialize the map in the JavaScript code exactly like we did in the <a href="quick-start">quick start guide</a>, but won't set the map view yet:</p>
|
||||
|
||||
<pre><code class="javascript">var map = new L.Map('map');
|
||||
|
||||
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png',
|
||||
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
|
||||
|
||||
map.addLayer(cloudmade);</code></pre>
|
||||
|
||||
<h3>Geolocation</h3>
|
||||
|
||||
<p>Leaflet has a very handy shortcut for zooming the map view to the detected location, replacing the usual <code>setView</code> method in the code:</p>
|
||||
|
||||
<pre><code class="javascript">map.locateAndSetView();</code></pre>
|
||||
|
||||
<p>Now we have a working fullscreen mobile map! But what if we need to do something after the geolocation completed? Here's what the <code>locationfound</code> and <code>locationerror</code> events are for. Let's for example add a marker in the detected location, showing accuracy in a popup, by adding an event listener to <code>locationfound</code> event before the <code>locateAndSetView</code> call:</p>
|
||||
|
||||
<pre><code class="javascript">map.on('locationfound', onLocationFound);
|
||||
|
||||
function onLocationFound(e) {
|
||||
var marker = new L.Marker(e.latlng);
|
||||
map.addLayer(marker);
|
||||
|
||||
marker.bindPopup("You are within " + (e.accuracy / 2) + " meters from this point").openPopup();
|
||||
}</code></pre>
|
||||
|
||||
<p>Excellent! But it would also be nice to show an error message if the geolocation failed:</p>
|
||||
|
||||
<pre><code class="javascript">map.on('locationerror', onLocationError);
|
||||
|
||||
function onLocationError(e) {
|
||||
alert(e.message);
|
||||
map.fitWorld();
|
||||
}</code></pre>
|
||||
|
||||
<p>Now the example is complete — try it on your mobile phone: <a target="_blank" href="mobile-example.html">View the full example →</a></p>
|
||||
|
||||
<p>Next steps would be to take a look at the detailed <a href="../reference.html">documentation</a> and browse <a href="../examples.html">other examples</a>.</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<p class="quiet">© 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data © 2011 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
|
||||
</div>
|
||||
|
||||
<a href="http://github.com/CloudMade/Leaflet"><img id="forkme" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
||||
|
||||
<script>
|
||||
hljs.tabReplace = ' ';
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,62 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet Quick Start Guide Example</title>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<link rel="stylesheet" href="../dist/leaflet.css" />
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" style="width: 600px; height: 400px"></div>
|
||||
|
||||
<script src="../dist/leaflet.js"></script>
|
||||
<script>
|
||||
var map = new L.Map('map');
|
||||
|
||||
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
||||
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
|
||||
|
||||
map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);
|
||||
|
||||
|
||||
var markerLocation = new L.LatLng(51.5, -0.09),
|
||||
marker = new L.Marker(markerLocation);
|
||||
|
||||
map.addLayer(marker);
|
||||
marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
|
||||
|
||||
|
||||
var circleLocation = new L.LatLng(51.508, -0.11),
|
||||
circleOptions = {color: '#f03', opacity: 0.7},
|
||||
circle = new L.Circle(circleLocation, 20, circleOptions);
|
||||
|
||||
circle.bindPopup("I am a circle.");
|
||||
map.addLayer(circle);
|
||||
|
||||
|
||||
var p1 = new L.LatLng(51.509, -0.08),
|
||||
p2 = new L.LatLng(51.503, -0.06),
|
||||
p3 = new L.LatLng(51.51, -0.047),
|
||||
polygonPoints = [p1, p2, p3],
|
||||
polygon = new L.Polygon(polygonPoints);
|
||||
|
||||
polygon.bindPopup("I am a polygon.");
|
||||
map.addLayer(polygon);
|
||||
|
||||
|
||||
map.on('click', onMapClick);
|
||||
|
||||
var popup = new L.Popup();
|
||||
|
||||
function onMapClick(e) {
|
||||
var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
|
||||
|
||||
popup.setLatLng(e.latlng);
|
||||
popup.setContent("You clicked the map at " + latlngStr);
|
||||
map.openPopup(popup);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,281 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Quick Start Guide</title>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
|
||||
<meta property="og:description" content="Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API." />
|
||||
|
||||
<link rel="icon" type="image/png" href="../docs/images/favicon.png" />
|
||||
|
||||
<!-- Blueprint -->
|
||||
<link rel="stylesheet" href="../docs/css/blueprint/screen.css" media="screen, projection">
|
||||
<link rel="stylesheet" href="../docs/css/blueprint/print.css" media="print">
|
||||
<!--[if lt IE 8]><link rel="stylesheet" href="../docs/css/blueprint/ie.css" media="screen, projection"><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../docs/css/screen.css" media="screen, projection" />
|
||||
|
||||
<script src="../docs/highlight/highlight.pack.js"></script>
|
||||
<link rel="stylesheet" href="../docs/highlight/styles/github.css" />
|
||||
|
||||
<!-- Leaflet -->
|
||||
<link rel="stylesheet" href="../dist/leaflet.css" />
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
|
||||
<script src="../dist/leaflet.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Leaflet</h1>
|
||||
<h3 class="alt">A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
|
||||
|
||||
<ul class="nav clearfix">
|
||||
<li><a href="../index.html">Overview</a></li>
|
||||
<li><a href="../features.html">Features</a></li>
|
||||
<li><a href="../examples.html">Examples</a></li>
|
||||
<li><a href="../reference.html">Documentation</a></li>
|
||||
<li><a href="../download.html">Download</a></li>
|
||||
<li><a class="twitter-link" href="http://twitter.com/LeafletJS">@LeafletJS</a></li>
|
||||
<li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub Repo</a></li>
|
||||
</ul>
|
||||
|
||||
<p><a href="../examples.html">← Back to the list of examples</a></p>
|
||||
<h3>Leaflet Quick Start Guide</h3>
|
||||
|
||||
<p>This step-by-step guide will quickly get you started on Leaflet basics, including setting up a Leaflet map, working with markers, polylines and popups, and dealing with events.</p>
|
||||
|
||||
<div id="map" style="height: 180px; margin-bottom: 18px"></div>
|
||||
<script>
|
||||
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
||||
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
|
||||
|
||||
var map = new L.Map('map');
|
||||
map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);
|
||||
|
||||
var markerLocation = new L.LatLng(51.5, -0.09),
|
||||
marker = new L.Marker(markerLocation);
|
||||
|
||||
map.addLayer(marker);
|
||||
marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
|
||||
|
||||
var circleLocation = new L.LatLng(51.508, -0.11),
|
||||
circleOptions = {color: '#f03', opacity: 0.7},
|
||||
circle = new L.Circle(circleLocation, 20, circleOptions);
|
||||
|
||||
circle.bindPopup("I am a circle.");
|
||||
map.addLayer(circle);
|
||||
|
||||
var p1 = new L.LatLng(51.509, -0.08),
|
||||
p2 = new L.LatLng(51.503, -0.06),
|
||||
p3 = new L.LatLng(51.51, -0.047),
|
||||
polygonPoints = [p1, p2, p3],
|
||||
polygon = new L.Polygon(polygonPoints);
|
||||
|
||||
polygon.bindPopup("I am a polygon.");
|
||||
map.addLayer(polygon);
|
||||
|
||||
map.on('click', onMapClick);
|
||||
|
||||
var popup = new L.Popup();
|
||||
|
||||
function onMapClick(e) {
|
||||
var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
|
||||
|
||||
popup.setLatLng(e.latlng);
|
||||
popup.setContent("You clicked the map at " + latlngStr);
|
||||
|
||||
map.openPopup(popup);
|
||||
}
|
||||
</script>
|
||||
|
||||
<p><a target="_blank" href="quick-start-example.html">View example on a separate page →</a></p>
|
||||
|
||||
<h3>Preparing your page</h3>
|
||||
|
||||
<p>Before writing any code for the map, you need to do the following preparation steps on your page:</p>
|
||||
|
||||
<ol>
|
||||
<li>Include Leaflet CSS files in the head section of your document:
|
||||
<pre><code class="html"><link rel="stylesheet" href="leaflet/leaflet.css" />
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="leaflet/leaflet.ie.css" /><![endif]--></code></pre>
|
||||
</li>
|
||||
|
||||
<li>Include Leaflet JavaScript file somewhere on the page (preferably before <code>body</code> close tag):
|
||||
<pre><code class="html"><script src="leaflet/leaflet.js"></script></code></li>
|
||||
|
||||
<li>Put a <code>div</code> element with a certain <code>id</code> where you want your map to be and make sure it has defined width and height:
|
||||
<pre><code class="html"><div id="map" style="height: 200px"></div> <!-- width equals available horizontal space by default --></code></pre></li>
|
||||
</ol>
|
||||
|
||||
<p>Now you're ready to initialize the map and do some stuff with it.</p>
|
||||
|
||||
|
||||
<h3>Setting up the map</h3>
|
||||
|
||||
<div id="map1" style="height: 180px"></div>
|
||||
<script>
|
||||
var cloudmade1 = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
|
||||
|
||||
var map1 = new L.Map('map1');
|
||||
map1.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade1);
|
||||
</script>
|
||||
|
||||
<p>Let's create a map instance, set its view to the center of London and add a pretty CloudMade tile layer to it. First we'll initialize the map:</p>
|
||||
|
||||
<pre><code class="javascript">var map = new L.Map('map');</code></pre>
|
||||
|
||||
<p>By default (as we didn't pass any options when creating the map instance), all mouse and touch interactions on the map are enabled, and it has zoom and attribution controls.</p>
|
||||
|
||||
<p>Next we'll create a tile layer to add to our map, in this case it's a CloudMade tile layer with Fresh style. Creating a tile layer usually involves setting the URL template for the tile images (get yours at <a href="http://cloudmade.com/register">CloudMade</a>), the attribution text and the maximum zoom level of the layer:</p>
|
||||
|
||||
<pre><code class="javascript">var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png',
|
||||
cloudmadeAttrib = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
|
||||
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib});</code></pre>
|
||||
|
||||
<p>Finally we'll set the map view to the center of London at 13th zoom level and add our tile layer (see the resulting map above):</p>
|
||||
|
||||
<pre><code class="javascript">var london = new L.LatLng(51.505, -0.09); // geographical point (longitude and latitude)
|
||||
map.setView(london, 13).addLayer(cloudmade);</code></pre>
|
||||
|
||||
<p>Make sure this code is below both the map <code>div</code> and <code>leaflet.js</code> inclusion, or in a <code>window.load</code> or <code>document.ready</code> event handler.</p>
|
||||
|
||||
<h3>Markers, circles and polygons</h3>
|
||||
|
||||
<div id="map2" style="height: 180px; margin-bottom: 18px"></div>
|
||||
<script>
|
||||
var cloudmade2 = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
|
||||
|
||||
var map2 = new L.Map('map2');
|
||||
map2.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade2);
|
||||
|
||||
var marker2 = new L.Marker(markerLocation);
|
||||
map2.addLayer(marker2);
|
||||
|
||||
var circle2 = new L.Circle(circleLocation, 20, circleOptions);
|
||||
map2.addLayer(circle2);
|
||||
|
||||
var polygon2 = new L.Polygon(polygonPoints);
|
||||
map2.addLayer(polygon2);
|
||||
</script>
|
||||
|
||||
<p>Besides tile layers, you can easily add other things to your map, including markers, polylines, polygons, circles, and popups. Let's add a marker:</p>
|
||||
|
||||
<pre><code class="javascript">var markerLocation = new L.LatLng(51.5, -0.09);
|
||||
|
||||
var marker = new L.Marker(markerLocation);
|
||||
map.addLayer(marker);</code></pre>
|
||||
|
||||
<p>Adding a circle is the same, but lets configure it by passing options as a third argument when creating the object (the second argument is the radius in pixels):</p>
|
||||
|
||||
<pre><code class="javascript">var circleLocation = new L.LatLng(51.508, -0.11),
|
||||
circleOptions = {
|
||||
color: 'red',
|
||||
fillColor: '#f03',
|
||||
fillOpacity: 0.5
|
||||
};
|
||||
|
||||
var circle = new L.Circle(circleLocation, 20, circleOptions);
|
||||
map.addLayer(circle);</code></pre>
|
||||
|
||||
<p>Add a polygon is easy too:</p>
|
||||
<pre><code class="javascript">var p1 = new L.LatLng(51.509, -0.08),
|
||||
p2 = new L.LatLng(51.503, -0.06),
|
||||
p3 = new L.LatLng(51.51, -0.047),
|
||||
polygonPoints = [p1, p2, p3];
|
||||
|
||||
var polygon = new L.Polygon(polygonPoints);
|
||||
map.addLayer(polygon);</code></pre>
|
||||
|
||||
|
||||
<h3>Working with popups</h3>
|
||||
|
||||
<div id="map3" style="height: 180px; margin-bottom: 18px"></div>
|
||||
<script>
|
||||
var cloudmade3 = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
|
||||
|
||||
var map3 = new L.Map('map3');
|
||||
map3.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade3);
|
||||
|
||||
var marker3 = new L.Marker(markerLocation);
|
||||
map3.addLayer(marker3);
|
||||
marker3.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
|
||||
|
||||
/*marker3.dragging.enable();
|
||||
marker3.on('dragend', function() {
|
||||
marker2._popup.setContent('Marker dragged.');
|
||||
marker2._popup._updateContent();
|
||||
marker2.openPopup();
|
||||
});*/
|
||||
|
||||
var circle3 = new L.Circle(circleLocation, 20, circleOptions);
|
||||
circle3.bindPopup("I am a circle.");
|
||||
map3.addLayer(circle3);
|
||||
|
||||
var polygon3 = new L.Polygon(polygonPoints);
|
||||
polygon3.bindPopup("I am a polygon.");
|
||||
map3.addLayer(polygon3);
|
||||
</script>
|
||||
|
||||
<p>Popups are usually used when you want to attach some information to a particular object on a map. Leaflet has a very handy shortcut for this:</p>
|
||||
|
||||
<pre><code class="javascript">marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
|
||||
circle.bindPopup("I am a circle.");
|
||||
polygon.bindPopup("I am a polygon.");</code></pre>
|
||||
|
||||
<p>Try clicking on our objects. The <code>bindPopup</code> method attaches a popup with the specified HTML content to your marker so the popup appears when you click on the object, and the <code>openPopup</code> method (for markers only) immediately opens the attached popup.</p>
|
||||
|
||||
<p>You can also use popups as layers (when you need something more than attching a popup to an object):</p>
|
||||
|
||||
<pre><code class="javascript">var popup = new L.Popup();
|
||||
|
||||
popup.setLatLng(new L.LatLng(51.5, -0.09));
|
||||
popup.setContent("I am a standalone popup.");
|
||||
|
||||
map.openPopup(popup);</code></pre>
|
||||
|
||||
<p>Here we use <code>openPopup</code> instead of <code>addLayer</code> because it handles automatic closing of a previously opened popup when opening a new one which is good for usability.</p>
|
||||
|
||||
|
||||
<h3>Dealing with events</h3>
|
||||
|
||||
<p>Every time something happens in Leaflet, e.g. user clicks on a marker or map zoom changes, the corresponding object sends an event which you can subscribe to with a function. It allows you to react to user interaction:</p>
|
||||
<pre><code class="javascript">map.on('click', onMapClick);
|
||||
|
||||
function onMapClick(e) {
|
||||
alert("You clicked the map at " + e.latlng);
|
||||
}</code></pre>
|
||||
|
||||
<p>Each object has its own set of events — see <a href="../reference.html">documentation</a> for details. The first argument of the listener function is an event object — it contains useful information about the event that happened. For example, map click event object (<code>e</code> in the example above) has <code>latlng</code> property which is a location at which the click occured.</p>
|
||||
|
||||
<p>Lets improve our example by using a popup instead of an alert and formatting the location string:</p>
|
||||
|
||||
<pre><code class="javascript">map.on('click', onMapClick);
|
||||
|
||||
var popup = new L.Popup();
|
||||
|
||||
function onMapClick(e) {
|
||||
var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
|
||||
|
||||
popup.setLatLng(e.latlng);
|
||||
popup.setContent("You clicked the map at " + latlngStr);
|
||||
|
||||
map.openPopup(popup);
|
||||
}</code></pre>
|
||||
|
||||
<p>Try clicking on the map and you will see the coordinates in a popup. <a target="_blank" href="quick-start-example.html">View the full example →</a></p>
|
||||
<p>Now you've learned Leaflet basics and can start building map apps straight away! Don't forget to take a look at the detailed <a href="../reference.html">documentation</a> or <a href="../examples.html">other examples</a>.</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<p class="quiet">© 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data © 2011 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
|
||||
</div>
|
||||
|
||||
<a href="http://github.com/CloudMade/Leaflet"><img id="forkme" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
||||
|
||||
<script>
|
||||
hljs.tabReplace = ' ';
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
150
features.html
150
features.html
@ -1,150 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Features</title>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
|
||||
<meta property="og:description" content="Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API." />
|
||||
|
||||
<link rel="icon" type="image/png" href="docs/images/favicon.png" />
|
||||
|
||||
<!-- Blueprint -->
|
||||
<link rel="stylesheet" href="docs/css/blueprint/screen.css" media="screen, projection">
|
||||
<link rel="stylesheet" href="docs/css/blueprint/print.css" media="print">
|
||||
<!--[if lt IE 8]><link rel="stylesheet" href="docs/css/blueprint/ie.css" media="screen, projection"><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="docs/css/screen.css" media="screen, projection" />
|
||||
|
||||
<script src="docs/highlight/highlight.pack.js"></script>
|
||||
<link rel="stylesheet" href="docs/highlight/styles/github.css" />
|
||||
|
||||
<!-- Leaflet -->
|
||||
<link rel="stylesheet" href="dist/leaflet.css" />
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="dist/leaflet.ie.css" /><![endif]-->
|
||||
<script src="dist/leaflet.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Leaflet</h1>
|
||||
<h3 class="alt">A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
|
||||
|
||||
<ul class="nav clearfix">
|
||||
<li><a href="index.html">Overview</a></li>
|
||||
<li><span>Features</span></li>
|
||||
<li><a href="examples.html">Examples</a></li>
|
||||
<li><a href="reference.html">Documentation</a></li>
|
||||
<li><a href="download.html">Download</a></li>
|
||||
<li><a class="twitter-link" href="http://twitter.com/LeafletJS">@LeafletJS</a></li>
|
||||
<li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub Repo</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Leaflet features</h3>
|
||||
|
||||
<p>Leaflet doesn't try to do everything for everyone. Instead it focuses on making <em>the basic things work perfectly</em>. It should still satisfy the needs of the vast majority of map apps developers while being flexible enough to be easily extended by writing third-party plugins.</p>
|
||||
|
||||
<p>
|
||||
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://leaflet.cloudmade.com" data-text="Leaflet — a modern, lightweight open-source JavaScript library for interactive maps by @cloudmade" data-count="horizontal" data-via="LeafletJS" data-related="CloudMade">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fleaflet.cloudmade.com&layout=standard&show_faces=false&width=660&action=like&font=arial&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:660px; height:24px;" allowTransparency="true"></iframe>
|
||||
</p>
|
||||
|
||||
<div class="span-20" id="features">
|
||||
<div class="span-6">
|
||||
<h3>Available map layers</h3>
|
||||
<ul>
|
||||
<li>Tile layers</li>
|
||||
<li>Polylines, polygons, circles</li>
|
||||
<li>Markers</li>
|
||||
<li>Popups</li>
|
||||
<li>Image overlays</li>
|
||||
<li class="noimpl">GeoJSON</li>
|
||||
</ul>
|
||||
|
||||
<h3>Interaction features</h3>
|
||||
<h4>On desktop browsers</h4>
|
||||
<ul>
|
||||
<li>Drag panning</li>
|
||||
<li>Scroll wheel zoom</li>
|
||||
<li>Double click zoom</li>
|
||||
<li>Shift-drag zoom to bounding box</li>
|
||||
</ul>
|
||||
<h4>On mobile browsers (iOS, Android)</h4>
|
||||
<ul>
|
||||
<li>Touch-drag panning</li>
|
||||
<li>Multi-touch zoom (iOS only)</li>
|
||||
<li>Double tap zoom</li>
|
||||
<li class="noimpl">Panning inertia</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="span-9">
|
||||
<h3>Visual features</h3>
|
||||
<ul>
|
||||
<li>Panning animation</li>
|
||||
<li>Zooming animation on modern browsers (except IE)</li>
|
||||
<li>Smooth continuous zoom on iOS</li>
|
||||
<li>Tile and popup fade animation</li>
|
||||
<li>Very nice default design for markers and popups</li>
|
||||
</ul>
|
||||
|
||||
<h3>Customization features</h3>
|
||||
<ul>
|
||||
<li>Pure CSS3 popups <span class="quiet">for easy restyling</span></li>
|
||||
<!-- <li>Customizable marker icons</li> -->
|
||||
<li><span class="quiet">A simple interface for implementing</span> custom map layers</li>
|
||||
<li><span class="quiet">The same for</span> custom map controls</li>
|
||||
<li><span class="quiet">Ability to implement</span> custom map projections</li>
|
||||
</ul>
|
||||
|
||||
<h3>Performance features</h3>
|
||||
<ul>
|
||||
<li>Hardware acceleration on iOS <span class="quiet">makes it feel as smooth as native apps</span></li>
|
||||
<li>Smart polyline/polygon rendering <span class="quiet">makes it responsive even when displaying objects with thousands of points</span></li>
|
||||
<li>Modular build system <span class="quiet">allows you to reduce the size of the library by leaving out the code you don't need</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="span-5 last">
|
||||
<h3>Map controls</h3>
|
||||
<ul>
|
||||
<li>Zoom buttons</li>
|
||||
<li>Attribution</li>
|
||||
<li class="noimpl">Zoom slider</li>
|
||||
<li class="noimpl">Layer switcher</li>
|
||||
<!-- <li>Scale</li> -->
|
||||
</ul>
|
||||
|
||||
<h3>Browser support</h3>
|
||||
<h4>On desktop</h4>
|
||||
<ul>
|
||||
<li>Firefox 3.6+</li>
|
||||
<li>Chrome</li>
|
||||
<li>Safari 5+</li>
|
||||
<li>IE 7–9</li>
|
||||
<li>IE 6 <span class="quiet">(not perfect but accessible)</span></li>
|
||||
</ul>
|
||||
<h4>On mobile</h4>
|
||||
<ul>
|
||||
<li>Safari for iOS 3/4+</li>
|
||||
<li>WebKit for Android 2.2+</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>If you find some feature really missing in Leaflet, please submit it to the <a href="https://github.com/CloudMade/Leaflet/issues">issue tracker</a>.</p>
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
<p class="quiet">© 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data © 2011 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
|
||||
</div>
|
||||
|
||||
<a href="http://github.com/CloudMade/Leaflet"><img id="forkme" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
||||
|
||||
<script>
|
||||
hljs.tabReplace = ' ';
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!-- <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a> -->
|
106
index.html
106
index.html
@ -1,106 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade</title>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
|
||||
<meta property="og:description" content="Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API." />
|
||||
<meta property="og:image" content="http://leaflet.cloudmade.com/docs/images/logo.png" />
|
||||
|
||||
<link rel="icon" type="image/png" href="docs/images/favicon.png" />
|
||||
|
||||
<!-- Blueprint -->
|
||||
<link rel="stylesheet" href="docs/css/blueprint/screen.css" media="screen, projection">
|
||||
<link rel="stylesheet" href="docs/css/blueprint/print.css" media="print">
|
||||
<!--[if lt IE 8]><link rel="stylesheet" href="docs/css/blueprint/ie.css" media="screen, projection"><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="docs/css/screen.css" media="screen, projection" />
|
||||
|
||||
<script src="docs/highlight/highlight.pack.js"></script>
|
||||
<link rel="stylesheet" href="docs/highlight/styles/github.css" />
|
||||
|
||||
<!-- Leaflet -->
|
||||
<link rel="stylesheet" href="dist/leaflet.css" />
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="dist/leaflet.ie.css" /><![endif]-->
|
||||
<script src="dist/leaflet.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Leaflet</h1>
|
||||
<h3 class="alt">A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
|
||||
|
||||
<ul class="nav clearfix">
|
||||
<!-- <li><a class="cloudmade-link" href="http://cloudmade.com"></a></li> -->
|
||||
<li><span>Overview</span></li>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="examples.html">Examples</a></li>
|
||||
<li><a href="reference.html">Documentation</a></li>
|
||||
<li><a href="download.html">Download</a></li>
|
||||
<li><a class="twitter-link" href="http://twitter.com/LeafletJS">@LeafletJS</a></li>
|
||||
<li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub Repo</a></li>
|
||||
</ul>
|
||||
|
||||
<!-- <h3>About the library</h3> -->
|
||||
<p>Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for <em>both desktop and mobile</em> web browsers, developed by <a href="http://cloudmade.com">CloudMade</a> to form the core of its next generation JavaScript API.</p>
|
||||
<p>It is built from the ground up to work efficiently and smoothly on both platforms, utilizing cutting-edge technologies included in HTML5. Its top priorities are usability, performance, small size, <a href="http://developer.yahoo.com/yui/articles/gbs/">A-grade</a> browser support, flexibility and easy to use API. The OOP-based code of the library is designed to be modular, extensible and very easy to understand. Find out more on the <a href="features.html">features</a> page.</p>
|
||||
|
||||
<p>
|
||||
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://leaflet.cloudmade.com" data-text="Leaflet — a modern, lightweight open-source JavaScript library for interactive maps by @cloudmade" data-count="horizontal" data-via="LeafletJS" data-related="CloudMade">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fleaflet.cloudmade.com&layout=standard&show_faces=false&width=660&action=like&font=arial&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:660px; height:24px;" allowTransparency="true"></iframe>
|
||||
</p>
|
||||
|
||||
<h3>Basic usage example</h3>
|
||||
<div id="map"></div>
|
||||
<script>
|
||||
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
||||
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
|
||||
|
||||
var map = new L.Map('map');
|
||||
map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);
|
||||
|
||||
var marker = new L.Marker(new L.LatLng(51.5, -0.09));
|
||||
map.addLayer(marker);
|
||||
|
||||
marker.bindPopup('A pretty CSS3 popup.<br />Easily customizable.').openPopup();
|
||||
</script>
|
||||
|
||||
<p>Here we create a map with a CloudMade tile layer, add a marker and bind a popup with some text to it:</p>
|
||||
<pre><code class="javascript">// create a CloudMade tile layer
|
||||
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png',
|
||||
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
|
||||
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
|
||||
|
||||
// initialize the map on the "map" div
|
||||
var map = new L.Map('map');
|
||||
|
||||
// set the map view to a given center and zoom and add the CloudMade layer
|
||||
map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);
|
||||
|
||||
// create a marker in the given location and add it to the map
|
||||
var marker = new L.Marker(new L.LatLng(51.5, -0.09));
|
||||
map.addLayer(marker);
|
||||
|
||||
// attach a given HTML content to the marker and immediately open it
|
||||
marker.bindPopup("A pretty CSS3 popup.<br />Easily customizable.").openPopup();</code></pre>
|
||||
|
||||
<p>Check out the <a href="examples.html">examples</a> section for more examples, or head straight to the <a href="reference.html">documentation</a>.</p>
|
||||
|
||||
<h3>Contributing to Leaflet</h3>
|
||||
<p>The project is <a href="http://github.com/CloudMade/Leaflet">hosted on GitHub</a>, waiting for your contributions — just send your pull requests to <a href="http://github.com/mourner">Vladimir Agafonkin</a> (Leaflet maintainer). Let's make the best library for maps that can possibly exist! </p>
|
||||
<p>You can also help the project a lot by reporting bugs and discussing features on the <a href="http://github.com/CloudMade/Leaflet/issues">issues page</a> or tweeting to <a href="http://twitter.com/LeafletJS">@LeafletJS</a>.
|
||||
|
||||
<hr />
|
||||
<p class="quiet">© 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data © 2011 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
|
||||
</div>
|
||||
|
||||
<a href="http://github.com/CloudMade/Leaflet"><img id="forkme" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
||||
|
||||
<script>
|
||||
hljs.tabReplace = ' ';
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!-- <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a> -->
|
1738
reference.html
1738
reference.html
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user