Auto Commit

src/App.vue

@@ -13,37 +13,35 @@ import CreatVue from './components/CreatVue.vue'
       <CreatVue msg="who is it ?"/>
     </div> -->
     <div class="xd">
-        <CreatVue msg="CreatVue"/>
+        <CreatVue msg="CreatVue" />
     </div>
   </header>
 
-  <main>
+  <!-- <main>
     <TheWelcome />
-  </main>
+  </main> -->
 </template>
 
 <style scoped>
 header {
-  line-height: 1.5;
+  line-height: 2;
+  text-align: center;
 }
 
 .xd{
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 1.5);
-
+    display: block;
 }
+
 .logo {
   display: block;
   margin: 0 auto 2rem;
 }
 
-
-
-@media (min-width: 1024px) {
+/* @media (min-width: 1024px) {
   header {
     display: flex;
     place-items: center;
+    text-align: center;
     padding-right: calc(var(--section-gap) / 2);
   }
 
@@ -56,5 +54,5 @@ header {
     place-items: flex-start;
     flex-wrap: wrap;
   }
-}
+} */
 </style>

src/assets/main.css

@@ -3,8 +3,7 @@
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
-
+  /* padding: 2rem; */
   font-weight: normal;
 }
 

src/components/CreatVue.vue

@@ -18,10 +18,11 @@ const count = ref(0)
 </script>
 
 <template>
-    <h1>{{ msg }}</h1>
+    <!-- <h1>{{ msg }}</h1> -->
     <div id="app">
-    <button @click="count++" style="font-size: 20px;">
-        <span> count is: {{ count }} </span> 
-    </button>
+        <span><h1>{{ msg }}</h1></span>
+        <span>
+            <button @click="count++" style="font-size: 20px; border-radius: 6px;; border: 2px solid #008CBA; background-color: #4CAF50;">count is: {{ count }} </button>
+        </span>
     </div>
 </template>
\ No newline at end of file

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
 
-import './assets/main.css'
+// import './assets/main.css'
 
 createApp(App).mount('#app')