initial

src/App.vue

@@ -0,0 +1,117 @@
+<template>
+  <v-app>
+    <v-main class="bg-main">
+      <div class="d-block w-100 text-right pa-3">
+        <span class="img-logo">
+          <router-link to="/">
+            <span class="float-left">
+              <v-img
+                :aspect-ratio="1"
+                src="./assets/logo.png"
+                width="80"
+              ></v-img></span></router-link
+        ></span>
+        <span
+          ><v-btn
+            icon="mdi-home-variant-outline"
+            variant="text"
+            href="/"
+          ></v-btn
+          ><v-btn icon="mdi-account-outline" variant="text"></v-btn>
+          <v-btn variant="text"> Sign In </v-btn>
+          <v-btn elevated color="#F4C03F"> Get Started </v-btn></span
+        >
+      </div>
+      <router-view />
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+import { client } from "./utils/trpc.ts";
+console.log(client);
+// import MainVote from "./components/MainVote.vue";
+
+export default {
+  name: "App",
+
+  components: {
+    // MainVote,
+  },
+
+  data: () => ({
+    //
+  }),
+};
+</script>
+<style>
+.img-logo {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+* {
+  font-family: "IBM Plex Sans Thai", sans-serif;
+}
+.text-title {
+  font-size: 40px;
+  font-weight: 500;
+  /* font: normal normal medium 47px/77px IBM Plex Sans Thai; */
+}
+.text-normal {
+  font-size: 30px;
+}
+.text-subtitle {
+  font-size: 25px;
+  font-weight: 600;
+}
+.text-sub {
+  font-size: 24px;
+  font-weight: 400;
+}
+.text-sub2 {
+  font-size: 20px;
+  /* font-weight: 500; */
+}
+.text-sub3 {
+  font-size: 18px;
+  /* font-weight: 500; */
+}
+.text-small {
+  font-size: 16px;
+}
+.txt-black {
+  color: #37332f;
+  /* color: black; */
+}
+
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .img-logo {
+    display: none;
+  }
+  .text-title {
+    font-size: 28px;
+    font-weight: 500;
+    /* font: normal normal medium 47px/77px IBM Plex Sans Thai; */
+  }
+  .text-normal {
+    font-size: 25px;
+  }
+  .text-subtitle {
+    font-size: 22px;
+    font-weight: 600;
+  }
+  .text-sub {
+    font-size: 23px;
+    font-weight: 400;
+  }
+  .text-sub2 {
+    font-size: 20px;
+    /* font-weight: 500; */
+  }
+  .text-sub3 {
+    font-size: 18px;
+    /* font-weight: 500; */
+  }
+}
+</style>