diff --git a/src/components/organisms/Newsletter.svelte b/src/components/organisms/Newsletter.svelte index 2fa2c35..9d23bac 100644 --- a/src/components/organisms/Newsletter.svelte +++ b/src/components/organisms/Newsletter.svelte @@ -41,7 +41,7 @@ newsletter icon See past issues - No spam, we promise! +

No spam, we promise!

\ No newline at end of file diff --git a/src/routes/index.svelte b/src/routes/index.svelte index b04be02..814b918 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -54,6 +54,7 @@ +

World

*:first-child { @include bp (sd, max) { - margin-bottom: 32px; + margin-bottom: 20px; + } + @include bp (sd) { + margin-bottom: 0; } } &:last-child { diff --git a/src/style/organisms/_footer.scss b/src/style/organisms/_footer.scss index 0b7298c..a48eef0 100644 --- a/src/style/organisms/_footer.scss +++ b/src/style/organisms/_footer.scss @@ -1,6 +1,10 @@ .footer { - height: 120px; background-color: $color-primary-darker; + padding: 40px 0; + + @include bp (sm) { + height: 120px; + } .container { align-items: center; @@ -9,21 +13,44 @@ } .site-title { - grid-column: 2 / span 3; + grid-column: 1 / span var(--columns); grid-row: 1; + margin-bottom: 40px; + + @include bp (sm) { + grid-column: 2 / span 5; + grid-row: 1; + margin: 0; + } } &__links { - grid-column: 5 / span 16; - grid-row: 1; + grid-column: 1 / span var(--columns); + grid-row: 2; + + @include bp (sm) { + grid-column: 5 / span 16; + grid-row: 1; + } ul { - display: flex; - justify-content: center; + + @include bp (sm) { + display: flex; + justify-content: center; + } } li { display: block; - margin: 0 16px; + margin-bottom: 16px; + + @include bp (sm) { + margin: 0 16px; + } + + &:last-child { + margin-bottom: 0; + } } a { display: block; @@ -38,9 +65,16 @@ } &__ctf { - grid-column: 19 / span 5; - grid-row: 1; + grid-column: 1 / span var(--columns); + grid-row: 2; margin-left: auto; + margin-top: auto; + + @include bp (sm) { + grid-column: 19 / span 5; + grid-row: 1; + margin-top: 0; + } span { font-size: rem(12px); diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss index 7f79006..6b997e4 100644 --- a/src/style/organisms/_locations.scss +++ b/src/style/organisms/_locations.scss @@ -1,5 +1,9 @@ .browse { - margin: 96px 0 128px; + margin: 96px 0; + + @include bp (sm) { + margin-bottom: 128px; + } // Description &__description { @@ -7,6 +11,7 @@ margin: 0 auto 32px; max-width: 230px; text-align: center; + color: $color-tertiary; @include bp (sm) { font-size: rem(28px); diff --git a/src/style/organisms/_newsletter.scss b/src/style/organisms/_newsletter.scss index 6a40194..e3934f0 100644 --- a/src/style/organisms/_newsletter.scss +++ b/src/style/organisms/_newsletter.scss @@ -14,33 +14,23 @@ --columns: 18; grid-column: 4 / span var(--columns); } - } - h3 { - color: $color-secondary; - margin-bottom: 16px; - } - p { - margin-bottom: 40px; - color: $color-text; - font-weight: 300; - } - span { - font-size: rem(16px); - line-height: 1.2; - color: rgba($color-text, 0.6); - } + h3 { + color: $color-secondary; + margin-bottom: 8px; - // Past issues - a { - text-decoration: none; - color: $color-text; - font-size: rem(14px); - - span { + @include bp (sm) { + margin-bottom: 16px; + } + } + p { + margin-bottom: 32px; color: $color-text; - margin-left: 12px; - border-bottom: 1px solid $color-text; + font-weight: 300; + + @include bp (sm) { + margin-bottom: 40px; + } } } @@ -49,11 +39,12 @@ position: relative; display: flex; width: 100%; + max-width: 600px; height: 64px; margin-bottom: 20px; padding: 0 30px; border-radius: 100vh; - box-shadow: inset 0 0 0 3px $color-secondary; + box-shadow: inset 0 0 0 2px $color-secondary; transition: box-shadow 0.6s var(--ease-quart); input { @@ -95,8 +86,43 @@ // Past Issues .past-issues { - display: flex; - justify-content: space-between; + display: block; + text-align: center; + font-size: rem(14px); + max-width: 600px; + + @include bp (sm) { + display: flex; + justify-content: space-between; + font-size: rem(16px); + } + + a { + text-decoration: none; + color: $color-text; + } + + span { + font-size: rem(14px); + color: $color-text; + margin-left: 8px; + border-bottom: 1px solid $color-text; + + @include bp (sm) { + margin-left: 16px; + } + } + + p { + color: $color-gray; + line-height: 1.3; + margin-top: 16px; + margin-bottom: 0; + + @include bp (sm) { + margin-top: 0; + } + } } // Variants diff --git a/src/style/organisms/_shop.scss b/src/style/organisms/_shop.scss index fdb8750..0d906c9 100644 --- a/src/style/organisms/_shop.scss +++ b/src/style/organisms/_shop.scss @@ -5,10 +5,12 @@ border-radius: 12px; .content { - display: grid; - grid-template-columns: 40% 1fr; - grid-template-rows: 1fr; - height: 100%; + @include bp (sm) { + display: grid; + grid-template-columns: 40% 1fr; + grid-template-rows: 1fr; + height: 100%; + } } // Image @@ -17,13 +19,18 @@ overflow: hidden; img { - position: absolute; - top: 0; - left: 0; display: block; width: 100%; - height: 100%; + height: 216px; object-fit: cover; + + @include bp (sm) { + position: absolute; + top: 0; + left: 0; + height: 100%; + + } } } @@ -31,9 +38,13 @@ &__info { display: flex; flex-direction: column; - padding: 64px 72px 40px 64px; + padding: 32px 40px; border-radius: 12px; + @include bp (sm) { + padding: 64px 72px 40px 64px; + } + .button { margin-right: auto; } @@ -42,19 +53,31 @@ // Title .title-medium { color: $color-lightpurple; - margin-bottom: 16px; + margin-bottom: 8px; + + @include bp (sm) { + margin-bottom: 16px; + } } p { font-weight: 300; - margin-bottom: 24px; + margin-bottom: 20px; + + @include bp (sm) { + margin-bottom: 24px; + } } .detail { margin: auto 0 0; - padding-top: 24px; + padding-top: 32px; color: $color-gray; line-height: 1.4; font-size: rem(14px); + + @include bp (sm) { + padding-top: 24px; + } } } \ No newline at end of file diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss index f2b28e5..d1032a4 100644 --- a/src/style/pages/_homepage.scss +++ b/src/style/pages/_homepage.scss @@ -64,11 +64,16 @@ // First row &:nth-child(1) { + display: none; --rotation: -10.5deg; z-index: 11; grid-column-start: 2; grid-row: 1; top: clamp(24px, 8vw, 128px); + + @include bp (sm) { + display: block; + } } &:nth-child(2) { --rotation: 3deg; @@ -91,26 +96,42 @@ top: clamp(16px, 3vw, 48px); } &:nth-child(5) { + display: none; --rotation: 10.5deg; z-index: 1; grid-column-start: 24; grid-row: 1; top: clamp(24px, 8vw, 128px); + + @include bp (sm) { + display:block; + } } // Second row &:nth-child(6) { + display: none; --rotation: -5.5deg; z-index: 10; grid-column-start: 1; grid-row: 2; top: clamp(24px, 5.5vw, 132px); + + @include bp (sm) { + display:block + } } &:nth-child(7) { --rotation: -8deg; grid-column-start: 5; z-index: 9; - grid-row: 2; + grid-row: 1; + top: clamp(24px, 5.5vw, 132px); + + @include bp (sm) { + display:block; + grid-row: 2; + } } &:nth-child(8) { --rotation: 8deg; @@ -127,18 +148,28 @@ top: calc(-1 * clamp(20px, 3vw, 48px)); } &:nth-child(10) { + display: none; --rotation: 8deg; z-index: 3; grid-column-start: 21; grid-row: 2; + + @include bp (sm) { + display:block + } } &:nth-child(11) { + display: none; --rotation: 5.5deg; z-index: 2; grid-column-start: 25; grid-row: 2; top: clamp(24px, 5.5vw, 132px); margin-right: 0; + + @include bp (sm) { + display:block + } } } } @@ -188,4 +219,10 @@ } } } + + // World title + .title-world { + color: rgba($color-tertiary, 0.3); + margin-top: -60px; + } } \ No newline at end of file diff --git a/src/style/tools/_helpers.scss b/src/style/tools/_helpers.scss index fe93dda..a55889e 100644 --- a/src/style/tools/_helpers.scss +++ b/src/style/tools/_helpers.scss @@ -25,6 +25,11 @@ width: 100%; max-width: var(--container-width); margin: 0 auto; + padding: 0 20px; + + @include bp (sm) { + padding: 0; + } } // Wrapper (inside and more spaced)