First commit

3 files changed, 122 insertions, 0 deletions

diff --git a/src/routes/_error.svelte b/src/routes/_error.svelte
new file mode 100644
index 0000000..92fcca8
--- /dev/null
+++ b/src/routes/_error.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	export let status: number;
+	export let error: Error;
+
+	const dev = process.env.NODE_ENV === 'development';
+</script>
+
+<style>
+	h1, p {
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 2.8em;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+
+	p {
+		margin: 1em auto;
+	}
+
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<svelte:head>
+	<title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+
+<p>{error.message}</p>
+
+{#if dev && error.stack}
+	<pre>{error.stack}</pre>
+{/if}
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
new file mode 100644
index 0000000..bab4188
--- /dev/null
+++ b/src/routes/_layout.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+</script>
+
+<style>
+    .app-container  {
+        font-family: Roboto, sans-serif;
+        font-size: 1rem;
+        letter-spacing: 0.05em;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        --bg-opacity: 1;
+        background-color: #1a202c;
+        background-color: rgba(26, 32, 44, var(--bg-opacity));
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+
+    @media (min-width: 640px) {
+        .app-container  {
+            border-radius: 1rem;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            letter-spacing: 0.05em;
+            height: 100%;
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
+            width: 375px;
+            height: 812px;
+        }
+    }
+
+    .menu-button {
+        position: relative;
+        top: .25rem;
+        left: .75rem;
+        color: #ffffff;
+        font-size: 1.5rem;
+
+    }
+
+</style>
+
+<div class="app-container">
+    <!-- <div class="menu-button">
+        <i class="fas fa-bars"></i>
+    </div> -->
+
+    <slot></slot>
+</div>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
new file mode 100644
index 0000000..655f0c4
--- /dev/null
+++ b/src/routes/index.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import WeatherCurrent from '../components/WeatherCurrent.svelte';
+    import PredictedSpaceWeather from '../components/PredictedSpaceWeather.svelte';
+</script>
+
+
+<style>
+    .homescreen {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+        --bg-opacity: 1;
+        background-color: #1a202c;
+        background-color: rgba(26, 32, 44, var(--bg-opacity));
+        --bg-opacity: 0.25;
+    }
+</style>
+
+<svelte:head>
+	<title>Aurora data</title>
+</svelte:head>
+
+
+<div class="homescreen">
+    <WeatherCurrent/>
+    <PredictedSpaceWeather />
+</div>