diff --git a/services/web/app/views/layout-website-redesign.pug b/services/web/app/views/layout-website-redesign.pug new file mode 100644 index 0000000000..8f21e904cc --- /dev/null +++ b/services/web/app/views/layout-website-redesign.pug @@ -0,0 +1,23 @@ +extends ./layout-base + +include ./_mixins/formMessages + +block entrypointVar + - entrypoint = 'marketing' + +block body + if (typeof(suppressNavbar) == "undefined") + include layout/navbar-website-redesign + + block content + + if (typeof(suppressFooter) == "undefined") + if showThinFooter + include layout/footer-marketing + else + include layout/fat-footer-website-redesign + + if (typeof(suppressCookieBanner) == 'undefined') + include _cookie_banner + + != moduleIncludes("contactModal-marketing", locals) diff --git a/services/web/app/views/layout/fat-footer-website-redesign.pug b/services/web/app/views/layout/fat-footer-website-redesign.pug new file mode 100644 index 0000000000..f8f9f81994 --- /dev/null +++ b/services/web/app/views/layout/fat-footer-website-redesign.pug @@ -0,0 +1,79 @@ +footer.fat-footer.hidden-print.website-redesign + .fat-footer-container(role="navigation" aria-label=translate('footer_navigation')) + .fat-footer-sections(class=hideFatFooter ? 'hidden' : undefined) + .footer-section#footer-brand + a(href='/', aria-label=settings.appName).footer-brand + + .footer-section + h2.footer-section-heading #{translate('About')} + + ul.list-unstyled + li + a(href="/about") #{translate('footer_about_us')} + li + a(href="/about/values") #{translate('our_values')} + li + a(href="/about/careers") #{translate('careers')} + li + a(href="/for/press") !{translate('press_and_awards')} + li + a(href="/blog") #{translate('blog')} + + .footer-section + h2.footer-section-heading #{translate('learn')} + + ul.list-unstyled + li + a(href="/learn/latex/Learn_LaTeX_in_30_minutes") #{translate('latex_in_thirty_minutes')} + li + a(href="/latex/templates") #{translate('templates')} + li + a(href="/events/webinars") #{translate('webinars')} + li + a(href="/learn/latex/Tutorials") #{translate('tutorials')} + li + a(href="/learn/latex/Inserting_Images") #{translate('how_to_insert_images')} + li + a(href="/learn/latex/Tables") #{translate('how_to_create_tables')} + + .footer-section + h2.footer-section-heading !{translate('footer_plans_and_pricing')} + + ul.list-unstyled + li + a(href="/learn/how-to/Overleaf_premium_features") #{translate('premium_features')} + li + a(href="/user/subscription/plans?itm_referrer=footer-for-indv-groups") !{translate('for_individuals_and_groups')} + li + a(href="/for/enterprises") #{translate('for_enterprise')} + li + a(href="/for/universities") #{translate('for_universities')} + li + a(href="/user/subscription/plans?itm_referrer=footer-for-students#view=student") #{translate('for_students')} + + .footer-section + h2.footer-section-heading #{translate('get_involved')} + + ul.list-unstyled + li + a(href="/for/community/advisors") #{translate('become_an_advisor')} + li + a(href="https://forms.gle/67PSpN1bLnjGCmPQ9") #{translate('let_us_know_what_you_think')} + if user + li + a(href="/beta/participate") #{translate('join_beta_program')} + li + a(href="/user/bonus") #{translate('refer_a_friend')} + + .footer-section + h2.footer-section-heading #{translate('help')} + + ul.list-unstyled + li + a(href="/learn") #{translate('Documentation')} + li + a(href="/contact") #{translate('footer_contact_us')} + li + a(href="https://status.overleaf.com/") #{translate('website_status')} + + include fat-footer-base diff --git a/services/web/app/views/layout/navbar-website-redesign.pug b/services/web/app/views/layout/navbar-website-redesign.pug new file mode 100644 index 0000000000..be4c5ef8a2 --- /dev/null +++ b/services/web/app/views/layout/navbar-website-redesign.pug @@ -0,0 +1,178 @@ +nav.navbar.navbar-default.navbar-main.website-redesign + .container-fluid + .navbar-header + if (typeof(suppressNavbarRight) == "undefined") + button.navbar-toggle.collapsed( + type="button", + data-toggle="collapse", + data-target="[data-ol-navbar-main-collapse]" + aria-label="Toggle " + translate('navigation') + ) + i.fa.fa-bars(aria-hidden="true") + - var enableUpgradeButton = projectDashboardReact && usersBestSubscription && usersBestSubscription.type === 'free' + if (enableUpgradeButton) + a.btn.btn-primary.pull-right.me-2.visible-xs( + href="/user/subscription/plans" + event-tracking="upgrade-button-click" + event-tracking-mb="true" + event-tracking-label="upgrade" + event-tracking-trigger="click" + event-segmentation='{"source": "dashboard-top", "project-dashboard-react": "enabled", "is-dashboard-sidebar-hidden": "true", "is-screen-width-less-than-768px": "true"}' + ) #{translate("upgrade")} + if settings.nav.custom_logo + a(href='/', aria-label=settings.appName, style='background-image:url("'+settings.nav.custom_logo+'")').navbar-brand + else if (nav.title) + a(href='/', aria-label=settings.appName).navbar-title #{nav.title} + else + a(href='/', aria-label=settings.appName).navbar-brand + + - var canDisplayAdminMenu = hasAdminAccess() + - var canDisplayAdminRedirect = canRedirectToAdminDomain() + - var canDisplaySplitTestMenu = hasFeature('saas') && (canDisplayAdminMenu || (getSessionUser() && getSessionUser().staffAccess && (getSessionUser().staffAccess.splitTestMetrics || getSessionUser().staffAccess.splitTestManagement))) + - var canDisplaySurveyMenu = hasFeature('saas') && canDisplayAdminMenu + + if (typeof(suppressNavbarRight) == "undefined") + .navbar-collapse.collapse(data-ol-navbar-main-collapse) + ul.nav.navbar-nav.navbar-right + if (canDisplayAdminMenu || canDisplayAdminRedirect || canDisplaySplitTestMenu) + li.dropdown.subdued + a.dropdown-toggle( + href="#", + role="button", + aria-haspopup="true", + aria-expanded="false", + data-toggle="dropdown" + ) + | Admin + span.caret + ul.dropdown-menu + if canDisplayAdminMenu + li + a(href="/admin") Manage Site + li + a(href="/admin/user") Manage Users + li + a(href="/admin/project") Project URL Lookup + if canDisplayAdminRedirect + li + a(href=settings.adminUrl) Switch to Admin + if canDisplaySplitTestMenu + li + a(href="/admin/split-test") Manage Feature Flags + if canDisplaySurveyMenu + li + a(href="/admin/survey") Manage Surveys + + // loop over header_extras + each item in nav.header_extras + - + if ((item.only_when_logged_in && getSessionUser()) + || (item.only_when_logged_out && (!getSessionUser())) + || (!item.only_when_logged_out && !item.only_when_logged_in && !item.only_content_pages) + || (item.only_content_pages && (typeof(suppressNavContentLinks) == "undefined" || !suppressNavContentLinks)) + ){ + var showNavItem = true + } else { + var showNavItem = false + } + + if showNavItem + if item.dropdown + li.dropdown(class=item.class) + a.dropdown-toggle( + href="#", + role="button", + aria-haspopup="true", + aria-expanded="false", + data-toggle="dropdown" + ) + | !{translate(item.text)} + span.caret + ul.dropdown-menu + each child in item.dropdown + if child.divider + li.divider + else if child.isContactUs + li + a(data-ol-open-contact-form-modal="contact-us" href) + span(event-tracking="menu-clicked-contact" event-tracking-mb="true" event-tracking-trigger="click") + | #{translate("contact_us")} + else + li + if child.url + a( + href=child.url, + class=child.class, + event-tracking=child.event + event-tracking-mb="true" + event-tracking-trigger="click" + event-segmentation=child.eventSegmentation + ) !{translate(child.text)} + else + | !{translate(child.text)} + else + li(class=item.class) + if item.url + a( + href=item.url, + class=item.class, + event-tracking=item.event + event-tracking-mb="true" + event-tracking-trigger="click" + ) !{translate(item.text)} + else + | !{translate(item.text)} + + // logged out + if !getSessionUser() + // register link + if hasFeature('registration-page') + li + a( + href="/register" + event-tracking="menu-clicked-register" + event-tracking-action="clicked" + event-tracking-trigger="click" + event-tracking-mb="true" + event-segmentation={ page: currentUrl } + ) #{translate('register')} + + // login link + li + a( + href="/login" + event-tracking="menu-clicked-login" + event-tracking-action="clicked" + event-tracking-trigger="click" + event-tracking-mb="true" + event-segmentation={ page: currentUrl } + ) #{translate('log_in')} + + // projects link and account menu + if getSessionUser() + li + a(href="/project") #{translate('Projects')} + li.dropdown + a.dropdown-toggle( + href="#", + role="button", + aria-haspopup="true", + aria-expanded="false", + data-toggle="dropdown" + ) + | #{translate('Account')} + span.caret + ul.dropdown-menu + li + div.subdued #{getSessionUser().email} + li.divider.hidden-xs.hidden-sm + li + a(href="/user/settings") #{translate('Account Settings')} + if nav.showSubscriptionLink + li + a(href="/user/subscription") #{translate('subscription')} + li.divider.hidden-xs.hidden-sm + li + form(method="POST" action="/logout") + input(name='_csrf', type='hidden', value=csrfToken) + button.btn-link.text-left.dropdown-menu-button #{translate('log_out')} diff --git a/services/web/frontend/fonts/dm-mono.css b/services/web/frontend/fonts/dm-mono.css new file mode 100644 index 0000000000..b8f4775127 --- /dev/null +++ b/services/web/frontend/fonts/dm-mono.css @@ -0,0 +1,41 @@ +@font-face { + font-family: 'DM Mono'; + font-style: normal; + font-weight: 300; + src: url('dm-mono/DMMono-Light.woff2') format('woff2'), +} + +@font-face { + font-family: 'DM Mono'; + font-style: italic; + font-weight: 300; + src: url('dm-mono/DMMono-LightItalic.woff2') format('woff2'), +} + +@font-face { + font-family: 'DM Mono'; + font-style: normal; + font-weight: 400; + src: url('dm-mono/DMMono-Regular.woff2') format('woff2'), +} + +@font-face { + font-family: 'DM Mono'; + font-style: italic; + font-weight: 400; + src: url('dm-mono/DMMono-Italic.woff2') format('woff2'), +} + +@font-face { + font-family: 'DM Mono'; + font-style: normal; + font-weight: 500; + src: url('dm-mono/DMMono-Medium.woff2') format('woff2'), +} + +@font-face { + font-family: 'DM Mono'; + font-style: italic; + font-weight: 500; + src: url('dm-mono/DMMono-MediumItalic.woff2') format('woff2'), +} diff --git a/services/web/frontend/fonts/dm-mono/DMMono-Italic.woff2 b/services/web/frontend/fonts/dm-mono/DMMono-Italic.woff2 new file mode 100644 index 0000000000..54fdc20759 Binary files /dev/null and b/services/web/frontend/fonts/dm-mono/DMMono-Italic.woff2 differ diff --git a/services/web/frontend/fonts/dm-mono/DMMono-Light.woff2 b/services/web/frontend/fonts/dm-mono/DMMono-Light.woff2 new file mode 100644 index 0000000000..b350b1bd0a Binary files /dev/null and b/services/web/frontend/fonts/dm-mono/DMMono-Light.woff2 differ diff --git a/services/web/frontend/fonts/dm-mono/DMMono-LightItalic.woff2 b/services/web/frontend/fonts/dm-mono/DMMono-LightItalic.woff2 new file mode 100644 index 0000000000..5ea75ec232 Binary files /dev/null and b/services/web/frontend/fonts/dm-mono/DMMono-LightItalic.woff2 differ diff --git a/services/web/frontend/fonts/dm-mono/DMMono-Medium.woff2 b/services/web/frontend/fonts/dm-mono/DMMono-Medium.woff2 new file mode 100644 index 0000000000..aa607dee19 Binary files /dev/null and b/services/web/frontend/fonts/dm-mono/DMMono-Medium.woff2 differ diff --git a/services/web/frontend/fonts/dm-mono/DMMono-MediumItalic.woff2 b/services/web/frontend/fonts/dm-mono/DMMono-MediumItalic.woff2 new file mode 100644 index 0000000000..daa5a6c181 Binary files /dev/null and b/services/web/frontend/fonts/dm-mono/DMMono-MediumItalic.woff2 differ diff --git a/services/web/frontend/fonts/dm-mono/DMMono-Regular.woff2 b/services/web/frontend/fonts/dm-mono/DMMono-Regular.woff2 new file mode 100644 index 0000000000..c36abf67ba Binary files /dev/null and b/services/web/frontend/fonts/dm-mono/DMMono-Regular.woff2 differ diff --git a/services/web/frontend/fonts/dm-mono/OFL.txt b/services/web/frontend/fonts/dm-mono/OFL.txt new file mode 100644 index 0000000000..01450afc07 --- /dev/null +++ b/services/web/frontend/fonts/dm-mono/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2020 The DM Mono Project Authors (https://www.github.com/googlefonts/dm-mono) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/services/web/frontend/fonts/noto-sans.css b/services/web/frontend/fonts/noto-sans.css new file mode 100644 index 0000000000..dab5ad34c4 --- /dev/null +++ b/services/web/frontend/fonts/noto-sans.css @@ -0,0 +1,134 @@ +/* Noto Sans - Thin */ +@font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 100; + src: url('noto-sans/NotoSans-Thin.woff2') format('woff2'), +} + +@font-face { + font-family: 'Noto Sans'; + font-style: italic; + font-weight: 100; + src: url('noto-sans/NotoSans-ThinItalic.woff2') format('woff2'), +} + +/* Noto Sans - ExtraLight */ +@font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 200; + src: url('noto-sans/NotoSans-ExtraLight.woff2') format('woff2'), +} + +@font-face { + font-family: 'Noto Sans'; + font-style: italic; + font-weight: 200; + src: url('noto-sans/NotoSans-ExtraLightItalic.woff2') format('woff2'), +} + +/* Noto Sans - Light */ +@font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 300; + src: url('noto-sans/NotoSans-Light.woff2') format('woff2'), +} + +@font-face { + font-family: 'Noto Sans'; + font-style: italic; + font-weight: 300; + src: url('noto-sans/NotoSans-LightItalic.woff2') format('woff2'), +} + +/* Noto Sans - Regular */ +@font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 400; + src: url('noto-sans/NotoSans-Regular.woff2') format('woff2'), +} + +@font-face { + font-family: 'Noto Sans'; + font-style: italic; + font-weight: 400; + src: url('noto-sans/NotoSans-Italic.woff2') format('woff2'), +} + +/* Noto Sans - Medium */ +@font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 500; + src: url('noto-sans/NotoSans-Medium.woff2') format('woff2'), +} + +@font-face { + font-family: 'Noto Sans'; + font-style: italic; + font-weight: 500; + src: url('noto-sans/NotoSans-MediumItalic.woff2') format('woff2'), +} + +/* Noto Sans - SemiBold */ +@font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 600; + src: url('noto-sans/NotoSans-SemiBold.woff2') format('woff2'), +} + +@font-face { + font-family: 'Noto Sans'; + font-style: italic; + font-weight: 600; + src: url('noto-sans/NotoSans-SemiBoldItalic.woff2') format('woff2'), +} + +/* Noto Sans - Bold */ +@font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 700; + src: url('noto-sans/NotoSans-Bold.woff2') format('woff2'), +} + +@font-face { + font-family: 'Noto Sans'; + font-style: italic; + font-weight: 700; + src: url('noto-sans/NotoSans-BoldItalic.woff2') format('woff2'), +} + +/* Noto Sans - ExtraBold */ +@font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 800; + src: url('noto-sans/NotoSans-ExtraBold.woff2') format('woff2'), +} + +@font-face { + font-family: 'Noto Sans'; + font-style: italic; + font-weight: 800; + src: url('noto-sans/NotoSans-ExtraBoldItalic.woff2') format('woff2'), +} + +/* Noto Sans - Black */ +@font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 900; + src: url('noto-sans/NotoSans-Black.woff2') format('woff2'), +} + +@font-face { + font-family: 'Noto Sans'; + font-style: italic; + font-weight: 900; + src: url('noto-sans/NotoSans-BlackItalic.woff2') format('woff2'), +} diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-Black.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-Black.woff2 new file mode 100644 index 0000000000..694c461e38 Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-Black.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-BlackItalic.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-BlackItalic.woff2 new file mode 100644 index 0000000000..0f88a01f84 Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-BlackItalic.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-Bold.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-Bold.woff2 new file mode 100644 index 0000000000..c474ad1b6e Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-Bold.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-BoldItalic.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-BoldItalic.woff2 new file mode 100644 index 0000000000..3763e8a6cd Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-BoldItalic.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-ExtraBold.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-ExtraBold.woff2 new file mode 100644 index 0000000000..434453aa1b Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-ExtraBold.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-ExtraBoldItalic.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-ExtraBoldItalic.woff2 new file mode 100644 index 0000000000..7c01139d6f Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-ExtraBoldItalic.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-ExtraLight.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-ExtraLight.woff2 new file mode 100644 index 0000000000..96cb31586f Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-ExtraLight.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-ExtraLightItalic.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-ExtraLightItalic.woff2 new file mode 100644 index 0000000000..98347d9b35 Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-ExtraLightItalic.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-Italic.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-Italic.woff2 new file mode 100644 index 0000000000..b629234070 Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-Italic.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-Light.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-Light.woff2 new file mode 100644 index 0000000000..5b315070cd Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-Light.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-LightItalic.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-LightItalic.woff2 new file mode 100644 index 0000000000..ec0d926960 Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-LightItalic.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-Medium.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-Medium.woff2 new file mode 100644 index 0000000000..e1412c5109 Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-Medium.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-MediumItalic.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-MediumItalic.woff2 new file mode 100644 index 0000000000..ae058da378 Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-MediumItalic.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-Regular.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-Regular.woff2 new file mode 100644 index 0000000000..a6c6696bfc Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-Regular.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-SemiBold.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-SemiBold.woff2 new file mode 100644 index 0000000000..20d9d0d114 Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-SemiBold.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-SemiBoldItalic.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-SemiBoldItalic.woff2 new file mode 100644 index 0000000000..c861f2f71f Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-SemiBoldItalic.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-Thin.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-Thin.woff2 new file mode 100644 index 0000000000..f7ac466bff Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-Thin.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/NotoSans-ThinItalic.woff2 b/services/web/frontend/fonts/noto-sans/NotoSans-ThinItalic.woff2 new file mode 100644 index 0000000000..6e6a95426a Binary files /dev/null and b/services/web/frontend/fonts/noto-sans/NotoSans-ThinItalic.woff2 differ diff --git a/services/web/frontend/fonts/noto-sans/OFL.txt b/services/web/frontend/fonts/noto-sans/OFL.txt new file mode 100644 index 0000000000..90b7332683 --- /dev/null +++ b/services/web/frontend/fonts/noto-sans/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2015-2021 Google LLC. All Rights Reserved. + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/services/web/frontend/stylesheets/app/homepage.less b/services/web/frontend/stylesheets/app/homepage.less index 71c3634b41..5a42dbda8c 100644 --- a/services/web/frontend/stylesheets/app/homepage.less +++ b/services/web/frontend/stylesheets/app/homepage.less @@ -329,3 +329,135 @@ } } } + +.website-redesign { + .home-top { + padding-top: @header-height; + p { + margin: 0; + } + + .home-top-card { + margin-top: @margin-lg; + display: flex; + flex-direction: column; + align-items: center; + + .home-top-begin-text { + display: flex; + color: #5f5ff0; + font-size: 65px; + line-height: 80px; + font-family: 'DM Mono', monospace; + align-self: flex-start; + width: 100%; + + @media (max-width: @screen-sm-max) { + text-align: center; + flex-direction: column; + align-items: center; + } + } + + .home-top-parenthesis-text { + color: #bbdbb8; + font-size: 65px; + line-height: 80px; + } + } + } + + .home-registration { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 20px; + + .home-registration-sso { + display: flex; + gap: 16px; + + @media (max-width: @screen-sm-max) { + flex-direction: column; + width: 100%; + } + + .form-group { + .hp-login-btn { + width: 100%; + } + } + } + + .home-registration-separator { + margin: 0 0 4px; + color: @neutral-90; + + > span { + vertical-align: middle; + &::before, + &::after { + content: ''; + display: inline-block; + vertical-align: middle; + width: 196px; + height: 1px; + background-color: @neutral-20; + + @media (max-width: @screen-sm-max) { + flex-direction: column; + width: 100%; + width: 156px; + } + } + + &::before { + margin-right: 20px; + + @media (max-width: @screen-sm-max) { + margin-right: 5px; + } + } + + &::after { + margin-left: 20px; + + @media (max-width: @screen-sm-max) { + margin-left: 5px; + } + } + } + } + + .home-registration-password { + display: flex; + flex-direction: column; + + .home-registration-password-input { + display: flex; + flex-direction: row; + gap: 10px; + margin-bottom: 0; + } + } + + .home-registration-sign-up { + display: block; + margin-top: 10px; + width: 100%; + margin-bottom: 0; + + > button { + width: 100%; + } + } + + .tos-agreement-notice { + a { + color: @green-60; + text-decoration: underline; + font-weight: 400; + } + } + } +} diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less new file mode 100644 index 0000000000..dfde58a614 --- /dev/null +++ b/services/web/frontend/stylesheets/app/website-redesign.less @@ -0,0 +1,339 @@ +.website-redesign { + p, + h2, + h3, + a { + font-family: 'Noto Sans', sans-serif; + } + + h2 { + font-weight: 600; + font-size: 2.25rem; + line-height: 3rem; + margin-top: 0; + } + + h3 { + font-weight: 600; + } + + a { + font-weight: 600; + } + + .img-rounded { + // TODO: design specifies 'border-radius-large' which is 5px, but uses 16px + border-radius: 16px; + } + + .plans-cards { + @media (min-width: @screen-md-min) { + display: flex; /* equal heights */ + flex-wrap: wrap; + } + + .plans-card-container { + min-height: 348px; + + @media (max-width: @screen-sm-max) { + margin-bottom: 16px; + height: 398px; + } + } + + .plans-card { + border-radius: 8px; + padding: 0; + height: 100%; + + .plans-card-inner { + padding: 36px; + height: 100%; + display: flex; + flex-direction: column; + font-size: 16px; + + .plans-card-inner-title { + font-size: 20px; + font-weight: 600; + margin-top: 0; + } + + ul { + list-style-type: none; + padding: 0; + margin: 0; + + li { + margin-bottom: 8px; + } + } + + .plans-card-inner-footer { + margin-top: auto; + display: flex; + flex-direction: column; + gap: 12px; + } + } + + &.grey-border { + border: 2px solid #e7e9ee; + } + + // workaround for border that contains both linear-gradient and border radius + // https://stackoverflow.com/a/53037637 + &.blue-gradient-highlighted { + border: double 2px transparent; + border-radius: 8px; + background-image: linear-gradient(white, white), + linear-gradient(245.63deg, #214475 0%, #254c84 28.54%, #6597e0 96.69%); + background-origin: border-box; + background-clip: content-box, border-box; + + .plans-card-inner-title { + background: linear-gradient( + 245.63deg, + #214475 0%, + #254c84 28.54%, + #6597e0 96.69% + ); + background-clip: text; + color: transparent; + } + } + } + } + + .info-cards { + .info-card-container { + height: 348px; + margin-bottom: 16px; + + .info-card { + border-radius: 8px; + height: 100%; + box-shadow: 0px 2px 4px 0px #1e253029; + border-top: 8px solid #2f4858; + padding: 48px 40px 48px 40px; + } + } + } + + .features-card { + .features-card-image { + img.img-responsive { + width: 100%; + } + + @media (max-width: @screen-sm-max) { + margin-bottom: 50px; + } + } + + .features-card-description { + p { + margin-bottom: 10px; + } + + ul { + list-style-type: none; + padding: 0; + margin: 0; + + li { + margin-bottom: 8px; + } + } + + .premium-badge { + .premium-badge-img { + margin-left: 10px; + } + + @media (max-width: @screen-xs-max) { + display: flex; + .premium-badge-img { + width: 87px; + margin-left: auto; + } + } + } + } + } + + .top-image-cards { + .top-image-card { + > img.img-responsive { + width: 100%; + } + + .top-image-card-title { + font-size: 24px; + margin-top: 16px; + margin-bottom: 8px; + + a { + width: 100%; + color: @neutral-90; + display: inline-flex; + justify-content: space-between; + } + + i.material-symbols-rounded { + vertical-align: middle; + text-decoration: none; + } + } + + .top-image-card-text { + font-size: 16px; + } + + &:not(:last-of-type) { + @media (max-width: @screen-sm-max) { + margin-bottom: 40px; + } + } + } + } + + .cta-card { + display: flex; + flex-direction: column; + align-items: center; + padding: 64px; + background: #2f4858; + color: white; + border-radius: 8px; + + .cta-card-title { + font-size: 52px; + font-weight: 500; + font-family: 'DM Mono', monospace; + margin-bottom: 8px; + + span.purple-color { + color: #939aff; + } + + span.lime-color { + color: #7ee787; + } + } + + .cta-card-buttons { + margin-top: 24px; + display: flex; + gap: 12px; + } + } + + .testimonial-media { + border-radius: 24px; + + .testimonial-media-text-container { + display: flex; + flex-direction: column; + min-height: 352px; + background-color: #2f4858; + color: white; + border-top-left-radius: 24px; + border-top-right-radius: 0; + border-bottom-left-radius: 24px; + padding: 96px 64px; + + @media (max-width: @screen-sm-max) { + border-top-left-radius: 24px; + border-top-right-radius: 24px; + border-bottom-left-radius: 0; + min-height: 316px; + padding: 56px 24px; + } + + .testimonial-media-text { + margin-bottom: auto; + font-size: 28px; + font-weight: 600; + line-height: 38px; + + @media (max-width: @screen-sm-max) { + font-size: 24px; + line-height: 32px; + } + } + } + + .testimonial-media-video { + height: 100%; + min-height: 352px; + background-color: @neutral-20; + border-top-right-radius: 24px; + border-bottom-right-radius: 24px; + border-bottom-left-radius: 0; + + @media (max-width: @screen-sm-max) { + border-top-right-radius: 0; + border-bottom-right-radius: 24px; + border-bottom-left-radius: 24px; + } + } + } + + .mono-text { + font-family: 'DM Mono', monospace; + color: @green-60; + font-feature-settings: 'ss05'; + font-size: 1.125rem; + font-weight: 500; + line-height: 1.5rem; + margin: 0; + } + + .green-link { + color: @green-60; + + i.material-symbols-rounded { + vertical-align: middle; + padding-bottom: 3px; + font-size: 24px; + } + + &:hover { + color: @green-70; + .right-arrow { + background: @green-70; + } + } + } + + .btn-blue-gradient { + background: linear-gradient( + 245.63deg, + #214475 0%, + #254c84 28.54%, + #6597e0 96.69% + ); + color: white; + } + + .round-background { + border-radius: 50%; + font-size: 25px; + top: 4px; + vertical-align: middle; + margin-right: 8px; + } + + .green-round-background { + .round-background; + background: @green-10; + color: @green-40; + } + + .blue-round-background { + .round-background; + background: @blue-10; + color: @blue-40; + } +} diff --git a/services/web/frontend/stylesheets/components/footer.less b/services/web/frontend/stylesheets/components/footer.less index f083aadf9f..44635b2271 100644 --- a/services/web/frontend/stylesheets/components/footer.less +++ b/services/web/frontend/stylesheets/components/footer.less @@ -297,3 +297,18 @@ footer.site-footer { } } } + +.website-redesign { + &.fat-footer { + background: @white; + color: @neutral-90; + + a { + color: @neutral-90; + } + } + + .footer-brand { + background-image: @navbar-brand-image-url-website-redesign; + } +} diff --git a/services/web/frontend/stylesheets/components/navbar.less b/services/web/frontend/stylesheets/components/navbar.less index 0285586270..12728dcdbd 100755 --- a/services/web/frontend/stylesheets/components/navbar.less +++ b/services/web/frontend/stylesheets/components/navbar.less @@ -614,3 +614,66 @@ top: @navbar-default-padding-v; } } + +.website-redesign { + &.navbar-default { + background-color: @navbar-default-bg-website-redesign; + + .navbar-brand { + background-image: @navbar-brand-image-url-website-redesign; + } + + .navbar-text { + color: @navbar-default-color-website-redesign; + } + + .navbar-nav { + > li > a { + color: @navbar-default-link-color-website-redesign; + // border: 2px solid transparent; + font-size: @navbar-btn-font-size; // TODO + font-weight: @navbar-btn-font-weight; // TODO + line-height: @navbar-btn-line-height; // TODO + background-color: @navbar-default-link-bg; // TODO + + &:hover, + &:focus { + color: #fff; + background-color: @navbar-default-link-hover-bg; // TODO + // border: 2px solid @navbar-default-link-hover-color; // TODO + } + } + > .active > a { + &, + &:hover, + &:focus { + color: @navbar-default-link-active-color; // TODO + background-color: @navbar-default-link-active-bg; // TODO + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: @navbar-default-link-disabled-color; // TODO + background-color: @navbar-default-link-disabled-bg; // TODO + } + } + + > li.subdued > a { + color: @navbar-subdued-color-website-redesign; + &:hover, + &:focus { + color: @navbar-subdued-hover-color-website-redesign; + background-color: @navbar-subdued-hover-bg-website-redesign; + } + &:focus { + .tab-focus(); + } + @media (min-width: @grid-float-breakpoint) { + padding: @navbar-subdued-padding; + } + } + } + } +} diff --git a/services/web/frontend/stylesheets/core/scaffolding.less b/services/web/frontend/stylesheets/core/scaffolding.less index ec2932ad55..24c9410d4d 100755 --- a/services/web/frontend/stylesheets/core/scaffolding.less +++ b/services/web/frontend/stylesheets/core/scaffolding.less @@ -184,3 +184,7 @@ hr { .row-spaced-large { margin-top: @line-height-computed * 2; } + +.row-spaced-extra-large { + margin-top: @line-height-computed * 4; +} diff --git a/services/web/frontend/stylesheets/core/variables.less b/services/web/frontend/stylesheets/core/variables.less index 836f6fff39..5055197e28 100644 --- a/services/web/frontend/stylesheets/core/variables.less +++ b/services/web/frontend/stylesheets/core/variables.less @@ -47,6 +47,7 @@ @green-10: #ebf6ea; @green-20: #bbdbb8; @green-50: #138a07; +@green-60: #246b1e; @green-70: #1f5919; @green-30: #8cca86; @red: #a93529; diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less index 1838f52355..7e03976bc1 100644 --- a/services/web/frontend/stylesheets/main-style.less +++ b/services/web/frontend/stylesheets/main-style.less @@ -1,4 +1,6 @@ @import (less) '../fonts/lato.css'; +@import (less) '../fonts/dm-mono.css'; +@import (less) '../fonts/noto-sans.css'; @import (less) '../fonts/merriweather.css'; @import (less) '../fonts/source-code-pro.css'; @import (less) '../fonts/stix-two-math.css'; @@ -131,6 +133,7 @@ @import 'app/publisher-hub.less'; @import 'app/admin-hub.less'; @import 'app/import.less'; +@import 'app/website-redesign.less'; // Pages @import 'app/about.less'; @import 'app/blog-posts.less'; diff --git a/services/web/frontend/stylesheets/variables/all.less b/services/web/frontend/stylesheets/variables/all.less index b131d684c7..cd24257f20 100644 --- a/services/web/frontend/stylesheets/variables/all.less +++ b/services/web/frontend/stylesheets/variables/all.less @@ -389,11 +389,14 @@ @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @navbar-default-color: #fff; +@navbar-default-color-website-redesign: @neutral-90; @navbar-default-bg: @neutral-90; +@navbar-default-bg-website-redesign: @white; @navbar-default-border: transparent; // Navbar links @navbar-default-link-color: #fff; +@navbar-default-link-color-website-redesign: @neutral-90; @navbar-default-link-border-color: @navbar-default-link-color; @navbar-default-link-hover-color: @green; @navbar-default-link-hover-bg: @green; @@ -758,9 +761,13 @@ @navbar-subdued-padding: (@padding-base-vertical + 1) (@padding-base-horizontal + 1) (@padding-base-vertical + 2); @navbar-subdued-color: #fff; +@navbar-subdued-color-website-redesign: @neutral-90; @navbar-subdued-hover-bg: #fff; +@navbar-subdued-hover-bg-website-redesign: @neutral-90; @navbar-subdued-hover-color: @green; +@navbar-subdued-hover-color-website-redesign: @green; // TODO @navbar-brand-image-url: url(../../../public/img/ol-brand/overleaf-white.svg); +@navbar-brand-image-url-website-redesign: url(../../../public/img/ol-brand/overleaf.svg); @dropdown-divider-margin: 6px; @dropdown-item-padding: 4px 20px; diff --git a/services/web/public/img/website-redesign/lightning-round.svg b/services/web/public/img/website-redesign/lightning-round.svg new file mode 100644 index 0000000000..22bf78ddb3 --- /dev/null +++ b/services/web/public/img/website-redesign/lightning-round.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/services/web/public/img/website-redesign/premium-badge.svg b/services/web/public/img/website-redesign/premium-badge.svg new file mode 100644 index 0000000000..d0a0e64796 --- /dev/null +++ b/services/web/public/img/website-redesign/premium-badge.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/services/web/public/img/website-redesign/together-round.svg b/services/web/public/img/website-redesign/together-round.svg new file mode 100644 index 0000000000..727e0bede4 --- /dev/null +++ b/services/web/public/img/website-redesign/together-round.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/services/web/public/img/website-redesign/tool-round.svg b/services/web/public/img/website-redesign/tool-round.svg new file mode 100644 index 0000000000..6457fe0871 --- /dev/null +++ b/services/web/public/img/website-redesign/tool-round.svg @@ -0,0 +1,10 @@ + + + + + + + + + +