From 7c7f4e5c74ce383074aa3fb4bba336e99fe58515 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Mon, 21 May 2018 15:26:15 -0500
Subject: [PATCH] CSS fixes and beginning of new Documentation page

---
 .vuepress/components/GithubFeed.vue      | 26 +++++-----
 .vuepress/scss/_layout.scss              | 22 +++++++++
 .vuepress/scss/pages/_documentation.scss |  2 +
 .vuepress/scss/pages/_home.scss          | 60 ++++++++----------------
 .vuepress/theme/Layout.vue               | 37 +++++++++++----
 documentation/index.md                   |  4 ++
 6 files changed, 90 insertions(+), 61 deletions(-)
 create mode 100644 .vuepress/scss/pages/_documentation.scss
 create mode 100644 documentation/index.md

diff --git a/.vuepress/components/GithubFeed.vue b/.vuepress/components/GithubFeed.vue
index 02733a6..4e0829c 100644
--- a/.vuepress/components/GithubFeed.vue
+++ b/.vuepress/components/GithubFeed.vue
@@ -11,61 +11,61 @@
       <p>
         <template v-if="event.type == 'CommitCommentEvent'">
           <strong>{{ event.actor.display_login }}</strong> commented on
-          <a v-bind:href="generateGithubUrl('comment', event)">commit</a>
+          <a v-bind:href="generateGithubUrl('comment', event)">commit</a> in
         </template>
 
         <template v-else-if="event.type == 'CreateEvent'">
           <strong>{{ event.actor.display_login }}</strong> created
-          {{ event.payload.ref_type }} <code>{{ event.payload.ref }}</code>
+          {{ event.payload.ref_type }} <code>{{ event.payload.ref }}</code> in
         </template>
 
         <template v-else-if="event.type == 'DeleteEvent'">
           <strong>{{ event.actor.display_login }}</strong> deleted
-          {{ event.payload.ref_type }} <code>{{ event.payload.ref }}</code>
+          {{ event.payload.ref_type }} <code>{{ event.payload.ref }}</code> in
         </template>
 
         <template v-else-if="event.type == 'ForkEvent'">
           <strong>{{ event.actor.display_login }}</strong> forked
           <strong><a v-bind:href="generateGithubUrl('repo', event)" target="_blank">{{ event.repo.name }}</a></strong> to
-          <strong><a v-bind:href="generateGithubUrl('forkee', event)" target="_blank">{{ event.payload.forkee.name }}</a></strong>
+          <strong><a v-bind:href="generateGithubUrl('forkee', event)" target="_blank">{{ event.payload.forkee.name }}</a></strong> in
         </template>
 
         <template v-else-if="event.type == 'IssueCommentEvent'">
           <strong>{{ event.actor.display_login }}</strong> commented on
           <template v-if="event.payload.issue.pull_request">pull request </template><template v-else>issue </template>
-          <em><a v-bind:href="generateGithubUrl('issue', event)" target="_blank">{{ event.payload.issue.title }}</a></em>
+          <em><a v-bind:href="generateGithubUrl('issue', event)" target="_blank">{{ event.payload.issue.title }}</a></em> in
         </template>
 
         <template v-else-if="event.type == 'IssuesEvent'">
           <strong>{{ event.actor.display_login }}</strong> {{ event.payload.action }} issue
-          <em><a v-bind:href="generateGithubUrl('issue', event)" target="_blank">{{ event.payload.issue.title }}</a></em>
+          <em><a v-bind:href="generateGithubUrl('issue', event)" target="_blank">{{ event.payload.issue.title }}</a></em> in
         </template>
 
         <template v-else-if="event.type == 'PullRequestEvent'">
           <strong>{{ event.actor.display_login }}</strong> {{ event.payload.action }} pull request
-          <em><a v-bind:href="generateGithubUrl('pull_request', event)" target="_blank">{{ event.payload.pull_request.title }}</a></em>
+          <em><a v-bind:href="generateGithubUrl('pull_request', event)" target="_blank">{{ event.payload.pull_request.title }}</a></em> in
         </template>
 
         <template v-else-if="event.type == 'PullRequestReviewCommentEvent'">
           <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>
+          <em><a v-bind:href="generateGithubUrl('pull_request', event)" target="_blank">{{ event.payload.pull_request.title }}</a></em> in
         </template>
 
         <template v-else-if="event.type == 'PushEvent'">
           <strong>{{ event.actor.display_login }}</strong> pushed to
