placeholder data properly implemented

final/src/App.vue

@@ -18,7 +18,7 @@
     </div>
 
 
-
+   <!-- figure out how to style the router-view thing -->
   </div><router-view/>
   </div>
 
@@ -52,7 +52,8 @@ export default {
   justify-content: flex-start;
 }
 #nav {
-  padding: 30px;
+  padding: 23px;
+  width: 30%;  
   a {
     font-weight: bold;
     color: #2c3e50;
@@ -72,10 +73,12 @@ export default {
   width: 100%;
   img {
     width: 30%;
+    max-width:200px;
   }
   div {
     padding-left: 5%;
     line-height: 200%;
+    width: 55%;
   }
   
 }

final/src/components/PlaceholderTweets.vue

@@ -0,0 +1,65 @@
+<template>
+<div id="postLog">
+	<div class="post">
+		<img class="postPFP" src="../assets/junk-tweet-pfp-1.png">
+		<span class="postMSG">lol hope this works</span>
+	</div>
+	<div class="post">
+		<img class="postPFP" src="../assets/junk-tweet-pfp-2.png">
+		<span class="postMSG">this is a second tweet</span>
+	</div>
+	<div class="post">
+		<img class="postPFP" src="../assets/junk-tweet-pfp-3.png">
+		<span class="postMSG">third tweet</span>
+	</div>
+	<!-- all posts below this are copies of the above -->
+	<div class="post">
+		<img class="postPFP" src="../assets/junk-tweet-pfp-1.png">
+		<span class="postMSG">lol hope this works</span>
+	</div>
+	<div class="post">
+		<img class="postPFP" src="../assets/junk-tweet-pfp-2.png">
+		<span class="postMSG">this is a second tweet</span>
+	</div>
+	<div class="post">
+		<img class="postPFP" src="../assets/junk-tweet-pfp-3.png">
+		<span class="postMSG">third tweet</span>
+	</div>
+	<div class="post">
+		<img class="postPFP" src="../assets/junk-tweet-pfp-1.png">
+		<span class="postMSG">lol hope this works</span>
+	</div>
+	<div class="post">
+		<img class="postPFP" src="../assets/junk-tweet-pfp-2.png">
+		<span class="postMSG">this is a second tweet</span>
+	</div>
+	<div class="post">
+		<img class="postPFP" src="../assets/junk-tweet-pfp-3.png">
+		<span class="postMSG">third tweet</span>
+	</div>
+</div>
+</template>
+
+<script>
+	export default {
+  name: 'PlaceholderTweets',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<style>
+
+.postPFP {
+	height: 70px;
+}
+
+#postLog {
+	text-align: left;
+	max-height: 500px;
+	width: 150%;
+	overflow-y: scroll;
+}
+
+</style>

final/src/components/TestThis.vue

@@ -0,0 +1,11 @@
+<template>
+	<h1>{{ msg }}</h1>
+</template>
+<script>
+	export default {
+  name: 'TestThis',
+  props: {
+    msg: String
+  }
+}
+</script>

final/src/views/Home.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Testing this out"/>
+
+    <PlaceholderTweets/>
+
   </div>
 
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+
+import PlaceholderTweets from '@/components/PlaceholderTweets.vue'
 
 export default {
   name: 'home',
   components: {
-    HelloWorld
+    PlaceholderTweets
   },
   mounted() {
     // console.log(db);