mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
[web] Implement homepage redesign (#15905)
* Implement homepage redesign for large screen width * Implement the UI of `new-design-registration` variant of the homepage redesign * Add quick placeholder/template for the website-redesign header/footer Co-authored-by: Thomas Mees <thomas.mees@overleaf.com> GitOrigin-RevId: 8cff6def8aa560f2e11230dae264cb19feede054
This commit is contained in:
M Fahru
Copybot
parent
f37cc887e3
commit
77227087e9
43 changed files with 1247 additions and 0 deletions
23
services/web/app/views/layout-website-redesign.pug
Normal file
23
services/web/app/views/layout-website-redesign.pug
Normal file
|
|
@ -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)
|
||||
|
|
@ -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
|
||||
178
services/web/app/views/layout/navbar-website-redesign.pug
Normal file
178
services/web/app/views/layout/navbar-website-redesign.pug
Normal file
|
|
@ -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')}
|
||||
41
services/web/frontend/fonts/dm-mono.css
Normal file
41
services/web/frontend/fonts/dm-mono.css
Normal file
|
|
@ -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'),
|
||||
}
|
||||
BIN
services/web/frontend/fonts/dm-mono/DMMono-Italic.woff2
Normal file
BIN
services/web/frontend/fonts/dm-mono/DMMono-Italic.woff2
Normal file
Binary file not shown.
BIN
services/web/frontend/fonts/dm-mono/DMMono-Light.woff2
Normal file
BIN
services/web/frontend/fonts/dm-mono/DMMono-Light.woff2
Normal file
Binary file not shown.
BIN
services/web/frontend/fonts/dm-mono/DMMono-LightItalic.woff2
Normal file
BIN
services/web/frontend/fonts/dm-mono/DMMono-LightItalic.woff2
Normal file
Binary file not shown.
BIN
services/web/frontend/fonts/dm-mono/DMMono-Medium.woff2
Normal file
BIN
services/web/frontend/fonts/dm-mono/DMMono-Medium.woff2
Normal file
Binary file not shown.
BIN
services/web/frontend/fonts/dm-mono/DMMono-MediumItalic.woff2
Normal file
BIN
services/web/frontend/fonts/dm-mono/DMMono-MediumItalic.woff2
Normal file
Binary file not shown.
BIN
services/web/frontend/fonts/dm-mono/DMMono-Regular.woff2
Normal file
BIN
services/web/frontend/fonts/dm-mono/DMMono-Regular.woff2
Normal file
Binary file not shown.
93
services/web/frontend/fonts/dm-mono/OFL.txt
Normal file
93
services/web/frontend/fonts/dm-mono/OFL.txt
Normal file
|
|
@ -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.
|
||||
134
services/web/frontend/fonts/noto-sans.css
Normal file
134
services/web/frontend/fonts/noto-sans.css
Normal file
|
|
@ -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'),
|
||||
}
|
||||
BIN
services/web/frontend/fonts/noto-sans/NotoSans-Black.woff2
Normal file
BIN
services/web/frontend/fonts/noto-sans/NotoSans-Black.woff2
Normal file
Binary file not shown.
BIN
services/web/frontend/fonts/noto-sans/NotoSans-BlackItalic.woff2
Normal file
BIN
services/web/frontend/fonts/noto-sans/NotoSans-BlackItalic.woff2
Normal file
Binary file not shown.
BIN
services/web/frontend/fonts/noto-sans/NotoSans-Bold.woff2
Normal file
BIN
services/web/frontend/fonts/noto-sans/NotoSans-Bold.woff2
Normal file
Binary file not shown.
BIN
services/web/frontend/fonts/noto-sans/NotoSans-BoldItalic.woff2
Normal file
BIN
services/web/frontend/fonts/noto-sans/NotoSans-BoldItalic.woff2
Normal file
Binary file not shown.
BIN
services/web/frontend/fonts/noto-sans/NotoSans-ExtraBold.woff2
Normal file
BIN
services/web/frontend/fonts/noto-sans/NotoSans-ExtraBold.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
services/web/frontend/fonts/noto-sans/NotoSans-ExtraLight.woff2
Normal file
BIN
services/web/frontend/fonts/noto-sans/NotoSans-ExtraLight.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
services/web/frontend/fonts/noto-sans/NotoSans-Italic.woff2
Normal file
BIN
services/web/frontend/fonts/noto-sans/NotoSans-Italic.woff2
Normal file
Binary file not shown.
BIN
services/web/frontend/fonts/noto-sans/NotoSans-Light.woff2
Normal file
BIN
services/web/frontend/fonts/noto-sans/NotoSans-Light.woff2
Normal file
Binary file not shown.
BIN
services/web/frontend/fonts/noto-sans/NotoSans-LightItalic.woff2
Normal file
BIN
services/web/frontend/fonts/noto-sans/NotoSans-LightItalic.woff2
Normal file
Binary file not shown.
BIN
services/web/frontend/fonts/noto-sans/NotoSans-Medium.woff2
Normal file
BIN
services/web/frontend/fonts/noto-sans/NotoSans-Medium.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
services/web/frontend/fonts/noto-sans/NotoSans-Regular.woff2
Normal file
BIN
services/web/frontend/fonts/noto-sans/NotoSans-Regular.woff2
Normal file
Binary file not shown.
BIN
services/web/frontend/fonts/noto-sans/NotoSans-SemiBold.woff2
Normal file
BIN
services/web/frontend/fonts/noto-sans/NotoSans-SemiBold.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
services/web/frontend/fonts/noto-sans/NotoSans-Thin.woff2
Normal file
BIN
services/web/frontend/fonts/noto-sans/NotoSans-Thin.woff2
Normal file
Binary file not shown.
BIN
services/web/frontend/fonts/noto-sans/NotoSans-ThinItalic.woff2
Normal file
BIN
services/web/frontend/fonts/noto-sans/NotoSans-ThinItalic.woff2
Normal file
Binary file not shown.
93
services/web/frontend/fonts/noto-sans/OFL.txt
Normal file
93
services/web/frontend/fonts/noto-sans/OFL.txt
Normal file
|
|
@ -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.
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
339
services/web/frontend/stylesheets/app/website-redesign.less
Normal file
339
services/web/frontend/stylesheets/app/website-redesign.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -184,3 +184,7 @@ hr {
|
|||
.row-spaced-large {
|
||||
margin-top: @line-height-computed * 2;
|
||||
}
|
||||
|
||||
.row-spaced-extra-large {
|
||||
margin-top: @line-height-computed * 4;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@
|
|||
@green-10: #ebf6ea;
|
||||
@green-20: #bbdbb8;
|
||||
@green-50: #138a07;
|
||||
@green-60: #246b1e;
|
||||
@green-70: #1f5919;
|
||||
@green-30: #8cca86;
|
||||
@red: #a93529;
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
10
services/web/public/img/website-redesign/lightning-round.svg
Normal file
10
services/web/public/img/website-redesign/lightning-round.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="4" y="4.31592" width="48" height="48" rx="24" fill="#BBDBB8"/>
|
||||
<rect x="4" y="4.31592" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
|
||||
<mask id="mask0_854_11994" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="16" width="24" height="25">
|
||||
<rect x="16" y="16.3159" width="24" height="24" fill="#D9D9D9"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_854_11994)">
|
||||
<path d="M25 31.316H21.9C21.5 31.316 21.2041 31.1368 21.0125 30.7785C20.8208 30.4202 20.8416 30.0743 21.075 29.741L28.55 18.991C28.7166 18.7577 28.9333 18.5952 29.2 18.5035C29.4666 18.4118 29.7416 18.416 30.025 18.516C30.3083 18.616 30.5166 18.791 30.65 19.041C30.7833 19.291 30.8333 19.5577 30.8 19.841L30 26.316H33.875C34.3083 26.316 34.6125 26.5077 34.7875 26.891C34.9625 27.2743 34.9083 27.6327 34.625 27.966L26.4 37.816C26.2166 38.0327 25.9916 38.1743 25.725 38.241C25.4583 38.3077 25.2 38.2827 24.95 38.166C24.7 38.0493 24.5041 37.8702 24.3625 37.6285C24.2208 37.3868 24.1666 37.1243 24.2 36.841L25 31.316Z" fill="#138A07"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
12
services/web/public/img/website-redesign/premium-badge.svg
Normal file
12
services/web/public/img/website-redesign/premium-badge.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.9 KiB |
10
services/web/public/img/website-redesign/together-round.svg
Normal file
10
services/web/public/img/website-redesign/together-round.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="4" y="4.31592" width="48" height="48" rx="24" fill="#BBDBB8"/>
|
||||
<rect x="4" y="4.31592" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
|
||||
<mask id="mask0_854_12071" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="16" width="25" height="25">
|
||||
<rect x="16.1758" y="16.3193" width="24" height="24" fill="#D9D9D9"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_854_12071)">
|
||||
<path d="M27.4758 24.6192L25.4008 22.5192C25.2008 22.3192 25.1008 22.0859 25.1008 21.8192C25.1008 21.5526 25.2008 21.3192 25.4008 21.1192L27.4789 19.0192C27.6768 18.8192 27.9121 18.7192 28.1849 18.7192C28.4576 18.7192 28.6962 18.8192 28.9008 19.0192L30.9758 21.1192C31.1758 21.3192 31.2758 21.5526 31.2758 21.8192C31.2758 22.0859 31.1758 22.3192 30.9758 22.5192L28.8977 24.6192C28.6997 24.8192 28.4644 24.9192 28.1917 24.9192C27.919 24.9192 27.6803 24.8192 27.4758 24.6192ZM18.1758 36.3192C17.8924 36.3192 17.6549 36.2234 17.4633 36.0317C17.2716 35.8401 17.1758 35.6026 17.1758 35.3192V32.3192C17.1758 31.7526 17.3716 31.2776 17.7633 30.8942C18.1549 30.5109 18.6258 30.3192 19.1758 30.3192H22.4508C22.7841 30.3192 23.1008 30.4026 23.4008 30.5692C23.7008 30.7359 23.9424 30.9609 24.1258 31.2442C24.6091 31.8942 25.2049 32.4026 25.9133 32.7692C26.6216 33.1359 27.3758 33.3192 28.1758 33.3192C28.9924 33.3192 29.7549 33.1359 30.4633 32.7692C31.1716 32.4026 31.7591 31.8942 32.2258 31.2442C32.4424 30.9609 32.6966 30.7359 32.9883 30.5692C33.2799 30.4026 33.5841 30.3192 33.9008 30.3192H37.1758C37.7424 30.3192 38.2174 30.5109 38.6008 30.8942C38.9841 31.2776 39.1758 31.7526 39.1758 32.3192V35.3192C39.1758 35.6026 39.0799 35.8401 38.8883 36.0317C38.6966 36.2234 38.4591 36.3192 38.1758 36.3192H33.1758C32.8924 36.3192 32.6549 36.2234 32.4633 36.0317C32.2716 35.8401 32.1758 35.6026 32.1758 35.3192V34.0442C31.5924 34.4609 30.9633 34.7776 30.2883 34.9942C29.6133 35.2109 28.9091 35.3192 28.1758 35.3192C27.4591 35.3192 26.7591 35.2067 26.0758 34.9817C25.3924 34.7567 24.7591 34.4359 24.1758 34.0192V35.3192C24.1758 35.6026 24.0799 35.8401 23.8883 36.0317C23.6966 36.2234 23.4591 36.3192 23.1758 36.3192H18.1758ZM20.1758 29.3192C19.3424 29.3192 18.6341 29.0276 18.0508 28.4442C17.4674 27.8609 17.1758 27.1526 17.1758 26.3192C17.1758 25.4692 17.4674 24.7567 18.0508 24.1817C18.6341 23.6067 19.3424 23.3192 20.1758 23.3192C21.0258 23.3192 21.7383 23.6067 22.3133 24.1817C22.8883 24.7567 23.1758 25.4692 23.1758 26.3192C23.1758 27.1526 22.8883 27.8609 22.3133 28.4442C21.7383 29.0276 21.0258 29.3192 20.1758 29.3192ZM36.1758 29.3192C35.3424 29.3192 34.6341 29.0276 34.0508 28.4442C33.4674 27.8609 33.1758 27.1526 33.1758 26.3192C33.1758 25.4692 33.4674 24.7567 34.0508 24.1817C34.6341 23.6067 35.3424 23.3192 36.1758 23.3192C37.0258 23.3192 37.7383 23.6067 38.3133 24.1817C38.8883 24.7567 39.1758 25.4692 39.1758 26.3192C39.1758 27.1526 38.8883 27.8609 38.3133 28.4442C37.7383 29.0276 37.0258 29.3192 36.1758 29.3192Z" fill="#138A07"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3 KiB |
10
services/web/public/img/website-redesign/tool-round.svg
Normal file
10
services/web/public/img/website-redesign/tool-round.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="4" y="4.31592" width="48" height="48" rx="24" fill="#BBDBB8"/>
|
||||
<rect x="4" y="4.31592" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
|
||||
<mask id="mask0_854_12141" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="16" width="24" height="24">
|
||||
<rect x="16" y="16" width="24" height="24" fill="#138A07"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_854_12141)">
|
||||
<path d="M33.8501 35.9501L29.4251 31.5251L31.5251 29.4251L35.9501 33.8501C36.2334 34.1334 36.3751 34.4834 36.3751 34.9001C36.3751 35.3168 36.2334 35.6668 35.9501 35.9501C35.6667 36.2334 35.3167 36.3751 34.9001 36.3751C34.4834 36.3751 34.1334 36.2334 33.8501 35.9501ZM20.0501 35.9501C19.7667 35.6668 19.6251 35.3168 19.6251 34.9001C19.6251 34.4834 19.7667 34.1334 20.0501 33.8501L25.9001 28.0001L24.2001 26.3001C24.0167 26.4834 23.7834 26.5751 23.5001 26.5751C23.2167 26.5751 22.9834 26.4834 22.8001 26.3001L22.2251 25.7251V27.9751C22.2251 28.2084 22.1251 28.3668 21.9251 28.4501C21.7251 28.5334 21.5417 28.4918 21.3751 28.3251L18.6501 25.6001C18.4834 25.4334 18.4417 25.2501 18.5251 25.0501C18.6084 24.8501 18.7667 24.7501 19.0001 24.7501H21.2501L20.7001 24.2001C20.5001 24.0001 20.4001 23.7668 20.4001 23.5001C20.4001 23.2334 20.5001 23.0001 20.7001 22.8001L23.5501 19.9501C23.8834 19.6168 24.2417 19.3751 24.6251 19.2251C25.0084 19.0751 25.4001 19.0001 25.8001 19.0001C26.1334 19.0001 26.4459 19.0501 26.7376 19.1501C27.0292 19.2501 27.3167 19.4001 27.6001 19.6001C27.7334 19.6834 27.8042 19.8001 27.8126 19.9501C27.8209 20.1001 27.7667 20.2334 27.6501 20.3501L25.7501 22.2501L26.3001 22.8001C26.4834 22.9834 26.5751 23.2168 26.5751 23.5001C26.5751 23.7834 26.4834 24.0168 26.3001 24.2001L28.0001 25.9001L30.2501 23.6501C30.1834 23.4668 30.1292 23.2751 30.0876 23.0751C30.0459 22.8751 30.0251 22.6751 30.0251 22.4751C30.0251 21.4918 30.3626 20.6626 31.0376 19.9876C31.7126 19.3126 32.5417 18.9751 33.5251 18.9751C33.6584 18.9751 33.7834 18.9793 33.9001 18.9876C34.0167 18.9959 34.1334 19.0168 34.2501 19.0501C34.4001 19.1001 34.4959 19.2043 34.5376 19.3626C34.5792 19.5209 34.5417 19.6584 34.4251 19.7751L32.8001 21.4001C32.7001 21.5001 32.6501 21.6168 32.6501 21.7501C32.6501 21.8834 32.7001 22.0001 32.8001 22.1001L33.9001 23.2001C34.0001 23.3001 34.1167 23.3501 34.2501 23.3501C34.3834 23.3501 34.5001 23.3001 34.6001 23.2001L36.2251 21.5751C36.3417 21.4584 36.4792 21.4168 36.6376 21.4501C36.7959 21.4834 36.9001 21.5834 36.9501 21.7501C36.9834 21.8668 37.0042 21.9834 37.0126 22.1001C37.0209 22.2168 37.0251 22.3418 37.0251 22.4751C37.0251 23.4584 36.6876 24.2876 36.0126 24.9626C35.3376 25.6376 34.5084 25.9751 33.5251 25.9751C33.3251 25.9751 33.1251 25.9584 32.9251 25.9251C32.7251 25.8918 32.5334 25.8334 32.3501 25.7501L22.1501 35.9501C21.8667 36.2334 21.5167 36.3751 21.1001 36.3751C20.6834 36.3751 20.3334 36.2334 20.0501 35.9501Z" fill="#138A07"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
Loading…
Reference in a new issue