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