add numbers to blog list

chinchang · Mar 4, 2024 · a154104 · a154104
1 parent 51c96c6
commit a154104
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/_includes/posts.njk b/_includes/posts.njk
@@ -1,10 +1,13 @@
 
 
 <div class="container container--small">
-<ol reversed>
+<ol reversed style="list-style:none">
  {% for post in posts %}
  <li>
  <article class="list-item {% if post.data.link %}list-item--external{% endif %}">
+ <span class="list-item__number">{{ loop.revindex }}</span>
+<div>
+
  <h3 class="mb-xs">
  <a href="{% if post.data.link %}{{ post.data.link }}{% else %}{{ post.url | url }}{% endif %}">{{ post.data.title }}</a>
  </h3>
@@ -20,6 +23,7 @@
 
  {% if post.data.website %}<div class="post-website">{{ post.data.website }}</div>{% endif %}
  </div>
+ <div>
  </article>
  </li>
  {% endfor %}

diff --git a/css/style.css b/css/style.css
@@ -241,6 +241,7 @@ blockquote div {
 
 .list-item {
  margin-bottom: 2.5rem;
+ display: flex;
 }
 .list-item__image {
  /* height: 180px; */
@@ -256,9 +257,9 @@ blockquote div {
  display: flex;
 }
 .list-item__number {
- font-size: 4rem;
+ font-size: 3rem;
  line-height: 1;
- margin-right: 1rem;
+ margin-right: 0.5rem;
  opacity: 0.2;
  position: relative;
  right: 1rem;