Update header links color for improved visibility and enhance archive and tags pages with better styling and structure

Author: devnomadic

_includes/header.html

@@ -12,9 +12,9 @@
     </span>
     <br style="clear: both;">
     <div style="margin-top: 0.5em; padding-top: 0.75em;">
-      <a href="/about/" style="display: inline-block; margin-right: 2em; color: #ffa7c4; text-decoration: none; font-size: 1em;">About</a>
-      <a href="/archive/" style="display: inline-block; margin-right: 2em; color: #ffa7c4; text-decoration: none; font-size: 1em;">Archive</a>
-      <a href="/tags/" style="display: inline-block; margin-right: 2em; color: #ffa7c4; text-decoration: none; font-size: 1em;">Tags</a>
+      <a href="/about/" style="display: inline-block; margin-right: 2em; color: #de5684; text-decoration: none; font-size: 1em;">About</a>
+      <a href="/archive/" style="display: inline-block; margin-right: 2em; color: #de5684; text-decoration: none; font-size: 1em;">Archive</a>
+      <a href="/tags/" style="display: inline-block; margin-right: 2em; color: #de5684; text-decoration: none; font-size: 1em;">Tags</a>
     </div>
   </div>
 </div>

archive.md

@@ -6,14 +6,56 @@ permalink: /archive/
 
 # Post Archive
 
-{% for post in site.posts %}
-  {% assign currentdate = post.date | date: "%Y" %}
-  {% if currentdate != date %}
-    {% unless forloop.first %}</ul>{% endunless %}
-    <h2>{{ currentdate }}</h2>
-    <ul>
-    {% assign date = currentdate %}
-  {% endif %}
-    <li><a href="{{ post.url }}">{{ post.title }}</a> - <time>{{ post.date | date: site.dash.date_format }}</time></li>
-  {% if forloop.last %}</ul>{% endif %}
+{% assign posts_by_year = site.posts | group_by_exp: "post", "post.date | date: '%Y'" %}
+{% for year_group in posts_by_year %}
+  <h2>{{ year_group.name }}</h2>
+  <ul class="archive-list">
+    {% for post in year_group.items %}
+      <li class="archive-item">
+        <a href="{{ post.url }}" class="archive-link">{{ post.title }}</a>
+        <time class="archive-date">{{ post.date | date: site.dash.date_format }}</time>
+      </li>
+    {% endfor %}
+  </ul>
 {% endfor %}
+
+<style>
+.archive-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 2rem 0;
+}
+
+.archive-item {
+  margin: 0.75rem 0;
+  padding: 0.75rem;
+  background-color: #f8f9fa;
+  border-radius: 0.25rem;
+  border-left: 3px solid #de5684;
+}
+
+.archive-link {
+  color: #de5684;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 1.1rem;
+}
+
+.archive-link:hover {
+  text-decoration: underline;
+}
+
+.archive-date {
+  color: #5f6368;
+  font-size: 0.9rem;
+  display: block;
+  margin-top: 0.25rem;
+}
+
+h2 {
+  color: #de5684;
+  border-bottom: 2px solid #de5684;
+  padding-bottom: 0.5rem;
+  margin: 2rem 0 1rem 0;
+}
+</style>

tags.md

@@ -12,7 +12,7 @@ permalink: /tags/
   {% assign tagname = tag[0] %}
   {% assign posts = tag[1] %}
   <span class="tag-item">
-    <a href="#{{ tagname | slugify }}" class="tag-link" data-count="{{ posts.size }}">
+    <a href="#{{ tagname | slugify }}" class="tag" data-count="{{ posts.size }}">
       {{ tagname }} ({{ posts.size }})
     </a>
   </span>
@@ -49,6 +49,51 @@ permalink: /tags/
   margin: 5px;
 }
 
+.tag-cloud .tag {
+  display: inline-block;
+  background-color: #f1f3f4;
+  color: #5f6368;
+  padding: 0.2rem 0.5rem;
+  margin: 0.1rem 0.2rem 0.1rem 0;
+  border-radius: 0.25rem;
+  font-size: 0.8rem;
+  text-decoration: none;
+}
+
+.tag-cloud .tag:hover {
+  background-color: #e8eaed;
+  color: #202124;
+}
+
+.tag-posts {
+  list-style: none;
+  padding: 0;
+}
+
+.tag-posts li {
+  margin: 0.5rem 0;
+  padding: 0.5rem;
+  background-color: #f8f9fa;
+  border-radius: 0.25rem;
+}
+
+.tag-posts li a {
+  color: #de5684;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.tag-posts li a:hover {
+  text-decoration: underline;
+}
+
+.post-date {
+  color: #5f6368;
+  font-size: 0.9rem;
+  margin-left: 1rem;
+}
+</style>
+
 .tag-link {
   background: #f0f0f0;
   padding: 4px 8px;