-          <code><a v-bind:href="generateGithubUrl('push', event)" target="_blank">{{ refToBranch(event.payload.ref) }}</a></code>
+          <code><a v-bind:href="generateGithubUrl('push', event)" target="_blank">{{ refToBranch(event.payload.ref) }}</a></code> in
         </template>
 
         <template v-else-if="event.type == 'ReleaseEvent'">
           <strong>{{ event.actor.display_login }}</strong> released
-          <em><a v-bind:href="generateGithubUrl('release', event)" target="_blank">{{ event.payload.release.tag_name }}</a></em>
+          <em><a v-bind:href="generateGithubUrl('release', event)" target="_blank">{{ event.payload.release.tag_name }}</a></em> in
         </template>
 
         <template v-else-if="event.type == 'WatchEvent'">
           <strong>{{ event.actor.display_login }}</strong> starred the repo
         </template>
 
-        in <a v-bind:href="generateGithubUrl('repo', event)" target="_blank"><strong>{{ event.repo.name }}</strong></a>
+        <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>
@@ -271,7 +271,9 @@ export default {
     }
 
     > p:first-of-type {
-      box-shadow: 0 2px 5px rgba($black, 0.025);
+      @media (max-width: 700px) {
+        box-shadow: 0 2px 5px rgba($black, 0.025);
+      }
 
       code {
         background-color: $black;
diff --git a/.vuepress/scss/_layout.scss b/.vuepress/scss/_layout.scss
index 36c983a..5be2714 100644
--- a/.vuepress/scss/_layout.scss
+++ b/.vuepress/scss/_layout.scss
@@ -72,3 +72,25 @@ h1, h2, h3, h4, h5 {
     display: none;
   }
 }
+
+.alert {
+  background-color: $yellow;
+  line-height: 1.33;
+  padding-top: 1rem;
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: 1rem;
+  padding-left: env(safe-area-inset-left);
+  text-align: center;
+
+  @media (min-width: 901px) {
+    font-size: 1rem;
+  }
+
+  @media (max-width: 900px) {
+    font-size: 0.8rem;
+  }
+
+  a {
+    font-weight: 600;
+  }
+}
diff --git a/.vuepress/scss/pages/_documentation.scss b/.vuepress/scss/pages/_documentation.scss
new file mode 100644
index 0000000..9a174c3
--- /dev/null
+++ b/.vuepress/scss/pages/_documentation.scss
@@ -0,0 +1,2 @@
+.documentation {
+}
diff --git a/.vuepress/scss/pages/_home.scss b/.vuepress/scss/pages/_home.scss
index 9dbfe08..3d7f554 100644
--- a/.vuepress/scss/pages/_home.scss
+++ b/.vuepress/scss/pages/_home.scss
@@ -33,7 +33,7 @@
     margin-bottom: 4rem;
   }
 
-  &.hero {
+  .hero {
     align-items: center;
     background-color: $black;
     background-image: url("../media/svg/text-logo--white.svg");
@@ -58,27 +58,7 @@
     }
   }
 
