diff --git a/services/web/frontend/stylesheets/app/homepage.less b/services/web/frontend/stylesheets/app/homepage.less index 80ab0d77e0..0f363cba3c 100644 --- a/services/web/frontend/stylesheets/app/homepage.less +++ b/services/web/frontend/stylesheets/app/homepage.less @@ -561,4 +561,16 @@ font-size: 1.125rem; line-height: 1.333; } + + #home-features-arrow-green { + position: absolute; + left: 173px; + top: -122px; + + @media (max-width: @screen-sm-max) { + height: 100px; + left: 111px; + top: -84px; + } + } } diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less index 7f0a097b4c..00446061f9 100644 --- a/services/web/frontend/stylesheets/app/website-redesign.less +++ b/services/web/frontend/stylesheets/app/website-redesign.less @@ -22,14 +22,27 @@ h2 { font-weight: 600; font-size: 2.25rem; - line-height: 3rem; + line-height: 1.333; margin-top: 0; + + @media (max-width: @screen-sm-max) { + font-size: 1.875rem; + } } h3 { font-weight: 600; } + h1, + h2, + h3 { + > span.mono-text { + display: block; + margin-bottom: @margin-xs; + } + } + // override .btn default style .btn { font-weight: 600; @@ -212,14 +225,14 @@ } .features-card-video { + display: flex; + justify-content: center; + video { box-shadow: 0px 4px 6px 0px rgba(30, 37, 48, 0.12), 0px 8px 16px 0px rgba(30, 37, 48, 0.12); max-height: 100%; width: auto; - } - - video.video-responsive { width: 100%; } @@ -618,19 +631,29 @@ } .text-with-bg { - display: inline-block; + font-family: 'DM Mono', monospace; + font-feature-settings: 'ss05'; padding: 0 @padding-sm; margin: 0 6px; border-radius: 10px; margin-top: 5px; - } - .purple-bg { - background-color: var(--ceil); - } + // will make all spans content inline while avoiding overflowing the viewport in mobile + // https://developer.mozilla.org/en-US/docs/Web/CSS/display#flow-root + // https://css-tricks.com/display-flow-root/ + display: inline flow-root; - .yellow-bg { - background-color: var(--caramel); + &.tangerine-bg { + background-color: var(--vivid-tangerine); + } + + &.purple-bg { + background-color: var(--ceil); + } + + &.yellow-bg { + background-color: var(--caramel); + } } .security-info { @@ -692,12 +715,6 @@ font-weight: 500; line-height: 1.5rem; margin: 0; - - ~ h1, - ~ h2, - ~ h3 { - margin-top: 8px; - } } .link-with-arrow { diff --git a/services/web/frontend/stylesheets/variables/colors.less b/services/web/frontend/stylesheets/variables/colors.less index bfa066d6ed..8eeadaf80d 100644 --- a/services/web/frontend/stylesheets/variables/colors.less +++ b/services/web/frontend/stylesheets/variables/colors.less @@ -102,6 +102,7 @@ @deep-green: #0f2715; @sapphire-blue: #4354a3; @sapphire-blue-dark: #3c4c93; +@vivid-tangerine: #f1a695; // == ol-* legacy variables == // These will eventually be removed and replaced with above names diff --git a/services/web/frontend/stylesheets/variables/css-variables.less b/services/web/frontend/stylesheets/variables/css-variables.less index 83b43b29f8..69dc53a8d2 100644 --- a/services/web/frontend/stylesheets/variables/css-variables.less +++ b/services/web/frontend/stylesheets/variables/css-variables.less @@ -90,4 +90,5 @@ --deep-green: @deep-green; --sapphire-blue: @sapphire-blue; --sapphire-blue-dark: @sapphire-blue-dark; + --vivid-tangerine: @vivid-tangerine; } diff --git a/services/web/public/img/website-redesign/advance-reference-search.png b/services/web/public/img/website-redesign/advance-reference-search.png new file mode 100644 index 0000000000..1a3e63bc01 Binary files /dev/null and b/services/web/public/img/website-redesign/advance-reference-search.png differ diff --git a/services/web/public/img/website-redesign/arrow-green.svg b/services/web/public/img/website-redesign/arrow-green.svg new file mode 100644 index 0000000000..63198a0887 --- /dev/null +++ b/services/web/public/img/website-redesign/arrow-green.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/services/web/public/img/website-redesign/book-pink.svg b/services/web/public/img/website-redesign/book-pink.svg new file mode 100644 index 0000000000..0c42aff3f5 --- /dev/null +++ b/services/web/public/img/website-redesign/book-pink.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/services/web/public/img/website-redesign/commenting.png b/services/web/public/img/website-redesign/commenting.png new file mode 100644 index 0000000000..8d2862a2ee Binary files /dev/null and b/services/web/public/img/website-redesign/commenting.png differ diff --git a/services/web/public/img/website-redesign/lightning-round.svg b/services/web/public/img/website-redesign/lightning-round.svg deleted file mode 100644 index 22bf78ddb3..0000000000 --- a/services/web/public/img/website-redesign/lightning-round.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/services/web/public/img/website-redesign/lightning-yellow.svg b/services/web/public/img/website-redesign/lightning-yellow.svg new file mode 100644 index 0000000000..4d66caae72 --- /dev/null +++ b/services/web/public/img/website-redesign/lightning-yellow.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/services/web/public/img/website-redesign/tool-round.svg b/services/web/public/img/website-redesign/tool-round.svg deleted file mode 100644 index 6457fe0871..0000000000 --- a/services/web/public/img/website-redesign/tool-round.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/services/web/public/img/website-redesign/visual-editor.mp4 b/services/web/public/img/website-redesign/visual-editor.mp4 new file mode 100644 index 0000000000..13d2c42741 Binary files /dev/null and b/services/web/public/img/website-redesign/visual-editor.mp4 differ