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 @@
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)