feat(typography): use consistent style for timestamps in tags, categories and archives pages

Author: talha131

static/css/elegant.css

@@ -1,6 +1,7 @@
 /* Base */
 :root {
   --borderRadius: 4px;
+  --mutedTextColor: dimgray;
 }
 html,
 body {
@@ -145,10 +146,6 @@ table.highlighttable tbody > tr:nth-child(odd) > td {
   float: none;
   line-height: 28px;
 }
-.articles-in-tag li {
-  font: 1.1em/1.6 "Trebuchet MS", Trebuchet, "Lucida Sans Unicode",
-    "Lucida Grande", "Lucida Sans", Arial, Sans-Serif;
-}
 /* Article */
 .article-content,
 div.recent-posts p {
@@ -254,15 +251,10 @@ p#post-share-links {
 a.category-title-inside-accordion {
   text-decoration: none;
 }
-ul.list-articles-category {
+ul.list-articles-under-tag-category {
   list-style: none outside none;
   margin: 0 0 0 5px;
 }
-ul.list-articles-category li time {
-  color: #8f8f8f;
-  display: inline-block;
-  width: 7em;
-}
 a.category-link {
   color: #333;
 }
@@ -296,10 +288,12 @@ div.blog-archives div,
 div.recent-posts-article {
   border-bottom: 1px dotted #aaa;
 }
+ul.list-articles-under-tag-category li {
+  padding: 0.1rem 0.2rem;
+}
 div.blog-archives div,
 div.recent-posts-article {
-  font-size: 1.1em;
-  padding: 0.3em 0.2em;
+  padding: 0.3rem 0.2rem;
   position: relative;
   overflow: auto;
 }
@@ -310,21 +304,16 @@ div.blog-archives div.last-entry-of-year {
   margin-bottom: 1em;
 }
 div.blog-archives time,
-div.recent-posts time {
+div.recent-posts time,
+ul.list-articles-under-tag-category li time {
   float: right;
-  text-align: right;
+  text-align: left;
 }
 div.blog-archives time,
 div.recent-posts time,
+ul.list-articles-under-tag-category li time,
 div.recent-posts-posted {
-  color: #8f8f8f;
-  font: 0.9em "PT Sans", "Helvetica Neue", Arial, Sans-Serif;
-}
-div.recent-posts time {
-  font-size: inherit;
-}
-div.recent-posts-time {
-  display: inline;
+  color: var(--mutedTextColor);
 }
 @media (max-width: 767px) {
   div.blog-archives h2 {
@@ -334,15 +323,12 @@ div.recent-posts-time {
     margin-left: 0;
     padding-left: 0;
   }
-  div.recent-posts time {
+  div.blog-archives time,
+  div.recent-posts time,
+  ul.list-articles-under-tag-category li time {
     float: none;
-  }
-  div.recent-posts-time {
     display: block;
   }
-  ul.list-articles-category li time {
-    width: 100%;
-  }
 }
 /* MailChimp */
 #mc-embed-signup {

static/css/typography.css

@@ -35,7 +35,7 @@ h6,
 .tag-title,
 .list-of-tags,
 a.category-title-inside-accordion,
-ul.list-articles-category li time {
+ul.list-articles-under-tag-category li time {
   font-family: var(--sansFontFamily);
 }
 h1 {
@@ -155,13 +155,23 @@ blockquote {
 a.category-title-inside-accordion {
   font-size: 1.1rem;
 }
-ul.list-articles-category li time {
-  font-size: 0.7rem;
-}
 .author-name {
   font-weight: bold;
   font-variant: small-caps;
 }
 .author-blurb {
   font-style: italic;
 }
+div.blog-archives div,
+div.recent-posts-article,
+ul.list-articles-under-tag-category li {
+  font-family: var(--sansFontFamily);
+  font-size: 0.963rem;
+}
+div.blog-archives time,
+div.recent-posts time,
+ul.list-articles-under-tag-category li time,
+div.recent-posts-posted {
+  font-family: var(--sansFontFamily);
+  font-size: 0.8rem;
+}

templates/categories.html

@@ -51,12 +51,9 @@ <h1><a href="{{ SITEURL }}/{{ CATEGORIES_URL }}">All Categories</a></h1>
                 </div>
                 <div id="{{ category.slug }}-ref" class="accordion-body collapse">
                     <div class="accordion-inner">
-                        <ul class="list-articles-category">
+                        <ul class="list-articles-under-tag-category">
                             {% for article in articles %}
                             <li itemscope>
-                                <time itemprop="dateCreated" datetime="{{ article.date.isoformat() }}">
-                                    {{ article.locale_date }}
-                                </time>
                                     <a href="{{ SITEURL }}/{{ article.url }}">
                                         {{ article.title }}
                                         {% if article.subtitle %}
@@ -65,6 +62,9 @@ <h1><a href="{{ SITEURL }}/{{ CATEGORIES_URL }}">All Categories</a></h1>
                                         </small>
                                         {% endif %}
                                     </a>
+                                <time itemprop="dateCreated" datetime="{{ article.date.isoformat() }}">
+                                    {{ article.locale_date }}
+                                </time>
                             </li>
                             {% endfor %}
                         </ul>

templates/index.html

@@ -109,9 +109,7 @@ <h1 id="recent-posts">Recent Posts <a id="allposts" href="{{ SITEURL }}/{{ ARCHI
                 <div class="recent-posts-posted">
                     posted in
                     <a href="{{ SITEURL }}/{{ CATEGORIES_URL }}#{{ article.category.slug }}-ref">{{ article.category }}</a>
-                    <div class="recent-posts-time">
-                        <time itemprop="dateCreated" datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time>
-                    </div>
+                    <time itemprop="dateCreated" datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time>
                 </div>
                 {% if RECENT_ARTICLE_SUMMARY %}
                     <p>{{ article.summary }}</p>

templates/tags.html

@@ -56,12 +56,9 @@ <h1><a href="{{ SITEURL }}/{{ TAGS_URL }}">All Tags</a></h1>
     <div class="span8 offset2">
         {% for tag, articles in tags|sort %}
         <h2 id="{{ tag.slug }}-ref" class="tag-title">{{ tag }}</h2>
-        <ul class="articles-in-tag list-articles-category">
+        <ul class="list-articles-under-tag-category">
             {% for article in articles|sort(reverse = true, attribute = 'date') %}
             <li itemscope>
-                <time itemprop="dateCreated" datetime="{{ article.date.isoformat() }}">
-                    {{ article.locale_date }}
-                </time>
                 <a href="{{ SITEURL }}/{{ article.url }}">
                     {{ article.title }}
                     {% if article.subtitle %}
@@ -70,6 +67,9 @@ <h2 id="{{ tag.slug }}-ref" class="tag-title">{{ tag }}</h2>
                     </small>
                     {% endif %}
                 </a>
+                <time itemprop="dateCreated" datetime="{{ article.date.isoformat() }}">
+                    {{ article.locale_date }}
+                </time>
             </li>
             {% endfor %}
         </ul>