diff --git a/src/components/molecules/Location.svelte b/src/components/molecules/Location.svelte index a20208c..aecbbd6 100644 --- a/src/components/molecules/Location.svelte +++ b/src/components/molecules/Location.svelte @@ -13,5 +13,6 @@

{name}

+ {country.name} \ No newline at end of file diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 8dbd534..abaa54a 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -8,7 +8,7 @@ export let photos: any - const globalData: any = getContext('global') + const { location, count }: any = getContext('global') +

Discover {count.photos} homes from {count.locations} cities of {count.countries} countries

diff --git a/src/style/_typography.scss b/src/style/_typography.scss index 5d7e7c8..6544e95 100644 --- a/src/style/_typography.scss +++ b/src/style/_typography.scss @@ -8,6 +8,7 @@ letter-spacing: -0.04em; } + // Texts .text-medium { font-size: rem(28px); @@ -21,4 +22,12 @@ font-family: $font-sans; font-weight: 400; line-height: 1.5; -} \ No newline at end of file +} + +.text-label { + font-size: rem(12px); + line-height: 1.4; + text-transform: uppercase; + letter-spacing: 1px; +} + diff --git a/src/style/molecules/_location.scss b/src/style/molecules/_location.scss new file mode 100644 index 0000000..53b8351 --- /dev/null +++ b/src/style/molecules/_location.scss @@ -0,0 +1,23 @@ +.location { + text-align: center; + // Flag + img { + border-radius: 100%; + } + // Link + a { + text-decoration: none; + } + &__name { + display: block; + color: $color-secondary; + margin: 20px 0 -2px; + font-size: rem(48px); + font-family: $font-serif; + font-weight: 300; + line-height: 1.2; + } + span { + color: $color-tertiary; + } +} \ No newline at end of file diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss new file mode 100644 index 0000000..cc02939 --- /dev/null +++ b/src/style/organisms/_locations.scss @@ -0,0 +1,19 @@ +.browse { + + &__description { + text-align: center; + } + + &__locations { + display: flex; + flex-flow: row wrap; + justify-content: center; + max-width: 1200px; + margin: 128px auto 80px; + justify-items: center; + + .location { + margin: 0 40px 80px; + } + } +} \ No newline at end of file diff --git a/src/style/style.scss b/src/style/style.scss index 62d1a34..76f6290 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -27,9 +27,10 @@ // Molecules @import "molecules/photo-card"; +@import "molecules/location"; // Organisms -// @import "organisms/organism"; +@import "organisms/locations"; // Pages