From e3ec3ea6388d8407f2cc167d203e5167adb0ffb9 Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Sun, 11 Oct 2015 23:17:56 -0700 Subject: [PATCH] merging styles --- pub/tree/src/css/leads.styl | 142 +++++++++++++ pub/tree/src/css/main.css | 199 ++++++++++++++++++ pub/tree/src/css/main.styl | 3 + pub/tree/src/css/posts.styl | 52 +++++ .../src/js/components/BodyComponent.coffee | 11 +- pub/tree/src/js/main.js | 4 + 6 files changed, 410 insertions(+), 1 deletion(-) create mode 100644 pub/tree/src/css/leads.styl create mode 100644 pub/tree/src/css/posts.styl diff --git a/pub/tree/src/css/leads.styl b/pub/tree/src/css/leads.styl new file mode 100644 index 000000000..54ab5a454 --- /dev/null +++ b/pub/tree/src/css/leads.styl @@ -0,0 +1,142 @@ +#cont.lead + #body + margin-top 3rem + margin-top 0 + + h1 + margin-top 1rem + &.fold + margin-top 6rem + &.leader + margin-left -3rem + + h1.leader, + img.logo + vertical-align middle + line-height 2rem + + img + &.logo + margin-right 1rem + + & + .list li, + .list li a, + .list li h1, + font-size 1.6rem + line-height 2.6rem + + a + line-height 1.6rem + border-bottom 3px solid #000 + line-height 1rem + + .footer + margin 4rem 0 4rem 0 + font-weight 500 + color #ccc + p + margin 0 + + input.email + border-radius 0 + font inherit + font-family 'scp' + font-weight 300 + line-height 2rem + min-width 2rem + border 0 + outline 0 + background-color transparent + border-bottom 3px dotted #000 + margin-right 1rem + display inline-block + &.valid + color #99F27C + &.error + color #F74040 + + .email:empty:not(:focus):before + content attr(data-ph) + + ::-webkit-input-placeholder + color #e6e7e8 + + :-moz-placeholder + color #e6e7e8 + + ::-moz-placeholder + color #e6e7e8 + + :-ms-input-placeholder + color #e6e7e8 + + button + &.submit + font inherit + border 0 + background-color #fff + border-bottom 3px solid #000 + font-size 1.6rem + line-height 1.6rem + display inline-block + text-align left + margin-top 1rem + height 2rem + padding 0 .6rem + + li + &::before + content '' + padding-right none + + .list + li + margin-bottom 1rem + a + text-transform none + + .list li, + .list li a, + .list li h1 + white-space normal + letter-spacing 0 + + .list li a > div div, + .list li a > div p + display block + margin-left 0 + + .date + font-weight 400 + + .date, + div.footer + font-family 'scp' + font-size .7rem + +@media only screen and (min-width: 320px) and (max-width: 1024px) + #cont.lead + top 0rem + font-size 1rem + line-height 1.6rem + + img.logo + display block + margin-bottom 1rem + + h1.leader, + h1.fold + font-size 1.6rem + margin-left 0 + + .list li, + .list li a, + .list li h1, + font-size 1rem + line-height 1.6rem + + .date, + div.footer + font-size .6rem + diff --git a/pub/tree/src/css/main.css b/pub/tree/src/css/main.css index ae9c3f944..e6f57ded5 100644 --- a/pub/tree/src/css/main.css +++ b/pub/tree/src/css/main.css @@ -501,6 +501,205 @@ div.toc h1.t { .warning.w { width: auto; } +h1.lead { + margin-top: 1rem; + margin-bottom: 6rem; + font-size: 1.6rem; + line-height: 2rem; + margin-bottom: 3rem; +} +h2 { + margin-top: 3rem; +} +h2.date { + margin-top: 0; + line-height: 0.7rem; +} +#nav #sibs { + width: 11rem; +} +#nav #sibs > div { + margin-bottom: 0.6rem; + height: auto; + margin-bottom: 4px; + height: 20px; +} +#nav a { + white-space: normal; + border: none; + white-space: nowrap; + border-bottom: 1px solid #000; +} +.date { + font-weight: 400; + font-family: 'scp'; + font-size: 0.7rem; +} +@media only screen and (min-width: 320px) and (max-width: 1024px) { + #cont { + top: 2rem; + } + h1.lead { + font-size: 1.6rem; + line-height: 2rem; + margin-bottom: 3rem; + } + #nav #sibs { + width: 11rem; + } + #nav #sibs > div { + margin-bottom: 4px; + height: 20px; + } + #nav a { + white-space: nowrap; + border-bottom: 1px solid #000; + } +} +#cont.lead #body { + margin-top: 3rem; + margin-top: 0; +} +#cont.lead h1 { + margin-top: 1rem; +} +#cont.lead h1.fold { + margin-top: 6rem; +} +#cont.lead h1.leader { + margin-left: -3rem; +} +#cont.lead h1.leader, +#cont.lead img.logo { + vertical-align: middle; + line-height: 2rem; +} +#cont.lead img.logo { + margin-right: 1rem; +} +#cont.lead, +#cont.lead .list li, +#cont.lead .list li a, +#cont.lead .list li h1 { + font-size: 1.6rem; + line-height: 2.6rem; +} +#cont.lead a { + line-height: 1.6rem; + border-bottom: 3px solid #000; + line-height: 1rem; +} +#cont.lead .footer { + margin: 4rem 0 4rem 0; + font-weight: 500; + color: #ccc; +} +#cont.lead .footer p { + margin: 0; +} +#cont.lead input.email { + border-radius: 0; + font: inherit; + font-family: 'scp'; + font-weight: 300; + line-height: 2rem; + min-width: 2rem; + border: 0; + outline: 0; + background-color: transparent; + border-bottom: 3px dotted #000; + margin-right: 1rem; + display: inline-block; +} +#cont.lead input.email.valid { + color: #99f27c; +} +#cont.lead input.email.error { + color: #f74040; +} +#cont.lead .email:empty:not(:focus):before { + content: attr(data-ph); +} +#cont.lead ::-webkit-input-placeholder { + color: #e6e7e8; +} +#cont.lead :-moz-placeholder { + color: #e6e7e8; +} +#cont.lead ::-moz-placeholder { + color: #e6e7e8; +} +#cont.lead :-ms-input-placeholder { + color: #e6e7e8; +} +#cont.lead button.submit { + font: inherit; + border: 0; + background-color: #fff; + border-bottom: 3px solid #000; + font-size: 1.6rem; + line-height: 1.6rem; + display: inline-block; + text-align: left; + margin-top: 1rem; + height: 2rem; + padding: 0 0.6rem; +} +#cont.lead li::before { + content: ''; + padding-right: none; +} +#cont.lead .list li { + margin-bottom: 1rem; +} +#cont.lead .list li a { + text-transform: none; +} +#cont.lead .list li, +#cont.lead .list li a, +#cont.lead .list li h1 { + white-space: normal; + letter-spacing: 0; +} +#cont.lead .list li a > div div, +#cont.lead .list li a > div p { + display: block; + margin-left: 0; +} +#cont.lead .date { + font-weight: 400; +} +#cont.lead .date, +#cont.lead div.footer { + font-family: 'scp'; + font-size: 0.7rem; +} +@media only screen and (min-width: 320px) and (max-width: 1024px) { + #cont.lead { + top: 0rem; + font-size: 1rem; + line-height: 1.6rem; + } + #cont.lead img.logo { + display: block; + margin-bottom: 1rem; + } + #cont.lead h1.leader, + #cont.lead h1.fold { + font-size: 1.6rem; + margin-left: 0; + } + #cont.lead .list li, + #cont.lead .list li a, + #cont.lead .list li h1 { + font-size: 1rem; + line-height: 1.6rem; + } + #cont.lead .date, + #cont.lead div.footer { + font-size: 0.6rem; + } +} @media only screen and (max-width: 1170px) { #nav, #nav > div, diff --git a/pub/tree/src/css/main.styl b/pub/tree/src/css/main.styl index 60f2f6d92..55b271f0a 100644 --- a/pub/tree/src/css/main.styl +++ b/pub/tree/src/css/main.styl @@ -429,4 +429,7 @@ div.toc .warning.w width auto +@import 'posts' +@import 'leads' + @import 'mobile' diff --git a/pub/tree/src/css/posts.styl b/pub/tree/src/css/posts.styl new file mode 100644 index 000000000..976791643 --- /dev/null +++ b/pub/tree/src/css/posts.styl @@ -0,0 +1,52 @@ +h1 + &.lead + margin-top 1rem + margin-bottom 6rem + font-size 1.6rem + line-height 2rem + margin-bottom 3rem + +h2 + margin-top 3rem + &.date + margin-top 0 + line-height .7rem + +#nav + #sibs + width 11rem + & > div + margin-bottom .6rem + height auto + margin-bottom 4px + height 20px + a + white-space normal + border none + white-space nowrap + border-bottom 1px solid #000 + +.date + font-weight 400 + font-family 'scp' + font-size .7rem + +@media only screen and (min-width: 320px) and (max-width: 1024px) + #cont + top 2rem + + h1 + &.lead + font-size 1.6rem + line-height 2rem + margin-bottom 3rem + + #nav + #sibs + width 11rem + & > div + margin-bottom 4px + height 20px + a + white-space nowrap + border-bottom 1px solid #000 \ No newline at end of file diff --git a/pub/tree/src/js/components/BodyComponent.coffee b/pub/tree/src/js/components/BodyComponent.coffee index 0fe120a04..dfbdd5260 100644 --- a/pub/tree/src/js/components/BodyComponent.coffee +++ b/pub/tree/src/js/components/BodyComponent.coffee @@ -6,4 +6,13 @@ recl = React.createClass module.exports = query {body:'r',path:'t',meta:'j'}, recl displayName: "Body" - render: -> (div {}, (div {id:'body',key:"body"+@props.path}, reactify @props.body)) + render: -> + $("#cont").attr 'class','' + if @props.meta.layout + $("#cont").attr 'class',@props.meta.layout.replace /,/g," " + (div {}, + (div { + id:'body', + key:"body"+@props.path}, + reactify @props.body) + ) diff --git a/pub/tree/src/js/main.js b/pub/tree/src/js/main.js index 169cb08ff..d09b325e8 100644 --- a/pub/tree/src/js/main.js +++ b/pub/tree/src/js/main.js @@ -414,6 +414,10 @@ module.exports = query({ }, recl({ displayName: "Body", render: function() { + $("#cont").attr('class', ''); + if (this.props.meta.layout) { + $("#cont").attr('class', this.props.meta.layout.replace(/,/g, " ")); + } return div({}, div({ id: 'body', key: "body" + this.props.path