Styled the categories on the site

layouts/simplecss/categories_list.html

@@ -1,9 +0,0 @@
-<h2>Categories</h2>
-<ul>
-{{ range .Categories }}
-  <li>
-    <a href="{{ url_abs .Path }}">{{ .Name }}</a> ({{ .PostCount }})
-    {{ if .DescriptionBrief }}<br><small>{{ .DescriptionBrief }}</small>{{ end }}
-  </li>
-{{ end }}
-</ul>

layouts/simplecss/categories_single.html

@@ -1,16 +0,0 @@
-<h2>{{ .Category.Name }}</h2>
-{{ if .DescriptionHTML }}
-  <div>{{ .DescriptionHTML }}</div>
-{{ end }}
-{{ range .Posts }}
-  {{ if .Post.Title }}<h3>{{ .Post.Title }}</h3>{{ end }}
-  {{ .HTML }}
-  <a href="{{ url_abs .Path }}">{{ format_date .Post.PublishedAt }}</a>
-  {{ if .Categories }}
-    <p>
-    {{ range .Categories }}
-      <a href="{{ url_abs (printf "/categories/%s" .Slug) }}">{{ .Name }}</a>
-    {{ end }}
-    </p>
-  {{ end }}
-{{ end }}

layouts/simplecss/fs.go

@@ -2,5 +2,6 @@ package simplecss
 
 import "embed"
 
-//go:embed *.html
+//go:embed templates/*.html
+//go:embed static/*
 var FS embed.FS

layouts/simplecss/posts_list.html

@@ -1,12 +0,0 @@
-{{ range .Posts }}
-  {{ if .Post.Title }}<h3>{{ .Post.Title }}</h3>{{ end }}
-  {{ .HTML }}
-  <a href="{{ url_abs .Path }}">{{ format_date .Post.PublishedAt }}</a>
-  {{ if .Categories }}
-    <p>
-    {{ range .Categories }}
-      <a href="{{ url_abs (printf "/categories/%s" .Slug) }}">{{ .Name }}</a>
-    {{ end }}
-    </p>
-  {{ end }}
-{{ end }}

layouts/simplecss/posts_single.html

@@ -1,10 +0,0 @@
-{{ if .Post.Title }}<h3>{{ .Post.Title }}</h3>{{ end }}
-{{ .HTML }}
-<a href="{{ url_abs .Path }}">{{ format_date .Post.PublishedAt }}</a>
-{{ if .Categories }}
-  <p>
-  {{ range .Categories }}
-    <a href="{{ url_abs (printf "/categories/%s" .Slug) }}">{{ .Name }}</a>
-  {{ end }}
-  </p>
-{{ end }}

layouts/simplecss/static/style.css

@@ -0,0 +1,55 @@
+.h-entry {
+    margin-block-start: 1.5rem;
+    margin-block-end: 2.5rem;
+}
+
+.post-meta {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    font-size: 0.95rem;
+}
+
+.post-meta a {
+    color: var(--text-light);
+    text-decoration: none;
+}
+
+.post-meta a:hover {
+    text-decoration: underline;
+}
+
+.post-categories {
+    display: inline-flex;
+    gap: 0.5rem;
+}
+
+.post-categories a:before {
+    content: "#";
+}
+
+/* Category list */
+
+ul.category-list {
+    list-style: none;
+    padding-inline-start: 0;
+}
+
+ul.category-list li {
+    display: flex;
+    flex-direction: row;
+
+    justify-content: start;
+    gap: 4rem;
+}
+
+ul.category-list span.category-list-name {
+    min-width: 15vw;
+}
+
+/* Category single */
+
+.category-description {
+    margin-block-start: 1.5rem;
+    margin-block-end: 2.5rem;
+}

layouts/simplecss/templates/_post_meta.html

@@ -0,0 +1,10 @@
+<div class="post-meta">
+  <a href="{{ url_abs .Path }}">{{ format_date .Post.PublishedAt }}</a>
+  {{ if .Categories }}
+  <div class="post-categories">
+    {{ range .Categories }}
+    <a href="{{ url_abs (printf "/categories/%s" .Slug) }}">{{ .Name }}</a>
+    {{ end }}
+  </div>
+  {{ end }}
+</div>

layouts/simplecss/templates/categories_list.html

@@ -0,0 +1,9 @@
+<h2>Categories</h2>
+<ul class="category-list">
+{{ range .Categories }}
+  <li>
+    <span class="category-list-name"><a href="{{ url_abs .Path }}">{{ .Name }}</a> ({{ .PostCount }})</span>
+    {{ if .DescriptionBrief }}<small>{{ .DescriptionBrief }}</small>{{ end }}
+  </li>
+{{ end }}
+</ul>

layouts/simplecss/templates/categories_single.html

@@ -0,0 +1,11 @@
+<h2>{{ .Category.Name }}</h2>
+{{ if .DescriptionHTML }}
+  <div class="notice category-description">{{ .DescriptionHTML }}</div>
+{{ end }}
+{{ range .Posts }}
+  <div class="h-entry">
+    {{ if .Post.Title }}<h3>{{ .Post.Title }}</h3>{{ end }}
+    {{ .HTML }}
+    {{ template "_post_meta.html" . }}
+  </div>
+{{ end }}

layouts/simplecss/templates/layout_main.html

@@ -7,6 +7,7 @@
   <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="{{ url_abs "/feed.xml" }}"/>
   <link rel="alternate" type="application/json" title="JSON feed" href="{{ url_abs "/feed.json" }}"/>
   <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
+  <link rel="stylesheet" href="{{ url_abs "/static/style.css" }}">
 </head>
 <body>
 <header>

layouts/simplecss/templates/posts_list.html

@@ -0,0 +1,8 @@
+{{ range .Posts }}
+  <div class="h-entry">
+    {{ if .Post.Title }}<h3>{{ .Post.Title }}</h3>{{ end }}
+    {{ .HTML }}
+
+    {{ template "_post_meta.html" . }}
+  </div>
+{{ end }}

layouts/simplecss/templates/posts_single.html

@@ -0,0 +1,5 @@
+<div class="h-entry">
+  {{ if .Post.Title }}<h3>{{ .Post.Title }}</h3>{{ end }}
+  {{ .HTML }}
+  {{ template "_post_meta.html" . }}
+</div>