Use routify and GraphQL server

1 files changed, 37 insertions, 0 deletions

diff --git a/src/pages/_layout.svelte b/src/pages/_layout.svelte
new file mode 100644
index 0000000..80cc29e
--- /dev/null
+++ b/src/pages/_layout.svelte
@@ -0,0 +1,37 @@
+<script>
+  import '$config/i18n';
+  import { isLoading } from 'svelte-i18n';
+  import ForumList from '$components/forum_list/forum_list.svelte';
+  import Header from '$components/header/header.svelte';
+  import Footer from '$components/footer/footer.svelte';
+</script>
+
+{#if $isLoading}
+  <h1>Loading.</h1>
+  <p>Please wait.</p>
+{:else}
+  <Header />
+  <main>
+    <slot></slot>
+  </main>
+  <ForumList />
+  <Footer />
+{/if}
+
+<style>
+  main {
+    grid-column: col-start 2 / span 11;
+  }
+
+  :global(#forum) {
+    display: grid;
+    font-family : 'ヒラギノ明朝 ProN' , 'Hiragino Mincho ProN' , '游明朝','游明朝体',YuMincho,'Yu Mincho' , 'ＭＳ 明朝' , 'MS Mincho' , HiraMinProN-W3 , 'TakaoEx明朝' , TakaoExMincho , 'MotoyaLCedar' , 'Droid Sans Japanese' , serif;
+    grid-template-columns: repeat(12, [col-start] 1fr);
+    grid-gap: 20px;
+    grid-auto-rows: minmax(24px, auto);
+  }
+
+  :global(body) {
+    background-color: whitesmoke;
+  }
+</style>