diff --git a/src/components/SectionHowItWorks/SectionHowItWorks.css b/src/components/SectionHowItWorks/SectionHowItWorks.css index 6375a78b..e57521f6 100644 --- a/src/components/SectionHowItWorks/SectionHowItWorks.css +++ b/src/components/SectionHowItWorks/SectionHowItWorks.css @@ -1,60 +1,8 @@ @import '../../marketplace.css'; -.root { - padding: 0 40px; - background-color: var(--matterColorLight); - - @media (--viewportMedium) { - padding: 0 30px; - background-color: var(--matterColorBright); - } -} - -/* A div for specifying the area for a section specific background color */ -.section { - /* prevent inner div margin from collapsing and ending up outside this div */ - overflow: auto; - - background-color: var(--matterColorLight); - - @media (--viewportMedium) { - border-radius: 4px 4px 0 0; - } -} - -.contentWrapper { - @media (--viewportMedium) { - max-width: 1052px; - margin: 0 auto; - } -} - -/* Draw the red bar on top of the section */ -.contentWrapper:before { - content: ''; - display: block; - width: 109px; - height: 6px; - background: var(--marketplaceColor); - - @media (--viewportMedium) { - width: 192px; - height: 8px; - } -} - -.content { - margin-top: 37px; - margin-bottom: 53px; - - @media (--viewportMedium) { - margin-top: 81px; - margin-bottom: 86px; - } -} - .title { @apply --marketplaceH1FontStyles; + margin-top: 0; } .steps { @@ -63,13 +11,13 @@ @media (--viewportMedium) { flex-direction: row; - margin-top: 0; } } .step { @media (--viewportMedium) { - margin-right: 76px; + width: 324px; + margin-right: 40px; } } @@ -80,12 +28,18 @@ } .stepTitle { + margin-top: 18px; + margin-bottom: 18px; + @media (--viewportMedium) { + margin-top: 21px; margin-bottom: 18px; } } .createListingLink { + margin-top: 36px; + @media (--viewportMedium) { margin-top: 52px; } diff --git a/src/components/SectionHowItWorks/SectionHowItWorks.js b/src/components/SectionHowItWorks/SectionHowItWorks.js index 87c8f5cc..770fa08c 100644 --- a/src/components/SectionHowItWorks/SectionHowItWorks.js +++ b/src/components/SectionHowItWorks/SectionHowItWorks.js @@ -13,51 +13,45 @@ const SectionHowItWorks = props => { const classes = classNames(rootClassName || css.root, className); return (
-
-
-
-
- -
- -
+
+ +
+ +
-
-
-

- -

-

- -

-
- -
-

- -

-

- -

-
- -
-

- -

-

- -

-
-
- -
- - - -
-
+
+
+

+ +

+

+ +

+ +
+

+ +

+

+ +

+
+ +
+

+ +

+

+ +

+
+
+ +
+ + +
); diff --git a/src/components/SectionLocations/SectionLocations.css b/src/components/SectionLocations/SectionLocations.css index f7d209d3..b97ee921 100644 --- a/src/components/SectionLocations/SectionLocations.css +++ b/src/components/SectionLocations/SectionLocations.css @@ -1,29 +1,6 @@ @import '../../marketplace.css'; -.root { - padding: 40px 24px; - - @media (--viewportMedium) { - padding: 87px 36px; - } -} - -.content { - @media (--viewportMedium) { - max-width: 1052px; - margin: 0 auto; - } -} - -.title_h1 { - margin-top: 0; - @media (--viewportMedium) { - margin-bottom: 23px; - } -} - .title { - /* Font style */ @apply --marketplaceH1FontStyles; margin-top: 0; @@ -51,29 +28,28 @@ .location { width: 100%; - margin-bottom: 27px; + margin-top: 25px; /* Remove link's hover effect */ &:hover { text-decoration: none; } -} -.location:nth-of-type(1) { @media (--viewportMedium) { - margin-right: 20px; + margin-top: 0; } } -.location:nth-of-type(2) { +.location { @media (--viewportMedium) { - margin: 0 20px; + margin-right: 40px; + margin-bottom: 0; } } -.location:nth-of-type(3) { +.location:last-of-type { @media (--viewportMedium) { - margin-left: 20px; + margin-right: 0; } } @@ -115,7 +91,12 @@ .linkText { @apply --marketplaceH2FontStyles; color: var(--matterColor); + margin-top: 15px; margin-bottom: 0; + + @media (--viewportMedium) { + margin-top: 21px; + } } .locationName { diff --git a/src/components/SectionLocations/SectionLocations.js b/src/components/SectionLocations/SectionLocations.js index c6d31c5d..ea0c3a13 100644 --- a/src/components/SectionLocations/SectionLocations.js +++ b/src/components/SectionLocations/SectionLocations.js @@ -37,32 +37,30 @@ const SectionLocations = props => { return (
-
-
- -
-
-

- -

-
-
- {locationLink( - 'Helsinki', - helsinkiImage, - '?address=Helsinki%2C%20Finland&bounds=60.2978389%2C25.254484899999966%2C59.9224887%2C24.782875800000056&country=FI&origin=60.16985569999999%2C24.93837910000002' - )} - {locationLink( - 'Rovaniemi', - rovaniemiImage, - '?address=Rovaniemi%2C%20Finland&bounds=67.18452510000002%2C27.32667850000007%2C66.1553745%2C24.736871199999996&country=FI&origin=66.50394779999999%2C25.729390599999988' - )} - {locationLink( - 'Ruka', - rukaImage, - '?address=Ruka%2C%20Finland&bounds=66.1704578%2C29.14246849999995%2C66.1614402%2C29.110453699999994&country=FI&origin=66.16594940000002%2C29.12646110000003' - )} -
+
+ +
+
+

+ +

+
+
+ {locationLink( + 'Helsinki', + helsinkiImage, + '?address=Helsinki%2C%20Finland&bounds=60.2978389%2C25.254484899999966%2C59.9224887%2C24.782875800000056&country=FI&origin=60.16985569999999%2C24.93837910000002' + )} + {locationLink( + 'Rovaniemi', + rovaniemiImage, + '?address=Rovaniemi%2C%20Finland&bounds=67.18452510000002%2C27.32667850000007%2C66.1553745%2C24.736871199999996&country=FI&origin=66.50394779999999%2C25.729390599999988' + )} + {locationLink( + 'Ruka', + rukaImage, + '?address=Ruka%2C%20Finland&bounds=66.1704578%2C29.14246849999995%2C66.1614402%2C29.110453699999994&country=FI&origin=66.16594940000002%2C29.12646110000003' + )}
); diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css index 8dd9c856..e26bfb70 100644 --- a/src/containers/LandingPage/LandingPage.css +++ b/src/containers/LandingPage/LandingPage.css @@ -1,5 +1,10 @@ @import '../../marketplace.css'; +:root { + --sectionMarginTop: 94px; + --sectionMarginTopMobile: 40px; +} + .root { } @@ -32,3 +37,60 @@ border-radius: 4px; } } + +.sections { + margin: 0; + + @media (--viewportMedium) { + padding: 1px 30px 0 30px; + } +} + +.section { + overflow: auto; +} + +/* Square corners for the last section if it's even */ +.section:nth-of-type(2n):last-of-type { + @media (--viewportMedium) { + border-radius: 4px 4px 0 0; + } +} + +/* Every other section has a light background */ +.section:nth-of-type(2n) { + background-color: var(--matterColorLight); + @media (--viewportMedium) { + border-radius: 4px; + } +} + +.sectionContent { + margin: var(--sectionMarginTopMobile) 24px 51px 24px; + + @media (--viewportMedium) { + max-width: 1052px; + margin: var(--sectionMarginTop) auto 93px auto; + } +} + +/* A red top bar on top of light sections */ +.section:nth-of-type(2n) .sectionContent:before { + background: var(--marketplaceColor); + content: ''; + display: block; + width: 109px; + height: 6px; + + /* Place the bar on top of .sectionContent top margin */ + position: relative; + top: calc(-1 * var(--sectionMarginTopMobile)); + + @media (--viewportMedium) { + width: 192px; + height: 8px; + + /* Place the bar on top of .sectionContent top margin */ + top: calc(-1 * var(--sectionMarginTop)); + } +} diff --git a/src/containers/LandingPage/LandingPage.js b/src/containers/LandingPage/LandingPage.js index 459f88ec..73c194b6 100644 --- a/src/containers/LandingPage/LandingPage.js +++ b/src/containers/LandingPage/LandingPage.js @@ -59,8 +59,18 @@ export const LandingPageComponent = props => {
- - +
    +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
diff --git a/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap b/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap index 950e2d21..47b24aa9 100644 --- a/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap +++ b/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap @@ -66,14 +66,24 @@ exports[`LandingPage matches snapshot 1`] = ` rootClassName={null} />
- - +
    +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +