From 51b0e432132ec14260805b7ee7d1354f449b5e10 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 13 Feb 2023 17:31:41 -0800 Subject: [PATCH 01/10] Add footer to help site, (no images or social icons yet) --- docs/_layouts/default.html | 5 ++ docs/_sass/_breakpoints.scss | 42 ++++++++++++++ docs/_sass/_colors.scss | 1 + docs/_sass/_main.scss | 104 +++++++++++++++++++++++++++++++++++ 4 files changed, 152 insertions(+) diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 37a6242a409b..ed3eb411b29d 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -73,6 +73,11 @@

Didn't find what you were looking for?

+ + + diff --git a/docs/_sass/_breakpoints.scss b/docs/_sass/_breakpoints.scss index 3e75c4bad1a7..3c132c4bc23b 100644 --- a/docs/_sass/_breakpoints.scss +++ b/docs/_sass/_breakpoints.scss @@ -13,3 +13,45 @@ $breakpoint-wide: 1600px; @content } } + +// Media Query Breakpoints +@mixin mq($breakpoint) { + $mq-xs: '(max-width: 500px)'; + $mq-sm: '(max-width: 899px)'; + $mq-md: '(min-width: 900px)'; + $mq-lg-thumb: '(min-width: 1150px)'; + $mq-lg: '(min-width: 1200px)'; + $mq-xl: '(min-width: 1650px)'; + $mq-hideDetails: '(max-width: 1150px)'; + $mq-mdOnly: '(min-width: 900px) and (max-width: 1199px)'; + + @if $breakpoint == xs { + @media #{$mq-xs} { + @content; + } + } + + @if $breakpoint == sm { + @media #{$mq-sm} { + @content; + } + } + + @else if $breakpoint == md { + @media #{$mq-md} { + @content; + } + } + + @else if $breakpoint == lg { + @media #{$mq-lg} { + @content; + } + } + + @else if $breakpoint == xl { + @media #{$mq-xl} { + @content; + } + } +} diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss index baf4df4ddef0..e520cb9f018c 100644 --- a/docs/_sass/_colors.scss +++ b/docs/_sass/_colors.scss @@ -12,6 +12,7 @@ $color-dark-green: #1B5744; $color-darker-green: #002E22; $color-super-dark-green: #061B09; $color-light-blue: #8DC8FF; +$color-text-supporting: #7D8B8F; $color-link: #5AB0FF; $color-link-hovered: #B0D9FF; diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 332b271f7784..28c25b0bc1bb 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -2,6 +2,10 @@ @import 'colors'; @import 'fonts'; +$sidepaneWidthMobile : 500px; +$smallSpacing : 15px; +$mediumSpacing : 32px; + * { margin: 0; padding: 0; @@ -598,3 +602,103 @@ button { overflow: hidden; } } + +.page-footer { + font-size: 15px; + + // @include mq(sm) { + // background: $color-dark url('#{ $images }homepage/expensify-footer-logo--vertical.svg') no-repeat right 120px; + // background-size: 111px 618px; + // } + + h3 { + color: $color-green; + font-size: 17px; + font-weight: 700; + margin-bottom: 16px; + } + + ul { + margin: 0 0 20px !important; + padding: 0; + + li { + list-style-type: none !important; + margin: 0 0 8px; + + a { + color: $color-white; + display: block; + padding: 4px 0; + word-break: break-word; + + &:hover { + color: $color-green; + } + } + } + } + + &__social-icons { + margin: 0 0 20px; + + a { + color: $color-white; + display: inline-block; + + &:hover { + color: $color-green; + } + } + } + + &__fine-print { + color: $color-text-supporting; + font-size: 10px; + + a { + color: $color-green; + } + } + + // Big logo at the bottom + &__logo { + margin-top: 40px; + + img { + display: block; + } + + @include mq (sm) { + display: none; + } + } + + &__wrapper { + margin: 0 auto; + max-width: 1000px; + padding: 64px $mediumSpacing 0; + + @include mq(sm) { + max-width: $sidepaneWidthMobile; + padding: 64px 40px 20px; + } + } + + .columns { + @include mq(md) { + display: flex; + margin-left: (-1 * 16px); + margin-right: (-1 * 16px); + } + } + + .column { + margin-bottom: 40px; + + @include mq(md) { + padding: 16px; + width: 25%; + } + } +} From 88d330568fc76f53fd0f533b9624ff4eabb6379e Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 13 Feb 2023 17:35:56 -0800 Subject: [PATCH 02/10] Use existing breakpoints --- docs/_sass/_breakpoints.scss | 42 ------------------------------------ docs/_sass/_main.scss | 8 +++---- 2 files changed, 4 insertions(+), 46 deletions(-) diff --git a/docs/_sass/_breakpoints.scss b/docs/_sass/_breakpoints.scss index 3c132c4bc23b..3e75c4bad1a7 100644 --- a/docs/_sass/_breakpoints.scss +++ b/docs/_sass/_breakpoints.scss @@ -13,45 +13,3 @@ $breakpoint-wide: 1600px; @content } } - -// Media Query Breakpoints -@mixin mq($breakpoint) { - $mq-xs: '(max-width: 500px)'; - $mq-sm: '(max-width: 899px)'; - $mq-md: '(min-width: 900px)'; - $mq-lg-thumb: '(min-width: 1150px)'; - $mq-lg: '(min-width: 1200px)'; - $mq-xl: '(min-width: 1650px)'; - $mq-hideDetails: '(max-width: 1150px)'; - $mq-mdOnly: '(min-width: 900px) and (max-width: 1199px)'; - - @if $breakpoint == xs { - @media #{$mq-xs} { - @content; - } - } - - @if $breakpoint == sm { - @media #{$mq-sm} { - @content; - } - } - - @else if $breakpoint == md { - @media #{$mq-md} { - @content; - } - } - - @else if $breakpoint == lg { - @media #{$mq-lg} { - @content; - } - } - - @else if $breakpoint == xl { - @media #{$mq-xl} { - @content; - } - } -} diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 28c25b0bc1bb..7372c4fc8ba4 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -669,7 +669,7 @@ button { display: block; } - @include mq (sm) { + @include maxBreakpoint($breakpoint-tablet) { display: none; } } @@ -679,14 +679,14 @@ button { max-width: 1000px; padding: 64px $mediumSpacing 0; - @include mq(sm) { + @include maxBreakpoint($breakpoint-tablet) { max-width: $sidepaneWidthMobile; padding: 64px 40px 20px; } } .columns { - @include mq(md) { + @include maxBreakpoint($breakpoint-desktop) { display: flex; margin-left: (-1 * 16px); margin-right: (-1 * 16px); @@ -696,7 +696,7 @@ button { .column { margin-bottom: 40px; - @include mq(md) { + @include maxBreakpoint($breakpoint-desktop) { padding: 16px; width: 25%; } From 480d6890e8134f8b4913691a2f3558a3920eaf5a Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 13 Feb 2023 17:41:00 -0800 Subject: [PATCH 03/10] Fix medium breakpoints --- docs/_sass/_main.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 7372c4fc8ba4..b9a7ac31eba5 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -686,7 +686,7 @@ button { } .columns { - @include maxBreakpoint($breakpoint-desktop) { + @include breakpoint($breakpoint-desktop) { display: flex; margin-left: (-1 * 16px); margin-right: (-1 * 16px); @@ -696,7 +696,7 @@ button { .column { margin-bottom: 40px; - @include maxBreakpoint($breakpoint-desktop) { + @include breakpoint($breakpoint-desktop) { padding: 16px; width: 25%; } From defd37e071571431292ba7564975683e06f28239 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 13 Feb 2023 17:57:59 -0800 Subject: [PATCH 04/10] Add icons for docs site, add bottom logo and update bottom padding --- docs/_includes/footer.html | 114 ++++++++++++++++++ docs/_sass/_main.scss | 8 +- .../expensify-footer-logo--vertical.svg | 30 +++++ docs/assets/images/expensify-footer-logo.svg | 30 +++++ docs/assets/images/social-facebook.svg | 7 ++ docs/assets/images/social-instagram.svg | 17 +++ docs/assets/images/social-linkedin.svg | 8 ++ docs/assets/images/social-podcast.svg | 15 +++ docs/assets/images/social-twitter.svg | 9 ++ docs/assets/images/social-youtube.svg | 11 ++ 10 files changed, 245 insertions(+), 4 deletions(-) create mode 100644 docs/_includes/footer.html create mode 100644 docs/assets/images/expensify-footer-logo--vertical.svg create mode 100644 docs/assets/images/expensify-footer-logo.svg create mode 100644 docs/assets/images/social-facebook.svg create mode 100644 docs/assets/images/social-instagram.svg create mode 100644 docs/assets/images/social-linkedin.svg create mode 100644 docs/assets/images/social-podcast.svg create mode 100644 docs/assets/images/social-twitter.svg create mode 100644 docs/assets/images/social-youtube.svg diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html new file mode 100644 index 000000000000..c0f1327a605f --- /dev/null +++ b/docs/_includes/footer.html @@ -0,0 +1,114 @@ +
+
+
+
+

