⬆️ v3.0.0 (#704)

apps/docs/images/self-hosting/spacetime_files/codemirror.css

@@ -0,0 +1,340 @@
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+  color: black;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror-cursor {
+  border-left: 1px solid black;
+  border-right: none;
+  width: 0;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+  width: auto;
+  border: 0 !important;
+  background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+
+.cm-animate-fat-cursor {
+  width: auto;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+  background-color: #7e7;
+}
+@-moz-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@-webkit-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-rulers {
+  position: absolute;
+  left: 0; right: 0; top: -50px; bottom: -20px;
+  overflow: hidden;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  top: 0; bottom: 0;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3 {color: #085;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+.CodeMirror-composing { border-bottom: 2px solid; }
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  position: relative;
+  overflow: hidden;
+  background: white;
+}
+
+.CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px; margin-right: -30px;
+  padding-bottom: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 30px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  min-height: 100%;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  margin-bottom: -30px;
+}
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: 4;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
+}
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  overflow: auto;
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-rtl pre { direction: rtl; }
+
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
+.CodeMirror-measure pre { position: static; }
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+
+.cm-searching {
+  background: #ffa;
+  background: rgba(255, 255, 0, .4);
+}
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }

apps/docs/images/self-hosting/spacetime_files/explain.js

@@ -0,0 +1,118 @@
+new Vue({
+  el: '#explain',
+  data: {
+    epoch: Date.now(),
+    offset: new Date().getTimezoneOffset(),
+    doc: {},
+    docs: {
+      main: {},
+      getters: {},
+      utils: {},
+    },
+  },
+  methods: {},
+  created: function() {
+    d3.json('./lib/docs.json', (error, docs) => {
+      this.docs = docs;
+    });
+  }
+});
+
+
+//html example
+var html = '<script src="https://unpkg.com/spacetime"></script>\n'
+html += '<script>\n'
+html += '  // make a new Date in New York\n'
+html += "  var d = spacetime('March 1 2012', 'America/New_York')\n"
+html += "  d = d.time('4:20pm')\n"
+html += "  d = d.goto('America/Los_Angeles')\n"
+html += "  d.time()\n  //'1:20pm'\n"
+html += '</script>'
+
+var options = {
+  // mode: 'html-mixed',
+  theme: 'spencertheme',
+  readOnly: true,
+  value: html
+}
+var el = document.getElementById('html')
+CodeMirror(el, options)
+
+// - node example -
+var node = '// npm install spacetime\n'
+node += "var spacetime = require('spacetime')\n\n"
+node += "var d = spacetime.now('Europe/Paris')\n"
+node += 'd.isAsleep()\n'
+node += '//true\n\n'
+node += 'd.dayName()\n'
+node += "//'Wednesday'"
+options = {
+  mode: 'javascript',
+  theme: 'spencertheme',
+  readOnly: true,
+  value: node
+}
+el = document.getElementById('node')
+CodeMirror(el, options)
+
+//--showoff
+var doc =
+  "//make a new date in a remote timezone:\nlet s = new spacetime('January 5 2018', 'Africa/Djibouti')\n\n"
+doc += '//query it like this:\ns.date()//5 ✔️ weee!\n'
+doc += "s.monthName()//'january' ✔️\n"
+doc += 's.year()//2018 ✔️\n\n'
+doc += '//inspect the daylight-savings-time:\n'
+doc += 's.inDST()//false\n'
+doc += 's.hasDST()//false\n'
+doc += 's.offset()//3 (hours) ✔️\n\n'
+doc += '//you can change the date/time:\n'
+doc += 's = s.date(7) //jan 7th\n'
+doc += "s = s.time('4:30pm')\n"
+doc += 's = s.year(2019) //jan 7th 2019\n\n'
+doc += '//this same moment, but in Namibia:\n'
+doc += "s = s.goto('Africa/Windhoek')//false\n"
+doc += "s.time() //'2:30pm'\n\n"
+doc += '//Namibia is currently in daylight-savings time\n'
+doc += 's.isDST()//true\n'
+doc += 's.offset()//1 (hour)\n\n'
+doc += '//but after april 2nd, fall-back\n'
+doc += "s = s.month('april').date(3)\n"
+doc += 's.isDST()//false\n'
+doc += 's.offset()//0\n'
+CodeMirror(document.getElementById('showoff'), {
+  mode: 'javascript',
+  theme: 'spencertheme',
+  readOnly: true,
+  value: doc
+})
+
+//---docs---
+var doc2 = 'd = new Date(fakeParis)\n'
+doc2 += 'd.getHours()// ✔️ weee!'
+CodeMirror(document.getElementById('doc'), {
+  mode: 'javascript',
+  theme: 'spencertheme',
+  readOnly: true,
+  value: doc2
+})
+
+var doc3 = 'd = new Date(fakeParis)\n'
+doc3 += 'd.setHours(6)// ✖️ uh-oh'
+CodeMirror(document.getElementById('docBad'), {
+  mode: 'javascript',
+  theme: 'spencertheme',
+  readOnly: true,
+  value: doc3
+})
+
+var doc4 = 'var localTime = fakeParis - parisOffset + myOffset \n'
+doc4 += 'local = new Date(localTime)\n'
+doc4 += 'local.setHours(6)// 🎉\n'
+doc4 +=
+  'var parisAgain = local.getTIme() - myOffset + parisOffset\n// ¯\\_(ツ)_/¯'
+CodeMirror(document.getElementById('docThree'), {
+  mode: 'javascript',
+  theme: 'spencertheme',
+  readOnly: true,
+  value: doc4
+})

