Post-Card new design, improved styling for codeblocks & search

10 files changed, 93 insertions, 16 deletions

diff --git a/README.md b/README.md
index b6c3f03..63e26b0 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@ The theme supports the value `excludeFromLists` in markdown frontmatter. This is
 - will not include "Previous/Next post" navigation links
 - will not be included in the site's RSS feed.
 
-Argo comes with a pre-defined shortcode: including `{{< newtab href="https://some-site.com" >}}some text{{< /newtab >}}` in your markdown will render a link that opens a new tab.
+Argo comes with some pre-defined shortcodes. Documentation on how to use them with an example is included in their respective files.  
 
 The theme works with fallbacks and defaults a lot, e.g. if you do not set a logo, your website's title will be used instead.
 
diff --git a/assets/css/main.css b/assets/css/main.css
index 4aadd74..a17c9b3 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -3,6 +3,7 @@
     --bg-main: #fffff0;
     --bg-special: #e9d79f;
     --border-radius-max: 250px;
+    --border-radius-default: 12px;
     --border-radius-minimal: 5px;
     --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
     --font-size-default: 1rem;
@@ -12,6 +13,7 @@
     --gap-medium: 1.5rem;
     --gap-large: 2rem;
     --gap-small: 0.5rem;
+    --glow: 0 0 0 3px rgba(233, 215, 159, 0.24);
     --line-height-default: 1.5;
     --line-height-heading: 1.2;
     --link-color: #996100;
@@ -19,6 +21,7 @@
     --margin-padding-Y-default: 20px 0;
     --margin-padding-Y-big: 40px 0;
     --margin-padding-Y-small: 10px 0;
+    --shadow-default: 0 2px 6px rgba(30, 30, 30, 0.15);
     --text-color: #1e1e1e;
 }
 
