diff --git a/services/web/app/coffee/Features/StaticPages/StaticPagesRouter.coffee b/services/web/app/coffee/Features/StaticPages/StaticPagesRouter.coffee index a885825bf2..f543d20c2e 100644 --- a/services/web/app/coffee/Features/StaticPages/StaticPagesRouter.coffee +++ b/services/web/app/coffee/Features/StaticPages/StaticPagesRouter.coffee @@ -15,7 +15,7 @@ module.exports = webRouter.get '/style', HomeController.externalPage("style_guide", "Style Guide") webRouter.get '/jobs', HomeController.externalPage("jobs", "Jobs") - webRouter.get '/review-features', HomeController.externalPage("review-features-page", "Review features") + webRouter.get '/track-changes-and-comments-in-latex', HomeController.externalPage("review-features-page", "Review features") webRouter.get '/dropbox', HomeController.externalPage("dropbox", "Dropbox and ShareLaTeX") diff --git a/services/web/public/img/feature-page/intro.mp4 b/services/web/public/img/feature-page/intro.mp4 index ce7dc877da..888b99975d 100644 Binary files a/services/web/public/img/feature-page/intro.mp4 and b/services/web/public/img/feature-page/intro.mp4 differ diff --git a/services/web/public/stylesheets/app/review-features-page.less b/services/web/public/stylesheets/app/review-features-page.less index a38b54995a..cb3ce23919 100644 --- a/services/web/public/stylesheets/app/review-features-page.less +++ b/services/web/public/stylesheets/app/review-features-page.less @@ -22,7 +22,7 @@ // Typographical scale and basics. .rfp-h1 { font-size: @rfp-h1-size; - margin-bottom: 2em; + margin-bottom: 1.6em; color: inherit; } .rfp-h1-masthead { @@ -31,12 +31,12 @@ } .rfp-h2 { font-size: @rfp-h2-size; - margin-bottom: 2em; + margin-bottom: 1.6em; color: inherit; } .rfp-h3 { font-size: @rfp-h3-size; - margin-bottom: 2em; + margin-bottom: 1.6em; color: inherit; } .rfp-h3-cta { @@ -45,7 +45,7 @@ } .rfp-lead { font-size: @rfp-lead-size; - margin-bottom: 2em; + margin-bottom: 1.6em; max-width: 30em; margin-left: auto; margin-right: auto; @@ -62,7 +62,7 @@ } } .rfp-p { - margin-bottom: 2em; + margin-bottom: 1.6em; max-width: 30em; margin-left: auto; margin-right: auto; @@ -75,17 +75,14 @@ margin-right: initial; } } - .rfp-highlight, - .rfp-highlight-brand { + .rfp-highlight { font-weight: 700; } - .rfp-highlight-brand { - color: @rfp-sl-red; - } // Sections .rfp-section { padding: 30px; text-align: center; + overflow: hidden; @media (min-width: @screen-sm-min) { padding: 60px; } @@ -105,6 +102,7 @@ } .rfp-section-feature { display: flex; + align-items: center; color: @rfp-rp-blue-dark; background-color: @rfp-rp-blue-light; text-align: left; @@ -113,10 +111,20 @@ .rfp-feature-video-container { flex: 0 0 50%; } - .rfp-feature-video-container { + .rfp-feature-description-container { + padding-right: 1em; .rfp-section-feature-alt & { + padding-right: 0; + padding-left: 1em; + } + } + .rfp-feature-video-container { + padding-left: 1em; + .rfp-section-feature-alt & { + padding-left: 0; + padding-right: 1em; order: -1; - } + } } .rfp-section-feature-alt { color: #FFF; @@ -268,6 +276,29 @@ 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;