Updates Blog pages

coricko · Aug 3, 2020 · c548aae · c548aae
1 parent a38d680
commit c548aae
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 105 deletions.
diff --git a/_layouts/blog.html b/_layouts/blog.html
@@ -10,46 +10,54 @@ <h1 class="title text-caps">{{ page.title }}</h1>
     <a href="{{site.baseurl}}/feed.xml"><i class="fas fa-rss-square"></i></a>
   </div>
 
-  <div class="grid__item width-10-12 width-12-12-m">
-    {% for post in paginator.posts %}
-      {% assign author = site.data.authors[post.author] %}
-      <div class="blog-list-item grid-wrapper">
-        <div class="post-date grid__item width-12-12">{{ post.date | date: '%B %d, %Y' }} 
-          {% for tag in post.tags %}<a href="{{site.baseurl}}/blog/tag/{{tag}}">#{{ tag}}</a> {% endfor %}
+  <div class="grid__item width-9-12 width-12-12-m">
+    <div>
+      {% for post in paginator.posts %}
+        {% assign author = site.data.authors[post.author] %}
+        <div class="blog-list-item grid-wrapper">
+          <div class="grid__item width-12-12">
+            <div class="post-title">
+              <a href="{{site.baseurl}}{{ post.url }}">{{ post.title }}</a>
+            </div>
+            <div class="post-date small">
+              {{ post.date | date: '%B %d, %Y' }} 
+              {% if post.tags %}
+                <span class="tags">tags:{% for tag in post.tags %}<a href="{{site.baseurl}}/blog/tag/{{tag}}">#{{ tag}}</a>{% endfor %}</span>
+              {% endif %}
+            </div>
+          </div>
+          <div class="grid__item width-8-12 width-12-12-m byline-wrapper">
+            {% if author.emailhash %}
+              <img class="headshot" src="https://www.gravatar.com/avatar/{{ author.emailhash }}">
+            {% endif %}
+            <p class="byline"><span>By</span> {{ author.name }}<br/></p>
+          </div>
+          <div class="grid__item width-12-12">
+            {% if post.synopsis %}
+              <p>{{ post.synopsis | strip_html }}</p>
+            {% else %}
+              <p>{{ post.content | strip_html | truncatewords: 75 }}</p>
+            {% endif %}
+          </div>
+          <div class="grid__item width-8-12 read-more small"><a href="{{site.baseurl}}{{ post.url }}">Read More &rsaquo;</a></div>
+          <div class="grid__item width-4-12 width-12-12-m share-post">{% include share-page.html title=post.title url=post.url %}</div>
         </div>
-        <div class="post-title grid__item width-12-12">
-          <a href="{{site.baseurl}}{{ post.url }}">{{ post.title }}</a>
-        </div>
-        <div class="grid__item width-8-12 width-12-12-m byline-wrapper">
-          {% if author.emailhash %}
-            <img class="headshot" src="https://www.gravatar.com/avatar/{{ author.emailhash }}">
-          {% endif %}
-          <p class="byline"><span>By</span> {{ author.name }}<br/></p>
-        </div>
-        <div class="grid__item width-12-12">
-          {% if post.synopsis %}
-            <p>{{ post.synopsis | strip_html }}</p>
-          {% else %}
-            <p>{{ post.content | strip_html | truncatewords: 75 }}</p>
-          {% endif %}
-        </div>
-        <div class="grid__item width-8-12 read-more"><a href="{{site.baseurl}}{{ post.url }}">Read More &rsaquo;</a></div>
-        <div class="grid__item width-4-12 width-12-12-m share-post">{% include share-page.html title=post.title url=post.url %}</div>
-      </div>
-    {% endfor %}
+      {% endfor %}
+    </div>
     {% if paginator.total_pages > 1 %}
       <div class="paginator-btns">
+        {% if paginator.next_page %}
+          <a href="{{ paginator.next_page_path | prepend: site.baseurl }}" class="button-cta secondary btn-sm">Older Posts</a>
+        {% endif %}
         {% if paginator.previous_page %}
