diff --git a/web/lib/css/bootstrap.css b/web/lib/css/bootstrap.css index 143197a0cd..3008753606 100644 --- a/web/lib/css/bootstrap.css +++ b/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; - background-color: #a1feb0; - border-color: #02d124; + color: #64de79; + background-color: white; + 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; - border-color: #02d124; + background-color: #64de79; + border-color: #64de79; } .btn-success:hover { color: #fff; - background-color: #029e1b; - border-color: #01941a; + background-color: #3ad555; + border-color: #32d34d; } .btn-success:focus, .btn-success.focus { color: #fff; - background-color: #029e1b; - border-color: #01941a; + background-color: #3ad555; + 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; - border-color: #01530e; + background-color: #29c244; + border-color: #22a038; } .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success:disabled:focus, .btn-success:disabled.focus { - background-color: #02d124; - border-color: #02d124; + background-color: #64de79; + border-color: #64de79; } .btn-success.disabled:hover, .btn-success:disabled:hover { - background-color: #02d124; - border-color: #02d124; + background-color: #64de79; + 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; - border-color: #02d124; + background-color: #64de79; + border-color: #64de79; } .btn-success-outline:hover { color: #fff; - background-color: #02d124; - border-color: #02d124; + background-color: #64de79; + 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; - border-color: #02d124; + background-color: #64de79; + 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; @@ -6128,7 +6149,7 @@ body { } .green { - color: #02d124; + color: #64de79; } .yellow { @@ -6150,7 +6171,7 @@ body { } .inverse.green { - background-color: #02d124; + background-color: #64de79; } .inverse.yellow { diff --git a/web/tree/main.css b/web/tree/main.css index dd3c3ef9dd..5e3c2bb963 100644 --- a/web/tree/main.css +++ b/web/tree/main.css @@ -14,6 +14,27 @@ img.logo { img.logo.first { margin-bottom: 2rem; } +div.logo { + width: 3rem; + height: 3rem; + background-color: #fff; + display: inline-block; + margin-right: 2rem; + border-radius: 50%; + vertical-align: middle; + margin-top: -.8rem; } + +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; } + .short { width: 75%; } @@ -375,8 +396,8 @@ img.logo.first { margin-bottom: 1rem; } } .urbit.navbar.ctrl .icon .home { - border-color: #0500F0; - background-color: #0500F0; + border-color: #B1B7BD; + background-color: #B1B7BD; width: 3rem; height: 3rem; margin: 0 4rem 0 0; } @@ -402,25 +423,25 @@ img.logo.first { line-height: 3rem; } .urbit.navbar.ctrl ul.nav .btn { - border: 3px solid #0500F0; + border: 3px solid #000; margin-top: -3px; height: 3rem; padding: 0rem; } .urbit.navbar.ctrl ul.nav .btn a { font-size: 1rem; - color: #0500F0; + color: #000; letter-spacing: 0; } .urbit.navbar.ctrl ul.nav .btn.selected, .urbit.navbar.ctrl ul.nav .btn:hover { - background-color: #0500F0; } + 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: #0500F0; } + color: #000; } .urbit.navbar.ctrl .subnav ul.nav { height: 1.5rem; } @@ -435,11 +456,12 @@ img.logo.first { 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: #000; } + color: #B1B7BD; } .urbit.home.navbar.ctrl ul.nav li a { color: #f7f7f9; } @@ -495,31 +517,31 @@ img.logo.first { height: 6rem; margin: 1rem 0 0 1rem; } .h-arrow h1 { - color: #0500F0; + color: #000; display: inline-block; line-height: 4rem; } .h-arrow h1 code { background-color: transparent; - color: #0500F0; } + color: #000; } .footer { - margin-top: 3rem; + margin-top: 6rem; font-weight: 500; color: #B1B7BD; } .footer a { - color: #02D124; + color: #55595c; text-decoration: none; - border-bottom: 2px solid #02D124; + border-bottom: 2px solid #55595c; margin-left: .6rem; } .body[data-path^='/docs'] h1, .body[data-path^='/work'] h1 { - color: #0500F0; } + color: #000; } .body[data-path^='/docs'] h1 code, .body[data-path^='/work'] h1 code { background-color: transparent; - color: #0500F0; + color: #000; padding: 0; } .body[data-path^='/docs'] .book h2, @@ -528,25 +550,25 @@ img.logo.first { .body[data-path^='/docs'] .book h2 code, .body[data-path^='/work'] .book h2 code { - color: #0500F0; + color: #000; background-color: transparent; } .body[data-path^='/docs'] .book h2 a, .body[data-path^='/work'] .book h2 a { - color: #0500F0; } + color: #000; } .body[data-path^='/docs'] .book hr, .body[data-path^='/work'] .book hr { margin-bottom: 3rem; } .body[data-path^='/work'] h2 { - color: #0500F0; } + 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; } @@ -559,12 +581,31 @@ img.logo.first { margin-bottom: 0; } .body .urbit h1 { - color: #0500F0; + color: #000; line-height: 4rem; } .body .urbit a.green:hover { color: #02D124; } +.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 { @@ -576,23 +617,56 @@ img.logo.first { .body .urbit .image-fs { height: 44rem; - overflow: hidden; } - .body .urbit .image-fs h1 { - position: absolute; - line-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 img { - min-height: 44rem; - min-width: 100%; } .body .urbit .image-fs.first { margin-top: -9rem; } .body .urbit .slide { margin-bottom: 12rem; - font-weight: 500; position: relative; } .body .urbit .slide h1 { padding-bottom: 1rem; } @@ -607,7 +681,6 @@ img.logo.first { .body .urbit .slide .pair .image.left { padding-right: 5%; } .body .urbit .slide .pair .text { - font-size: 1.4rem; width: 75%; } .body .urbit .slide .pair .image { width: 20%; } @@ -624,14 +697,16 @@ img.logo.first { .body .urbit input.email, .body .urbit button.submit { - line-height: 2rem; + line-height: 1rem; padding: .6rem; border: 0; } .body .urbit input.email { + font-weight: 500; background-color: #B1B7BD; color: #fff; - margin-right: 1rem; } + margin-right: 1rem; + border: 3px solid #B1B7BD; } .body .urbit input.email::-moz-placeholder { color: #D2D2D2; } @@ -640,39 +715,25 @@ img.logo.first { color: #D2D2D2; } .body .urbit button.submit { - background-color: #02D124; - color: #fff; } + text-transform: none; + text-decoration: none; + border: 3px solid #000; + background-color: #fff; + font-weight: 500; + letter-spacing: 0; } -.body .urbit .road { - border-left: 0.3rem solid #02D124; - padding-left: 3rem; - padding-bottom: 2rem; } +.body .urbit .last a { + display: block; + font-weight: 500; + color: #B1B7BD; } -.body .urbit .road .step { - padding-top: 2rem; } - .body .urbit .road .step h2, - .body .urbit .road .step h3 { - display: inline-block; - padding-top: 0; - font-size: 1.5rem; } - .body .urbit .road .step h2 { - color: #02D124; - width: 2rem; - text-align: center; } - .body .urbit .road .step .dot { - display: inline-block; - width: 1rem; - height: 1rem; - border-radius: 50%; - border: 4px solid #B1B7BD; - background-color: #eceeef; - margin: -.5rem 2.65rem 0 -3.65rem; - vertical-align: middle; } - .body .urbit .road .step h3 { - color: #0500F0; - margin-left: 1rem; } - .body .urbit .road .step p { - margin-left: 3rem; } +.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 { @@ -803,14 +864,14 @@ img.logo.first { .body[data-path^='/docs'] .list h1, .body[data-path^='/work'] .list a, .body[data-path^='/work'] .list h1 { - color: #02D124; + color: #55595c; font-weight: 500; height: 2rem; display: inline; text-decoration: none; } .body[data-path^='/docs'] .list h1, .body[data-path^='/work'] .list h1 { - border-bottom: 2px solid #02D124; } + border-bottom: 2px solid #55595c; } .body[data-path^='/work'] .list.main a, .body[data-path^='/work'] .list.main h1 { @@ -837,7 +898,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 { @@ -859,6 +920,8 @@ img.logo.first { .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 #02D124; @@ -950,7 +1013,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 { diff --git a/web/tree/main.js b/web/tree/main.js index b3ec045fbd..e932b7da68 100644 --- a/web/tree/main.js +++ b/web/tree/main.js @@ -240,7 +240,7 @@ module.exports = function(queries, Child, load) { },{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":23,"./LoadComponent.coffee":11}],3:[function(require,module,exports){ -var Comments, TreeActions, a, clas, div, extras, h1, h3, img, input, load, p, query, reactify, recl, ref, rele, util; +var Comments, TreeActions, TreeStore, a, clas, div, extras, h1, h3, img, input, load, p, query, reactify, recl, ref, rele, util; clas = require('classnames'); @@ -252,6 +252,8 @@ reactify = require('./Reactify.coffee'); TreeActions = require('../actions/TreeActions.coffee'); +TreeStore = require('../stores/TreeStore.coffee'); + Comments = require('./CommentsComponent.coffee'); util = require('../utils/util.coffee'); @@ -373,13 +375,27 @@ extras = { footer: recl({ displayName: "Footer", render: function() { + var containerClas, footerClas; + containerClas = clas({ + footer: true, + container: this.props.container === 'false' + }); + footerClas = clas({ + 'col-md-12': this.props.container === 'false' + }); return div({ - className: "footer" - }, p({}, [ - "This page was served by an Urbit.", a({ - href: "mailto:urbit@urbit.org" - }, "urbit@urbit.org") - ])); + className: containerClas, + key: 'footer-container' + }, [ + div({ + className: footerClas, + key: 'footer-inner' + }, [ + "This page was served by an Urbit.", a({ + href: "mailto:urbit@urbit.org" + }, "urbit@urbit.org") + ]) + ]); } }) }; @@ -392,8 +408,24 @@ module.exports = query({ sein: 't' }, recl({ displayName: "Body", + stateFromStore: function() { + return { + curr: TreeStore.getCurr() + }; + }, + getInitialState: function() { + return this.stateFromStore(); + }, + _onChangeStore: function() { + if (this.isMounted()) { + return this.setState(this.stateFromStore()); + } + }, + componentDidMount: function() { + return TreeStore.addChangeListener(this._onChangeStore); + }, render: function() { - var bodyClas, extra, innerClas, outerClas, parts, ref1; + var bodyClas, extra, innerClas, parts, ref1; extra = (function(_this) { return function(name, props) { if (props == null) { @@ -407,9 +439,6 @@ module.exports = query({ } }; })(this); - outerClas = clas({ - container: this.props.meta.container !== 'false' - }); innerClas = { body: true }; @@ -429,17 +458,21 @@ module.exports = query({ }), reactify(this.props.body), extra('next', { dataPath: this.props.sein, curr: this.props.name - }), extra('comments'), extra('footer') + }), extra('comments'), extra('footer', { + container: this.props.meta.container + }) ]; if (this.props.meta.type === "post") { parts.splice(1, 0, extra('date'), extra('title'), extra('image'), extra('preview'), extra('author')); } return div({ - className: outerClas + dataPath: this.state.curr, + key: this.state.curr }, [ div({ className: innerClas, - 'data-path': this.props.path + 'data-path': this.props.path, + key: 'body-inner' }, [ div({ key: "body" + this.props.path, @@ -459,7 +492,7 @@ module.exports = query({ })); -},{"../actions/TreeActions.coffee":1,"../utils/util.coffee":25,"./Async.coffee":2,"./CommentsComponent.coffee":5,"./LoadComponent.coffee":11,"./Reactify.coffee":14,"classnames":26}],4:[function(require,module,exports){ +},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":23,"../utils/util.coffee":25,"./Async.coffee":2,"./CommentsComponent.coffee":5,"./LoadComponent.coffee":11,"./Reactify.coffee":14,"classnames":26}],4:[function(require,module,exports){ var div, recl, ref, textarea; recl = React.createClass; @@ -679,9 +712,12 @@ module.exports = recl({ onClick: function() { return this.submit(); }, - onKeyUp: function(e) { + onChange: function(e) { var email, valid; - email = this.$email.val(); + email = e.target.value; + this.setState({ + email: e.target.value + }); valid = email.indexOf('@') !== -1 && email.indexOf('.') !== -1 && email.length > 7 && email.split(".")[1].length > 1 && email.split("@")[0].length > 0 && email.split("@")[1].length > 4; this.$email.toggleClass('valid', valid); this.$email.removeClass('error'); @@ -711,19 +747,21 @@ module.exports = recl({ return this.$email = $('input.email'); }, render: function() { - var cont; + var cont, ref1, submit; if (this.state.submit === false) { + submit = (ref1 = this.props.submit) != null ? ref1 : "Sign up"; cont = [ input({ key: "field", className: "email", placeholder: "your@email.com", - onKeyUp: this.onKeyUp - }, this.state.email), button({ + onChange: this.onChange, + value: this.state.email + }), button({ key: "submit", className: "submit", onClick: this.onClick - }, "Sign up") + }, submit) ]; } else { cont = [ @@ -1364,9 +1402,7 @@ module.exports = query({ history.pushState({}, "", util.basepath(href_parts.join("#"))); } if (next !== this.props.path) { - ReactDOM.unmountComponentAtNode($('#body')[0]); - TreeActions.setCurr(next); - return rend(BodyComponent({}, ""), $('#body')[0]); + return TreeActions.setCurr(next); } }, reset: function() { @@ -1954,7 +1990,13 @@ module.exports = query({ }); return div({ className: treeClas - }, [head({}, ""), body({}, "")]); + }, [ + head({ + key: 'head-container' + }, ""), body({ + key: 'body-container' + }, "") + ]); } }));