Restructure utility files, Use a bundle.css to fix CSS issues

src/atoms/IconGlobe.svelte

@@ -1,5 +1,5 @@
 <script>
-    import * as fn from '../functions'
+    import * as fn from '../utils/functions'
 
     export let width = 56
     export let color = '#000'

src/atoms/IconGlobeSmall.svelte

@@ -1,5 +1,5 @@
 <script>
-    import * as fn from '../functions'
+    import * as fn from '../utils/functions'
 
     export let width = 56
     export let color = '#000'

src/atoms/LinkTranslate.svelte

@@ -1,5 +1,5 @@
 <script>
-    import * as fn from '../functions'
+    import * as fn from '../utils/functions'
 
     export let href = '/'
     export let text = ''

src/atoms/TitleSite.svelte

@@ -1,5 +1,5 @@
 <script>
-    import * as fn from '../functions'
+    import * as fn from '../utils/functions'
 </script>
 
 <div class="title-location title-location--inline">

src/molecules/InteractiveGlobe.svelte

@@ -4,7 +4,7 @@
     // Lead 3: https://www.bypeople.com/css-js-webgl-rotating-3d-globe-effect/
 
     import { onMount } from 'svelte'
-    import { locations } from '../store'
+    import { locations } from '../utils/store'
 
 
     // Props

src/molecules/Photo.svelte

@@ -2,8 +2,8 @@
     import { onMount } from 'svelte'
     import { fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
-    import { site, currentLocation } from '../store'
-    import * as fn from '../functions'
+    import { site, currentLocation } from '../utils/store'
+    import * as fn from '../utils/functions'
 
     // Dependencies
     import * as basicScroll from 'basicscroll'

src/molecules/Switcher.svelte

@@ -1,7 +1,5 @@
 <script>
-    import {
-        currentLocation,
-    } from '../store'
+    import { currentLocation } from '../utils/store'
 
     // Components
     import IconGlobe from '../atoms/IconGlobe'

src/organisms/Carousel.svelte

@@ -1,8 +1,8 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte'
     import { stores } from '@sapper/app'
-    import { currentLocation } from '../store'
-    import * as fn from '../functions'
+    import { currentLocation } from '../utils/store'
+    import * as fn from '../utils/functions'
     const dispatch = createEventDispatcher()
     const { page } = stores()
 

src/organisms/Footer.svelte

@@ -1,6 +1,6 @@
 <script>
 	// Svelte
-	import { site, currentLocation } from '../store'
+	import { site, currentLocation } from '../utils/store'
 
 	// Components
 	import LinkTranslate from '../atoms/LinkTranslate'

src/organisms/Locations.svelte

@@ -1,10 +1,9 @@
 <script>
     import { onMount } from 'svelte'
     import { flip } from 'svelte/animate'
-    import { fly, fade } from 'svelte/transition'
-    import { locations, countries, continents } from '../store'
-    import { crossfadeReceive, crossfadeSend } from '../animations'
-    import * as fn from '../functions'
+    import { crossfadeReceive, crossfadeSend } from '../utils/animations'
+    import { locations, countries, continents } from '../utils/store'
+    import * as fn from '../utils/functions'
 
     // Dependencies
     import AOS from 'aos'

src/organisms/Pagination.svelte

@@ -1,6 +1,6 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte'
-    import { currentLocation } from '../store'
+    import { currentLocation } from '../utils/store'
     const dispatch = createEventDispatcher()
 
     // Props

src/routes/_layout.svelte

@@ -5,10 +5,10 @@
         continents,
         countries,
         locations
-    } from '../store'
+    } from '../utils/store'
 
     export async function preload (page, session) {
-        const request = await this.fetch(apiEndpoints.gql, {
+        const req = await this.fetch(apiEndpoints.gql, {
             method: 'post',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ query: `{
@@ -54,13 +54,14 @@
                 }
             }`})
         })
-        const result = await request.json()
-
-        // Set data into store
-        site.set(result.data.site.data[0])
-        continents.set(result.data.continents.data)
-        countries.set(result.data.countries.data)
-        locations.set(result.data.locations.data)
+        const result = await req.json()
+        if (req.ok) {
+            // Set data into store
+            site.set(result.data.site.data[0])
+            continents.set(result.data.continents.data)
+            countries.set(result.data.countries.data)
+            locations.set(result.data.locations.data)
+        }
     }
 </script>
 
@@ -82,9 +83,8 @@
     $locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
 </script>
 
-<!-- <style src="../style/style.scss" global></style> -->
 <style lang="scss" global>
-    @import "./style/style.scss";
+    @import "../style/style.scss";
 </style>
 
 <slot></slot>

src/routes/choose.svelte

@@ -4,7 +4,9 @@
         site,
         currentLocation,
         currentPhotos
-    } from '../store'
+    } from '../utils/store'
+
+    // Depencencies
     import AOS from 'aos'
 
     // Components

src/routes/credits.svelte

@@ -1,6 +1,6 @@
 <script>
     import { onMount } from 'svelte'
-    import { site } from '../store'
+    import { site } from '../utils/store'
 
     // Dependencies
     import AOS from 'aos'

src/routes/index.svelte

@@ -1,7 +1,7 @@
 <script context="module">
 	import {
         apiEndpoints,
-    } from '../store'
+    } from '../utils/store'
 
 	// Preload data
 	export async function preload (page, session) {
@@ -18,8 +18,8 @@
 
 <script>
     import { onMount } from 'svelte'
-    import { site, currentLocation, currentPhotos } from '../store'
-    import * as fn from '../functions'
+    import { site, currentLocation, currentPhotos } from '../utils/store'
+    import * as fn from '../utils/functions'
 
     // Dependencies
     import * as basicScroll from 'basicscroll'

src/routes/location/[country]/[location].svelte

@@ -5,7 +5,7 @@
         locations,
         currentLocation,
         currentPhotos
-    } from '../../../store'
+    } from '../../../utils/store'
     import { stores } from '@sapper/app'
 
     // Preload data
@@ -23,7 +23,7 @@
 
 <script>
     import { onMount } from 'svelte'
-    import * as fn from '../../../functions'
+    import * as fn from '../../../utils/functions'
     const { page } = stores()
 
     // Dependencies

src/routes/viewer/[country]/[location]/[photo].svelte

@@ -5,7 +5,7 @@
         locations,
         currentLocation,
         currentPhotos
-    } from '../../../../store'
+    } from '../../../../utils/store'
 
     // Define either to preload data or use the store
     let preloaded
@@ -32,7 +32,7 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte'
     import { goto } from '@sapper/app'
-    import * as fn from '../../../../functions'
+    import * as fn from '../../../../utils/functions'
     const { page } = stores()
     const dispatch = createEventDispatcher()
 

src/template.html

@@ -2,13 +2,14 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 	<meta name="viewport" content="width=device-width,initial-scale=1">
+	<meta name="theme-color" content="#3C0576">
+
 	<link rel="shortcut icon" type="image/png" href="/img/favicon.png">
+	<link rel="stylesheet" href="/bundle.css">
 
 	%sapper.base%
 	%sapper.head%
-	%sapper.styles%
 </head>
 
 <body>