-  &.alert {
-    background-color: $yellow;
-    line-height: 1.33;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-    text-align: center;
-
-    @media (min-width: 901px) {
-      font-size: 1rem;
-    }
-
-    @media (max-width: 900px) {
-      font-size: 0.8rem;
-    }
-
-    a {
-      font-weight: 600;
-    }
-  }
-
-  &.features {
+  .features {
     grid-area: features;
 
     .home__features {
@@ -136,11 +116,11 @@
     }
   }
 
-  &.intro,
-  &.docs,
-  &.contribute,
-  &.develop,
-  &.community {
+  .intro,
+  .docs,
+  .contribute,
+  .develop,
+  .community {
     padding-top: 3rem;
     padding-bottom: 3.5rem;
 
@@ -200,30 +180,30 @@
     }
   }
 
-  &.intro,
-  &.docs,
-  &.contribute,
-  &.develop {
+  .intro,
+  .docs,
+  .contribute,
+  .develop {
     border-bottom: 1px solid rgba($black, 0.05);
   }
 
-  &.intro,
-  &.docs {
+  .intro,
+  .docs {
     @media (min-width: 1301px) {
       padding-left: 10%;
     }
   }
 
-  &.intro {
+  .intro {
     grid-area: intro;
   }
 
-  &.docs {
+  .docs {
     grid-area: docs;
   }
 
-  &.community,
-  &.contribute {
+  .community,
+  .contribute {
     p {
       @media (min-width: 1301px) {
         margin-right: auto;
@@ -290,7 +270,7 @@
     }
   }
 
-  &.contribute {
+  .contribute {
     grid-area: contribute;
 
     ul {
@@ -338,11 +318,11 @@
     }
   }
 
-  &.develop {
+  .develop {
     grid-area: develop;
   }
 
-  &.community {
+  .community {
     grid-area: community;
 
     ul {
diff --git a/.vuepress/theme/Layout.vue b/.vuepress/theme/Layout.vue
index 6758eeb..29c60d6 100644
--- a/.vuepress/theme/Layout.vue
+++ b/.vuepress/theme/Layout.vue
@@ -1,5 +1,5 @@
 <template>
-  <main v-bind:class="{'home': $page.frontmatter.home}">
+  <main v-bind:class="{ 'home': $page.frontmatter.home, 'documentation': $page.frontmatter.documentation }">
     <nav class="navigation">
       <div class="inner-wrap">
         <router-link class="navigation__item" to="/" title="Go back home">LBRY</router-link>
@@ -14,7 +14,7 @@
 
     <template v-if="$page.frontmatter.home">
       <div>
-        <section class="home hero">
+        <section class="hero">
           <div>
             <h2>
               LBRY is a free, open, and community-run digital marketplace.<br/>
@@ -23,7 +23,7 @@
           </div>
         </section>
 
-        <section class="home features">
+        <section class="features">
           <ul class="home__features">
             <li class="home__feature">
               <p class="home__feature__title"><strong>New to LBRY?</strong></p>
@@ -39,7 +39,7 @@
           </ul>
         </section>
 
-        <section class="home intro">
+        <section class="intro">
           <div class="inner-wrap">
             <h3>Intro/Overview</h3>
             <p>What if anyone in the world could publish a piece of digital content, anyone else in the world could access it, for free or for payment, and that entire system worked end-to-end without any centralized authority or point of control?</p>
@@ -50,7 +50,7 @@
           </div>
         </section>
 
-        <section class="home docs">
+        <section class="docs">
           <div class="inner-wrap">
             <h3>Documentation</h3>
             <p>LBRY has enough moving parts to warrant comprehensive documentation. Whether you are interested in learning the technical details of our technology stack or you want to integrate LBRY into your life, you will find everything you need in our docs.</p>
@@ -61,7 +61,7 @@
 
         <GithubFeed></GithubFeed>
 
-        <section class="home contribute">
+        <section class="contribute">
           <div class="inner-wrap">
             <h3>Contribute</h3>
             <p>Interested in progressing content freedom? Awesome! No matter your experience or skill level, <strong>you</strong> can make a difference.</p>
@@ -76,7 +76,7 @@
           </div>
         </section>
 
-        <section class="home develop">
+        <section class="develop">
           <div class="inner-wrap">
             <h3>Development</h3>
             <p>Like a bit of documentation but would prefer to jump in and make your mark on the blockchain? Perhaps add cats to it?</p>
@@ -85,7 +85,7 @@
           </div>
         </section>
 
-        <section class="home community">
+        <section class="community">
           <div class="inner-wrap">
             <h3>Community</h3>
             <p>Hang out with us! We have a vibrant community of lbryians and would be <em>delighted</em> if you joined us.</p>
@@ -100,6 +100,25 @@
       </div>
     </template>
 
+    <template v-else-if="$page.frontmatter.documentation">
+      <div>
+        <article class="page" itemtype="http://schema.org/BlogPosting">
+          <header class="page__header">
+            <div class="page__header-wrap">
+              <div class="inner-wrap">
+                <h2 class="page__header__title" itemprop="name headline">{{ $page.title }}</h2>
+              </div>
+            </div>
+          </header>
+
+          <section class="page__content" itemprop="articleBody">
+            <div class="inner-wrap">
+            </div>
+          </section>
+        </article>
+      </div>
+    </template>
+
     <template v-else-if="$page.path == '/hook.html'">
       <Content></Content>
     </template>
@@ -132,7 +151,7 @@
       <EmailSubscribe></EmailSubscribe>
     </section>
 
-    <section class="home alert">
+    <section class="alert">
       <div class="inner-wrap">
         <strong>This website is in beta.</strong> We are actively developing this website to showcase and teach about the LBRY protocol. All things may not work as expected!<br/>This website is open source and you can <a href="https://github.com/lbryio/lbry.tech" target="_blank">contribute to it on Github</a>.
       </div>
diff --git a/documentation/index.md b/documentation/index.md
new file mode 100644
index 0000000..0ad5025
--- /dev/null
+++ b/documentation/index.md
@@ -0,0 +1,4 @@
+---
+documentation: true
+title: Documentation
+---