WIP

assets/styles/blog.css

@@ -1,7 +1,7 @@
 :root {
     --post-item-highlight-color: #efefef;
 
-    --blog-list-grid-template-columns: minmax(min-content, 10vh) minmax(min-content, 3vh) auto max-content max-content;
+    --blog-list-grid-template-columns: minmax(min-content, 10vh) auto;
 }
 @media (prefers-color-scheme: dark) {
     :root {
@@ -27,23 +27,22 @@
 
 .blog.list > ul {
     list-style: none;
+    margin-inline: 0;
 }
 .blog.list > ul > li {
     align-items: baseline;
     border-radius: 6px;
     display: grid;
-    gap: 1rem;
+    gap: 2rem;
     grid-template-columns: var(--blog-list-grid-template-columns);
     margin-block-end: 0.25rem;
     transition: background-color 0.25s;
 }
-.blog.list > ul > li:hover {
+.blog.list > ul > li:hover { background-color: var(--post-item-highlight-color); }
-    background-color: var(--post-item-highlight-color);
+.blog.list > ul > li > .title > a { color: inherit; }
-}
+.blog.list > ul > li > .title > a:hover { text-decoration: none; }
-.blog.list > ul > li > a { color: inherit; }
-.blog.list > ul > li > a:hover { text-decoration: none; }
 .blog.list > ul > li > time:nth-child(2) { text-align: end; }
-.blog.list > ul > li > .draft { align-self: center; }
+.blog.list > ul > li > :first-child { text-align: end; }
 
 @supports (grid-template-columns: subgrid) {
     .blog.list {
@@ -73,7 +72,3 @@
         margin-block-start: 0;
     }
 }
-
-.blog.list > ul > li > :first-child {
-    text-align: end;
-}

assets/styles/development.css

@@ -16,14 +16,8 @@ details:has(.photo-params.debug) {
     letter-spacing: 3px;
     text-transform: uppercase;
 }
-
+.draft:before { content: "["; }
-.draft:before {
+.draft:after { content: "]"; }
-    content: "[";
-}
-
-.draft:after {
-    content: "]";
-}
 
 #debug-page-info {
     background-color: var(--background-color);

layouts/blog/li_grid_with_date.html

@@ -1,11 +1,7 @@
 <li>
-  <time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "January" }}</time>
+  <time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "January 2" }}</time>
-  <time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "2" }}</time>
+  <div class="title">
-  <a href="{{ .Permalink }}">{{ .Title }}</a>
+    <a href="{{ .Permalink }}">{{ .Title }}</a>
-  <div class="category">
+    {{ partial "development/draft_tag.html" . }}
-    {{ with index (.GetTerms "categories") 0 }}
-    <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
-    {{ end }}
   </div>
-  {{ partial "development/draft_tag.html" . }}
 </li>