diff --git a/pg-py/themes/cards/head.html b/pg-py/themes/cards/head.html
index 8d1f911..5976a31 100644
--- a/pg-py/themes/cards/head.html
+++ b/pg-py/themes/cards/head.html
@@ -104,12 +104,6 @@ button {
cursor: pointer;
}
- time {
- font-family: monospace;
- font-style: normal;
- font-size: 15px;
- }
-
main {
line-height: 1.6;
}
@@ -129,14 +123,6 @@ img {
max-width: 100%;
}
- code {
- font-family: monospace;
- padding: 2px;
- background-color: var(--code-background-color);
- color: var(--code-color);
- border-radius: 3px;
- }
-
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
@@ -149,6 +135,28 @@ footer {
text-align: center;
}
+ .time, .power {
+ font-size: 15px;
+ }
+
+ .card-inside h2 {
+ margin-bottom: 0;
+ }
+
+ .card-link {
+ margin-bottom: 2rem;
+ }
+
+ .continue {
+ font-size: 0.88em;
+ }
+
+ .posted {
+ line-height: 0.01;
+ font-size: 0.82em;
+ color: olive;
+ }
+
.title:hover {
text-decoration: none;
}
@@ -188,7 +196,21 @@ ul.blog-posts li a:visited {
color: var(--visited-color);
}
- code,pre{font-family:Menlo, Monaco, Consolas, "Courier New", monospace;font-size:1em}
+ .pager.blog-pager {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .pager.blog-pager .previous {
+ margin-right: auto;
+ }
+
+ .pager.blog-pager .next {
+ margin-left: auto;
+ }
+
+ code,pre{font-family:"Courier New", monospace;font-size:1em}
code{padding:2px 4px;font-size:1rem;color:#000;background-color:#ffe0e0;border-radius:4px}
pre{display:block;padding:9.5px;margin-top:20px;margin-bottom:3rem;font-size:1rem;line-height:1.42857143;word-break:break-all;word-wrap:break-word;background-color:#f9f9f9;border:1px solid #ccc;border-radius:4px}
pre code{padding:0;font-size:inherit;color:#000;white-space:pre-wrap;background-color:transparent;border-radius:0}
diff --git a/pg-py/themes/cards/main.html b/pg-py/themes/cards/main.html
index 3e44773..48e23e4 100644
--- a/pg-py/themes/cards/main.html
+++ b/pg-py/themes/cards/main.html
@@ -5,13 +5,10 @@
{% for post in posts %}
<div class="card-link">
<div class="card-inside">
- <a href="{post.url}">
- <div class="card-content">
- <h2>{post.title}</h2>
- <p class="excerpt">{post.description}</p>
- <p class="posted">{post.date}</p>
- </div>
- </a>
+ <h2><a href="{post.url}">{post.title}</a></h2>
+ <p class="posted">{date|format:%d %b %Y}</p>
+ <p class="excerpt">{post.description}<br>
+ <span class="continue"><a href="{post.url}">Continue reading →</a></span></p>
</div>
</div>
{% endfor %}
diff --git a/pg-py/themes/cards/single.html b/pg-py/themes/cards/single.html
index 80237a9..8976355 100644
--- a/pg-py/themes/cards/single.html
+++ b/pg-py/themes/cards/single.html
@@ -1,7 +1,7 @@
<main class="single-page">
<article class="post-content">
<h1>{title}</h1>
- <p>Published: {date}</p>
+ <p class="time">Published: {date|format:%d %b %Y}</p>
<hr>
{% for image in image_data %}
<img src="{image.src}" alt="{image.alt}" class="img-title" width="544" height="306" fetchpriority="high">
@@ -10,5 +10,21 @@
<div class="article-image-caption"><span>{caption}</span></div>
{% endfor %}
{content}
+
+ {% for tag in tags %}
+ <a href="/tags/{tag}/">#{tag}</a>
+ {% endfor %}
</article>
+ <hr>
+
+ <nav aria-label="Post navigation">
+ <div class="pager blog-pager">
+ {% for nav in nav_items %}
+ <span class="{nav.type}">
+ <a href="{nav.url}" title="{nav.title}" aria-label="{nav.type} post: {nav.title}">{nav.label}</a>
+ </span>
+ {% endfor %}
+ </div>
+ </nav>
+
</main>