-          <a href="{{ paginator.previous_page_path | prepend: site.baseurl }}" class="button-cta secondary">Newer Posts</a>
+          <a href="{{ paginator.previous_page_path | prepend: site.baseurl }}" class="button-cta secondary btn-sm">Newer Posts</a>
         {% endif %}
-        {% if paginator.next_page %}
-          <a href="{{ paginator.next_page_path | prepend: site.baseurl }}" class="button-cta secondary">Older Posts</a>
-          {% endif %}
       </div>
       {% endif %}
   </div>
-
-  <div class="grid__item width-2-12">
+  <div class="grid__item width-1-12 width-12-12-m"></div>
+  <div class="grid__item width-2-12 width-12-12-m">
+    <h3 class="tags-label">Tags</h3>
     {% assign tag_words = site.tags | sort %}
     {% for stats in tag_words %}
      {% assign tag = stats | first %}

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -3,31 +3,42 @@
 ---
 
 <div class="post-page grid-wrapper">
-  <div class="grid__item width-10-12 width-12-12-m doc-content">
-    <p> < <a href="{{site.baseurl}}/blog">Back to all posts</a></p>
-    <div class="post-date">{{ page.date | date: '%B %d, %Y' }}
-      {% for tag in page.tags %}<a href="{{site.baseurl}}/blog/tag/{{tag}}">#{{ tag}}</a> {% endfor %}
-    </div>
-    <h1>{{ page.title }}</h1>
+  <div class="width-8-12 width-12-12-m doc-content">
     <div class="grid-wrapper">
-      <div class="grid__item width-8-12 width-12-12-m byline-wrapper">
-        {% assign author = site.data.authors[page.author] %}
-        {% if author.emailhash %}
-          <img class="headshot" src="https://www.gravatar.com/avatar/{{ author.emailhash }}">
-        {% endif %}
-        <p class="byline">By {{ author.name }}</p>
+      <div class="width-12-12">
+        <p>
+          <a href="{{site.baseurl}}/blog"><i class="fas fa-angle-left"></i> Back to all posts</a>
+        </p>
       </div>
-      <div class="grid__item width-12-12">
-          {{ content }}
-          {% if page.bibquery %}
-            {% assign publications = site.data.publications %}
-            {% for query in page.bibquery %}
-              {% assign publications = publications | where_exp: "pub", query %}
-            {% endfor %}
-            {% include publication-entries.html %}
+      <div class="width-12-12">
+        <div class="post-date">
+          {{ page.date | date: '%B %d, %Y' }} 
+          {% if page.tags %}
+            <span class="tags">{% for tag in page.tags %}<a href="{{site.baseurl}}/blog/tag/{{tag}}">#{{ tag}}</a>{% endfor %}</span>
           {% endif %}
+        </div>
+        <h1 class="post-title">{{ page.title }}</h1>
+        <div class="grid-wrapper">
+          <div class="width-8-12 width-12-12-m byline-wrapper">
+            {% assign author = site.data.authors[page.author] %}
+            {% if author.emailhash %}
+              <img class="headshot" src="https://www.gravatar.com/avatar/{{ author.emailhash }}">
+            {% endif %}
+            <p class="byline">By {{ author.name }}</p>
+          </div>
+          <div class="width-12-12">
+              {{ content }}
+              {% if page.bibquery %}
+                {% assign publications = site.data.publications %}
+                {% for query in page.bibquery %}
+                  {% assign publications = publications | where_exp: "pub", query %}
+                {% endfor %}
+                {% include publication-entries.html %}
+              {% endif %}
+          </div>
+          <div class="width-12-12">{% include share-page.html url=page.url title=page.title %}</div>
+        </div>
       </div>
-      <div class="grid__item width-12-12">{% include share-page.html url=page.url title=page.title %}</div>
     </div>
   </div>
 </div>
diff --git a/_layouts/tag-archive.html b/_layouts/tag-archive.html
@@ -1,34 +1,59 @@
 ---
 layout: base
+title: Tag Archive
 ---
 
-<div class="grid-wrapper">
+<div class="grid-wrapper blog-page">
   <div class="grid__item width-10-12">
-    <h1 class="title text-caps">Tagged posts: '{{ page.title }}'</h1>
+    <h1 class="text-caps">Blog</h1>
   </div>
   <div class="grid__item width-2-12 align-self-center">
     <a href="{{site.baseurl}}/feed.xml"><i class="fas fa-rss-square"></i></a>
   </div>
 
-<div class="grid__item width-10-12 width-12-12-m">
-<ul class="posts">
-  {% for post in page.posts %}
-    <li>
-      <span class="post-date">{{ post.date | date: '%B %d, %Y' }}</span>
-      <div>
-        <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+  <div class="grid__item width-9-12 width-12-12-m">
+    <h2 class="title">Tagged posts: '{{ page.title }}'</h2>
+    {% for post in page.posts %}
+      {% assign author = site.data.authors[post.author] %}
+      <div class="blog-list-item grid-wrapper">
+        <div class="grid__item width-12-12">
+          <div class="post-title">
+            <a href="{{site.baseurl}}{{ post.url }}">{{ post.title }}</a>
+          </div>
+          <div class="post-date small">
+            {{ post.date | date: '%B %d, %Y' }} 
+            {% if post.tags %}
+              <span class="tags">tags:{% for tag in post.tags %}<a href="{{site.baseurl}}/blog/tag/{{tag}}">#{{ tag}}</a>{% endfor %}</span>
+            {% endif %}
+          </div>
+        </div>
+        <div class="grid__item width-8-12 width-12-12-m byline-wrapper">
+          {% if author.emailhash %}
+            <img class="headshot" src="https://www.gravatar.com/avatar/{{ author.emailhash }}">
+          {% endif %}
+          <p class="byline"><span>By</span> {{ author.name }}<br/></p>
+        </div>
+        <div class="grid__item width-12-12">
+          {% if post.synopsis %}
+            <p>{{ post.synopsis | strip_html }}</p>
+          {% else %}
+            <p>{{ post.content | strip_html | truncatewords: 75 }}</p>
+          {% endif %}
+        </div>
+        <div class="grid__item width-8-12 read-more small"><a href="{{site.baseurl}}{{ post.url }}">Read More &rsaquo;</a></div>
+        <div class="grid__item width-4-12 width-12-12-m share-post">{% include share-page.html title=post.title url=post.url %}</div>
       </div>
-    </li>
-  {% endfor %}
-</ul>
-</div>
-
-<div class="grid__item width-2-12">
-  {% for stats in site.tags %}
-   {% assign tag = stats | first %}
-   {% assign posts = stats | last %}
-   <a href="{{site.baseurl}}/blog/tag/{{tag}}">{{ tag }}</a></br>
-  {% endfor %}
-</div>
+    {% endfor %}
+  </div>
+  <div class="grid__item width-1-12 width-12-12-m"></div>
+  <div class="grid__item width-2-12 width-12-12-m">
+    <h3 class="tags-label">Tags</h3>
+    {% assign tag_words = site.tags | sort %}
+    {% for stats in tag_words %}
+    {% assign tag = stats | first %}
+    {% assign posts = stats | last %}
+    <a href="{{site.baseurl}}/blog/tag/{{tag}}">{{ tag }}</a></br>
+    {% endfor %}
+  </div>
 </div>
 
diff --git a/_sass/asciidoc.scss b/_sass/asciidoc.scss
@@ -109,3 +109,14 @@ table.configuration-reference { table-layout: inherit;}
 .conum[data-value]{color:black !important; background:#CCC; }
 .conum[data-value] *{color:black !important}
 .admonitionblock>table td.content { font-weight:400; line-height: 1.5rem; }
+
+.quoteblock blockquote::before {
+    content: "\201c";
+    float: left;
+    font-size: 2.75em;
+    font-weight: bold;
+    line-height: .6em;
+    margin-left: -.6em;
+    color: $quarkus-blue;
+    text-shadow: 0 1px 2px rgba(0,0,0,.1);
+}
diff --git a/_sass/core/global.scss b/_sass/core/global.scss
@@ -252,9 +252,6 @@ table.tableblock {
 
 .paginator-btns a {
   margin: 1rem 0;
-  &:first-of-type {
-    margin-right: calc(100% - 372px);
-  }
   @media screen and (max-width: 768px) {
     display: block;
     width: 100%;

diff --git a/_sass/layouts/blog.scss b/_sass/layouts/blog.scss
@@ -2,9 +2,6 @@ body.post {
   background: #E7E8EA;
 
   div.post-page {
-    max-width: 900px;
-    margin: 0 auto;
-
     h1, h2, h3, h4, h5, h6, p, small, strong, em,
     table tr th, table tr td, li, i, dt, .title, .paragraph, .footnote, b {
       @media only screen and (max-width: 768px) {
@@ -21,16 +18,21 @@ body.post {
     h1 {
       margin-top: 20px;
     }
+    .byline {
+      font-weight: 600;
+      font-size: 1.5rem;
+      line-height: 2.5rem;
+    }
     .note, .colist {
       overflow: auto;
     }
     .post-date {
-      color: rgb(108, 109, 110);
+      color: #0D1C2C;
       text-align: left;
       font-size: 1rem;
     }
     .headshot {
-      max-width: 3rem;
+      max-width: 4rem;
       margin-right: 1rem;
     }
     .line-through{ color: #0D1C2C; text-decoration:line-through}
@@ -40,6 +42,15 @@ body.post {
         color: $link-hover;
       }
     }
+    .post-title {
+      margin: 1.5rem 0;
+    }
+    .tags {
+      a {
+        display: inline-block;
+        margin-left: .5rem;
+      }
+    }
   }
 
   .bibliography {
@@ -49,49 +60,52 @@ body.post {
   }
 }
 .blog-page {
-  max-width: 900px;
-  margin: 0 auto;
 
   .blog-list-item {
-    margin-bottom: 3rem;
-    &::after {
-      content: "";
-      display: block;
-      border-bottom: 1px solid #E7E8EA;
-      height: 3rem;
-      grid-column: 6 / span 2;
-    }
+    margin-bottom: 2rem;
     p {
       margin: 0;
     }
-    .read-more {
-      text-align: left;
-    }
     .headshot {
       max-width: 2rem;
       margin-right: .5rem;
     }
-    .post-date {
-      color: #E7E8EA;
-      font-size: 0.8rem;
-      text-align: left;
-    }
     .post-title {
       a {
-        font-size: 1.8rem;
-        line-height: 2.1rem;
-        text-decoration: none;
+        font-size: 1.5rem;
+        line-height: 2.5rem;
       }
     }
+    .tags {
+      margin-left: 1.5rem;
+      a {
+        display: inline-block;
+        margin-left: .5rem;
+      }
+    }
+    &:not(:last-child):after {
+      content: "";
+      display: block;
+      border-bottom: 2px solid #E7E8EA;
+      height: 1rem;
+      grid-column: 4 / span 4;
+    }
+  }
+
+
+  .tags-label {
+    margin-top: 0;
   }
   .fa-rss-square {
     font-size: 2rem;
     color: #ee802f;
-    float: right;
     &:hover {
       color: darken( #ee802f, 10%);
     }
   }
+  .paginator-btns a:not(:last-of-type) {
+    margin-right: 1rem;
+  }
 }
 
 .blog-page, .post-page {
@@ -109,7 +123,7 @@ body.post {
   .share-page {
     text-align: right;
   }
-  small {
+  small, .small {
     font-size: 14px;
   }
 }
@@ -141,3 +155,4 @@ body.post {
 .post-page {
   padding-bottom: 6rem;
 }
+