Closes #48

.vuepress/components/GithubFeed.vue

@@ -1,52 +1,63 @@
 <template>
+  <div id="github-feed" class="github-feed">
+    <h3>GitHub</h3>
+    <h5 class="last-updated" v-on:click="updateFeed">Last updated: {{ formatDate(lastUpdated) }}</h5>
 
-  <div id="github-feed">
+    <div v-for="event in events" class="github-feed__event">
-
-    <div class="last-updated" v-on:click="updateFeed">Last updated: {{ formatDate(lastUpdated) }}</div>
-    
-    <div v-for="event in events" class="event">
       <a v-bind:href="generateGithubUrl('actor',event)" target="_blank">
-        <img v-bind:src="event.actor.avatar_url" class="avatar"> {{ event.actor.display_login }}
+        <img v-bind:src="event.actor.avatar_url" class="github-feed__event__avatar">
       </a>
+
+      <p>
         <template v-if="event.type == 'CommitCommentEvent'">
-        commented on <a v-bind:href="generateGithubUrl('comment', event)">commit</a>
+          <strong>{{ event.actor.display_login }}</strong> commented on <a v-bind:href="generateGithubUrl('comment', event)">commit</a>
         </template>
+
         <template v-else-if="event.type == 'CreateEvent'">
-        created {{ event.payload.ref_type }} '{{ event.payload.ref }}'
+          <strong>{{ event.actor.display_login }}</strong> created {{ event.payload.ref_type }} '{{ event.payload.ref }}'
         </template>
+
         <template v-else-if="event.type == 'DeleteEvent'">
-        deleted {{ event.payload.ref_type }} '{{ event.payload.ref }}'
+          <strong>{{ event.actor.display_login }}</strong> deleted {{ event.payload.ref_type }} '{{ event.payload.ref }}'
         </template>
+
         <template v-else-if="event.type == 'ForkEvent'">
-        forked <a v-bind:href="generateGithubUrl('repo', event)" target="_blank">{{ event.repo.name }}</a> to <a v-bind:href="generateGithubUrl('forkee', event)" target="_blank">{{ event.payload.forkee.name }}</a>
+          <strong>{{ event.actor.display_login }}</strong> forked <a v-bind:href="generateGithubUrl('repo', event)" target="_blank">{{ event.repo.name }}</a> to <a v-bind:href="generateGithubUrl('forkee', event)" target="_blank">{{ event.payload.forkee.name }}</a>
         </template>
+
         <template v-else-if="event.type == 'IssueCommentEvent'">
-        commented on <template v-if="event.payload.issue.pull_request">pull request</template><template v-else>issue</template>&nbsp;<a v-bind:href="generateGithubUrl('issue', event)" target="_blank">{{ event.payload.issue.title }}</a>
+          <strong>{{ event.actor.display_login }}</strong> commented on <template v-if="event.payload.issue.pull_request">pull request</template><template v-else>issue</template>&nbsp;<a v-bind:href="generateGithubUrl('issue', event)" target="_blank">{{ event.payload.issue.title }}</a>
         </template>
+
         <template v-else-if="event.type == 'IssuesEvent'">
-        {{ event.payload.action }} issue <a v-bind:href="generateGithubUrl('issue', event)" target="_blank">{{ event.payload.issue.title }}</a>
+          <strong>{{ event.actor.display_login }}</strong> {{ event.payload.action }} issue <a v-bind:href="generateGithubUrl('issue', event)" target="_blank">{{ event.payload.issue.title }}</a>
         </template>
+
         <template v-else-if="event.type == 'PullRequestEvent'">
-        {{ event.payload.action }} pull request <a v-bind:href="generateGithubUrl('pull_request', event)" target="_blank">{{ event.payload.pull_request.title }}</a>
+          <strong>{{ event.actor.display_login }}</strong> {{ event.payload.action }} pull request <a v-bind:href="generateGithubUrl('pull_request', event)" target="_blank">{{ event.payload.pull_request.title }}</a>
         </template>
+
         <template v-else-if="event.type == 'PullRequestReviewCommentEvent'">
-        commented on pull request <a v-bind:href="generateGithubUrl('pull_request', event)" target="_blank">{{ event.payload.pull_request.title }}</a>
+          <strong>{{ event.actor.display_login }}</strong> commented on pull request <a v-bind:href="generateGithubUrl('pull_request', event)" target="_blank">{{ event.payload.pull_request.title }}</a>
         </template>
