WIP

src/molecules/Photo.svelte

@@ -1,6 +1,6 @@
 <script>
-    // Svelte
     import { site, currentLocation } from '../store'
+    import * as fn from '../functions'
 
     // Dependencies
     import dayjs from 'dayjs'
@@ -14,9 +14,6 @@
     // Shortcut current location
     let location
     $: location = $currentLocation.location
-
-    // Manipulate data
-    const thumbnail = photo.image.data.thumbnails.find(thumb => thumb.url.includes('key=large'))
 </script>
 
 <div class="photo">
@@ -32,40 +29,17 @@
             <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
                 <div class="photo__image--img">
                     <img
-                        src={thumbnail.url}
-                        width={thumbnail.width} height={thumbnail.height}
+                        src="{fn.getThumbnail(photo.image.private_hash, 800)}"
+                        srcset="{fn.getThumbnail(photo.image.private_hash, 1200)} 1200w, {fn.getThumbnail(photo.image.private_hash, 1600)} 1600w"
+                        width="600" height="400"
                         alt="{photo.name}, {location.region}, {location.country.name}"
                     >
                 </div>
-                <time class="photo__image--date">{dayjs(photo.date).format('MMM Do, YYYY')}</time>
+                <time class="photo__image--date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
+                    {dayjs(photo.date).format('MMM Do, YYYY')}
+                </time>
                 <span class="photo__image--number">{(index < 10 ? '0': '') + index}</span>
             </a>
         </div>
     </div>
 </div>
-
-<!-- <div class="card">
-    <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
-        <div class="card-image">
-            <figure class="image is-4by3">
-                <img
-                    src={thumbnail.url}
-                    alt="{`${photo.name}, ${location.name}, ${location.country.name}`}"
-                    width={thumbnail.width} height={thumbnail.height}
-                >
-            </figure>
-        </div>
-
-        <div class="card-content">
-            <p class="is-size-5"><strong></strong>
-                <strong>{photo.name}</strong>
-            </p>
-            <p>{location.name}, {location.country.name}</p>
-        </div>
-
-        <footer class="card-footer has-text-grey-light">
-            <span class="card-footer-item">{dayjs(photo.date).format('MMM Do, YYYY')}</span>
-            <span class="card-footer-item">#{(index < 10 ? '0' : '') + index}</span>
-        </footer>
-    </a>
-</div> -->

src/molecules/Switcher.svelte

@@ -35,7 +35,10 @@
         </div>
 
         <div class="button-control button-control--dashed switcher__icon">
-            <IconGlobe color="#fff" width="24" />
+            <IconGlobe
+                color={type.includes('side') ? '#333' : '#fff'}
+                width={type.includes('side') ? 18 : 24}
+            />
             <svg>
                 <circle cx="50%" cy="50%" r="{type.includes('side') ? 24 : radius}px"></circle>
             </svg>