Features

+ +
+
+

Resources

+ +
+
+

Learn more

+ + + +
+
+

Get Started

+ + +

©2008- Expensify, Inc.

+ +

By logging in, you agree to our terms of service and privacy policy.

+

Money transmission is provided by Expensify Payments LLC (NMLS ID:2017010) pursuant to its licenses.

+
+
+ + +
+
\ No newline at end of file diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index b9a7ac31eba5..e43751b14ff2 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -293,7 +293,7 @@ button { background-color: $color-super-dark-green; min-height: 100vh; margin-left: 0; - padding: 80px 24px 24px 24px; + padding: 80px 24px 0px 24px; @include breakpoint($breakpoint-tablet) { margin-left: 320px; @@ -302,7 +302,7 @@ button { @include breakpoint($breakpoint-desktop) { /* Same as the width of the lhn */ margin-left: 420px; - padding: 52px 68px; + padding: 52px 68px 0 68px; box-sizing: border-box; } @@ -310,7 +310,7 @@ button { margin-left: 420px; /* On wide screens, the padding needs to be equal to the view width, minus the content size, minus the lhn size, divided by two. */ - padding: 52px calc((100vw - 1000px - 420px)/2); + padding: 52px calc((100vw - 1000px - 420px)/2) 0 calc((100vw - 1000px - 420px)/2); } ul, @@ -606,7 +606,7 @@ button { .page-footer { font-size: 15px; - // @include mq(sm) { + // @include maxBreakpoint($breakpoint-tablet) { // background: $color-dark url('#{ $images }homepage/expensify-footer-logo--vertical.svg') no-repeat right 120px; // background-size: 111px 618px; // } diff --git a/docs/assets/images/expensify-footer-logo--vertical.svg b/docs/assets/images/expensify-footer-logo--vertical.svg new file mode 100644 index 000000000000..58dc05ad2944 --- /dev/null +++ b/docs/assets/images/expensify-footer-logo--vertical.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + diff --git a/docs/assets/images/expensify-footer-logo.svg b/docs/assets/images/expensify-footer-logo.svg new file mode 100644 index 000000000000..e664651b84fd --- /dev/null +++ b/docs/assets/images/expensify-footer-logo.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + diff --git a/docs/assets/images/social-facebook.svg b/docs/assets/images/social-facebook.svg new file mode 100644 index 000000000000..3a966653e688 --- /dev/null +++ b/docs/assets/images/social-facebook.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/docs/assets/images/social-instagram.svg b/docs/assets/images/social-instagram.svg new file mode 100644 index 000000000000..79d4aadf374a --- /dev/null +++ b/docs/assets/images/social-instagram.svg @@ -0,0 +1,17 @@ + + + + + + + diff --git a/docs/assets/images/social-linkedin.svg b/docs/assets/images/social-linkedin.svg new file mode 100644 index 000000000000..97a1da8962f4 --- /dev/null +++ b/docs/assets/images/social-linkedin.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/docs/assets/images/social-podcast.svg b/docs/assets/images/social-podcast.svg new file mode 100644 index 000000000000..1366699b6823 --- /dev/null +++ b/docs/assets/images/social-podcast.svg @@ -0,0 +1,15 @@ + + + + + + + + diff --git a/docs/assets/images/social-twitter.svg b/docs/assets/images/social-twitter.svg new file mode 100644 index 000000000000..6a90f95032bb --- /dev/null +++ b/docs/assets/images/social-twitter.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/docs/assets/images/social-youtube.svg b/docs/assets/images/social-youtube.svg new file mode 100644 index 000000000000..834314d27d27 --- /dev/null +++ b/docs/assets/images/social-youtube.svg @@ -0,0 +1,11 @@ + + + + + + From 8ec2b5309746da42b2e193e82604291aad0c8feb Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 13 Feb 2023 18:15:33 -0800 Subject: [PATCH 05/10] add vertical logo --- docs/_layouts/default.html | 1 - docs/_sass/_main.scss | 11 ++++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index ed3eb411b29d..292d4e52b5b3 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -77,7 +77,6 @@

Didn't find what you were looking for?

- diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index e43751b14ff2..3b381ed91c28 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -606,10 +606,11 @@ button { .page-footer { font-size: 15px; - // @include maxBreakpoint($breakpoint-tablet) { - // background: $color-dark url('#{ $images }homepage/expensify-footer-logo--vertical.svg') no-repeat right 120px; - // background-size: 111px 618px; - // } + @include maxBreakpoint($breakpoint-desktop) { + padding-right: 0 !important; + background: url('/assets/images/expensify-footer-logo--vertical.svg') no-repeat right 120px; + background-size: 111px 618px; + } h3 { color: $color-green; @@ -669,7 +670,7 @@ button { display: block; } - @include maxBreakpoint($breakpoint-tablet) { + @include maxBreakpoint($breakpoint-desktop) { display: none; } } From e6c67e155feab7ae5799850e4db3144bd5c15ebf Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 13 Feb 2023 20:45:34 -0800 Subject: [PATCH 06/10] Add social icons and fix margin of vertical logo --- docs/_includes/footer.html | 20 +++++++++++++++----- docs/_sass/_main.scss | 6 +++--- docs/assets/images/social-facebook.svg | 2 +- docs/assets/images/social-instagram.svg | 2 +- docs/assets/images/social-linkedin.svg | 2 +- docs/assets/images/social-podcast.svg | 2 +- docs/assets/images/social-twitter.svg | 2 +- docs/assets/images/social-youtube.svg | 2 +- 8 files changed, 24 insertions(+), 14 deletions(-) diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index c0f1327a605f..5c603e7d5c62 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -81,11 +81,21 @@

Learn more

diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 3b381ed91c28..494881d2f009 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -605,11 +605,12 @@ button { .page-footer { font-size: 15px; + margin: 0px !important; @include maxBreakpoint($breakpoint-desktop) { - padding-right: 0 !important; background: url('/assets/images/expensify-footer-logo--vertical.svg') no-repeat right 120px; background-size: 111px 618px; + margin-right: -25px; } h3 { @@ -620,7 +621,7 @@ button { } ul { - margin: 0 0 20px !important; + margin: 0px !important; padding: 0; li { @@ -641,7 +642,6 @@ button { } &__social-icons { - margin: 0 0 20px; a { color: $color-white; diff --git a/docs/assets/images/social-facebook.svg b/docs/assets/images/social-facebook.svg index 3a966653e688..e10f0b21b4dc 100644 --- a/docs/assets/images/social-facebook.svg +++ b/docs/assets/images/social-facebook.svg @@ -1,7 +1,7 @@ + viewBox="0 0 20 20" fill="#FFF" style="enable-background:new 0 0 20 20;" xml:space="preserve"> diff --git a/docs/assets/images/social-instagram.svg b/docs/assets/images/social-instagram.svg index 79d4aadf374a..848a8563403e 100644 --- a/docs/assets/images/social-instagram.svg +++ b/docs/assets/images/social-instagram.svg @@ -1,7 +1,7 @@ + viewBox="0 0 20 20" fill="#FFF" style="enable-background:new 0 0 20 20;" xml:space="preserve"> + viewBox="0 0 20 20" fill="#FFF" style="enable-background:new 0 0 20 20;" xml:space="preserve"> diff --git a/docs/assets/images/social-podcast.svg b/docs/assets/images/social-podcast.svg index 1366699b6823..b3db63124d2a 100644 --- a/docs/assets/images/social-podcast.svg +++ b/docs/assets/images/social-podcast.svg @@ -1,7 +1,7 @@ + viewBox="0 0 20 20" fill="#FFF" style="enable-background:new 0 0 20 20;" xml:space="preserve"> diff --git a/docs/assets/images/social-twitter.svg b/docs/assets/images/social-twitter.svg index 6a90f95032bb..40465f27185c 100644 --- a/docs/assets/images/social-twitter.svg +++ b/docs/assets/images/social-twitter.svg @@ -1,7 +1,7 @@ + viewBox="0 0 20 20" fill="#FFF" style="enable-background:new 0 0 20 20;" xml:space="preserve"> + viewBox="0 0 20 20" fill="#FFF" style="enable-background:new 0 0 20 20;" xml:space="preserve"> From bbf0b15883f7c1158c5fbb19400fee1039f11929 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 13 Feb 2023 20:47:34 -0800 Subject: [PATCH 07/10] Align logo against side --- docs/_sass/_main.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 494881d2f009..18981db26a5d 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -605,7 +605,6 @@ button { .page-footer { font-size: 15px; - margin: 0px !important; @include maxBreakpoint($breakpoint-desktop) { background: url('/assets/images/expensify-footer-logo--vertical.svg') no-repeat right 120px; From e1846f3383c3aabe78f1246960836de13a5ffe15 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 14 Feb 2023 09:22:38 -0800 Subject: [PATCH 08/10] Use existing color for supporting text, change legal links to blue --- docs/_sass/_colors.scss | 1 - docs/_sass/_main.scss | 5 +++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss index e520cb9f018c..baf4df4ddef0 100644 --- a/docs/_sass/_colors.scss +++ b/docs/_sass/_colors.scss @@ -12,7 +12,6 @@ $color-dark-green: #1B5744; $color-darker-green: #002E22; $color-super-dark-green: #061B09; $color-light-blue: #8DC8FF; -$color-text-supporting: #7D8B8F; $color-link: #5AB0FF; $color-link-hovered: #B0D9FF; diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 18981db26a5d..28c1e00850b2 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -641,6 +641,7 @@ button { } &__social-icons { + padding-bottom: 20px; a { color: $color-white; @@ -653,11 +654,11 @@ button { } &__fine-print { - color: $color-text-supporting; + color: $color-gray-green; font-size: 10px; a { - color: $color-green; + color: $color-link; } } From ab17ffec06923d1dcd599da0ebb4fdcd76ade30a Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 14 Feb 2023 09:38:06 -0800 Subject: [PATCH 09/10] Remove unused variables, align footer with content --- docs/_sass/_main.scss | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 28c1e00850b2..93d53b22ccf4 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -2,10 +2,6 @@ @import 'colors'; @import 'fonts'; -$sidepaneWidthMobile : 500px; -$smallSpacing : 15px; -$mediumSpacing : 32px; - * { margin: 0; padding: 0; @@ -678,11 +674,10 @@ button { &__wrapper { margin: 0 auto; max-width: 1000px; - padding: 64px $mediumSpacing 0; + padding: 64px 0 0; @include maxBreakpoint($breakpoint-tablet) { - max-width: $sidepaneWidthMobile; - padding: 64px 40px 20px; + padding: 64px 0px 20px; } } From 65da03ed256f0d41dbb288f3f42ac5e9a70b9c27 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 14 Feb 2023 09:42:22 -0800 Subject: [PATCH 10/10] Use only copyright as there is no login on this page --- docs/_includes/footer.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index 5c603e7d5c62..bbbf9fb3117d 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -111,9 +111,6 @@

Get Started

©2008- Expensify, Inc.

- -

By logging in, you agree to our terms of service and privacy policy.

-

Money transmission is provided by Expensify Payments LLC (NMLS ID:2017010) pursuant to its licenses.