refactored recent post to align with vocabulary markup

creativecommons · Dec 16, 2024 · 098b083 · 098b083
1 parent 757c9ef
commit 098b083
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 27 deletions.
diff --git a/themes/vocabulary_theme/templates/blocks/recent-posts.html b/themes/vocabulary_theme/templates/blocks/recent-posts.html
@@ -1,22 +1,14 @@
 {% from "macros/posts.html" import render_post_summary %}
 
-<section class="recent-posts">
-  <div class="container">
-    <div class="level">
-      <h2 class="is-paddingless level-left">
-        {{ this.title }}
-      </h2>
-      <span class="level-right">
-        <a class="posts-link" href="/blog/entries">See all posts <i class="icon angle-right"></i></a>
-      </span>
-    </div>
-    <div class="columns">
+<article class="posts">
+  <h2>  {{ this.title }} </h2>
+    <ul>
       {% for post in site.query('/blog/entries') %}
         {% set post_loop = loop %}
         {% if post_loop.index <= 3 %}
           {{ render_post_summary(post) }}
         {% endif %}
       {% endfor %}
-    </div>
-  </div>
-</section>
+    </ul>
+
+   <a class="more" href="/blog/entries">See all posts</a>
diff --git a/themes/vocabulary_theme/templates/layout.html b/themes/vocabulary_theme/templates/layout.html
@@ -38,7 +38,7 @@
 <script type="text/javascript" src="{{ '/static/gen/script.js'|url }}"></script>
 <title>{% block title %}Welcome{% endblock %} — Creative Commons Open Source</title>
 
-<body>
+<body class="blog-index">
 
 <a class="skip-to-content" href="#main-content-marker">Skip to content</a>
 

diff --git a/themes/vocabulary_theme/templates/macros/posts.html b/themes/vocabulary_theme/templates/macros/posts.html
@@ -2,18 +2,29 @@
 {% from "macros/authors_gravatar.html" import render_author_gravatar %}
 
 {% macro render_post_summary(post, skip_gravatar=false) %}
-  <div class="column is-one-third is-paddingless padding-horizontal-big padding-top-bigger">
-    <article class="card entry-post horizontal no-border blog-entry">
-      {{ render_author_gravatar(post, skip_gravatar) }}
-      <div class="blog-content">
-        <h4 class="b-header"><a class="blog-title" href="{{ post|url }}">{{ post.title }}</a></h4>
-        {{ render_authors_byline(post) }}
-        <div class="excerpt">
-          {{ post.body | excerpt | string | striptags() | truncate(100) }}
-        </div>
-      </div>
-    </article>
-  </div>
+  <li>
+    <article class="post">
+      <header>
+        <h3 class="title"><a href="{{ post|url }}">{{ post.title }}</a></h3>
+          <span class="byline"> {{ render_authors_byline(post) }} </span>
+            <span class="categories">
+              {% if post.categories %}
+              {% for category in post.categories %}
+                <a href="/blog/categories/{{ category|replace(' ', '-') }}">{{ category|capitalize }}</a>
+              {% if not loop.last %}, {% endif %}
+              {% endfor %}
+              {% else %}
+              <span>No categories</span>
+              {% endif %}
+            </span>
+      </header>
+
+      <figure>
+        {{ render_author_gravatar(post, skip_gravatar) }}
+          <!-- <span class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></span> -->
+      </figure>
+   </article>
+ </li>
 {% endmacro %}
 
 {% macro render_posts(posts) %}