still syncing

src/App.vue

@@ -18,8 +18,8 @@ export default {
 </script>
 
 <template>
-  <header class="w-screen flex flex-row">
-    <h1 class="">{{ applicationName }}</h1>
+  <header class="w-screen flex flex-row place-content-center">
+    <h1 class="p-2 text-xl">{{ applicationName }}</h1>
     <MainMenu />
     <Search />
   </header>

src/components/Data.vue

@@ -16,7 +16,11 @@ export default {
   methods: {
     async fetchData() {
       this.papers = await (await fetch(this.apiUri)).json()
-    }
+    }, 
+    filterData() {
+      
+    },
+
   },
 }
 </script>
@@ -24,7 +28,12 @@ export default {
 <template>
   <ul>
     <li v-for="paper in papers">
-      <a :href="paper.url">{{ paper.name }}</a>
+      <article>
+        <a :href="paper.url">
+          <h4 class="text-xl">{{ paper.name }}</h4>
+          <p>{{ paper.published_at }}: FIXME von {{ paper.originator }}</p>
+        </a>
+      </article>
     </li>
   </ul>
 </template>

src/components/MainMenu.vue

@@ -9,8 +9,8 @@ export default {
 </script>
 
 <template>
-  <ul class="flex flex-row">
-    <li class="p-2" v-for="entry of menuEntries">
+  <ul class="flex flex-row place-content-center">
+    <li class="p-2 place-content-center" v-for="entry of menuEntries">
       <a :href="entry.uri">{{ entry.name }}</a>
     </li>
   </ul>

src/components/Search.vue

@@ -9,5 +9,7 @@ export default {
 </script>
 
 <template>
-  <div>Search</div>
+  <form>
+    <input class="p-2" type="search" placeholder="Suche …">
+  </form>
 </template>