Merge remote-tracking branch 'galenwp/comment' into learning

ren/tree/body.hoon

@@ -5,10 +5,5 @@
 /=    dat    /%  /tree-json/ :: default include
 ^-  marl
 ;=  ;script(type "text/javascript"): window.tree = {(pojo (joba %data dat))}
-    ;div.container
+    ;div#tree;
-      ;div.row#main
-        ;div#head;
-        ;div#body;
-      ==
-    ==
 ==

web/lib/css/bootstrap.css

@@ -2089,21 +2089,21 @@ input[type="checkbox"].disabled {
 .has-success.checkbox label,
 .has-success.radio-inline label,
 .has-success.checkbox-inline label {
-  color: #02d124;
+  color: #64de79;
 }
 
 .has-success .form-control {
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .has-success .input-group-addon {
-  color: #02d124;
+  color: #64de79;
-  background-color: #a1feb0;
+  background-color: white;
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .has-success .form-control-feedback {
-  color: #02d124;
+  color: #64de79;
 }
 
 .has-success .form-control-success {
@@ -2406,28 +2406,28 @@ fieldset[disabled] a.btn {
 
 .btn-success {
   color: #fff;
-  background-color: #02d124;
+  background-color: #64de79;
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .btn-success:hover {
   color: #fff;
-  background-color: #029e1b;
+  background-color: #3ad555;
-  border-color: #01941a;
+  border-color: #32d34d;
 }
 
 .btn-success:focus, .btn-success.focus {
   color: #fff;
-  background-color: #029e1b;
+  background-color: #3ad555;
-  border-color: #01941a;
+  border-color: #32d34d;
 }
 
 .btn-success:active, .btn-success.active,
 .open > .btn-success.dropdown-toggle {
   color: #fff;
-  background-color: #029e1b;
+  background-color: #3ad555;
   background-image: none;
-  border-color: #01941a;
+  border-color: #32d34d;
 }
 
 .btn-success:active:hover, .btn-success:active:focus, .btn-success:active.focus, .btn-success.active:hover, .btn-success.active:focus, .btn-success.active.focus,
@@ -2435,18 +2435,18 @@ fieldset[disabled] a.btn {
 .open > .btn-success.dropdown-toggle:focus,
 .open > .btn-success.dropdown-toggle.focus {
   color: #fff;
-  background-color: #017b15;
+  background-color: #29c244;
-  border-color: #01530e;
+  border-color: #22a038;
 }
 
 .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success:disabled:focus, .btn-success:disabled.focus {
-  background-color: #02d124;
+  background-color: #64de79;
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .btn-success.disabled:hover, .btn-success:disabled:hover {
-  background-color: #02d124;
+  background-color: #64de79;
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .btn-warning {
@@ -2624,31 +2624,31 @@ fieldset[disabled] a.btn {
 }
 
 .btn-success-outline {
-  color: #02d124;
+  color: #64de79;
   background-color: transparent;
   background-image: none;
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .btn-success-outline:focus, .btn-success-outline.focus, .btn-success-outline:active, .btn-success-outline.active,
 .open > .btn-success-outline.dropdown-toggle {
   color: #fff;
-  background-color: #02d124;
+  background-color: #64de79;
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .btn-success-outline:hover {
   color: #fff;
-  background-color: #02d124;
+  background-color: #64de79;
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .btn-success-outline.disabled:focus, .btn-success-outline.disabled.focus, .btn-success-outline:disabled:focus, .btn-success-outline:disabled.focus {
-  border-color: #3cfd5c;
+  border-color: #b8f0c2;
 }
 
 .btn-success-outline.disabled:hover, .btn-success-outline:disabled:hover {
-  border-color: #3cfd5c;
+  border-color: #b8f0c2;
 }
 
 .btn-warning-outline {
@@ -3741,8 +3741,8 @@ input[type="button"].btn-block {
 }
 
 .card-success {
-  background-color: #02d124;
+  background-color: #64de79;
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .card-info {
@@ -3777,7 +3777,7 @@ input[type="button"].btn-block {
 
 .card-success-outline {
   background-color: transparent;
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .card-warning-outline {
@@ -4066,11 +4066,11 @@ a.label:focus, a.label:hover {
 }
 
 .label-success {
-  background-color: #02d124;
+  background-color: #64de79;
 }
 
 .label-success[href]:focus, .label-success[href]:hover {
-  background-color: #029e1b;
+  background-color: #3ad555;
 }
 
 .label-info {
@@ -4334,16 +4334,16 @@ a.label:focus, a.label:hover {
 }
 
 .progress-success[value]::-webkit-progress-value {
-  background-color: #02d124;
+  background-color: #64de79;
 }
 
 .progress-success[value]::-moz-progress-bar {
-  background-color: #02d124;
+  background-color: #64de79;
 }
 
 @media screen and (min-width: 0\0) {
   .progress-success .progress-bar {
-    background-color: #02d124;
+    background-color: #64de79;
   }
 }
 
@@ -5566,11 +5566,11 @@ a.text-primary:focus, a.text-primary:hover {
 }
 
 .text-success {
-  color: #02d124 !important;
+  color: #64de79 !important;
 }
 
 a.text-success:focus, a.text-success:hover {
-  color: #029e1b;
+  color: #3ad555;
 }
 
 .text-info {
@@ -5617,11 +5617,11 @@ a.bg-primary:focus, a.bg-primary:hover {
 
 .bg-success {
   color: #fff !important;
-  background-color: #02d124 !important;
+  background-color: #64de79 !important;
 }
 
 a.bg-success:focus, a.bg-success:hover {
-  background-color: #029e1b;
+  background-color: #3ad555;
 }
 
 .bg-info {
@@ -6020,12 +6020,14 @@ h1,
 h2,
 h3 {
   padding-top: 2rem;
+  line-height: 4rem;
 }
 
 h4,
 h5,
 h6 {
   padding-top: 1rem;
+  line-height: 2rem;
 }
 
 h3, h4 {
@@ -6052,6 +6054,25 @@ h1:first-of-type {
   margin-bottom: 0;
 }
 
+h1.first,
+h2.first,
+h3.first {
+  padding-top: 0;
+  padding-bottom: 2rem;
+}
+
+.gray {
+  color: #55595c;
+}
+
+.gray-light {
+  color: #b1b7bd;
+}
+
+.gray-lighter {
+  color: #eceeef;
+}
+
 @media (max-width: 767px) {
   h1 {
     font-size: 2rem;
@@ -6086,7 +6107,7 @@ textarea:focus {
   border-color: #000;
 }
 
-.container {
+body {
   padding-top: 3rem;
   padding-bottom: 9rem;
 }
@@ -6128,7 +6149,7 @@ textarea:focus {
 }
 
 .green {
-  color: #02d124;
+  color: #64de79;
 }
 
 .yellow {
@@ -6150,7 +6171,7 @@ textarea:focus {
 }
 
 .inverse.green {
-  background-color: #02d124;
+  background-color: #64de79;
 }
 
 .inverse.yellow {

web/talk/main.css

@@ -6,22 +6,20 @@ div.input.valid-false {
   color: #FF0808;
   border-color: #FF0808; }
 
-div.meta {
+.grams {
-  display: inline-block; }
-
-div.grams {
   list-style-type: none;
   padding: 0;
   margin-top: -1.875rem; }
+  .grams .meta {
+    display: inline-block; }
 
-div.meta label {
+.grams .meta label {
-  background-color: #B1B7BD;
   margin-right: 0.9375rem;
   height: 0.9375rem;
   width: 0.9375rem;
   text-align: center; }
 
-div.meta label:before {
+.grams .meta label:before {
   content: attr(data-glyph);
   color: #fff;
   font-family: 'scp';
@@ -30,24 +28,24 @@ div.meta label:before {
   line-height: 1rem;
   vertical-align: middle; }
 
-div.meta label,
+.grams .meta label,
-div.meta h2,
+.grams .meta h2,
-div.meta h3 {
+.grams .meta h3 {
   display: inline-block; }
 
-div.meta h2,
+.grams .meta h2,
-div.meta h3 {
+.grams .meta h3 {
   font-family: 'scp';
   font-size: .8rem;
   font-weight: 400;
   margin-top: 0;
   padding-top: 0; }
 
-div.meta h3 {
+.grams .meta h3 {
   margin-left: 2rem;
   line-height: 1rem; }
 
-div.meta .time {
+.grams .meta .time {
   padding-right: 2rem; }
 
 div.gram.first:first-of-type {
@@ -71,8 +69,11 @@ div.gram.same:hover div.meta {
 
 .exp {
   font-family: 'scp';
-  font-size: .9rem;
+  font-size: .9rem; }
-  max-height: 2rem; }
+  .exp .speech {
+    white-space: nowrap;
+    max-width: 100%;
+    overflow-x: scroll; }
   .exp .speech > span {
     color: #fff;
     background-color: #000;
@@ -89,6 +90,19 @@ div.gram.same:hover div.meta {
     background-color: #000;
     color: #fff; }
 
+.comment .speech a.btn {
+  background-color: transparent;
+  color: #B1B7BD;
+  font-size: .9rem;
+  border: 0;
+  border-bottom: 3px solid #b1b7bd;
+  text-transform: none;
+  text-decoration: none;
+  padding: 0;
+  line-height: 1rem;
+  margin: 1rem 0 2rem 0;
+  letter-spacing: 0; }
+
 .gram pre {
   background-color: transparent; }
 

web/talk/main.js

@@ -590,11 +590,13 @@ module.exports = recl({
     if (this.state.station && this.state.listening.indexOf(this.state.station) === -1) {
       MessageActions.listenStation(this.state.station);
     }
+    if (this.props.readOnly == null) {
       $(window).on('scroll', this.checkMore);
+      window.util.scrollToBottom();
+    }
     this.focused = true;
     $(window).on('blur', this._blur);
-    $(window).on('focus', this._focus);
+    return $(window).on('focus', this._focus);
-    return window.util.scrollToBottom();
   },
   componentWillUpdate: function(props, state) {
     var $window, i, j, key, lastSaid, len, len1, message, nowSaid, old, ref, ref1, results, sameAs, scrollTop;
@@ -623,7 +625,7 @@ module.exports = recl({
   },
   componentDidUpdate: function(_props, _state) {
     var _messages, d, t;
-    if (this.setOffset) {
+    if (this.setOffset && (this.props.readOnly == null)) {
       $(window).scrollTop(this.setOffset);
       this.setOffset = null;
     }
@@ -657,7 +659,7 @@ module.exports = recl({
     return StationActions.setAudience(audi);
   },
   render: function() {
-    var _messages, lastIndex, lastSaid, messageHeights, messages, ref, station;
+    var _messages, body, lastIndex, lastSaid, messageHeights, messages, ref, station;
     station = this.state.station;
     messages = this.sortedMessages(this.state.messages);
     this.last = messages[messages.length - 1];
@@ -696,15 +698,20 @@ module.exports = recl({
         }));
       };
     })(this));
-    return div({
+    if (this.props.readOnly == null) {
-      className: "grams",
+      body = React.createElement(Infinite, {
-      key: "messages"
-    }, React.createElement(Infinite, {
         useWindowAsScrollContainer: true,
         containerHeight: window.innerHeight,
         elementHeight: messageHeights,
         key: "messages-infinite"
-    }, _messages));
+      }, _messages);
+    } else {
+      body = _messages;
+    }
+    return div({
+      className: "grams",
+      key: "messages"
+    }, body);
   }
 });
 
@@ -1280,6 +1287,9 @@ TreeActions.registerComponent("talk", React.createClass({
     var station;
     require('./utils/util.coffee');
     require('./utils/move.coffee');
+    if (!this.props.readonly) {
+      $(window).on('scroll', window.util.checkScroll);
+    }
     station = this.getStation();
     StationActions.listen();
     StationActions.listenStation(station);
@@ -1959,8 +1969,6 @@ $(window).on('scroll', function(e) {
   return so.ls = so.cs;
 });
 
-$(window).on('scroll', window.util.checkScroll);
-
 
 },{}],16:[function(require,module,exports){
 if (!window.util) {

web/tree/main.css

@@ -14,9 +14,62 @@ img.logo {
 img.logo.first {
   margin-bottom: 2rem; }
 
+div.logo {
+  width: 3rem;
+  height: 3rem;
+  background-color: #fff;
+  display: inline-block;
+  margin-right: 1rem;
+  border-radius: 50%;
+  vertical-align: middle;
+  margin-top: -.8rem;
+  background-color: #000; }
+
+div.logo:before {
+  content: "~";
+  color: #B1B7BD;
+  font-size: 2.6rem;
+  vertical-align: middle;
+  line-height: 3rem;
+  margin-top: .2rem;
+  text-align: center;
+  width: 2rem;
+  display: inline-block; }
+
+div.logo.inverse:before {
+  color: #fff; }
+
+.lead .logo.inverse {
+  margin-top: -1.4rem; }
+
 .short {
   width: 75%; }
 
+.meta-data {
+  padding: 1rem;
+  background-color: #f7f7f9;
+  font-family: 'scp';
+  max-width: 12rem;
+  margin-bottom: 2rem; }
+  .meta-data h2,
+  .meta-data h3 {
+    padding: 0;
+    margin: 0;
+    font-size: 1rem;
+    line-height: 2rem; }
+
+.link-next {
+  margin-top: 4rem; }
+  .link-next a {
+    padding: .6rem;
+    border: 2px solid;
+    text-decoration: none;
+    font-weight: 500;
+    margin-top: 4rem; }
+  .link-next a:hover {
+    background-color: #000;
+    color: #fff; }
+
 .loading:before {
   font-family: 'scp';
   background-color: #000;
@@ -27,6 +80,7 @@ img.logo.first {
   height: 1.6rem;
   text-align: center;
   font-size: .8rem;
+  line-height: 1.7rem;
   display: block;
   font-weight: 600;
   z-index: 3; }
@@ -66,7 +120,8 @@ img.logo.first {
   #head {
     top: 0;
     z-index: 10;
-    width: 100%; }
+    width: 100%;
+    position: absolute; }
   #head.m-down,
   #head.m-up {
     position: absolute; }
@@ -93,22 +148,54 @@ img.logo.first {
     .ctrl ul.nav li {
       width: 100%;
       overflow: hidden;
-      white-space: nowrap; }
+      white-space: nowrap;
+      margin-bottom: .6rem; }
   .ctrl ul.nav:hover {
     overflow: visible; }
-  .ctrl a.nav-link:hover {
-    text-decoration: underline; }
   .ctrl a.nav-link {
-    letter-spacing: 1px; }
+    letter-spacing: 1px;
+    text-decoration: none;
+    border-bottom: 2px solid;
+    line-height: 1rem; }
   .ctrl .selected a.nav-link {
     font-weight: 500; }
 
+.ctrl.navbar {
+  position: relative;
+  margin-bottom: 3rem;
+  padding: 0;
+  background-color: transparent; }
+  .ctrl.navbar .icon,
+  .ctrl.navbar ul.nav,
+  .ctrl.navbar li {
+    display: inline-block;
+    padding: 0; }
+  .ctrl.navbar ul.nav {
+    margin-top: 0;
+    overflow: visible; }
+    .ctrl.navbar ul.nav li {
+      width: auto;
+      display: inline-block;
+      min-width: 16.66667%; }
+    .ctrl.navbar ul.nav .right {
+      float: right; }
+    .ctrl.navbar ul.nav .btn {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      text-transform: none; }
+
 .ctrl.open,
 .ctrl:hover {
   max-width: 33.33333%;
   min-width: 16.66667%;
   width: auto; }
 
+.ctrl.navbar.open,
+.ctrl.navbar:hover {
+  max-width: none;
+  min-width: none; }
+
 @media (max-width: 991px) {
   ul.nav {
     line-height: 1.3rem; }
@@ -137,7 +224,10 @@ img.logo.first {
   .ctrl.open {
     max-height: 12rem; }
   a.nav-link {
-    font-size: 1rem; }
+    font-size: 1rem;
+    line-height: 1rem;
+    text-decoration: none;
+    border-bottom: 2px solid; }
   .ctrl.open ul.nav {
     max-height: 9rem;
     overflow-y: scroll; } }
@@ -249,35 +339,43 @@ img.logo.first {
       margin-top: 0;
       margin-bottom: 0; } }
 
-[data-path^='/docs'] .selected .nav-link {
+[data-path^='/docs'] .selected .nav-link,
-  color: #02D124; }
+[data-path^='/work'] .selected .nav-link {
+  color: #55595c; }
 
-[data-path^='/docs'] .nav-link {
+[data-path^='/docs'] .nav-link,
+[data-path^='/work'] .nav-link {
   font-weight: 500; }
 
-[data-path^='/docs'] .home {
+[data-path^='/docs'] .home,
-  background-color: #0500F0;
+[data-path^='/work'] .home {
-  border-color: #0500F0; }
+  background-color: #55595c;
+  border-color: #55595c; }
 
-[data-path^='/docs'] .home:hover {
+[data-path^='/docs'] .home:hover,
-  background-color: #0500F0;
+[data-path^='/work'] .home:hover {
-  border-color: #0500F0;
+  background-color: #B1B7BD;
+  border-color: #B1B7BD;
   opacity: .6; }
 
-[data-path^='/docs'] .home:before {
+[data-path^='/docs'] .home:before,
+[data-path^='/work'] .home:before {
   content: "~";
   color: #fff;
   line-height: .8rem;
-  font-size: 1.4rem; }
+  font-size: 1.4rem;
+  padding-left: 1px; }
 
 @media (max-width: 991px) {
-  [data-path^='/docs'] .home:before {
+  [data-path^='/docs'] .home:before,
+  [data-path^='/work'] .home:before {
     line-height: 0.7rem;
     font-size: 1rem;
     margin-left: .06rem; } }
 
 @media (max-width: 767px) {
-  [data-path^='/docs'] .home:before {
+  [data-path^='/docs'] .home:before,
+  [data-path^='/work'] .home:before {
     line-height: .7rem;
     margin-left: .05rem;
     font-size: 1rem; } }
@@ -322,35 +420,183 @@ img.logo.first {
     line-height: 1rem;
     margin-bottom: 1rem; } }
 
+.urbit.navbar.ctrl .icon .home {
+  border-color: #B1B7BD;
+  background-color: #B1B7BD;
+  width: 3rem;
+  height: 3rem;
+  margin: 0 4rem 0 0; }
+
+.urbit.navbar.ctrl .icon .home:before {
+  content: "~";
+  color: #fff;
+  font-size: 2.6rem;
+  line-height: 2.6rem;
+  text-align: center;
+  width: 2.4rem;
+  display: inline-block; }
+
+.urbit.navbar.ctrl ul.nav li {
+  height: 3rem;
+  vertical-align: middle; }
+
+.urbit.navbar.ctrl ul.nav li a {
+  text-decoration: none;
+  color: #B1B7BD;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 3rem; }
+
+.urbit.navbar.ctrl ul.nav .btn {
+  border: 3px solid #000;
+  margin-top: -3px;
+  height: 3rem;
+  padding: 0rem; }
+  .urbit.navbar.ctrl ul.nav .btn a {
+    font-size: 1rem;
+    color: #000;
+    letter-spacing: 0; }
+
+.urbit.navbar.ctrl ul.nav .btn.selected,
+.urbit.navbar.ctrl ul.nav .btn:hover {
+  background-color: #000; }
+  .urbit.navbar.ctrl ul.nav .btn.selected a,
+  .urbit.navbar.ctrl ul.nav .btn:hover a {
+    color: #fff; }
+
+.urbit.navbar.ctrl ul.nav li a:hover,
+.urbit.navbar.ctrl ul.nav li.selected a {
+  color: #000; }
+
+.urbit.navbar.ctrl .subnav ul.nav {
+  height: 1.5rem; }
+  .urbit.navbar.ctrl .subnav ul.nav li {
+    height: 1.5rem; }
+  .urbit.navbar.ctrl .subnav ul.nav li a {
+    line-height: 1.5rem; }
+  .urbit.navbar.ctrl .subnav ul.nav .btn {
+    position: relative;
+    height: 3rem; }
+    .urbit.navbar.ctrl .subnav ul.nav .btn a {
+      line-height: 3rem; }
+
+.urbit.home.navbar.ctrl .icon .home {
+  opacity: 0;
+  border-color: #fff;
+  background-color: #fff; }
+
+.urbit.home.navbar.ctrl .icon .home:before {
+  color: #B1B7BD; }
+
+.urbit.home.navbar.ctrl ul.nav li a {
+  color: #f7f7f9; }
+
+@media (max-width: 767px) {
+  .urbit.navbar.ctrl .icon {
+    margin-top: .5rem;
+    margin-bottom: .5rem; }
+    .urbit.navbar.ctrl .icon .home {
+      width: 2rem;
+      height: 2rem;
+      margin: 0; }
+    .urbit.navbar.ctrl .icon .home:before {
+      font-size: 1.6rem;
+      line-height: 1.8rem;
+      width: 1.6rem; }
+  .urbit.navbar.ctrl .navbar-toggler {
+    margin-top: .5rem;
+    margin-left: 1rem; }
+  .urbit.navbar.ctrl ul.nav,
+  .urbit.navbar.ctrl .subnav ul.nav {
+    overflow: visible;
+    height: auto;
+    margin-left: 3rem;
+    float: left; }
+    .urbit.navbar.ctrl ul.nav li,
+    .urbit.navbar.ctrl .subnav ul.nav li {
+      display: block;
+      height: 1.5rem; }
+      .urbit.navbar.ctrl ul.nav li a,
+      .urbit.navbar.ctrl .subnav ul.nav li a {
+        line-height: 1.5rem; }
+    .urbit.navbar.ctrl ul.nav li.btn,
+    .urbit.navbar.ctrl .subnav ul.nav li.btn {
+      height: 1.5rem;
+      border: 0; }
+      .urbit.navbar.ctrl ul.nav li.btn a,
+      .urbit.navbar.ctrl .subnav ul.nav li.btn a {
+        color: #64DE79;
+        line-height: 1.5rem; } }
+
 .lead h1:first-of-type {
   padding-bottom: 0; }
 
-.body[data-path^='/docs'] h1 {
+.flush {
-  color: #0500F0; }
+  padding-top: 0; }
 
-.body[data-path^='/docs'] h1 code {
+.h-arrow {
+  width: 100%;
+  height: 9rem;
+  margin-bottom: 3rem; }
+  .h-arrow h1,
+  .h-arrow img {
+    float: left; }
+  .h-arrow img {
+    height: 6rem;
+    margin: 1rem 0 0 1rem; }
+  .h-arrow h1 {
+    color: #000;
+    display: inline-block;
+    line-height: 4rem; }
+  .h-arrow h1 code {
     background-color: transparent;
-  color: #0500F0;
+    color: #000; }
+
+.footer {
+  margin-top: 6rem;
+  font-weight: 500;
+  color: #B1B7BD; }
+  .footer a {
+    color: #55595c;
+    text-decoration: none;
+    border-bottom: 2px solid #55595c;
+    margin-left: .6rem; }
+
+.body[data-path^='/docs'] h1,
+.body[data-path^='/work'] h1 {
+  color: #000; }
+
+.body[data-path^='/docs'] h1 code,
+.body[data-path^='/work'] h1 code {
+  background-color: transparent;
+  color: #000;
   padding: 0; }
 
-.body[data-path^='/docs'] .book h2 {
+.body[data-path^='/docs'] .book h2,
+.body[data-path^='/work'] .book h2 {
   color: #B1B7BD; }
 
-.body[data-path^='/docs'] .book h2 code {
+.body[data-path^='/docs'] .book h2 code,
-  color: #0500F0;
+.body[data-path^='/work'] .book h2 code {
+  color: #000;
   background-color: transparent; }
 
-.body[data-path^='/docs'] .book h2 a {
+.body[data-path^='/docs'] .book h2 a,
-  color: #0500F0; }
+.body[data-path^='/work'] .book h2 a {
+  color: #000; }
 
-.body[data-path^='/docs'] .book hr {
+.body[data-path^='/docs'] .book hr,
+.body[data-path^='/work'] .book hr {
   margin-bottom: 3rem; }
 
+.body[data-path^='/work'] h2 {
+  color: #000; }
+
 .body[data-path^='/docs/system/hoon/runes/'] h1 {
   color: #B1B7BD; }
 
 .body[data-path^='/docs/system/hoon/runes/basic'] h1 {
-  color: #0500F0; }
+  color: #000; }
 
 .body[data-path^='/docs/system/hoon/library/'] h3 {
   font-size: 1.5rem; }
@@ -362,6 +608,176 @@ img.logo.first {
   padding-top: 0;
   margin-bottom: 0; }
 
+.body .urbit h1 {
+  color: #000;
+  line-height: 4rem; }
+
+.body .urbit a.green:hover {
+  color: #64DE79; }
+
+.body .urbit .container.stack {
+  margin-bottom: 3rem; }
+
+.body .urbit .container.stack.six {
+  margin-top: 12rem;
+  margin-bottom: 6rem; }
+
+.body .urbit .btn.black {
+  text-transform: none;
+  text-decoration: none;
+  border: 3px solid #000;
+  letter-spacing: 0;
+  margin-right: 1rem; }
+
+.body .urbit button.submit:hover,
+.body .urbit .btn.black:hover {
+  background-color: #000;
+  color: #fff; }
+
+.body .urbit .front {
+  padding-bottom: 4rem; }
+  .body .urbit .front h1 {
+    padding-top: 0; }
+  .body .urbit .front h1,
+  .body .urbit .front h1 a {
+    font-size: 4rem;
+    line-height: 6rem; }
+
+.body .urbit .image-fs {
+  height: 44rem;
+  margin-bottom: 3rem; }
+  .body .urbit .image-fs .text-container,
+  .body .urbit .image-fs .image-container {
+    position: absolute; }
+  .body .urbit .image-fs .text-container {
+    display: table;
+    height: 44rem;
+    width: 100%;
+    z-index: 1; }
+    .body .urbit .image-fs .text-container .text {
+      display: table-cell;
+      vertical-align: middle; }
+    .body .urbit .image-fs .text-container .rect {
+      width: 60%;
+      margin-left: auto;
+      margin-right: auto; }
+      .body .urbit .image-fs .text-container .rect h1 {
+        padding-bottom: 1rem;
+        text-align: left; }
+    .body .urbit .image-fs .text-container .rect.no-header {
+      font-weight: 500;
+      color: #fff;
+      font-size: 1.4rem; }
+      .body .urbit .image-fs .text-container .rect.no-header p.email {
+        font-size: 1rem; }
+      .body .urbit .image-fs .text-container .rect.no-header button.submit {
+        background-color: transparent;
+        border-color: #fff; }
+  .body .urbit .image-fs .image-container {
+    z-index: 0;
+    height: 44rem;
+    width: 100%;
+    overflow: hidden; }
+    .body .urbit .image-fs .image-container img {
+      position: relative;
+      left: 50%;
+      margin-left: -50%;
+      top: 50%;
+      margin-top: -50%;
+      min-height: 44rem;
+      min-width: 100%; }
+  .body .urbit .image-fs h1 {
+    text-align: center;
+    color: #fff; }
+
+.body .urbit .image-fs.first {
+  margin-top: -9rem; }
+
+.body .urbit .slide {
+  margin-bottom: 12rem;
+  position: relative; }
+  .body .urbit .slide h1 {
+    padding-bottom: 1rem; }
+  .body .urbit .slide .pair {
+    display: table; }
+    .body .urbit .slide .pair .text,
+    .body .urbit .slide .pair .image {
+      display: table-cell;
+      vertical-align: middle; }
+    .body .urbit .slide .pair .image.right {
+      padding-left: 5%; }
+    .body .urbit .slide .pair .image.left {
+      padding-right: 5%; }
+    .body .urbit .slide .pair .text {
+      width: 75%; }
+    .body .urbit .slide .pair .image {
+      width: 20%; }
+    .body .urbit .slide .pair p:last-child {
+      margin-bottom: 0; }
+
+.body .urbit .end {
+  padding: 1rem;
+  background-color: #64DE79;
+  color: white;
+  text-decoration: none;
+  font-size: 2rem;
+  font-weight: 500; }
+
+.body .urbit input.email,
+.body .urbit button.submit {
+  line-height: 1rem;
+  padding: .6rem;
+  border: 0; }
+
+.body .urbit input.email {
+  font-weight: 500;
+  background-color: #B1B7BD;
+  color: #fff;
+  margin-right: 1rem;
+  border: 3px solid #B1B7BD; }
+
+.body .urbit input.email::-moz-placeholder {
+  color: #D2D2D2; }
+
+.body .urbit input.email::-webkit-input-placeholder {
+  color: #D2D2D2; }
+
+.body .urbit button.submit {
+  text-transform: none;
+  text-decoration: none;
+  border: 3px solid #000;
+  background-color: #fff;
+  font-weight: 500;
+  letter-spacing: 0; }
+
+.body .urbit .last a {
+  display: block;
+  font-weight: 500;
+  color: #B1B7BD; }
+
+.body .urbit .last h2 {
+  padding-top: 0;
+  padding-bottom: 1rem;
+  margin-bottom: 0; }
+
+.body .urbit.home p.email {
+  margin-top: 3rem; }
+
+@media (max-width: 767px) {
+  .body .urbit {
+    margin-top: 4rem; }
+    .body .urbit .slide .pair,
+    .body .urbit .slide .pair .text,
+    .body .urbit .slide .pair .image {
+      display: block;
+      width: 100%; }
+    .body .urbit .slide .pair .image {
+      text-align: center; }
+    .body .urbit .slide .pair .image.left {
+      margin-bottom: 2rem; }
+    .body .urbit .slide .pair .image.right {
+      margin-top: 2rem; } }
+
 @keyframes menu-open {
   0% {
     visibility: hidden; }
@@ -468,14 +884,31 @@ img.logo.first {
   font-weight: 500;
   font-size: 1.4rem; }
 
-.body[data-path^='/docs'] .list {
+.body[data-path^='/docs'] .list,
+.body[data-path^='/work'] .list {
   list-style-type: none;
   padding-left: 0; }
   .body[data-path^='/docs'] .list a,
-  .body[data-path^='/docs'] .list h1 {
+  .body[data-path^='/docs'] .list h1,
-    color: #02D124;
+  .body[data-path^='/work'] .list a,
+  .body[data-path^='/work'] .list h1 {
+    color: #55595c;
     font-weight: 500;
-    height: 2rem; }
+    height: 2rem;
+    display: inline;
+    text-decoration: none; }
+  .body[data-path^='/docs'] .list h1,
+  .body[data-path^='/work'] .list h1 {
+    border-bottom: 2px solid #55595c; }
+
+.body[data-path^='/work'] .list.main a,
+.body[data-path^='/work'] .list.main h1 {
+  font-size: 2rem;
+  line-height: 4rem;
+  height: 4rem; }
+
+.body[data-path^='/work'] .list.main h1 {
+  border-width: 4px; }
 
 .body[data-path^='/docs'] .list.runes {
   margin-top: 3rem; }
@@ -493,7 +926,7 @@ img.logo.first {
   .body[data-path^='/docs'] .list.runes a h1 code {
     margin-right: 1rem;
     background-color: transparent;
-    color: #0500F0; }
+    color: #55595c; }
   .body[data-path^='/docs'] .list.runes a code {
     background-color: #eceeef; }
   .body[data-path^='/docs'] .list.runes a code {
@@ -512,6 +945,21 @@ img.logo.first {
   .body[data-path^='/docs'] .list.runes a:hover:after {
     background-color: #0500F0; }
 
+.urbit ul.blog {
+  list-style-type: none;
+  padding-left: 0; }
+  .urbit ul.blog li {
+    margin-bottom: 12rem; }
+  .urbit ul.blog .btn {
+    padding: .3rem;
+    border: 3px solid #64DE79;
+    color: #64DE79;
+    text-decoration: none;
+    text-transform: none; }
+  .urbit ul.blog .btn:hover {
+    background-color: #64DE79;
+    color: #fff; }
+
 .kids.runes h1 {
   padding-top: 3rem; }
 
@@ -528,6 +976,53 @@ img.logo.first {
 .kids.runes > div p:first-of-type {
   font-weight: 500; }
 
+.urbit .post .date,
+.urbit.post .date {
+  font-family: 'scp';
+  color: #B1B7BD;
+  font-size: .7rem;
+  font-weight: 200; }
+
+.urbit .post h1.title,
+.urbit .post p.preview,
+.urbit.post h1.title,
+.urbit.post p.preview {
+  font-weight: 500; }
+
+.urbit .post h1.title,
+.urbit.post h1.title {
+  font-size: 2rem;
+  padding-bottom: 0; }
+
+.urbit .post h1.title,
+.urbit .post img,
+.urbit.post h1.title,
+.urbit.post img {
+  width: 100%;
+  margin-bottom: 2rem; }
+
+.urbit .post .date,
+.urbit .post p.preview,
+.urbit .post h3.author,
+.urbit.post .date,
+.urbit.post p.preview,
+.urbit.post h3.author {
+  margin-bottom: .6rem; }
+
+.urbit .post h3.author,
+.urbit.post h3.author {
+  padding-top: 0;
+  font-size: 1rem;
+  font-weight: 200; }
+
+.urbit .post h3:before,
+.urbit.post h3:before {
+  content: "—";
+  margin-right: .6rem; }
+
+.urbit.post .preview {
+  max-width: 75%; }
+
 .sections h1 {
   font-size: 2rem;
   color: #0500F0; }
@@ -546,7 +1041,7 @@ img.logo.first {
 .sections ul li,
 .sections ul li a,
 .sections ul li h1 span {
-  color: #02D124;
+  color: #55595c;
   height: 2rem; }
 
 .sections .kids > div {
@@ -555,7 +1050,8 @@ img.logo.first {
   margin-right: 3rem;
   margin-top: 2rem;
   min-width: 14rem;
-  margin-bottom: 3rem; }
+  margin-bottom: 3rem;
+  padding: 0; }
 
 .sections .kids > div p {
   font-weight: 500; }
@@ -564,7 +1060,7 @@ img.logo.first {
   display: none; }
 
 .lead-offset {
-  margin-left: 8rem; }
+  margin-left: 4rem; }
 
 @media (max-width: 991px) {
   .lead-offset {
@@ -578,7 +1074,7 @@ img.logo.first {
 
 .add-comment {
   width: 100%;
-  border-top: 3px dotted #000;
+  border-top: 3px dotted #f7f7f9;
   margin-top: 6rem; }
   .add-comment .btn {
     font-size: .8rem; }
@@ -586,7 +1082,7 @@ img.logo.first {
     width: 66%;
     display: block;
     height: 12rem;
-    background-color: #F7F7F7;
+    background-color: #f7f7f9;
     border-bottom: 0;
     margin-bottom: 2rem;
     margin-top: 3rem;
@@ -596,16 +1092,17 @@ img.logo.first {
   padding-top: 3rem; }
   .comments .comment {
     margin-top: 2rem; }
-    .comments .comment h3,
-    .comments .comment > span {
-      font-family: 'scp'; }
     .comments .comment > span {
+      font-family: 'scp';
       font-size: .8rem;
       color: #B1B7BD; }
-    .comments .comment h3 {
+    .comments .comment h2 {
       padding-top: 0;
       font-size: 1rem;
       font-weight: 500; }
+      .comments .comment h2 code {
+        background-color: transparent;
+        padding: 0; }
     .comments .comment p {
       width: 66%; }