initial theming dev

src/index.html

@@ -1,41 +1,34 @@
 ---
 layout: default
-title: Blog<br>部落格
+title: Blog
 pagination:
-  data: collections.posts
-  size: 10
-  reverse: true
-  alias: posts
+    data: collections.posts
+    size: 10
+    reverse: true
+    alias: posts
 ---
 
-{% for post in pagination.items %}
-{% if post.data.published %}
-<div class="py-4">
-  <p>
-    <span class="text-2xl sm:text-4xl font-bold hover:text-blue-700 leading-tight"><a href="{{ post.url }}">{{ post.data.title }}</a></span>
-    <span class="text-base sm:text-2xl font-normal"> &middot; {{ post.templateContent | readTime }} min read</span>
-  </p>
-  <em>{{ post.date | date: "%Y-%m-%d" }}</em>
-  <p class="mt-4">{{ post.data.post_excerpt }}...</p>
-  
-  <div class="flex justify-between items-center mt-4">
-    <div class="flex-1 pr-4">
-      {% for tag in post.data.tags %}
-        {% if tag != "posts" %}
-          <a href="/tags/{{ tag }}" class="">
+{% for post in pagination.items %} {% if post.data.published %}
+<div class="mb-8 border-b border-gray-200 pb-8 dark:border-gray-700">
+    <a class="no-underline" href="{{ post.url }}"
+        ><h2
+            class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl"
+        >
+            {{ post.data.title }}
+        </h2>
+    </a>
+    <div class="mt-2 text-sm">
+        <em>{{ post.date | date: "%m.%d.%Y" }}</em> • {% for tag in post.data.tags %} {% if tag !=
+        "posts" %}
+        <a href="/tags/{{ tag }}" class="font-normal no-underline">
             <div class="post-tag">{{ tag }}</div>
-          </a>
-        {% endif %}
-      {% endfor %}
+        </a>
+        {% endif %} {% endfor %}
+    </div>
+    <p class="mt-4">{{ post.data.post_excerpt }}...</p>
+    <div class="mt-4 flex items-center justify-between">
+        <a class="flex-none font-normal no-underline" href="{{ post.url }}">Read more &rarr;</a>
     </div>
-
-    <a class="flex-none hover:underline font-semibold text-blue-700" href="{{ post.url }}">Read this post &rarr;</a>
-  </div>
-
 </div>
 
-{% endif %}
-{% endfor %}
-
-
-{% include "paginator.liquid" %}
+{% endif %} {% endfor %} {% include "paginator.liquid" %}