@@ -48,8 +51,10 @@ html {
     &[data-theme="dark"] {
         --bg-main: #0a234a;
         --bg-special: #1e4a73;
+	--glow: rgba(79, 195, 247, 0.24);
         --link-color: #4fc3f7;
         --link-hover: #039be5;
+        --shadow-default: 0 2px 6px rgba(224, 224, 224, 0.15);
         --text-color: #e0e0e0;
 
         & .theme-toggle .icon-moon {
@@ -80,7 +85,7 @@ main {
 
     /* Avoid affecting icon imgs in header & footer */
     & img {
-        border-radius: var(--border-radius-minimal);
+        border-radius: var(--border-radius-default);
         max-width: 90%;
 
         @media (max-width: 768px) {
@@ -108,7 +113,7 @@ blockquote {
     border-left: 4px solid var(--bg-special);
     font-style: italic;
     margin: var(--gap-large);
-    padding-left: 0.8rem;
+    padding-left: var(--gap-default);
 
     @media (max-width: 1024px) {
         margin: var(--gap-large) 0;
@@ -181,6 +186,14 @@ time {
 }
 
 /* SPECIAL ELEMENTS */
+/* Code line */
+p > code {
+    background-color: var(--bg-special);
+    border-radius: var(--border-radius-minimal);
+    font-size: 0.9rem;
+    padding: 0.2rem 0.4rem;
+}
+
 /* Code block */
 .highlight {
     margin: 1rem auto;
@@ -251,7 +264,7 @@ time {
 /* SITE NAVMENU */
 .header__navigation {
     background-color: var(--bg-special);
-    border-radius: var(--border-radius-minimal);
+    border-radius: var(--border-radius-default);
     padding: var(--margin-padding-Y-small);
 }
 
@@ -307,17 +320,35 @@ time {
 
 /* POST CARD */
 .post-card {
+    border: 3px solid var(--bg-special);
+    border-radius: var(--border-radius-default);
     margin: 0 auto 1.5rem;
+    padding: 0 var(--gap-default);
     width: 90%;
 
     & .post-card__title {
         font-size: var(--font-size-default);
+        margin-top: var(--gap-default);
+    }
+
+    & .post-card__meta {
+        display: flex;
+        align-items: center;
+        gap: var(--gap-small);
     }
 
     & .post-card__meta,
     .post-card__summary {
         font-size: var(--font-size-small);
     }
+
+    & .post-card__meta-info {
+        margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+        padding: 0 var(--gap-small);
+    }
 }
 
 .post-card__header {
@@ -350,6 +381,14 @@ time {
     padding: 0.1rem 0.4rem;
 }
 
+.post-card__section-badge {
+    background-color: var(--link-color);
+    border-radius: var(--border-radius-max);
+    color: var(--bg-main);
+    font-size: var(--font-size-small);
+    padding: 0.1rem 0.4rem;
+}
+
 /* PAGES Content */
 .page-not-found {
     text-align: center;
@@ -376,7 +415,7 @@ time {
 
 .post__content ol > li,
 .post__content ul > li {
-    margin-bottom: var(--gap-default);
+    margin-bottom: var(--gap-small);
 }
 
 .post__header {
@@ -404,7 +443,7 @@ time {
 .post__scroll-top {
     background-color: var(--bg-special);
     border-radius: var(--border-radius-max);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-default);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
@@ -422,6 +461,15 @@ time {
         padding-bottom: 0.2rem;
     }
 
+    /* Arrow up  */
+    & svg > path {
+        stroke: var(--text-color);
+
+        &:hover {
+            stroke: var(--bg-main);
+        }
+    }
+
     &:hover {
         background-color: var(--link-hover);
     }
@@ -471,9 +519,17 @@ time {
     font-size: var(--font-size-default);
     border: 1px solid var(--bg-special);
     border-radius: var(--border-radius-minimal);
+    margin-right: var(--gap-small);
     padding: 0.2rem;
+    height: var(--font-size-h1);
     width: 50%;
 
+    &:focus {
+        border-color: var(--link-color);
+        box-shadow: var(--glow);
+        outline: none;
+    }
+
     @media (max-width: 768px) {
         width: 90%;
     }
@@ -483,10 +539,11 @@ time {
     background-color: var(--bg-special);
     border: none;
     border-radius: var(--border-radius-max);
+    box-shadow: var(--shadow-default);
     color: var(--text-color);
     font-size: var(--font-size-default);
     font-weight: bold;
-    padding: 0.2rem 0.5rem 0.3rem 0.5rem;
+    padding: 0.1rem 0.5rem 0.3rem 0.5rem;
 
     &:hover {
         background-color: var(--link-hover);
diff --git a/assets/js/main.js b/assets/js/main.js
index 6eba32b..d849b4e 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -75,6 +75,9 @@
                 link.href = post.url;
                 link.innerHTML = post.title;
 
+		const section = li.querySelector(".post-card__section-badge");
+		if (section) section.textContent = post.section;
+
                 const date = li.querySelector(".post-card__publish-date");
                 date.textContent = new Date(post.date).toLocaleDateString();
                 date.setAttribute("datetime", post.date);
diff --git a/layouts/_default/all-posts.html b/layouts/_default/all-posts.html
index d2ce8ee..dcfe74e 100644
--- a/layouts/_default/all-posts.html
+++ b/layouts/_default/all-posts.html
@@ -22,7 +22,7 @@
             <ul class="all-posts__list" role="list">
                 {{- range $allPosts.ByDate.Reverse }}
                     <li class="all-posts__list-item">
-                        {{ partial "list/post-card.html" . }}
+                        {{ partial "list/post-card.html" (dict "post" . "show_category" true) }}
                     </li>
                 {{- end }}
             </ul>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index fb53b40..f952e56 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -23,7 +23,7 @@
             <ul class="list-page__posts-list">
                 {{- range . }}
                     <li class="list-page__post">
-                        {{- partial "list/post-card.html" . }}
+                        {{- partial "list/post-card.html" (dict "post" .) }}
                     </li>
                 {{- end }}
             </ul>
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
index 90a6357..b501c8b 100644
--- a/layouts/_default/search.html
+++ b/layouts/_default/search.html
@@ -55,12 +55,13 @@
             {{- $mockPost := dict 
                 "Title" "TEMPLATE_TITLE"
                 "RelPermalink" "TEMPLATE_URL"
+                "Section" "TEMPLATE_SECTION" 
                 "Date" now
                 "Summary" "TEMPLATE_SUMMARY"
                 "Params" (dict "tags" (slice "TEMPLATE_TAG"))
             -}}
             <li class="search-results__list-item">
-                {{- partial "list/post-card.html" $mockPost }}
+                {{- partial "list/post-card.html" (dict "post" $mockPost "show_category" true) }}
             </li>
         </template>
 
diff --git a/layouts/index.json b/layouts/index.json
index 29d7e14..00a7048 100644
--- a/layouts/index.json
+++ b/layouts/index.json
@@ -5,6 +5,7 @@
         "title" .Title
         "summary" (.Summary | plainify | htmlUnescape)
         "url" .RelPermalink
+        "section" (lang.translate (.Section | singularize) | default (.Section | singularize | title))
         "date" (.Date.Format "2006-01-02T15:04:05Z07:00")
         "tags" .Params.tags
     -}}
diff --git a/layouts/partials/list/post-card.html b/layouts/partials/list/post-card.html
index 955e868..b35c724 100644
--- a/layouts/partials/list/post-card.html
+++ b/layouts/partials/list/post-card.html
@@ -1,4 +1,14 @@
-{{- $post := . }}
+{{- /*
+Card with a summary of and link to a post. Accepts a dict with the following optional parameters:
+
+@context {Page} post: The post to display (default: .).
+@context {bool} show_category: Whether to display a badge with the name of the category/section the post was published under (default: true).
+
+@example: {{ partial "list/post-card.html" (dict "post" . "show_category" true) }}
+*/ -}}
+
+{{- $post := .post }}
+{{- $showCategory := .show_category | default false }}
 <article class="post-card">
     <header class="post-card__header">
         <h3 class="post-card__title">
@@ -13,14 +23,20 @@
             <!-- Uncomment for post meta info 
             <p class="post-card__meta-info">
                 <span class="post-card__reading-time">
-                    {{ lang.Translate "reading_time" $post.ReadingTime | default (printf "Estimated reading time: %s min" $post.ReadingTime) }}
+                    • {{ lang.Translate "reading_time" $post.ReadingTime | default (printf "Estimated reading time: %s min" $post.ReadingTime) }}
                 </span>
                 |
                 <span class="post-card__word-count">
-                    {{ lang.Translate "word_count" $post.WordCount | default (printf "%s words" $post.WordCount) }}
+                    {{ lang.Translate "word_count" $post.WordCount | default (printf "%s words" $post.WordCount) }} •
                 </span>
             </p>
             -->
+            {{- if $showCategory }}
+                {{- $section := $post.Section }}
+                <span class="post-card__section-badge">
+                    {{ lang.Translate ($section | singularize) | default ($section | singularize | title) }}
+                </span>
+            {{- end }}
         </div>
     </header>
 
@@ -47,6 +63,5 @@
                 {{- end }}
             </ul>
         </footer>
-        <hr />
     {{- end }}
 </article>
diff --git a/layouts/partials/list/recent-posts.html b/layouts/partials/list/recent-posts.html
index 5426f70..f42af13 100644
--- a/layouts/partials/list/recent-posts.html
+++ b/layouts/partials/list/recent-posts.html
@@ -24,7 +24,7 @@ List of specified number of the most recent and published posts. Accepts a dict
             <ul class="recent-posts__list" role="list">
                 {{- range $recentPosts }}
                     <li class="recent-posts__list-item">
-                        {{- partial "list/post-card.html" . }}
+                        {{- partial "list/post-card.html" (dict "post" . "show_category" true) }}
                     </li>
                 {{- end }}
             </ul>
diff --git a/layouts/tags/term.html b/layouts/tags/term.html
index cb7d1b0..8a259c2 100644
--- a/layouts/tags/term.html
+++ b/layouts/tags/term.html
@@ -20,7 +20,7 @@
             <ul class="tag-page__posts-list">
                 {{- range . }}
                     <li class="tag-page__post">
-                        {{- partial "list/post-card.html" . }}
+                        {{- partial "list/post-card.html" (dict "post" . "show_category" true) }}
                     </li>
                 {{- end }}
             </ul>