apps/docs/images/self-hosting/spacetime_files/index.css

@@ -0,0 +1,224 @@
+/* latin */
+@font-face {
+  font-family: 'Bitter';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Bitter Regular'), local('Bitter-Regular'),
+    url(./lib/bitter.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+[v-cloak] {
+  display: none;
+}
+
+/*map styles*/
+.graticule {
+  fill: none;
+  stroke: #777;
+  stroke-opacity: 0.5;
+  stroke-width: 0.5px;
+  pointer-events: none;
+}
+.timezones {
+  fill: #dbb2c1;
+}
+.timezones :hover {
+  fill: #7da0df;
+}
+.chosenTz {
+  fill: cornflowerblue;
+}
+.boundary {
+  fill: none;
+  stroke: #fff;
+  stroke-width: 0.5px;
+  pointer-events: none;
+}
+
+/*my styles*/
+.topright {
+  position: absolute;
+  top: 15px;
+  right: 50px;
+  /*text-decoration:none;*/
+  color: cornflowerblue;
+}
+.nice {
+  color: #6b7279;
+  font-family: 'Bitter', serif;
+}
+.big {
+  font-size: 45px;
+}
+.middle {
+  text-align: center;
+  margin: 25px;
+  padding-top: 30px;
+}
+.boom {
+  color: #8cc5df;
+  font-size: 17px;
+}
+.list {
+  font-size: 22px;
+  line-height: 150%;
+  text-align: left;
+}
+#map {
+  position: relative;
+  display: block;
+  top: -30px;
+  width: 960px;
+  height: 660px;
+}
+.byline {
+  margin: 100px;
+  font-size: 18px;
+  line-height: 150%;
+}
+.math {
+  font-size: 30px;
+}
+.link {
+  color: steelblue;
+}
+.table {
+  display: flex;
+  text-align: center;
+  margin: 20px 10% 20px 10%;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.tr {
+  flex-grow: 1;
+  width: 50%;
+}
+.details {
+  color: silver;
+  font-size: 15px;
+}
+.control {
+  white-space: nowrap;
+  color: grey;
+  font-size: 15px;
+}
+.number {
+  font-size: 90px;
+  font-weight: 300;
+  font-family: 'Ariel';
+}
+
+.codemirror {
+  /*background-color:whitesmoke;*/
+  /*width:500px;*/
+  display: inline-block;
+  border: 1px solid lightgrey;
+  line-height: 125%;
+  padding-left: 15px;
+  padding-right: 50px;
+  border-radius: 5px;
+}
+.epoch {
+  background-color: #f5f5f5;
+  padding: 8px;
+  font-size: 20px;
+  color: darkgrey;
+  border-radius: 5px;
+  white-space: nowrap;
+}
+
+.explain {
+  padding-bottom: 30px;
+}
+.plus {
+  user-select: none;
+  color: steelblue;
+  cursor: pointer;
+  font-size: 29px;
+  margin: 4px;
+  position: relative;
+  /*top:-15px;*/
+}
+.minus {
+  user-select: none;
+  color: darkred;
+  cursor: pointer;
+  font-size: 29px;
+  margin: 4px;
+  font-weight: 600;
+  position: relative;
+  /*top:-15px;*/
+}
+
+.month {
+  position: relative;
+  text-align: center;
+  /*font-family:'times';*/
+  top: 5px;
+  /*color:silver;*/
+  /*font-size:11px;*/
+  color: lightgrey;
+  font-weight: 400;
+  font-family: 'Bitter', serif;
+  font-size: 9px;
+}
+.nowYear {
+  display: block;
+  position: absolute;
+  top: -7px;
+  width: 15px;
+  text-align: center;
+  height: 15px;
+  border-radius: 3px;
+  background-color: #d889a6;
+  border: 1px solid #b65d7e;
+  opacity: 0.8;
+}
+.fact {
+  color: #6b7279;
+  line-height: 120%;
+  font-size: 16px;
+}
+.yes {
+}
+.yes::after {
+  content: ' ✔️';
+  font-size: 11px;
+}
+.no {
+  text-decoration: line-through;
+}
+.no::after {
+  content: ' ✖️';
+  font-size: 11px;
+}
+.skip {
+  user-select: none;
+  font-size: 22px;
+  color: #a7aeb4;
+  margin-left: 4px;
+  margin-right: 4px;
+  position: relative;
+  top: 0px;
+  cursor: pointer;
+}
+.skip:hover {
+  color: steelblue;
+}
+.subheading {
+  color: grey;
+  font-size: 22px;
+  margin: 12px;
+}
+.method {
+  color: lightsteelblue;
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 130%;
+  margin: 15px;
+  display: inline-block;
+  border-bottom: 1px solid lightgrey;
+}

apps/docs/images/self-hosting/spacetime_files/index.js

@@ -0,0 +1,151 @@
+var width = 960
+var height = 660
+var map = d3.select('#map').append('svg')
+// map.attr('width', width).attr('height', height)
+map.attr('preserveAspectRatio', 'xMinYMin meet')
+map.attr('viewBox', `0 0 ${width} ${height}`)
+
+// var dayWidth = 600
+var scale = d3.scale.linear()
+scale.range([0, 100]).domain([0, 1])
+
+var s = spacetime.now()
+
+window.day = new Vue({
+  el: '#today',
+  data: {
+    s: s,
+    hi: 'world',
+    timezone: s.timezone().name,
+    scale: scale,
+    time: s.format('time-12h'),
+    tzData: [],
+    months: [
+      '#6accb2',
+      '#705E5C',
+      '#cc8a66',
+      '#cc7066',
+      '#7f9c6c',
+      '#6699cc',
+      '#303b50',
+      '#335799',
+      '#e6d7b3',
+      '#914045',
+      '#C4ABAB',
+      '#838B91'
+    ],
+    controls: [
+      {
+        title: 'hour',
+        render: function() {
+          return s.h12() + s.ampm()
+        }
+      },
+      {
+        title: 'minute',
+        render: function() {
+          return s.format('minute')
+        }
+      },
+      {
+        title: 'day',
+        render: function() {
+          return s.format('date-ordinal')
+        }
+      },
+      {
+        title: 'month',
+        render: function() {
+          return s.format('month-short')
+        }
+      },
+      {
+        title: 'week',
+        render: function() {
+          return s.week()
+        }
+      },
+      {
+        title: 'year',
+        render: function() {
+          return s.year()
+        }
+      }
+    ]
+  },
+
+  methods: {
+    changeTZ: function(tz) {
+      // there are some "timezone" like: "America/Indiana/Indianapolis"
+      // and we can not find such "timezone" in zonefile
+      //
+      // but "America/Indiana" is available, so just trim the last section
+      // it's a wild guess but works.
+      tz = tz
+        .split('/')
+        .slice(0, 2)
+        .join('/')
+      this.s = this.s.goto(tz)
+      this.timezone = tz
+    },
+    add: function(unit) {
+      this.s = this.s.add(1, unit)
+    },
+    subtract: function(unit) {
+      this.s = this.s.minus(1, unit)
+    },
+
+    drawDay: function() {},
+
+    drawMap: function() {
+      var timezones = this.tzData
+      var projection = d3.geo
+        .mercator()
+        .scale(width / 2 / Math.PI)
+        .translate([width, height])
+        .precision(0.1)
+      var path = d3.geo.path().projection(projection)
+      path.projection(null)
+
+      map
+        .insert('g', '.graticule')
+        .attr('class', 'timezones')
+        .selectAll('path')
+        .data(topojson.feature(timezones, timezones.objects.timezones).features)
+        .enter()
+        .append('path')
+        .attr('d', path)
+        .on('click', d => {
+          console.log(d.id)
+          this.changeTZ(d.id)
+          this.drawMap()
+        })
+        .attr('fill', d => {
+          if (d.id === this.timezone) {
+            return 'cornflowerblue'
+          }
+          return null
+        })
+        .append('title')
+        .text(function(d) {
+          return d.id
+        })
+
+      map
+        .insert('path', '.graticule')
+        .datum(
+          topojson.mesh(timezones, timezones.objects.timezones, function(a, b) {
+            return a !== b
+          })
+        )
+        .attr('class', 'boundary')
+        .attr('d', path)
+    }
+  },
+  created() {
+    d3.json('./lib/timezones.json', (error, timezones) => {
+      this.tzData = timezones
+      this.drawMap()
+    })
+  }
+})

apps/docs/images/self-hosting/spacetime_files/mytheme.css

@@ -0,0 +1,37 @@
+/*
+  Based on Base16 Default Light by     Chris Kempson (http://chriskempson.com)
+*/
+.cm-s-spencertheme {margin:10px;}
+.cm-s-spencertheme.CodeMirror { background: white; color: grey; font-size:16px;  height: auto; max-width:800px; }
+.cm-s-spencertheme div.CodeMirror-selected { background: powderblue;}
+.cm-s-spencertheme .CodeMirror-line::selection, .cm-s-spencertheme .CodeMirror-line > span::selection, .cm-s-spencertheme .CodeMirror-line > span > span::selection { background: lightsteelblue; }
+.cm-s-spencertheme .CodeMirror-line::-moz-selection, .cm-s-spencertheme .CodeMirror-line > span::-moz-selection, .cm-s-spencertheme .CodeMirror-line > span > span::-moz-selection { background: lightsteelblue; }
+.cm-s-spencertheme .CodeMirror-gutters { background: snow; border-right: 1px solid linen;}
+.cm-s-spencertheme .CodeMirror-guttermarker { color: #ac4142; }
+.cm-s-spencertheme .CodeMirror-guttermarker-subtle { color: #b0b0b0; }
+.cm-s-spencertheme .CodeMirror-linenumber { color: #b0b0b0; }
+.cm-s-spencertheme .CodeMirror-cursor { border-left: 1px solid #505050; }
+
+.cm-s-spencertheme span.cm-comment { color: silver; }
+.cm-s-spencertheme span.cm-atom { color: #aa759f; }
+.cm-s-spencertheme span.cm-number { color: steelblue; }
+
+.cm-s-spencertheme span.cm-property, .cm-s-spencertheme span.cm-attribute { color: #90a959; }
+.cm-s-spencertheme span.cm-keyword { color: #997a9e;  font-size:14px; }
+.cm-s-spencertheme span.cm-string { color: steelblue; }
+
+.cm-s-spencertheme span.cm-variable { color: #c23565; }
+.cm-s-spencertheme span.cm-variable-2 { color: #6a9fb5; }
+.cm-s-spencertheme span.cm-def { color: #d28445; }
+.cm-s-spencertheme span.cm-bracket { color: lightgrey; font-size:12px; }
+.cm-s-spencertheme span.cm-tag { color: #ac4142; }
+.cm-s-spencertheme span.cm-link { color: #aa759f; }
+.cm-s-spencertheme span.cm-error { background: #ac4142; color: #505050; }
+
+.cm-s-spencertheme .CodeMirror-activeline-background { background: lightgrey; }
+.cm-s-spencertheme .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
+
+.line-error {
+    background: #FBC2C4 !important;
+    color: #8a1f11 !important;
+}