Moving new twitter page into /tweets/

build/post.js

@@ -16,12 +16,12 @@ module.exports = exports = class Post extends Page {
     const match = this.name.match(postmatch);
 
     if (match) {
-      return [ 'p', match[2] ];
+      return [ 'tweets', match[2] ];
     }
 
     dir = dir.replace(postmatch, '$2').split('/');
     dir = without(dir, 'posts', '_images');
-    dir.unshift('p');
+    dir.unshift('tweets');
     return dir;
   }
 

public/tweets/index.html

@@ -0,0 +1,25 @@
+---
+title: "Trans Twitter Topics"
+---
+{{#extend "layout"}}
+
+  {{#content "bodyClass"}}page ttt{{/content}}
+
+  {{#content "body"}}
+
+    <section class="ttt-grid">
+
+    {{#each posts}}
+    <div class="ttt-post {{#if flags.bordered}} bordered{{/if}}">
+      <div class="ttt-head">
+        <div class="ttt-tags">{{#each meta.tags}}<a href="#{{@key}}" class="ttt-tag">{{this}}</a>{{/each}}</div>
+        <a href="{{this.url}}" class="ttt-link" title="{{date this.dateCreated 'MMMM do, yyyy'}}">{{icon 'link'}} Permalink</a>
+      </div>
+      <div class="ttt-wrap">{{{this.content}}}</div>
+    </div>
+    {{/each}}
+
+    </section>
+  {{/content}}
+
+{{/extend}}

public/twitter.html

@@ -1,40 +0,0 @@
----
-title: "Trans Twitter Topics"
----
-{{#extend "layout"}}
-
-  {{#content "bodyClass"}}page ttt{{/content}}
-
-  {{#content "body"}}
-
-    <section class="ttt-grid">
-
-    {{#each posts}}
-    <div class="ttt-post {{#if flags.bordered}} bordered{{/if}}">
-      <a href="{{this.url}}" class="ttt-tab">{{icon 'link'}} Permalink</a>
-      <div class="ttt-wrap">{{{this.content}}}</div>
-    </div>
-    {{/each}}
-
-    </section>
-
-    <script>
-      function reheight () {
-        $('.ttt-wrap').each((i, el) => {
-          const $wrap = $(el);
-          const $cell = $wrap.closest('.ttt-post');
-
-          const span = Math.ceil($wrap.height() / 20) + 2;
-          $cell.css({ 'grid-row-end': 'span ' + span });
-        })
-      }
-      $(() => {
-        reheight();
-        // window.addEventListener('scroll', reheight);
-        window.addEventListener('resize', reheight);
-
-      })
-    </script>
-  {{/content}}
-
-{{/extend}}

scss/_global.scss

@@ -15,6 +15,7 @@ span.svg-icon {
     width: 100%;
     height: 100%;
     fill: currentColor;
+    vertical-align: baseline;
   }
 }
 

scss/_header.scss

@@ -109,6 +109,9 @@ header {
       border-bottom: 5px solid transparent;
       white-space: nowrap;
 
+      display: flex;
+      align-items: center;
+
       &:hover {
         border-bottom: 5px solid $primary;
       }

scss/_page.scss

@@ -19,6 +19,11 @@ body.post {
 
     padding: 5px;
   }
+
+  .tweet {
+    max-width: 660px;
+    margin: 2em auto;
+  }
 }
 
 body.gdb {
@@ -126,30 +131,57 @@ body.ttt {
 
   .ttt-grid {
     padding: 1em;
-    display: grid;
-    grid-template-columns: repeat( auto-fill, minmax( 400px, 1fr ) );
-    grid-auto-rows: 10px;
-    grid-gap: 10px;
-    // grid-auto-flow: column dense;
+    max-width: 660px;
+    margin: 0 auto;
   }
 
-  .ttt-tab {
-    display: block;
-    background: white;
-    border: 1px solid $borderColor;
-    border-bottom: none;
-    font-size: 10px;
-    padding: 2px 5px;
-    border-top-left-radius: $borderRadius;
-    border-top-right-radius: $borderRadius;
-    margin: 0 $borderRadius * 2 0 auto;
-    width: 80px;
-    text-align: center;
+  .ttt-post {
+    background: $gutter-bg;
+    padding: 0.6em 1em;
+    margin: 0 0 2em 0;
+    border-radius: $borderRadius;
+    box-shadow: inset 0 1px 2px rgba($gray-600, 0.2);
+
+    .ttt-head {
+      display: flex;
+      margin-bottom: 0.5em;
+
+      .ttt-tags {
+        flex: 1;
+        display: flex;
+        align-items: stretch;
+      }
+    }
+
+    .tweet {
+      box-shadow: 0 1px 2px rgba($gray-600, 0.5);
+      border: none;
+    }
+  }
+
+  .ttt-tag {
+    margin-right: 0.5em;
+  }
+
+  .ttt-link {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
     .svg-icon {
       height: 1em;
       width: 1em;
+      margin-right: 0.4em;
     }
   }
 
+  .ttt-tag, .ttt-link {
+    background: white;
+    border: 1px solid $borderColor;
+    font-size: 10px;
+    padding: 2px 5px;
+    border-radius: $borderRadius;
+    box-shadow: 0 1px 1px rgba($gray-600, 0.2);
+  }
+
 }