From 5407d1cfe18a6f076072231156cd55fea7a09293 Mon Sep 17 00:00:00 2001
From: Will Murphy <william@datatitian.com>
Date: Sun, 13 Oct 2019 19:25:07 -0500
Subject: [PATCH] styling and WIP homepage

---
 README.md                       |  2 +-
 web/public/index.html           |  4 ++--
 web/src/App.vue                 | 19 ++++++++-----------
 web/src/components/PostCard.vue | 23 +++++++++--------------
 web/src/views/Home.vue          | 32 +++++++++++++++++++++++++++-----
 5 files changed, 47 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index fa39891..dfa0d75 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ This server-2-server ActivityPub implementation adds decentralized, federaded "g
 
 ## Tech stack
 
-Node.js, ExpressJS, MongoDB
+MEVN: MongoDD, ExpressJS, Vue, NodeJS
 
 ## Installation
 
diff --git a/web/public/index.html b/web/public/index.html
index 5a55a81..446cc83 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link rel="stylesheet" href="<%= BASE_URL %>w3.css">
-    <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> -->
-    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
     <title>web</title>
   </head>
diff --git a/web/src/App.vue b/web/src/App.vue
index 7853a17..82953c4 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -4,15 +4,13 @@
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
     </div> -->
-    <div class="w3-top">
-      <div class="w3-bar w3-black w3-card">&nbsp;</div>
-    </div>
-    <!-- Navbar on small screens -->
-    <div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
-        &nbsp;
-    </div>
-    <div class="w3-content" style="max-width:2000px;margin-top:46px">
-      <router-view/>
+    <div class="w3-bar w3-black w3-card">&nbsp;</div>
+    <div class="w3-row">
+      <div class="w3-col s0 m2">&nbsp;</div>
+      <div class="w3-col s12 m8 w3-content">
+        <router-view/>
+      </div>
+      <div class="w3-col s0 m2">&nbsp;</div>
     </div>
     <footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
       <a href="https://github.com/wmurphyrd/guppe"><i class="fa fa-github w3-hover-opacity"></i></a>
@@ -22,11 +20,10 @@
 
 <style>
 #app {
-  /* font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px; */
 }
 </style>
diff --git a/web/src/components/PostCard.vue b/web/src/components/PostCard.vue
index 93eca52..598608f 100644
--- a/web/src/components/PostCard.vue
+++ b/web/src/components/PostCard.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="w3-card">
-    <div class="actor">
-      <img crossorigin="anonymous" :src="actorIconUrl">
+  <div class="w3-card w3-margin-bottom">
+    <div class="w3-container w3-left-align">
+      <img class="icon" crossorigin="anonymous" :src="actorIconUrl">
       <label>
-        {{ actor.preferredUsername }}
-        <span class="muted">@{{ actorHost }}</span>
+        <b>{{ actor.preferredUsername }}</b>
+        <span class="w3-text-grey">@{{ actorHost }}</span>
       </label>
     </div>
-    <p v-html="post.content"></p>
+    <div class="w3-container">
+      <p v-html="post.content"></p>
+    </div>
   </div>
 </template>
 
@@ -69,15 +71,8 @@ export default {
 </script>
 
 <style scoped>
-  .actor img {
+  .icon {
     width: 32px;
     height: 32px;
   }
-  .actor label {
-    font-weight: bold;
-  }
-  .actor label .muted {
-    font-weight: normal;
-    color: gray;
-  }
 </style>
\ No newline at end of file
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index fc2e940..b15786d 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -1,18 +1,40 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div class="w3-container">
+    <img alt="Guppe logo" src="/f/guppe.png">
+    <h1>Guppe Groups</h1>
+    <p>
+Guppe brings social groups to the fediverse &mdash; making it easy to connect and meet new
+people based on shared
+interests without the maniuplation of your attention to maximize ad revenue nor the
+walled garden lock-in of capitalist social media.
+    </p>
+    <h2>How does Guppe work?</h2>
+    <ol>
+      <li>Follow a user on @gup.pe to join that group</li>
+      <li>Mention a user on @gup.pe to share a post with everyone in the group</li>
+      <li>New groups are created on demand, just search for @YourGroupNameHere@gup.pe and it will show up</li>
+      <li>Visit a @gup.pe user profile to see the group history</li>
+    </ol>
+    <p>
+A Guppe Group has its own account and profile. 
+This server-2-server ActivityPub implementation adds decentralized,
+federaded "groups" support across all ActivityPub compliant social media networks.
+Users join groups by following group-type actors on Guppe servers and contribute t
+groups by mentioning those same actors in a post. Guppe group actors will
+automatically forward posts they receive to all group members so that everyone in the
+group sees any post made to the group. Guppe group actors' profiles (e.g. outboxes) also
+serve as a group discussion history.
+    </p>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+// import HelloWorld from '@/components/HelloWorld.vue'
 
 export default {
   name: 'home',
   components: {
-    HelloWorld
   }
 }
 </script>