Basic styles

src/App.vue

@@ -1,7 +1,22 @@
 <template>
+  <div>
+    <h2 id="site-name">watch2gether</h2>
     <router-view/>
+  </div>
 </template>
 
 <style lang="scss">
-@import '@/scss/style.scss'
+@import '@/scss/style.scss';
+
+#site-name {
+  margin-bottom: 96px;
+}
+
+#app {
+  height: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>

src/scss/style.scss

@@ -1,5 +1,31 @@
 @import 'reset-css';
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');
 
 * {
   text-align: center;
+  font-family: 'EB Garamond', serif;
+  font-size: 16px;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+}
+
+button, input[type="text"], textarea {
+  padding: 8px 12px;
+  background: none;
+  border: 1px solid black;
+}
+
+button, a {
+  cursor: pointer;
+}
+
+h1 {
+  font-size: 32px;
+}
+
+h2 {
+  font-size: 24px;
 }

src/views/Home/Index.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="home">
+    <form @submit.prevent>
       <input
         type="text"
         v-model="magnet"
-      placeholder="magnet"
+        placeholder="magnet link"
       >
       <button
         @click="submit"
       >
-      Create room
+        create room
       </button>
+    </form>
   </div>
 </template>
 
@@ -34,3 +36,11 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+form {
+  > * {
+    margin: 0 8px;
+  }
+}
+</style>

src/views/Room/Index.vue

@@ -106,9 +106,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-h1 {
-  font-size: 32px;
-}
 .progress-bar {
   width: 400px;
   height: 25px;
@@ -116,6 +113,10 @@ h1 {
   margin: auto;
 }
 
+h1 {
+  margin-bottom: 32px;
+}
+
 video {
   width: 800px;
   max-width: 100%;