diff --git a/services/web/app/coffee/Features/StaticPages/StaticPagesRouter.coffee b/services/web/app/coffee/Features/StaticPages/StaticPagesRouter.coffee index f1f55814c7..f543d20c2e 100644 --- a/services/web/app/coffee/Features/StaticPages/StaticPagesRouter.coffee +++ b/services/web/app/coffee/Features/StaticPages/StaticPagesRouter.coffee @@ -15,6 +15,8 @@ module.exports = webRouter.get '/style', HomeController.externalPage("style_guide", "Style Guide") webRouter.get '/jobs', HomeController.externalPage("jobs", "Jobs") + webRouter.get '/track-changes-and-comments-in-latex', HomeController.externalPage("review-features-page", "Review features") + webRouter.get '/dropbox', HomeController.externalPage("dropbox", "Dropbox and ShareLaTeX") webRouter.get '/university', UniversityController.getIndexPage diff --git a/services/web/public/img/feature-page/courtney-gibbons.jpg b/services/web/public/img/feature-page/courtney-gibbons.jpg new file mode 100644 index 0000000000..ae7d769ad5 Binary files /dev/null and b/services/web/public/img/feature-page/courtney-gibbons.jpg differ diff --git a/services/web/public/img/feature-page/feat-accept.mp4 b/services/web/public/img/feature-page/feat-accept.mp4 new file mode 100644 index 0000000000..88285975ff Binary files /dev/null and b/services/web/public/img/feature-page/feat-accept.mp4 differ diff --git a/services/web/public/img/feature-page/feat-changes.mp4 b/services/web/public/img/feature-page/feat-changes.mp4 new file mode 100644 index 0000000000..8cced26501 Binary files /dev/null and b/services/web/public/img/feature-page/feat-changes.mp4 differ diff --git a/services/web/public/img/feature-page/feat-discuss.mp4 b/services/web/public/img/feature-page/feat-discuss.mp4 new file mode 100644 index 0000000000..bdb5c952b6 Binary files /dev/null and b/services/web/public/img/feature-page/feat-discuss.mp4 differ diff --git a/services/web/public/img/feature-page/feat-todos.mp4 b/services/web/public/img/feature-page/feat-todos.mp4 new file mode 100644 index 0000000000..4e5d1bf452 Binary files /dev/null and b/services/web/public/img/feature-page/feat-todos.mp4 differ diff --git a/services/web/public/img/feature-page/intro.mp4 b/services/web/public/img/feature-page/intro.mp4 new file mode 100644 index 0000000000..e36e1c84bf Binary files /dev/null and b/services/web/public/img/feature-page/intro.mp4 differ diff --git a/services/web/public/img/feature-page/joanna-ellis-monaghan.jpg b/services/web/public/img/feature-page/joanna-ellis-monaghan.jpg new file mode 100644 index 0000000000..c5d85b01bb Binary files /dev/null and b/services/web/public/img/feature-page/joanna-ellis-monaghan.jpg differ diff --git a/services/web/public/img/feature-page/pamela-marcum.jpg b/services/web/public/img/feature-page/pamela-marcum.jpg new file mode 100644 index 0000000000..66741607d1 Binary files /dev/null and b/services/web/public/img/feature-page/pamela-marcum.jpg differ diff --git a/services/web/public/img/feature-page/user-caltech.png b/services/web/public/img/feature-page/user-caltech.png new file mode 100644 index 0000000000..da2c7d27d8 Binary files /dev/null and b/services/web/public/img/feature-page/user-caltech.png differ diff --git a/services/web/public/img/feature-page/user-chalmers.png b/services/web/public/img/feature-page/user-chalmers.png new file mode 100644 index 0000000000..9756dd1132 Binary files /dev/null and b/services/web/public/img/feature-page/user-chalmers.png differ diff --git a/services/web/public/img/feature-page/user-deepmind.png b/services/web/public/img/feature-page/user-deepmind.png new file mode 100644 index 0000000000..6ef1622055 Binary files /dev/null and b/services/web/public/img/feature-page/user-deepmind.png differ diff --git a/services/web/public/img/feature-page/user-nasa-jpl.png b/services/web/public/img/feature-page/user-nasa-jpl.png new file mode 100644 index 0000000000..2fcbf3b622 Binary files /dev/null and b/services/web/public/img/feature-page/user-nasa-jpl.png differ diff --git a/services/web/public/img/logo-white@2x.png b/services/web/public/img/logo-white@2x.png new file mode 100644 index 0000000000..8bf336e4a3 Binary files /dev/null and b/services/web/public/img/logo-white@2x.png differ diff --git a/services/web/public/stylesheets/app/review-features-page.less b/services/web/public/stylesheets/app/review-features-page.less new file mode 100644 index 0000000000..6497dbfad5 --- /dev/null +++ b/services/web/public/stylesheets/app/review-features-page.less @@ -0,0 +1,487 @@ +@rfp-h1-size: 2.442em; +@rfp-h2-size: 1.953em; +@rfp-h3-size: 1.563em; +@rfp-lead-size: 1.25em; + +@rfp-sl-red: @red; +@rfp-rp-blue: @rp-type-blue; + +@rfp-rp-blue-light: #F8F9FD; +@rfp-rp-blue-dark: shade(@rfp-rp-blue, 50%); +@rfp-rp-blue-darker: shade(@rfp-rp-blue, 65%); +@rfp-rp-blue-darkest: shade(@rfp-rp-blue, 75%); + +@rfp-card-shadow: 0 0 30px 5px rgba(0, 0, 0, .3); +@rfp-border-radius: 5px; + +@rfp-header-height: 80px; +@rfp-header-height-collapsed: 50px; + +.rfp-main { + background-color: @rfp-rp-blue-dark; + color: #FFF; + font-size: 18px; + min-width: 240px; +} + + // Typographical scale and basics. + .rfp-h1 { + font-size: @rfp-h2-size; + margin-bottom: 1.6em; + color: inherit; + @media (min-width: @screen-xs-min) { + font-size: @rfp-h1-size; + } + } + .rfp-h1-masthead { + color: #FFF; + margin-bottom: 1em; + } + .rfp-h2 { + font-size: @rfp-h2-size; + margin-bottom: 1.6em; + color: inherit; + } + .rfp-h3 { + font-size: @rfp-h3-size; + margin-bottom: 1.6em; + color: inherit; + } + .rfp-h3-cta { + margin-top: 0; + margin-bottom: 40px; + } + .rfp-lead { + margin-bottom: 1.6em; + max-width: 30em; + margin-left: auto; + margin-right: auto; + font-weight: 300; + @media (min-width: @screen-xs-min) { + font-size: @rfp-lead-size; + } + } + .rfp-lead-cta { + margin-top: 0; + margin-bottom: 40px; + } + .rfp-lead-strong { + font-weight: 700; + .rfp-section-masthead & { + margin-bottom: 0; + } + } + .rfp-p { + margin-bottom: 1.6em; + max-width: 30em; + margin-left: auto; + margin-right: auto; + font-weight: 300; + .rfp-section-feature & { + margin-left: initial; + } + .rfp-section-feature-alt & { + margin-left: auto; + margin-right: initial; + } + } + .rfp-highlight { + font-weight: 700; + } + // Sections + .rfp-header { + position: fixed; + top: 0; + width: 100%; + z-index: 2; + height: @rfp-header-height; + transition: height .2s; + background-color: fade(@rfp-rp-blue-darkest, 90%); + padding: 10px 20px; + min-width: 320px; + @media (min-width: @screen-xs-min) { + padding-left: 30px; + padding-right: 30px; + } + @media (min-width: @screen-sm-min) { + padding-left: 60px; + padding-right: 60px; + } + .rfp-main-header-collapsed & { + height: @rfp-header-height-collapsed; + } + } + .rfp-header-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + max-width: @container-large-desktop; + height: 100%; + margin: auto; + } + .rfp-header-logo { + height: 15px; + @media (min-width: @screen-xs-min) { + height: 21px; + } + } + .rfp-section { + padding: 30px 20px; + text-align: center; + overflow: hidden; + @media (min-width: @screen-xs-min) { + padding: 30px; + } + @media (min-width: @screen-sm-min) { + padding: 60px; + } + } + .rfp-section-masthead { + color: #FFF; + background-size: cover; + background-position: center; + background-color: @rfp-rp-blue-darker; + padding-top: @rfp-header-height; + .rfp-lead { + opacity: 0; + transition: opacity 0.8s ease; + } + &.rfp-section-masthead-in { + .rfp-lead { + opacity: 1; + } + } + } + .rfp-section-blockquote { + position: relative; + padding-top: 30px; + padding-bottom: 30px; + background-color: @rfp-sl-red; + box-shadow: @rfp-card-shadow; + } + .rfp-section-feature { + display: block; + color: @rfp-rp-blue-dark; + background-color: @rfp-rp-blue-light; + text-align: left; + @media (min-width: @screen-sm-min) { + .rfp-section-wrapper { + display: flex; + align-items: center; + } + } + } + .rfp-feature-description-container, + .rfp-feature-video-container { + flex: 0 0 50%; + } + .rfp-feature-description-container { + @media (min-width: @screen-sm-min) { + padding-right: 1em; + .rfp-section-feature-alt & { + padding-right: 0; + padding-left: 1em; + } + } + } + .rfp-feature-video-container { + @media (min-width: @screen-sm-min) { + padding-left: 1em; + .rfp-section-feature-alt & { + padding-left: 0; + padding-right: 1em; + order: -1; + } + } + } + .rfp-section-feature-alt { + color: #FFF; + background-color: transparent; + @media (min-width: @screen-sm-min) { + text-align: right; + } + } + .rfp-section-testimonials { + background-color: @rfp-rp-blue-darkest; + } + .rfp-section-final { + background-color: @rfp-rp-blue-darker; + } + .rfp-section-wrapper { + max-width: @container-large-desktop; + margin: 0 auto; + } + // Elements + .rfp-h1-masthead-portion { + display: inline-block; + transform: translate(150px, 0); + opacity: 0; + transition: transform 0.8s ease 0s, opacity 0.8s ease 0s; + &:nth-child(2) { + transition-delay: 0.5s, 0.5s; + } + &:nth-child(3) { + transition-delay: 0.5s, 0.5s; + } + &:nth-child(4) { + transition-delay: 1s, 1s; + } + &:nth-child(5) { + transition-delay: 1s, 1s; + } + + .rfp-section-masthead-in & { + transform: translate(0, 0); + opacity: 1; + } + } + .rfp-video { + max-width: 100%; + box-shadow: @rfp-card-shadow; + border-radius: @rfp-border-radius; + } + .rfp-video-masthead { + width: 270px; + height: 163px; + margin-bottom: 2em; + transform: translate(0, 100px); + opacity: 0; + transition: transform 0.8s ease 1s, opacity 0.8s ease 1s; + box-shadow: none; + max-width: none; + + @media (min-width: @screen-xs-min) { + width: 400px; + height: 241px; + } + @media (min-width: 600px) { + width: 525px; + height: 316px; + } + @media (min-width: @screen-sm-min) { + width: 633px; + height: 381px; + } + @media (min-width: @screen-sm-min) { + width: 697px; + height: 420px; + } + .rfp-section-masthead-in & { + transform: translate(0, 0); + opacity: 1; + box-shadow: @rfp-card-shadow; + } + } + .rfp-video-anim { + transition: transform 0.8s ease, opacity 0.8s ease; + transform: translate(100%, 0); + opacity: 0; + } + .rfp-video-anim-alt { + transform: translate(-100%, 0); + } + .rfp-video-anim-in { + transform: translate(0, 0); + opacity: 1; + } + .rfp-quote-section { + @media (min-width: @screen-md-min) { + display: flex; + } + } + .rfp-quote { + display: block; + width: 100%; + padding: 20px 40px; + border-left: 0; + max-width: 30em; + font-size: @rfp-lead-size; + quotes: "\201C" "\201D"; + box-shadow: @rfp-card-shadow; + border-radius: @rfp-border-radius; + background-color: #FFF; + color: @rfp-rp-blue-dark; + font-size: 1em; + margin: 0 auto 20px; + + @media (min-width: @screen-xs-min) { + font-size: @rfp-lead-size; + } + + @media (min-width: @screen-md-min) { + display: flex; + flex-direction: column; + justify-content: space-between; + flex: 0 1 50%; + margin-right: 20px; + } + // Override weird Boostrap default. + p { + display: block; + } + &:last-of-type { + @media (min-width: @screen-md-min) { + margin-right: 0; + } + } + &::before { + content: none; + } + } + .rfp-quote-main { + display: block; + max-width: none; + border-left: 0; + margin: 0 auto; + padding: 0; + quotes: "\201C" "\201D"; + font-size: @rfp-lead-size; + @media (min-width: @screen-md-min) { + display: flex; + } + // Override weird Boostrap default. + p { + display: block; + } + &::before { + content: none; + } + } + .rfp-quoted-text { + position: relative; + display: inline-block; + font-family: @font-family-serif; + font-style: italic; + text-align: left; + margin: 0 0 40px 0; + &::before { + content: open-quote; + display: block; + position: absolute; + font-family: @font-family-serif; + font-size: @rfp-lead-size; + line-height: inherit; + color: inherit; + left: -0.75em; + } + .rfp-quote-main & { + @media (min-width: @screen-md-min) { + flex: 1 1 70%; + margin: auto 40px auto auto; + } + } + } + .rfp-quoted-person { + display: inline-block; + font-size: .8em; + .rfp-quote-main & { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 30%; + } + } + .rfp-quoted-person-name { + margin: 0; + } + .rfp-quoted-person-affil { + margin: 0; + font-size: .8em; + &:hover, + &:focus { + text-decoration: none; + cursor: pointer; + } + .rfp-quote-main & { + color: #FFF; + &:hover, + &:focus { + color: #FFF; + } + } + } + .rfp-quoted-person-photo { + border-radius: 3em; + width: 6em; + margin-bottom: 20px; + .rfp-quote-main & { + margin-bottom: 0; + margin-right: 20px; + } + } + .rfp-users { + display: flex; + flex-wrap: wrap; + margin: 0 1em 2em; + @media (min-width: @screen-md-min) { + flex-wrap: nowrap; + align-items: center; + } + } + .rfp-user-container { + flex: 0 0 100%; + padding: 10px; + @media (min-width: @screen-xs-min) { + flex-basis: 50%; + } + @media (min-width: @screen-md-min) { + flex-basis: 25%; + padding: 20px; + } + } + .rfp-user-logo { + max-width: 100%; + } + .rfp-cta-container { + max-width: 40em; + margin: 0 auto; + padding: 40px; + background-color: #FFF; + color: @rfp-rp-blue-dark; + box-shadow: @rfp-card-shadow; + border-radius: @rfp-border-radius; + } + .rfp-cta { + display: inline-block; + background-color: @rfp-sl-red; + color: #FFF; + font-size: @rfp-h3-size; + border-radius: @rfp-border-radius; + padding: .75em; + @media (min-width: @screen-xs-min) { + padding: .75em 1.5em; + } + &:hover, + &:focus { + color: #FFF; + text-decoration: none; + outline: 0; + .rfp-cta-main { + transform: translate(0, -30%); + } + .rfp-cta-extra { + opacity: 1; + transform: translate(-50%, -40%); + } + } + } + + .rfp-cta-header { + font-size: 1em; + padding: .2em 1em; + } + .rfp-cta-main { + display: block; + transition: transform 0.25s; + transform: translate(0, 0); + } + .rfp-cta-extra { + display: block; + position: absolute; + left: 50%; + text-transform: uppercase; + transition: opacity 0.25s, transform 0.25s; + transform: translate(-50%, 100%); + opacity: 0; + font-size: 0.5em; + } \ No newline at end of file diff --git a/services/web/public/stylesheets/core/variables.less b/services/web/public/stylesheets/core/variables.less index a642ab97bc..176843f241 100755 --- a/services/web/public/stylesheets/core/variables.less +++ b/services/web/public/stylesheets/core/variables.less @@ -50,7 +50,8 @@ //## Font, line-height, and color for body text, headings, and more. @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700); -@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,600,700); +//@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,600,700); +@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i); @font-family-sans-serif: "Open Sans", sans-serif; @font-family-serif: "PT Serif", serif; diff --git a/services/web/public/stylesheets/style.less b/services/web/public/stylesheets/style.less index 61d5199773..2ab13566ad 100755 --- a/services/web/public/stylesheets/style.less +++ b/services/web/public/stylesheets/style.less @@ -78,6 +78,7 @@ @import "app/subscription.less"; @import "app/sprites.less"; @import "app/invite.less"; +@import "app/review-features-page.less"; @import "../js/libs/pdfListView/TextLayer.css"; @import "../js/libs/pdfListView/AnnotationsLayer.css";