Use SCSS and PostCSS with Rollup

src/components/Locations.svelte

@@ -1,6 +1,11 @@
+<script context="module">
+    import Shuffle from 'shufflejs'
+</script>
 <script>
+    import { onMount } from 'svelte'
     import { continents, locations } from '../store'
-    import { cubicInOut } from 'svelte/easing'
+    import { zoomFadeIn, zoomFadeOut } from '../animations'
+
 
     // Define continents to be show
     let continentsShow = []
@@ -11,47 +16,42 @@
         }
     })
 
-    // Define locations to show
-    let filteredLocations = Array.from($locations)
-    filteredLocations.forEach(loc => loc.show = true)
-    $: visibleLocations = filteredLocations
+    let filterLocations
+    onMount(() => {
+        filterLocations = new Shuffle(document.getElementById('locations_list'), {
+            itemSelector: '.column',
+            sizer: '#continents',
+            speed: 400,
+            staggerAmount: 50
+        })
+    })
 
     // On click on continents
-    function toggleCountries (continent, i) {
-        // Toggle the continent
-        continentsShow[i].show = !continentsShow[i].show
+    const toggleContinents = (event, continent = '') => {
+        // Change the filter
+        filterLocations.filter(continent.id)
 
-        // Filter locations
-        filteredLocations.map(l => l.country.continent.id === continent.id ? l.show = !l.show : null)
-        visibleLocations = filteredLocations
+        // Change active classes
+        const continentsList = [...event.target.parentNode.children]
+        continentsList.forEach(c => c.classList.remove('is-danger'))
+        event.target.classList.add('is-danger')
     }
-
-    // Transitions
-    const transition = (node, { duration }) => {
-		return {
-			duration,
-			css: t => {
-				const eased = cubicInOut(t)
-				return `transform: scale(${eased});`
-			}
-		}
-	}
 </script>
 
-<div class="buttons has-addons is-centered">
-{#each $continents as continent, i}
+<div class="buttons is-centered" id="continents">
+    <button class="button is-rounded is-danger" on:click="{(e) => toggleContinents(e)}">All</button>
+    {#each $continents as continent, i}
     {#if continent.countries}
-    <button class="button is-rounded is-danger" class:is-outlined={!continentsShow[i].show} on:click="{toggleCountries(continent, i)}">
+    <button class="button is-rounded is-danger is-outlined" on:click="{(e) => toggleContinents(e, continent)}">
         {continent.name}
     </button>
     {/if}
-{/each}
+    {/each}
 </div>
 
 <div class="columns" id="locations_list">
-    {#each visibleLocations as location}
-    {#if location.show}
-    <div class="column is-one-third" in:transition="{{duration: 400}}" out:transition="{{duration: 400}}">
+    {#each $locations as location}
+    <div class="column is-one-third animate" data-groups='["{location.country.continent.id}"]'>
         <div class="card">
             <div class="card-content">
                 <a class="media" href="/location/{location.country.slug}/{location.slug}">
@@ -72,6 +72,5 @@
             </div>
         </div>
     </div>
-    {/if}
     {/each}
 </div>

src/routes/_layout.svelte

@@ -62,9 +62,9 @@
 </script>
 
 <script>
-	// Dependencies
-	import '../../node_modules/bulma/css/bulma.min.css'
-	import '../../node_modules/@fortawesome/fontawesome-free/css/all.min.css'
+	// Styles
+	// import '../../node_modules/bulma/css/bulma.min.css'
+	// import '../../node_modules/@fortawesome/fontawesome-free/css/all.min.css'
 
 	// Components
 	import Footer from '../parts/Footer.svelte'
@@ -83,6 +83,10 @@
 	<title>Houses Of - Beautiful houses of planet Earth</title>
 </svelte:head>
 
+<style lang="scss" global>
+	@import '../style/style.scss';
+</style>
+
 <slot></slot>
 
 <Footer />