From e13743ccce6d5215dcf6dee4aab2e2e3ae28c209 Mon Sep 17 00:00:00 2001
From: Anatoly <akopyl@radner.ru>
Date: Thu, 30 Dec 2021 23:59:46 +0300
Subject: [PATCH] Basic styles

---
 src/App.vue              | 19 +++++++++++++++++--
 src/scss/style.scss      | 26 ++++++++++++++++++++++++++
 src/views/Home/Index.vue | 30 ++++++++++++++++++++----------
 src/views/Room/Index.vue |  7 ++++---
 4 files changed, 67 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ab9ac08..7df4bcc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,22 @@
 <template>
-  <router-view/>
+  <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>
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 94909a0..21080eb 100644
--- a/src/scss/style.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
index a0a881d..57c5998 100644
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -1,15 +1,17 @@
 <template>
   <div class="home">
-    <input
-      type="text"
-      v-model="magnet"
-      placeholder="magnet"
-    >
-    <button
-      @click="submit"
-    >
-      Create room
-    </button>
+    <form @submit.prevent>
+      <input
+        type="text"
+        v-model="magnet"
+        placeholder="magnet link"
+      >
+      <button
+        @click="submit"
+      >
+        create room
+      </button>
+    </form>
   </div>
 </template>
 
@@ -34,3 +36,11 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+form {
+  > * {
+    margin: 0 8px;
+  }
+}
+</style>
diff --git a/src/views/Room/Index.vue b/src/views/Room/Index.vue
index 55b7047..261024f 100644
--- a/src/views/Room/Index.vue
+++ b/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%;