Use <time /> to display dates

.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.

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>

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>

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);
   }

source/css/post.scss

@@ -20,6 +20,7 @@ body {
   }
 
   .date {
+    display: block;
     color: var(--grey);
     font-weight: 600;
   }