diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 18 | ||||
| -rw-r--r-- | src/components/MainPage.vue | 130 | ||||
| -rw-r--r-- | src/components/SubCard.vue | 20 | ||||
| -rw-r--r-- | src/plugins/vuetify.js | 6 |
4 files changed, 44 insertions, 130 deletions
diff --git a/src/App.vue b/src/App.vue index 88ad076..8c80550 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,13 +1,9 @@ <template> - <v-app> + <v-app :style="bg"> <v-main> - <v-app-bar> - <template v-slot:prepend> - <v-app-bar-nav-icon></v-app-bar-nav-icon> - </template> - <v-app-bar-title>Otonashi</v-app-bar-title> - </v-app-bar> - <MainPage /> + <v-container> + <MainPage class="float-end w-50" /> + </v-container> </v-main> </v-app> </template> @@ -23,7 +19,11 @@ export default { }, data: () => ({ - // + bg: { + backgroundColor: "grey", + // backgroundImage: "url(https://wallpapercave.com/wp/wp9649930.jpg)", + backgroundPosition: "center", + }, }), }; </script> diff --git a/src/components/MainPage.vue b/src/components/MainPage.vue index 4694510..97dad53 100644 --- a/src/components/MainPage.vue +++ b/src/components/MainPage.vue @@ -1,131 +1,21 @@ <template> - <v-container> - <v-row class="text-center"> - <v-col cols="12"> - <v-img - :src="require('../assets/logo.svg')" - class="my-3" - contain - height="200" - /> - </v-col> - - <v-col class="mb-4"> - <h1 class="display-2 font-weight-bold mb-3"> - Welcome to the Vuetify 3 Beta - </h1> - - <p class="subheading font-weight-regular"> - For help and collaboration with other Vuetify developers, - <br />please join our online - <a href="https://community.vuetifyjs.com" target="_blank" - >Discord Community</a - > - </p> - </v-col> - - <v-col class="mb-5" cols="12"> - <h2 class="headline font-weight-bold mb-5">What's next?</h2> - - <v-row justify="center"> - <v-btn - v-for="(next, i) in whatsNext" - :key="i" - :href="next.href" - class="subheading mx-3" - target="_blank" - > - {{ next.text }} - </v-btn> - </v-row> - </v-col> - - <v-col class="mb-5" cols="12"> - <h2 class="headline font-weight-bold mb-5">Important Links</h2> - - <v-row justify="center"> - <a - v-for="(link, i) in importantLinks" - :key="i" - :href="link.href" - class="subheading mx-3" - target="_blank" - > - {{ link.text }} - </a> - </v-row> - </v-col> - - <v-col class="mb-5" cols="12"> - <h2 class="headline font-weight-bold mb-5">Ecosystem</h2> - - <v-row justify="center"> - <a - v-for="(eco, i) in ecosystem" - :key="i" - :href="eco.href" - class="subheading mx-3" - target="_blank" - > - {{ eco.text }} - </a> - </v-row> - </v-col> - </v-row> - </v-container> + <div class="d-flex align-end justify-start flex-row-reverse flex-wrap"> + <SubCard class="ma-2 pa-2" v-for="n in 6" :key="n" /> + </div> </template> <script> +import SubCard from "./SubCard.vue"; + export default { name: "MainPage", + components: { + SubCard, + }, + data: () => ({ - ecosystem: [ - { - text: "vuetify-loader", - href: "https://github.com/vuetifyjs/vuetify-loader", - }, - { - text: "github", - href: "https://github.com/vuetifyjs/vuetify", - }, - { - text: "awesome-vuetify", - href: "https://github.com/vuetifyjs/awesome-vuetify", - }, - ], - importantLinks: [ - { - text: "Chat", - href: "https://community.vuetifyjs.com", - }, - { - text: "Made with Vuetify", - href: "https://madewithvuejs.com/vuetify", - }, - { - text: "Twitter", - href: "https://twitter.com/vuetifyjs", - }, - { - text: "Articles", - href: "https://medium.com/vuetify", - }, - ], - whatsNext: [ - { - text: "Explore components", - href: "https://vuetifyjs.com", - }, - { - text: "Roadmap", - href: "https://vuetifyjs.com/introduction/roadmap/", - }, - { - text: "Frequently Asked Questions", - href: "https://vuetifyjs.com/getting-started/frequently-asked-questions", - }, - ], + // }), }; </script> diff --git a/src/components/SubCard.vue b/src/components/SubCard.vue new file mode 100644 index 0000000..5b611f6 --- /dev/null +++ b/src/components/SubCard.vue @@ -0,0 +1,20 @@ +<template> + <v-card variant="outlined"> + <v-card-item> + <v-card-title>{{ title }}</v-card-title> + <div class="text-caption"> + {{ content }} + </div> + </v-card-item> + </v-card> +</template> + +<script> +export default { + name: "SubCard", + data: () => ({ + title: "Default Title", + content: "Bruh", + }), +}; +</script> diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js index 2cb3bef..f479d43 100644 --- a/src/plugins/vuetify.js +++ b/src/plugins/vuetify.js @@ -7,5 +7,9 @@ import * as directives from "vuetify/directives"; // Vuetify import { createVuetify } from "vuetify"; -export default createVuetify({ components, directives }); +export default createVuetify({ + theme: { defaultTheme: "dark" }, + components, + directives, +}); // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides |