Update the post meta design.

avirlrma · Apr 7, 2020 · 91e3d53 · 91e3d53
1 parent 51c1442
commit 91e3d53
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 55 deletions.
diff --git a/_data/right.yml → _data/rights.yml b/_data/right.yml → _data/rights.yml
@@ -7,15 +7,11 @@
 
 
 license:
-  link: "https://creativecommons.org/licenses/by/4.0/"
-  prompt: This post is licensed under
   name: CC BY 4.0
-  icons:
-    - "fab fa-creative-commons"
-    - "fab fa-creative-commons-by"
+  link: "https://creativecommons.org/licenses/by/4.0/"
 
 brief: Some rights reserved.
 
 verbose: >-
-  The blog posts on this site are licensed
-  under the Creative Commons Attribution 4.0 International (CC BY 4.0) License.
+  Except where otherwise noted, the blog posts on this site are licensed
+  under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -12,9 +12,9 @@
       <p class="mb-0">
         © {{ 'now' | date: "%Y" }}
         <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
-        {% if site.data.right.brief %}
+        {% if site.data.rights.brief %}
         <span data-toggle="tooltip" data-placement="top"
-          title="{{ site.data.right.verbose }}">{{ site.data.right.brief }}</span>
+          title="{{ site.data.rights.verbose }}">{{ site.data.rights.brief }}</span>
         {% endif %}
       </p>
     </div>

diff --git a/_includes/post-sharing.html b/_includes/post-sharing.html
@@ -8,7 +8,7 @@
 -->
 
 <div class="share-wrapper">
-  <span class="share-label ml-1 mr-1">{{ site.data.share.label }}</span>
+  <span class="share-label mr-1">{{ site.data.share.label }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
     {% assign url = page.url | relative_url | prepend: site.url %}

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -16,24 +16,42 @@
       <h1 data-toc-skip>{{ page.title }}</h1>
 
       <div class="post-meta text-muted d-flex flex-column">
-        <!-- Published Date and Categoreis -->
+        <!-- Published date and author -->
         <div>
+          Posted
           <span class="timeago" data-toggle="tooltip" data-placement="bottom"
            title="{{ page.date | date: site.data.date_format.tooltip }}">
             {{ page.date | date: site.data.date_format.post }}
             <i class="unloaded">{{ page.date | date_to_xmlschema }}</i>
           </span>
-          {% if page.categories.size > 0 %}on{% endif %}
-          {% for category in page.categories %}
-            <a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase | url_encode }}/'>{{ category }}</a>
-            {%- unless forloop.last -%}, {%- endunless -%}
-          {% endfor %}
+          by
+          <span class="author">
+          {% if page.author %}
+            {{ page.author }}
+          {% else%}
+            {{ site.author }}
+          {% endif %}
+          </span>
+        </div>
+
+        <!-- lastmod -->
+        {% if page.seo.date_modified > page.date %}
+        <div>
+          Updated
+          <span class="timeago lastmod"
+            data-toggle="tooltip" data-placement="bottom"
+             title="{{ page.seo.date_modified | date: site.data.date_format.tooltip }}">
+            {{ page.seo.date_modified | date: site.data.date_format.post }}
+            <i class="unloaded">{{ page.seo.date_modified | date_to_xmlschema}}</i>
+          </span>
         </div>
+        {% endif %}
 
         <!-- page views -->
         {% if site.google_analytics.pv.enabled %}
         <div>
-          <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span> views
+          <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span>
+          views
         </div>
         {% endif %}
 
@@ -57,22 +75,21 @@ <h1 data-toc-skip>{{ page.title }}</h1>
 
       <div class="post-tail-wrapper text-muted">
 
-        <!-- lastmod -->
-        {% if page.seo.date_modified > page.date %}
-        <div>
-          Updated
-          <span class="timeago lastmod"
-            data-toggle="tooltip" data-placement="top"
-             title="{{ page.seo.date_modified | date: site.data.date_format.tooltip }}">
-            {{ page.seo.date_modified | date: site.data.date_format.post }}
-            <i class="unloaded">{{ page.seo.date_modified | date_to_xmlschema}}</i>
-          </span>
+        <!-- categories -->
+        {% if page.categories.size > 0 %}
+        <div class="post-meta mb-3">
+          <i class="far fa-folder-open fa-fw mr-1"></i>
+          {% for category in page.categories %}
+            <a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase | url_encode }}/'>{{ category }}</a>
+            {%- unless forloop.last -%}, {%- endunless -%}
+          {% endfor %}
         </div>
         {% endif %}
 
-        <!-- Tags -->
+        <!-- tags -->
         {% if page.tags.size > 0 %}
-        <div class="pt-3">
+        <div class="post-tags">
+          <i class="fa fa-tags fa-fw mr-1"></i>
           {% for tag in page.tags %}
           <a href="{{ site.baseurl }}/tags/{{ tag | replace: ' ', '-' | downcase | url_encode }}/"
             class="post-tag no-text-decoration" >
@@ -84,18 +101,11 @@ <h1 data-toc-skip>{{ page.title }}</h1>
 
         <div class="post-tail-bottom
           d-flex justify-content-between align-items-center pt-5 pb-2">
-
-          {% if site.data.right.license %}
+          {% if site.data.rights.license %}
           <div class="license-wrapper">
-            <span class="license-text ml-1 mr-1">
-              {{ site.data.right.license.prompt }}
-              <a href="{{ site.data.right.license.link }}">
-                {{ site.data.right.license.name }}
-                {% for icon in site.data.right.license.icons %}
-                <i class="{{ icon }}"></i>
-                {% endfor %}
-              </a>
-            </span>
+            This post is licensed under
+            <a href="{{ site.data.rights.license.link }}">{{ site.data.rights.license.name }}</a>
+            by the author.
           </div>
           {% endif %}
 

diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
@@ -1,5 +1,6 @@
 ---
-title: "Text and Typography"
+title: Text and Typography
+author: Cotes Chung
 date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]

diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
@@ -1,5 +1,6 @@
 ---
-title: "Writing a New Post"
+title: Writing a New Post
+author: Cotes Chung
 date: 2019-08-08 14:10:00 +0800
 categories: [Blogging, Tutorial]
 tags: [writing]

diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md
@@ -1,5 +1,6 @@
 ---
 title: Getting Started
+author: Cotes Chung
 date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
 tags: [getting started]

diff --git a/_posts/2019-08-11-customize-the-favicon.md b/_posts/2019-08-11-customize-the-favicon.md
@@ -1,5 +1,6 @@
 ---
-title: "Customize the Favicon"
+title: Customize the Favicon
+author: Cotes Chung
 date: 2019-08-11 00:34:00 +0800
 categories: [Blogging, Tutorial]
 tags: [favicon]

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -752,9 +752,6 @@ a {
       @extend %no-bottom-border;
     }
   }
-  .license-wrapper .license-text &:hover {
-    @extend %link-hover;
-  }
 
 } // a
 
@@ -857,13 +854,14 @@ table {
   min-width: 2rem;
   text-align: center;
   background: var(--tag-bg);
-  border-radius: .34rem;
+  border-radius: .3rem;
   padding: 0 .4rem;
   color: #818182;
-  line-height: 1.6rem;
-  &:not(:first-child) {
-    margin-left: .2rem;
+  line-height: 1.3rem;
+  &:not(:last-child) {
+    margin-right: .2rem;
   }
+
   &:hover {
     @extend %tag-hover;
     border-bottom: none;

diff --git a/assets/css/post.scss b/assets/css/post.scss
@@ -8,6 +8,7 @@
   MIT License
 */
 @import "_addon/variables";
+@import "_addon/module";
 
 $prompt-older: "{{ site.data.label.post.button.previous }}";
 $prompt-newer: "{{ site.data.label.post.button.next }}";
@@ -26,6 +27,10 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   border-color: var(--btn-border-color);
 }
 
+.author {
+  font-weight: 600;
+}
+
 .post img {
   margin-top: .5rem;
   margin-bottom: 1.5rem;
@@ -40,11 +45,15 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 }
 
 .post-tail-wrapper {
-  margin-top: 5rem;
+  margin-top: 4rem;
   border-bottom: 1px double var(--main-border-color);
   font-size: 0.85rem;
 }
 
+.post-tags {
+  line-height: 2rem;
+}
+
 .post-navigation {
   padding-top: 3rem;
   padding-bottom: 2rem;
@@ -268,8 +277,11 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 .license-wrapper {
   line-height: 1.2rem;
-  .license-text>a {
+  >a {
     font-weight: 600;
+    &:hover {
+      @extend %link-hover;
+    }
   }
   i {
     font-weight: 400;
@@ -282,10 +294,11 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 @media all and (max-width: 576px) {
   .post-tail-bottom {
-    -ms-flex-wrap: wrap!important;
-    flex-wrap: wrap!important;
+    -ms-flex-wrap: wrap-reverse!important;
+    flex-wrap: wrap-reverse!important;
     >div:first-child {
-      margin-bottom: 1rem;
+      width: 100%;
+      margin-top: 1rem;
     }
   }
 }