diff --git a/src/components/atoms/Badge.svelte b/src/components/atoms/Badge.svelte
new file mode 100644
index 0000000..f774850
--- /dev/null
+++ b/src/components/atoms/Badge.svelte
@@ -0,0 +1,8 @@
+
+
+
+ {text}
+
\ No newline at end of file
diff --git a/src/components/molecules/Location.svelte b/src/components/molecules/Location.svelte
index aecbbd6..401ab76 100644
--- a/src/components/molecules/Location.svelte
+++ b/src/components/molecules/Location.svelte
@@ -1,8 +1,10 @@
@@ -13,6 +15,9 @@
{name}
- {country.name}
+ {country.name}
+ {#if index < 2}
+
+ {/if}
\ No newline at end of file
diff --git a/src/components/organisms/Locations.svelte b/src/components/organisms/Locations.svelte
index ce365f0..acd59de 100644
--- a/src/components/organisms/Locations.svelte
+++ b/src/components/organisms/Locations.svelte
@@ -14,13 +14,15 @@
- {#each locations as location (location.slug)}
+ {#each locations as location, index}
{/each}
diff --git a/src/style/atoms/_badge.scss b/src/style/atoms/_badge.scss
new file mode 100644
index 0000000..7faa5b2
--- /dev/null
+++ b/src/style/atoms/_badge.scss
@@ -0,0 +1,22 @@
+.badge {
+ display: flex;
+ align-items: center;
+ margin: 0 auto;
+ padding: 0 6px;
+ background-color: $color-secondary-light;
+ border-radius: 100vh;
+ text-transform: uppercase;
+ color: $color-primary-darker;
+ font-weight: 500;
+ letter-spacing: 1px;
+ line-height: 1;
+ min-height: 16px;
+ margin-top: 20px;
+
+ // Small size
+ &--small {
+ span {
+ font-size: rem(7px);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/style/molecules/_location.scss b/src/style/molecules/_location.scss
index 53b8351..4d73de0 100644
--- a/src/style/molecules/_location.scss
+++ b/src/style/molecules/_location.scss
@@ -1,7 +1,16 @@
.location {
text-align: center;
+
+ & > * {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
// Flag
img {
+ display: block;
+ margin: 0 auto;
border-radius: 100%;
}
// Link
@@ -17,7 +26,8 @@
font-weight: 300;
line-height: 1.2;
}
- span {
+ &__country {
color: $color-tertiary;
}
+
}
\ No newline at end of file
diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss
index cc02939..3a902ff 100644
--- a/src/style/organisms/_locations.scss
+++ b/src/style/organisms/_locations.scss
@@ -1,9 +1,21 @@
.browse {
+ // Description
&__description {
text-align: center;
+ margin-bottom: 56px;
}
+ // Continents
+ &__continents {
+ text-align: center;
+
+ button {
+ margin: 0 8px;
+ }
+ }
+
+ // Locations
&__locations {
display: flex;
flex-flow: row wrap;
diff --git a/src/style/style.scss b/src/style/style.scss
index 76f6290..654d00e 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -24,6 +24,7 @@
// Atomic Design System
// Atoms
@import "atoms/button";
+@import "atoms/badge";
// Molecules
@import "molecules/photo-card";