Interior header, links, code adjustments

src/assets/stylesheet.css

@@ -3,6 +3,7 @@ html, body {
   margin: 0;
   font-family: 'Source Sans Pro', sans-serif;
   font-size: 15pt;
+  color: #6C7A81;
 }
 
 code {
@@ -17,6 +18,10 @@ h1 {
   font-size: 35pt;
 }
 
+a {
+  color: #15202C;
+}
+
 .-pad-h {
   padding-left: 20px;
   padding-right: 20px;
@@ -27,11 +32,35 @@ h1 {
   padding-bottom: 20px;
 }
 
+.-left {
+  float: left;
+}
+
+.-right {
+  float: right;
+}
+
+.-clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
 .-container {
   max-width: 40rem;
   margin: 0 auto;
 }
 
+.tag {
+  padding: 0 .3em;
+  border-radius: 3px;
+  margin-right: .5em;
+  box-shadow: 0px 5px 5px rgba(0, 0, 0, .1);
+  color: #1A323E;
+  background: #F3EDFF;
+  text-decoration: none;
+}
+
 .interior-header {
   background: #15202C;
 }
@@ -50,16 +79,20 @@ h1 {
   margin: 0 auto;
 }
 
-.interior-content h1:first-child {
+.interior-content .interior-description {
+  margin-top: 0;
+  margin-bottom: .25em;
+  color: black;
+  font-size: 25pt;
+}
+
+.interior-content h1:first-of-type {
   display: none;
   speak: none;
 }
 
-.interior-content p:first-of-type {
-  margin-top: 0;
-}
-
 .interior-content pre code {
+  font-size: 13pt;
   border-radius: 3px;
   max-width: 100%;
   max-height: 6em;
@@ -67,3 +100,13 @@ h1 {
   overflow: auto;
 }
 
+.interior-tags {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.interior-tags li {
+  display: inline-block;
+}
+

src/schema.js

@@ -4,10 +4,9 @@ module.exports = `{
       edges {
         node {
           name
-          updatedAt
           description
           url
-          repositoryTopics(last: 12) {
+          repositoryTopics(last: 5) {
             edges {
               node {
                 topic {

src/templates/interior.hbs

@@ -23,7 +23,28 @@
     </div>
   </header>
   <main class="interior-content -container -pad-h -pad-v">
-    {{{readme.html}}}
+    <article>
+      <header class="-clearfix">
+        <h2 class="interior-description">
+          {{description}}
+        </h2>
+        <span class="-right">
+          <a href={{url}}>
+            {{#if organization}}
+              {{organization}}
+            {{else}}
+              Github Repo
+            {{/if}}
+          </a>
+        </span>
+        <ul class="-left interior-tags">
+          {{#each repositoryTopics.edges}}
+            <li><a href="#" class="tag">{{this.node.topic.name}}</a>
+          {{/each}}
+        </ul>
+      </header>
+      {{{readme.html}}}
+    </article>
   </main>
 
   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>