+
         <template v-else-if="event.type == 'PushEvent'">
-        pushed to <a v-bind:href="generateGithubUrl('push', event)" target="_blank">{{ refToBranch(event.payload.ref) }}</a>
+          <strong>{{ event.actor.display_login }}</strong> pushed to <a v-bind:href="generateGithubUrl('push', event)" target="_blank">{{ refToBranch(event.payload.ref) }}</a>
         </template>
+
         <template v-else-if="event.type == 'ReleaseEvent'">
-        released <a v-bind:href="generateGithubUrl('release', event)" target="_blank">{{ event.payload.release.tag_name }}</a>
+          <strong>{{ event.actor.display_login }}</strong> released <a v-bind:href="generateGithubUrl('release', event)" target="_blank">{{ event.payload.release.tag_name }}</a>
         </template>
+
         <template v-else-if="event.type == 'WatchEvent'">
-        starred the repo
+          <strong>{{ event.actor.display_login }}</strong> starred the repo
         </template>
-      in <a v-bind:href="generateGithubUrl('repo', event)" target="_blank">{{ event.repo.name }}</a>
-      <div class="time-ago">{{ event.created_at | moment('from') }}</div>
-    </div>
 
+        in <a v-bind:href="generateGithubUrl('repo', event)" target="_blank"><strong>{{ event.repo.name }}</strong></a>
+        <em class="github-feed__event__time">{{ event.created_at | moment('from') }}</em>
+      </p>
+    </div>
   </div>
-
 </template>
 
 <script>
@@ -124,31 +135,165 @@ export default {
 </script>
 
 <style lang="scss">
+  @import "../scss/init/colors";
 
-#github-feed {
+  .github-feed {
-  .last-updated {
+    border-bottom: 1px solid rgba($black, 0.05);
-    text-align: right;
+    border-left: 1px solid rgba($black, 0.05);
-    color: #777;
+    font-size: 0.8rem;
-    font-style: italic;
+    grid-area: github;
-  }
+    position: relative;
-  .event {
-    padding: 0.5rem 0;
-    border-bottom: 1px solid #ccc;
-  }
-  .avatar {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 1rem;
-    vertical-align: middle;
-    margin-right: 0.5rem;
-  }
-  .time-ago {
-    color: #777;
-    font-style: italic;
-    font-size: 0.7rem;
-    float: right;
-    padding: 0.7rem 0 0 0;
-  }
-}
 
+    @media (min-width: 1301px) {
+      padding-top: 3.7rem;
+    }
+
+    @media (min-width: 1001px) and (max-width: 1300px) {
+      padding-top: 2.95rem;
+    }
+
+    @media (min-width: 1001px) {
+      padding-bottom: 2rem;
+      padding-right: 10%;
+      padding-left: 2rem;
+    }
+
+    @media (max-width: 1000px) {
+      padding-top: 2rem;
+      padding-bottom: 2rem;
+    }
+
+    @media (min-width: 901px) {
+      padding-right: 1rem;
+      padding-left: 1rem;
+    }
+
+    @media (max-width: 900px) {
+      padding-right: 2rem;
+      padding-left: 2rem;
+    }
+
+    @media (max-width: 700px) {
+      overflow-x: auto;
+      overflow-y: hidden;
+      white-space: nowrap;
+    }
+
+    h3, h5 {
+      @media (min-width: 1001px) {
+        text-align: center;
+      }
+    }
+
+    h3 {
+      letter-spacing: 0.1rem;
+      line-height: 1;
+      text-transform: uppercase;
+      width: 100%;
+
+      @media (min-width: 1301px) {
+        top: 2.15rem; left: 0;
+
+        color: rgba($black, 0.045);
+        font-size: 4rem;
+        position: absolute;
+      }
+
+      @media (max-width: 1300px) {
+        color: $black;
+      }
+
+      @media (min-width: 901px) and (max-width: 1300px) {
+        font-size: 3rem;
+      }
+
+      @media (max-width: 900px) {
+        font-size: 2rem;
+        margin-bottom: 1rem;
+      }
+    }
+
+    h5 {
+      font-style: italic;
+      font-weight: normal;
+
+      @media (min-width: 1001px) {
+        margin-bottom: 3rem;
+      }
+
+      @media (min-width: 901px) and (max-width: 1000px) {
+        margin-bottom: 2rem;
+      }
+
+      @media (max-width: 900px) {
+        margin-bottom: 0.5rem;
+        position: relative;
+        top: -1rem;
+      }
+    }
+  }
+
+  .github-feed__event {
+    line-height: 1.33;
+
+    @media (max-width: 700px) {
+      display: inline-block;
+      margin-right: 1.25rem;
+      vertical-align: top;
+      width: 200px;
+    }
+
+    &:not(:last-of-type) {
+      @media (min-width: 701px) {
+        margin-bottom: 1.25rem;
+      }
+    }
+
+    > a:first-of-type {
+      display: inline-block;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+    }
+
+    > p:first-of-type {
+      @media (min-width: 701px) {
+        display: inline-block;
+        margin-left: 0.5rem;
+        vertical-align: top;
+        width: calc(100% - 4.5rem);
+      }
+
+      @media (max-width: 700px) {
+        top: -3.5rem; left: 5%;
+
+        background-color: $white;
+        border: 1px solid rgba($gray, 0.1);
+        border-radius: 3px;
+        padding: 1rem;
+        position: relative;
+        white-space: normal;
+        width: 90%;
+      }
+    }
+  }
+
+  .github-feed__event__avatar {
+    border: 1px solid rgba($gray, 0.1);
+    border-radius: 3px;
+    object-position: center;
+    object-fit: cover;
+
+    @media (min-width: 701px) {
+      width: 2.5rem; height: 2.5rem;
+    }
+
+    @media (max-width: 700px) {
+      width: 100%; height: 100%;
+    }
+  }
+
+  .github-feed__event__time {
+    color: $gray;
+    display: block;
+  }
 </style>

