From 01acc1439a1d853939e122c865c4aaa46de1a3f6 Mon Sep 17 00:00:00 2001 From: "Jocelyn Badgley (Twipped)" <joc@twipped.com> Date: Thu, 5 Mar 2020 19:42:57 -0800 Subject: [PATCH] Moving new twitter page into /tweets/ --- build/post.js | 4 +-- public/tweets/index.html | 25 +++++++++++++++ public/twitter.html | 40 ------------------------ scss/_global.scss | 1 + scss/_header.scss | 3 ++ scss/_page.scss | 66 +++++++++++++++++++++++++++++----------- 6 files changed, 80 insertions(+), 59 deletions(-) create mode 100644 public/tweets/index.html delete mode 100644 public/twitter.html diff --git a/build/post.js b/build/post.js index 737d18a..667a0ad 100644 --- a/build/post.js +++ b/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; } diff --git a/public/tweets/index.html b/public/tweets/index.html new file mode 100644 index 0000000..de574d7 --- /dev/null +++ b/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}} diff --git a/public/twitter.html b/public/twitter.html deleted file mode 100644 index 2837cf8..0000000 --- a/public/twitter.html +++ /dev/null @@ -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}} diff --git a/scss/_global.scss b/scss/_global.scss index 7bcebb8..7c373c1 100644 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -15,6 +15,7 @@ span.svg-icon { width: 100%; height: 100%; fill: currentColor; + vertical-align: baseline; } } diff --git a/scss/_header.scss b/scss/_header.scss index 98816d0..88449c1 100644 --- a/scss/_header.scss +++ b/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; } diff --git a/scss/_page.scss b/scss/_page.scss index ae3bb06..1ce05b9 100644 --- a/scss/_page.scss +++ b/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); + } + }