aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/HelloWorld.vue
diff options
context:
space:
mode:
authorLeonardo Bishop <me@leonardobishop.com>2024-10-26 12:10:47 +0100
committerLeonardo Bishop <me@leonardobishop.com>2024-10-26 12:10:47 +0100
commit5e4d41d1dfeaaeca731b3c5496377214ec6e557f (patch)
tree6b1c5359f17e1e30c85fdb7d611d1c5bbb7843e9 /src/components/HelloWorld.vue
bootstrap project
Diffstat (limited to 'src/components/HelloWorld.vue')
-rw-r--r--src/components/HelloWorld.vue41
1 files changed, 41 insertions, 0 deletions
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
new file mode 100644
index 0000000..a2eabd1
--- /dev/null
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{
+ msg: string
+}>()
+</script>
+
+<template>
+ <div class="greetings">
+ <h1 class="green">{{ msg }}</h1>
+ <h3>
+ You’ve successfully created a project with
+ <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
+ <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
+ </h3>
+ </div>
+</template>
+
+<style scoped>
+h1 {
+ font-weight: 500;
+ font-size: 2.6rem;
+ position: relative;
+ top: -10px;
+}
+
+h3 {
+ font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+ text-align: center;
+}
+
+@media (min-width: 1024px) {
+ .greetings h1,
+ .greetings h3 {
+ text-align: left;
+ }
+}
+</style>