better article listing

aviskase · Jan 12, 2024 · fb0f579 · fb0f579
1 parent 38e8ea6
commit fb0f579
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 25 deletions.
diff --git a/layouts/_default/archive.html b/layouts/_default/archive.html
@@ -1,6 +1,6 @@
 {{ define "content" }}
 {{ partial "title" . }}
-<section class="md:mx-auto md:max-w-screen-md ">
+<section class="md:mx-auto md:max-w-prose ">
     {{ partial "article-list" . }}
 </section>
 {{ end }}

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -4,7 +4,7 @@
     <body class="selection:bg-blue-500 selection:text-white bg-white">
         <div class="min-h-screen flex flex-col">
             {{- partial "header.html" . -}}
-            <main class="flex-1 w-full px-6 pb-12 md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pb-28">
+            <main class="flex-1 w-full px-6 md:max-w-3xl md:mx-auto lg:max-w-4xl">
             {{ block "content" . }}{{ end }}
             </main>
             {{- partial "footer.html" . -}}

diff --git a/layouts/index.html b/layouts/index.html
@@ -1,6 +1,6 @@
 {{ define "content" }}
-<section class="mt-12 md:mx-auto md:max-w-screen-md ">
+<section class="mt-12 md:mx-auto md:max-w-prose ">
     {{ partial "article-list" . }}
-    <div class="flex"><a class="p-0.5 rounded-md bg-[linear-gradient(120deg,theme(colors.blue.500),theme(colors.blue.400),theme(colors.yellow.200),theme(colors.blue.400),theme(colors.blue.500))] bg-left hover:bg-right bg-[length:200%] transition-all duration-500 text-blue-800 hover:text-blue-500" href="{{ ref . "pages/archive" }}"><span class="bg-white rounded flex w-full h-full items-center justify-center py-2 px-8 ">see more</span></a></div>
+    <div class="flex mt-8 md:mt-10"><a class="p-0.5 rounded-md bg-[linear-gradient(120deg,theme(colors.blue.500),theme(colors.blue.400),theme(colors.amber.300),theme(colors.blue.400),theme(colors.blue.500))] bg-left hover:bg-right bg-[length:200%] transition-all duration-500 text-slate-700 hover:text-blue-500" href="{{ ref . "pages/archive" }}"><span class="bg-white rounded flex w-full h-full items-center justify-center py-2 px-8 ">see more</span></a></div>
 </section>
 {{ end }}
diff --git a/layouts/partials/article-list.html b/layouts/partials/article-list.html
@@ -1,23 +1,23 @@
-<ul>
-    {{- $pages := (where site.RegularPages "Type" "eq" "articles").GroupByDate "2006-01" -}}
-    {{- if .IsHome -}}
-    {{- $pages = first 4 $pages -}}
-    {{- end -}}
+{{- $pages := (where site.RegularPages "Type" "eq" "articles").GroupByDate "2006-01" -}}
+{{- if .IsHome -}}
+{{- $pages = first 4 $pages -}}
+{{- end -}}
+<div class="flex flex-col gap-y-10">
     {{- range $pages -}}
     {{- $firstArticle := index .Pages 0 -}}
-    <li>
-        <div class="lowercase mb-3 text-slate-500 text-xl">/&nbsp;{{ $firstArticle.Date.Format "January 2006"
-            }}&nbsp;/</div>
-    </li>
-    <ul class="mb-12">
-        {{- range .Pages -}}
-        <li>
-            <a class="flex hover:text-blue-500 mb-3" href="{{ .Permalink }}">
-                <div class="w-8 text-blue-500">{{ .Date.Day }}</div>
-                <div class="">{{ partial "func/MakeTitle" (dict "title" .Title ) }}</div>
+    <div>
+        <div class="lowercase text-slate-500 text-lg md:text-xl mb-2">
+            /&nbsp;{{ $firstArticle.Date.Format "January 2006"}}&nbsp;/
+        </div>
+
+        <div class="flex flex-col gap-y-2">
+            {{- range .Pages -}}
+            <a class="prose prose-slate md:prose-lg flex gap-x-2 hover:text-blue-500" href="{{ .Permalink }}">
+                <span class="flex-none text-blue-500 w-6 text-end">{{ .Date.Day }}</span>
+                <span class="flex-1">{{ partial "func/MakeTitle" (dict "title" .Title ) }}</span>
             </a>
-        </li>
-        {{- end -}}
-    </ul>
+            {{- end -}}
+        </div>
+    </div>
     {{- end -}}
-</ul>
+</div>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,3 +1,3 @@
-<footer class="justify-center flex w-full pt-4 pb-3 bg-amber-300 text-sm md:text-base">
+<footer class="justify-center flex w-full mt-8 md:mt-10 pt-4 pb-3 bg-amber-300 text-sm md:text-base">
     <a class="border-b-2 border-transparent hover:border-blue-500" href="mailto:{{ .Site.Params.social.email }}">{{ .Site.Params.firstname }} {{ .Site.Params.lastname }}</a><span>&nbsp;&middot;&nbsp;{{ now.Format "2006" }}&nbsp;&middot;&nbsp;</span><a  class="border-b-2 border-transparent hover:border-blue-500" href="{{ ref . "pages/i-dont-track-you" }}">No tracking</a>
 </footer>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -127,7 +127,6 @@ module.exports = {
     },
     extend: {
       // TODO: use variables for colors - theme
-      // TODO: better styling for listing
       // TODO: header
       typography: (theme) => ({
         DEFAULT: {