postlist style

_includes/articleslist.njk

@@ -1,7 +1,9 @@
-<ol reversed class="postlist" style="counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }}">
+<ol reversed class="postlist list-reset">
   {% for post in postslist | reverse %}
     <li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
-      <a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
+      <h2>
+        <a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
+      </h2>
       <time class="postlist-date icon--date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
       <ul class="post-tags list-reset">
       {% for tag in post.data.tags | filterTagList %}

src/css/app.css

@@ -4,6 +4,7 @@
 @import 'utilities/helpers.css';
 @import 'layout/header.css';
 @import 'layout/article.css';
+@import 'components/postlist.css';
 @import 'components/meta.css';
 @import 'components/icons.css';
 @import 'components/syntax.css';

src/css/base/global.css

@@ -34,27 +34,27 @@ ol {
 }
 
 h1 {
-  font-size: clamp(2.4rem, 4vw, 3.2rem);
+  font-size: clamp(2.5rem, 4vw, 3.5rem);
 }
 
 h2 {
-  font-size: clamp(2.2rem, 4vw, 3rem);
+  font-size: clamp(2.25rem, 4vw, 3rem);
 }
 
 h3 {
-  font-size: clamp(1.9rem, 4vw, 2.7rem);
+  font-size: clamp(2rem, 4vw, 2.5rem);
 }
 
 h4 {
-  font-size: clamp(1.6rem, 4vw, 2.4rem);
+  font-size: clamp(1.75rem, 4vw, 2.0rem);
 }
 
 h5 {
-  font-size: clamp(1.5rem, 4vw, 2.2rem);
+  font-size: var(--font-size-4);
 }
 
 h6 {
-  font-size: clamp(1.4rem, 4vw, 2rem);
+  font-size: var(--font-size-3);
 }
 
 a {

src/css/components/postlist.css

@@ -0,0 +1,5 @@
+.postlist-item {
+  border-bottom: 1px solid var(--gray-4);
+  padding-bottom: var(--size-6);
+  margin-bottom: var(--size-6);
+}