From c0ceb00c30f61cdb7b55a707a76fd7933e31eb8a Mon Sep 17 00:00:00 2001
From: "Mr. Will" <mr.will.com@outlook.com>
Date: Fri, 2 Aug 2024 10:39:48 +0800
Subject: [PATCH] Use `<time />` to display dates

---
 .changeset/little-zoos-care.md | 5 +++++
 layout/_partial/post-list.ejs  | 4 ++--
 layout/post.ejs                | 4 ++--
 source/css/post-list.scss      | 4 +---
 source/css/post.scss           | 1 +
 5 files changed, 11 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/little-zoos-care.md

diff --git a/.changeset/little-zoos-care.md b/.changeset/little-zoos-care.md
new file mode 100644
index 0000000..c8a09bc
--- /dev/null
+++ b/.changeset/little-zoos-care.md
@@ -0,0 +1,5 @@
+---
+'hexo-theme-cupertino': patch
+---
+
+Use `<time />` to display dates to make it more readable for browsers.
diff --git a/layout/_partial/post-list.ejs b/layout/_partial/post-list.ejs
index 41603f8..177d8ca 100644
--- a/layout/_partial/post-list.ejs
+++ b/layout/_partial/post-list.ejs
@@ -24,9 +24,9 @@
         </div>
         <% } %>
         <% if (!post.no_date) { %>
-        <div class="time">
+        <time class="time" datetime="<%- moment(page.date).format() %>">
           <%- moment(post.date).format(theme.date_display_format) %>
-        </div>
+        </time>
         <% } %>
       </div>
     </a>
diff --git a/layout/post.ejs b/layout/post.ejs
index fb61b99..83436b9 100644
--- a/layout/post.ejs
+++ b/layout/post.ejs
@@ -16,9 +16,9 @@
     <% } %>
 
     <% if (!page.no_date) { %>
-    <div class="date" id="date">
+    <time class="date" datetime="<%- moment(page.date).format() %>">
       <%- moment(page.date).format(theme.date_display_format) %>
-    </div>
+    </time>
     <% } %>
 
     <h1 class="title"><%= page.title %></h1>
diff --git a/source/css/post-list.scss b/source/css/post-list.scss
index 10e2cef..9fd6339 100644
--- a/source/css/post-list.scss
+++ b/source/css/post-list.scss
@@ -108,9 +108,7 @@
     line-height: 1.28577;
     font-weight: 600;
     letter-spacing: -0.016em;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
+    display: block;
     margin-top: 12px;
     color: var(--card-time);
   }
diff --git a/source/css/post.scss b/source/css/post.scss
index 6066994..4be4dec 100644
--- a/source/css/post.scss
+++ b/source/css/post.scss
@@ -20,6 +20,7 @@ body {
   }
 
   .date {
+    display: block;
     color: var(--grey);
     font-weight: 600;
   }