diff --git a/src/routes/[country]/[location]/[photo].svelte b/src/routes/[country]/[location]/[photo].svelte
index 82fb903..935b1f3 100644
--- a/src/routes/[country]/[location]/[photo].svelte
+++ b/src/routes/[country]/[location]/[photo].svelte
@@ -105,6 +105,7 @@
id
title
}
+ city
}
}
`)
@@ -198,7 +199,17 @@
{currentPhoto.title}
-
{location.name}, {location.country.name} ·
+
+
+
+ {#if currentPhoto.city}
+ {currentPhoto.city}, {location.name}, {location.country.name}
+ {:else}
+ {location.name}, {location.country.name}
+ {/if}
+
+
+
·
@@ -258,12 +269,16 @@
id
title
}
+ city
}
location (filter: { slug: { _eq: "${page.params.location}" }}) {
name
slug
- country { name }
+ country {
+ name
+ slug
+ }
}
}
`)
diff --git a/src/style/pages/_viewer-photo.scss b/src/style/pages/_viewer-photo.scss
index 913dcd4..c464e66 100644
--- a/src/style/pages/_viewer-photo.scss
+++ b/src/style/pages/_viewer-photo.scss
@@ -186,7 +186,7 @@
}
@include bp (lg) {
display: grid;
- grid-template-columns: 60% 40%;
+ grid-template-columns: 50% 50%;
align-items: baseline;
}
@@ -215,7 +215,17 @@
margin-top: 0;
margin-left: auto;
text-align: right;
- padding-left: 16px;
+ padding-left: 12px;
+ }
+
+ a {
+ color: $color-tertiary;
+ text-decoration: none;
+ transition: color 0.3s;
+
+ &:hover {
+ color: $color-secondary-light;
+ }
}
// Icon
@@ -224,7 +234,7 @@
width: 17px;
height: 17px;
margin-top: -5px;
- margin-right: 12px;
+ margin-right: 4px;
}
// Separator
.sep {