Design for ancillary pages implemented

.vuepress/components/EditLink.vue

@@ -1,5 +1,5 @@
 <template>
-  <a v-bind:href="githubUrl" target="_blank">Edit this page on Github</a>
+  <a v-bind:href="githubUrl" target="_blank" title="Edit this page on GitHub">Edit this page on GitHub</a>
 </template>
 
 <script>

.vuepress/scss/_layout.scss

@@ -8,11 +8,10 @@ html {
 }
 
 body {
-  min-width: 320px;
-
-  color: $black;
   @include font-sans;
+  color: $black;
   font-size: 12px;
+  min-width: 320px;
   overflow-x: hidden;
   position: relative;
   z-index: 0;
@@ -54,43 +53,3 @@ h1, h2, h3, h4, h5 {
     display: none;
   }
 }
-
-h1 {
-  font-size: 3rem;
-}
-
-h2 {
-  font-size: 1.75rem;
-}
-
-h3 {
-  font-size: 1.5rem;
-}
-
-.__message {
-  bottom: 4rem; left: 10%;
-
-  animation: close-message linear;
-  animation-delay: 2s;
-  font-size: 0.8rem;
-  line-height: 1.33;
-  padding-bottom: 1rem;
-  padding-top: 1rem;
-  position: absolute;
-  text-align: center;
-  width: 80%;
-  z-index: 2;
-
-  a {
-    font-weight: 700;
-  }
-
-  &[type="error"] {
-    background-color: $red;
-    color: $white;
-  }
-
-  &[type="warning"] {
-    background-color: $yellow;
-  }
-}

.vuepress/scss/pages/_ancillary.scss

@@ -1,2 +0,0 @@
-.ancillary {
-}

.vuepress/scss/pages/_home.scss

@@ -4,15 +4,21 @@
   }
 
   h1 {
+    font-size: 3rem;
     margin-bottom: 1rem;
     text-transform: uppercase;
   }
 
   h2 {
+    font-size: 1.75rem;
     font-weight: 400;
     margin-bottom: 4rem;
   }
 
+  h3 {
+    font-size: 1.5rem;
+  }
+
   hr {
     width: 100%; height: 1px;
 

.vuepress/scss/pages/_page.scss

@@ -0,0 +1,153 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+
+
+.page__header-wrap {
+  width: 100%;
+}
+
+.page__header {
+  @include center;
+  width: 100%; height: 100px;
+
+  background-image: url("../media/images/background-a.jpg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  color: $white;
+  position: relative;
+}
+
+.page__header__title {
+  font-size: 3rem;
+  font-weight: 300;
+  line-height: 6.5rem;
+  text-shadow: 1px 1px 2px rgba($black, 0.3);
+}
+
+
+
+.page__content {
+  background-image: url("../media/images/grid.png");
+  background-repeat: repeat;
+  background-size: 32px;
+  flex: 1;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+
+  h1 {
+    font-size: 2rem;
+    margin-bottom: 0.25rem;
+
+    + h2 {
+      margin-bottom: 2rem;
+    }
+  }
+
+  h2 {
+    font-size: 1.5rem;
+  }
+
+  h3 {
+    font-size: 1.25rem;
+  }
+
+  h4 {
+    font-size: 1rem;
+    letter-spacing: 0.05rem;
+    text-transform: uppercase;
+  }
+
+  p, ol, ul {
+    font-size: 1.25rem;
+    line-height: 1.5;
+    margin-bottom: 2rem;
+    position: relative;
+
+    code {
+      background-color: $black;
+      border-radius: 3px;
+      color: $white;
+      font-size: 60%;
+      letter-spacing: 0.05rem;
+      padding: 0.3rem 0.5rem;
+      vertical-align: middle;
+    }
+  }
+
+  ol, ul {
+    padding-left: 1.25rem;
+  }
+
+  p {
+    img {
+      float: right;
+    }
+  }
+
+  a {
+    color: mix($black, $teal, 15%);
+    position: relative;
+
+    &::after {
+      width: 100%; height: 1px;
+
+      background-color: currentColor;
+      content: "";
+      left: 0;
+      position: absolute;
+      transition: all 0.2s;
+    }
+
+    &:not(:hover)::after {
+      bottom: 0;
+      opacity: 0;
+    }
+
+    &:hover::after {
+      bottom: 3px;
+      opacity: 1;
+    }
+  }
+
+  pre {
+    margin-bottom: 2rem; padding: 2rem;
+
+    background-color: $black;
+    border-radius: 3px;
+    color: $white;
+    font-size: 1rem;
+    line-height: 1.33;
+  }
+
+  table {
+    background-color: $white;
+    border: 1px solid rgba($gray, 0.3);
+    margin-bottom: 2rem;
+
+    th, td {
+      padding: 1rem;
+    }
+
+    th {
+      border-bottom: 1px solid rgba($gray, 0.3);
+      font-size: 0.8rem;
+      letter-spacing: 0.1rem;
+      text-transform: uppercase;
+    }
+
+    td {
+      font-size: 1rem;
+    }
+
+    tbody {
+      tr:not(:last-of-type) td {
+        border-bottom: 1px solid rgba($gray, 0.3);
+      }
+    }
+  }
+}

.vuepress/scss/partials/_footer.scss

@@ -1,6 +1,6 @@
 .footer {
   background-color: $black;
-  color: rgba($white, 0.3);
+  color: rgba($white, 0.15);
   font-size: 1rem;
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -33,7 +33,7 @@
     }
 
     &:hover {
-      color: $teal;
+      color: mix($black, $teal, 15%);
     }
   }
 }

.vuepress/scss/partials/_navigation.scss

@@ -31,7 +31,7 @@
     &::after {
       width: 100%; height: 3px;
 
-      background-color: $teal;
+      background-color: mix($black, $teal, 15%);
       content: "";
       left: 0;
       position: absolute;

.vuepress/theme/Layout.vue

@@ -109,12 +109,22 @@
 
     <template v-else>
       <div>
-        <section class="ancillary">
+        <article class="page" itemtype="http://schema.org/BlogPosting">
-          <div class="inner-wrap">
+
-            {{ $page.title }}
+          <header class="page__header">
-            <Content custom></Content>
+            <div class="page__header-wrap">
-          </div>
+              <div class="inner-wrap">
-        </section>
+                <h2 class="page__header__title" itemprop="name headline">{{ $page.title }}</h2>
+              </div>
+            </div>
+          </header>
+
+          <section class="page__content" itemprop="articleBody">
+            <div class="inner-wrap">
+              <Content></Content>
+            </div>
+          </section>
+        </article>
       </div>
     </template>
 
@@ -122,7 +132,7 @@
       <div class="inner-wrap">
         <ul>
           <li>
-            <a href="">← LBRY.io</a> |
+            <a href="//lbry.io" title="Rediscover content freedom">← LBRY.io</a> |
             <edit-link :path="this.$page.path"></edit-link>
           </li>
 
@@ -210,7 +220,7 @@ function updateMetaTags (meta, current) {
   @import "../scss/init/mixins";
   @import "../scss/layout";
   @import "../scss/pages/home";
-  @import "../scss/pages/ancillary";
+  @import "../scss/pages/page";
   @import "../scss/partials/navigation";
   @import "../scss/partials/footer";
 </style>