.vuepress/scss/_layout.scss

@@ -23,9 +23,28 @@ main {
   min-height: 100vh;
   padding-top: 4rem;
 
+  &:not(.home) {
     > div:first-of-type {
       flex: 1;
     }
+  }
+
+  &.home {
+    @media (min-width: 1001px) {
+      > div:first-of-type {
+        display: grid;
+        grid-gap: 0;
+        grid-template-areas:
+          "header header header"
+          "features features features"
+          "intro intro github"
+          "docs docs github"
+          "contribute contribute contribute"
+          "develop develop develop"
+          "community community community";
+      }
+    }
+  }
 }
 
 .inner-wrap {

.vuepress/scss/pages/_home.scss

@@ -40,6 +40,7 @@
     background-position: center;
     background-repeat: no-repeat;
     display: flex;
+    grid-area: header;
     height: calc(50vh - 4rem); min-height: 300px;
     justify-content: center;
 
@@ -78,6 +79,8 @@
   }
 
   &.features {
+    grid-area: features;
+
     .home__features {
       align-content: center;
       border-bottom: 1px solid rgba($black, 0.05);
@@ -204,6 +207,21 @@
     border-bottom: 1px solid rgba($black, 0.05);
   }
 
+  &.intro,
+  &.docs {
+    @media (min-width: 1301px) {
+      padding-left: 10%;
+    }
+  }
+
+  &.intro {
+    grid-area: intro;
+  }
+
+  &.docs {
+    grid-area: docs;
+  }
+
   &.community,
   &.contribute {
     p {
@@ -273,6 +291,8 @@
   }
 
   &.contribute {
+    grid-area: contribute;
+
     ul {
       li {
         @media (min-width: 701px) {
@@ -318,7 +338,13 @@
     }
   }
 
+  &.develop {
+    grid-area: develop;
+  }
+
   &.community {
+    grid-area: community;
+
     ul {
       li {
         @media (min-width: 701px) {

.vuepress/theme/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main v-bind:class="{'home': $page.frontmatter.home}">
     <nav class="navigation">
       <div class="inner-wrap">
         <router-link class="navigation__item" to="/" title="Go back home">LBRY</router-link>
@@ -59,6 +59,8 @@
           </div>
         </section>
 
+        <GithubFeed></GithubFeed>
+
         <section class="home contribute">
           <div class="inner-wrap">
             <h3>Contribute</h3>
@@ -103,7 +105,7 @@
     </template>
 
     <template v-else-if="$page.path == '/whitepaper.html'">
-      <Content custom></Content>
+      <Content></Content>
     </template>
 
     <template v-else>